@dhis2-ui/table 10.16.2 → 10.16.3-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (101) hide show
  1. package/package.json +5 -4
  2. package/src/data-table/__tests__/data-table-cell.test.js +168 -0
  3. package/src/data-table/__tests__/data-table-column-header/filter-handle.test.js +43 -0
  4. package/src/data-table/__tests__/data-table-column-header/sorter.test.js +41 -0
  5. package/src/data-table/__tests__/data-table-column-header.test.js +227 -0
  6. package/src/data-table/__tests__/data-table-row/expand-handle-cell.js +32 -0
  7. package/src/data-table/__tests__/data-table-row/expanded-row.test.js +57 -0
  8. package/src/data-table/__tests__/data-table-row.test.js +162 -0
  9. package/src/data-table/__tests__/data-table.test.js +85 -0
  10. package/src/data-table/data-table-body.js +3 -0
  11. package/src/data-table/data-table-cell.js +111 -0
  12. package/src/data-table/data-table-column-header/data-table-column-header.js +130 -0
  13. package/src/data-table/data-table-column-header/data-table-column-header.styles.js +30 -0
  14. package/src/data-table/data-table-column-header/filter-handle.js +30 -0
  15. package/src/data-table/data-table-column-header/sorter.js +67 -0
  16. package/src/data-table/data-table-foot.js +3 -0
  17. package/src/data-table/data-table-head.js +3 -0
  18. package/src/data-table/data-table-row/data-table-row.js +103 -0
  19. package/src/data-table/data-table-row/data-table-row.styles.js +20 -0
  20. package/src/data-table/data-table-row/drag-handle-cell.js +9 -0
  21. package/src/data-table/data-table-row/expand-handle-cell.js +28 -0
  22. package/src/data-table/data-table-row/expanded-row.js +51 -0
  23. package/src/data-table/data-table-toolbar.js +3 -0
  24. package/src/data-table/data-table.e2e.stories.js +192 -0
  25. package/src/data-table/data-table.js +75 -0
  26. package/src/data-table/data-table.prod.stories.js +1342 -0
  27. package/src/data-table/features/can_scroll/index.js +48 -0
  28. package/src/data-table/features/can_scroll.feature +31 -0
  29. package/src/data-table/index.js +8 -0
  30. package/src/data-table/table-elements/__tests__/table-body.test.js +40 -0
  31. package/src/data-table/table-elements/__tests__/table-data-cell.test.js +123 -0
  32. package/src/data-table/table-elements/__tests__/table-foot.test.js +40 -0
  33. package/src/data-table/table-elements/__tests__/table-head.test.js +40 -0
  34. package/src/data-table/table-elements/__tests__/table-header-cell-action.test.js +46 -0
  35. package/src/data-table/table-elements/__tests__/table-header-cell.test.js +130 -0
  36. package/src/data-table/table-elements/__tests__/table-row.test.js +52 -0
  37. package/src/data-table/table-elements/__tests__/table-scroll-box.test.js +40 -0
  38. package/src/data-table/table-elements/__tests__/table-toolbar.test.js +44 -0
  39. package/src/data-table/table-elements/__tests__/table.test.js +53 -0
  40. package/src/data-table/table-elements/features/can_scroll/index.js +42 -0
  41. package/src/data-table/table-elements/features/can_scroll.feature +31 -0
  42. package/src/data-table/table-elements/index.js +10 -0
  43. package/src/data-table/table-elements/table-body.js +75 -0
  44. package/src/data-table/table-elements/table-data-cell/table-data-cell.js +126 -0
  45. package/src/data-table/table-elements/table-data-cell/table-data-cell.styles.js +42 -0
  46. package/src/data-table/table-elements/table-foot.js +35 -0
  47. package/src/data-table/table-elements/table-head.js +26 -0
  48. package/src/data-table/table-elements/table-header-cell/table-header-cell.js +121 -0
  49. package/src/data-table/table-elements/table-header-cell/table-header-cell.styles.js +71 -0
  50. package/src/data-table/table-elements/table-header-cell-action.js +62 -0
  51. package/src/data-table/table-elements/table-row.js +52 -0
  52. package/src/data-table/table-elements/table-scroll-box.js +41 -0
  53. package/src/data-table/table-elements/table-toolbar.js +50 -0
  54. package/src/data-table/table-elements/table.e2e.stories.js +190 -0
  55. package/src/data-table/table-elements/table.js +70 -0
  56. package/src/data-table/table-elements/table.stories.internal.js +1144 -0
  57. package/src/index.js +32 -0
  58. package/src/locales/ar/translations.json +4 -0
  59. package/src/locales/cs/translations.json +4 -0
  60. package/src/locales/en/translations.json +4 -0
  61. package/src/locales/es/translations.json +4 -0
  62. package/src/locales/es_419/translations.json +4 -0
  63. package/src/locales/fr/translations.json +4 -0
  64. package/src/locales/index.js +44 -0
  65. package/src/locales/km/translations.json +4 -0
  66. package/src/locales/lo/translations.json +4 -0
  67. package/src/locales/nb/translations.json +4 -0
  68. package/src/locales/nl/translations.json +4 -0
  69. package/src/locales/pt/translations.json +4 -0
  70. package/src/locales/ru/translations.json +4 -0
  71. package/src/locales/uk/translations.json +4 -0
  72. package/src/locales/uz_UZ_Cyrl/translations.json +4 -0
  73. package/src/locales/zh/translations.json +4 -0
  74. package/src/stacked-table/add-col-num-to-children.js +16 -0
  75. package/src/stacked-table/content-with-title.js +40 -0
  76. package/src/stacked-table/extract-header-labels.js +99 -0
  77. package/src/stacked-table/index.js +8 -0
  78. package/src/stacked-table/stacked-table-body.js +23 -0
  79. package/src/stacked-table/stacked-table-cell-head.js +39 -0
  80. package/src/stacked-table/stacked-table-cell.js +60 -0
  81. package/src/stacked-table/stacked-table-foot.js +24 -0
  82. package/src/stacked-table/stacked-table-head.js +23 -0
  83. package/src/stacked-table/stacked-table-row-head.js +19 -0
  84. package/src/stacked-table/stacked-table-row.js +50 -0
  85. package/src/stacked-table/stacked-table.js +33 -0
  86. package/src/stacked-table/stacked-table.prod.stories.js +463 -0
  87. package/src/stacked-table/stacked-table.test.js +127 -0
  88. package/src/stacked-table/supply-header-labels-to-children.js +7 -0
  89. package/src/stacked-table/table-context.js +4 -0
  90. package/src/stacked-table/table.js +28 -0
  91. package/src/table/index.js +8 -0
  92. package/src/table/table-body.js +21 -0
  93. package/src/table/table-cell-head.js +56 -0
  94. package/src/table/table-cell.js +56 -0
  95. package/src/table/table-context.js +7 -0
  96. package/src/table/table-foot.js +21 -0
  97. package/src/table/table-head.js +21 -0
  98. package/src/table/table-row-head.js +30 -0
  99. package/src/table/table-row.js +51 -0
  100. package/src/table/table.js +41 -0
  101. package/src/table/table.prod.stories.js +724 -0
package/src/data-table/table-elements/table.stories.internal.js ADDED
@@ -0,0 +1,1144 @@
1
+ /* eslint-disable react/prop-types */
2
+ import { IconAttachment16 } from '@dhis2/ui-icons'
3
+ import { Box } from '@dhis2-ui/box'
4
+ import { Checkbox } from '@dhis2-ui/checkbox'
5
+ import React, { useState } from 'react'
6
+ import { TableBody } from './table-body.js'
7
+ import { TableDataCell } from './table-data-cell/table-data-cell.js'
8
+ import { TableFoot } from './table-foot.js'
9
+ import { TableHead } from './table-head.js'
10
+ import { TableHeaderCell } from './table-header-cell/table-header-cell.js'
11
+ import { TableHeaderCellAction } from './table-header-cell-action.js'
12
+ import { TableRow } from './table-row.js'
13
+ import { TableScrollBox } from './table-scroll-box.js'
14
+ import { TableToolbar } from './table-toolbar.js'
15
+ import { Table } from './table.js'
16
+
17
+ const subtitle = 'Used to display information in a standard, effective way.'
18
+
19
+ const description = `
20
+ Should be used with multiple Table-related child components - see the table and examples below.
21
+
22
+ \`\`\`js
23
+ import {
24
+ Table,
25
+ TableToolbar,
26
+ TableHead,
27
+ TableBody,
28
+ TableFoot,
29
+ TableRow,
30
+ TableDataCell,
31
+ TableHeaderCell,
32
+ TableScrollBox,
33
+ } from '@dhis2/ui'
34
+ \`\`\`
35
+ `
36
+
37
+ export default {
38
+ title: 'Data Display/Table',
39
+ component: Table,
40
+ // Add subcomponents to the args table
41
+ subcomponents: {
42
+ TableToolbar,
43
+ TableHead,
44
+ TableBody,
45
+ TableFoot,
46
+ TableRow,
47
+ TableDataCell,
48
+ TableHeaderCell,
49
+ },
50
+ parameters: {
51
+ componentSubtitle: subtitle,
52
+ docs: { description: { component: description } },
53
+ },
54
+ argTypes: {
55
+ // hide control from `children` because that can't be live edited
56
+ children: { control: { disable: true } },
57
+ // hide child component controls completely to avoid confusion
58
+ borderedCells: { table: { disable: true } },
59
+ largeCells: { table: { disable: true } },
60
+ staticCells: { table: { disable: true } },
61
+ draggableRows: { table: { disable: true } },
62
+ },
63
+ }
64
+
65
+ const BasicTemplate = ({
66
+ borderedCells,
67
+ largeCells,
68
+ staticCells,
69
+ draggableRows,
70
+ ...args
71
+ }) => (
72
+ <Table {...args}>
73
+ <TableHead>
74
+ <TableRow>
75
+ <TableHeaderCell large={largeCells}>First name</TableHeaderCell>
76
+ <TableHeaderCell large={largeCells}>Last name</TableHeaderCell>
77
+ <TableHeaderCell large={largeCells}>
78
+ Incident date
79
+ </TableHeaderCell>
80
+ <TableHeaderCell large={largeCells}>
81
+ Last updated
82
+ </TableHeaderCell>
83
+ </TableRow>
84
+ </TableHead>
85
+ <TableBody>
86
+ <TableRow draggable={draggableRows}>
87
+ <TableDataCell
88
+ staticStyle={staticCells}
89
+ large={largeCells}
90
+ bordered={borderedCells}
91
+ >
92
+ Onyekachukwu
93
+ </TableDataCell>
94
+ <TableDataCell
95
+ staticStyle={staticCells}
96
+ large={largeCells}
97
+ bordered={borderedCells}
98
+ >
99
+ Kariuki
100
+ </TableDataCell>
101
+ <TableDataCell
102
+ staticStyle={staticCells}
103
+ large={largeCells}
104
+ bordered={borderedCells}
105
+ >
106
+ 02/06/2007
107
+ </TableDataCell>
108
+ <TableDataCell
109
+ staticStyle={staticCells}
110
+ large={largeCells}
111
+ bordered={borderedCells}
112
+ >
113
+ 05/25/1972
114
+ </TableDataCell>
115
+ </TableRow>
116
+ <TableRow draggable={draggableRows}>
117
+ <TableDataCell
118
+ staticStyle={staticCells}
119
+ large={largeCells}
120
+ bordered={borderedCells}
121
+ >
122
+ Kwasi
123
+ </TableDataCell>
124
+ <TableDataCell
125
+ staticStyle={staticCells}
126
+ large={largeCells}
127
+ bordered={borderedCells}
128
+ >
129
+ Okafor
130
+ </TableDataCell>
131
+ <TableDataCell
132
+ staticStyle={staticCells}
133
+ large={largeCells}
134
+ bordered={borderedCells}
135
+ >
136
+ 08/11/2010
137
+ </TableDataCell>
138
+ <TableDataCell
139
+ staticStyle={staticCells}
140
+ large={largeCells}
141
+ bordered={borderedCells}
142
+ >
143
+ 02/26/1991
144
+ </TableDataCell>
145
+ </TableRow>
146
+ <TableRow draggable={draggableRows}>
147
+ <TableDataCell
148
+ staticStyle={staticCells}
149
+ large={largeCells}
150
+ bordered={borderedCells}
151
+ >
152
+ Siyabonga
153
+ </TableDataCell>
154
+ <TableDataCell
155
+ staticStyle={staticCells}
156
+ large={largeCells}
157
+ bordered={borderedCells}
158
+ >
159
+ Abiodun
160
+ </TableDataCell>
161
+ <TableDataCell
162
+ staticStyle={staticCells}
163
+ large={largeCells}
164
+ bordered={borderedCells}
165
+ >
166
+ 07/21/1981
167
+ </TableDataCell>
168
+ <TableDataCell
169
+ staticStyle={staticCells}
170
+ large={largeCells}
171
+ bordered={borderedCells}
172
+ >
173
+ 02/06/2007
174
+ </TableDataCell>
175
+ </TableRow>
176
+ </TableBody>
177
+ <TableFoot>
178
+ <TableRow>
179
+ <TableDataCell
180
+ staticStyle={staticCells}
181
+ large={largeCells}
182
+ bordered={borderedCells}
183
+ colSpan="4"
184
+ >
185
+ Footer content
186
+ </TableDataCell>
187
+ </TableRow>
188
+ </TableFoot>
189
+ </Table>
190
+ )
191
+
192
+ export const Default = BasicTemplate.bind({})
193
+ Default.args = {}
194
+
195
+ export const BorderedCells = BasicTemplate.bind({})
196
+ BorderedCells.args = {
197
+ borderedCells: true,
198
+ }
199
+ export const LargeCells = BasicTemplate.bind({})
200
+ LargeCells.args = {
201
+ largeCells: true,
202
+ }
203
+ export const StaticCells = BasicTemplate.bind({})
204
+ StaticCells.args = {
205
+ staticCells: true,
206
+ }
207
+ export const DraggableRows = BasicTemplate.bind({})
208
+ DraggableRows.args = {
209
+ draggableRows: true,
210
+ }
211
+
212
+ const IndividualCellTemplate = (args) => (
213
+ <Table {...args}>
214
+ <TableHead>
215
+ <TableRow>
216
+ <TableHeaderCell>Header</TableHeaderCell>
217
+ <TableHeaderCell>Header</TableHeaderCell>
218
+ <TableHeaderCell>Header</TableHeaderCell>
219
+ <TableHeaderCell>Header</TableHeaderCell>
220
+ </TableRow>
221
+ </TableHead>
222
+ <TableBody>
223
+ <TableRow>
224
+ <TableDataCell tag="th">Active Cells</TableDataCell>
225
+ <TableDataCell>Inactive cell</TableDataCell>
226
+ <TableDataCell
227
+ active
228
+ onClick={() => {
229
+ console.log('You clicked on a TableDataCell')
230
+ }}
231
+ >
232
+ Acive Cell with onClick
233
+ </TableDataCell>
234
+ <TableDataCell>Inactive cell</TableDataCell>
235
+ </TableRow>
236
+ <TableRow>
237
+ <TableDataCell tag="th">Alignment</TableDataCell>
238
+ <TableDataCell align="left">Left</TableDataCell>
239
+ <TableDataCell align="center">Center</TableDataCell>
240
+ <TableDataCell align="right">Right</TableDataCell>
241
+ </TableRow>
242
+ <TableRow>
243
+ <TableDataCell tag="th">Built in formatting</TableDataCell>
244
+ <TableDataCell error>Error</TableDataCell>
245
+ <TableDataCell valid>Valid</TableDataCell>
246
+ <TableDataCell muted>Muted</TableDataCell>
247
+ </TableRow>
248
+ </TableBody>
249
+ </Table>
250
+ )
251
+
252
+ export const CellStyling = IndividualCellTemplate.bind({})
253
+ CellStyling.args = {}
254
+
255
+ const IrregularHeadersTemplate = (args) => (
256
+ <Table {...args}>
257
+ <colgroup />
258
+ <colgroup span="2"></colgroup>
259
+ <colgroup span="2"></colgroup>
260
+ <TableHead>
261
+ <TableRow>
262
+ <TableHeaderCell
263
+ rowSpan="2"
264
+ colSpan="2"
265
+ bordered
266
+ ></TableHeaderCell>
267
+ <TableHeaderCell align="center" colSpan="2" scope="colgroup">
268
+ Mars
269
+ </TableHeaderCell>
270
+ <TableHeaderCell align="center" colSpan="2" scope="colgroup">
271
+ Venus
272
+ </TableHeaderCell>
273
+ </TableRow>
274
+ <TableRow>
275
+ <TableHeaderCell scope="col">Produced</TableHeaderCell>
276
+ <TableHeaderCell scope="col">Sold</TableHeaderCell>
277
+ <TableHeaderCell scope="col">Produced</TableHeaderCell>
278
+ <TableHeaderCell scope="col">Sold</TableHeaderCell>
279
+ </TableRow>
280
+ </TableHead>
281
+ <TableBody>
282
+ <TableRow>
283
+ <TableHeaderCell staticStyle bordered scope="row" rowSpan="2">
284
+ Type
285
+ </TableHeaderCell>
286
+ <TableHeaderCell staticStyle bordered scope="row">
287
+ Teddy Bears
288
+ </TableHeaderCell>
289
+ <TableDataCell staticStyle>50,000</TableDataCell>
290
+ <TableDataCell staticStyle>30,000</TableDataCell>
291
+ <TableDataCell staticStyle>100,000</TableDataCell>
292
+ <TableDataCell staticStyle>80,000</TableDataCell>
293
+ </TableRow>
294
+ <TableRow>
295
+ <TableHeaderCell staticStyle bordered scope="row">
296
+ Board Games
297
+ </TableHeaderCell>
298
+ <TableDataCell staticStyle>10,000</TableDataCell>
299
+ <TableDataCell staticStyle>5,000</TableDataCell>
300
+ <TableDataCell staticStyle>12,000</TableDataCell>
301
+ <TableDataCell staticStyle>9,000</TableDataCell>
302
+ </TableRow>
303
+ </TableBody>
304
+ </Table>
305
+ )
306
+ export const IrregularHeaders = IrregularHeadersTemplate.bind({})
307
+ IrregularHeaders.args = {}
308
+
309
+ const ToolbarsTemplate = (args) => (
310
+ <>
311
+ <TableToolbar>
312
+ <p>Content</p>
313
+ </TableToolbar>
314
+ <Table {...args}>
315
+ <TableHead>
316
+ <TableRow>
317
+ <TableHeaderCell>First name</TableHeaderCell>
318
+ <TableHeaderCell>Last name</TableHeaderCell>
319
+ <TableHeaderCell>Incident date</TableHeaderCell>
320
+ <TableHeaderCell>Last updated</TableHeaderCell>
321
+ </TableRow>
322
+ </TableHead>
323
+ <TableBody>
324
+ <TableRow>
325
+ <TableDataCell>Onyekachukwu</TableDataCell>
326
+ <TableDataCell>Kariuki</TableDataCell>
327
+ <TableDataCell>02/06/2007</TableDataCell>
328
+ <TableDataCell>05/25/1972</TableDataCell>
329
+ </TableRow>
330
+ <TableRow>
331
+ <TableDataCell>Kwasi</TableDataCell>
332
+ <TableDataCell>Okafor</TableDataCell>
333
+ <TableDataCell>08/11/2010</TableDataCell>
334
+ <TableDataCell>02/26/1991</TableDataCell>
335
+ </TableRow>
336
+ <TableRow>
337
+ <TableDataCell>Siyabonga</TableDataCell>
338
+ <TableDataCell>Abiodun</TableDataCell>
339
+ <TableDataCell>07/21/1981</TableDataCell>
340
+ <TableDataCell>02/06/2007</TableDataCell>
341
+ </TableRow>
342
+ </TableBody>
343
+ </Table>
344
+ <TableToolbar position="bottom">
345
+ <p>Content (bottom)</p>
346
+ </TableToolbar>
347
+ </>
348
+ )
349
+ export const Toolbars = ToolbarsTemplate.bind({})
350
+ Toolbars.args = {}
351
+
352
+ const SelectableRowsTemplate = (args) => {
353
+ const [selected, setSelected] = useState({ id_2: true })
354
+ const toggleSelected = ({ value, checked }) => {
355
+ setSelected({
356
+ ...selected,
357
+ [value]: checked,
358
+ })
359
+ }
360
+ const toggleAll = ({ checked }) => {
361
+ setSelected({
362
+ id_1: checked,
363
+ id_2: checked,
364
+ id_3: checked,
365
+ })
366
+ }
367
+ const allSelected = () =>
368
+ Object.values(selected).filter((value) => value).length === 3
369
+
370
+ return (
371
+ <Table {...args}>
372
+ <TableHead>
373
+ <TableRow>
374
+ <TableHeaderCell width="48px">
375
+ <Checkbox
376
+ checked={allSelected()}
377
+ onChange={toggleAll}
378
+ />
379
+ </TableHeaderCell>
380
+ <TableHeaderCell>First name</TableHeaderCell>
381
+ <TableHeaderCell>Last name</TableHeaderCell>
382
+ <TableHeaderCell>Incident date</TableHeaderCell>
383
+ <TableHeaderCell>Last updated</TableHeaderCell>
384
+ </TableRow>
385
+ </TableHead>
386
+ <TableBody>
387
+ <TableRow selected={!!selected.id_1}>
388
+ <TableDataCell width="48px">
389
+ <Checkbox
390
+ value="id_1"
391
+ checked={!!selected.id_1}
392
+ onChange={toggleSelected}
393
+ />
394
+ </TableDataCell>
395
+ <TableDataCell>Onyekachukwu</TableDataCell>
396
+ <TableDataCell>Kariuki</TableDataCell>
397
+ <TableDataCell>02/06/2007</TableDataCell>
398
+ <TableDataCell>05/25/1972</TableDataCell>
399
+ </TableRow>
400
+ <TableRow selected={!!selected.id_2}>
401
+ <TableDataCell width="48px">
402
+ <Checkbox
403
+ value="id_2"
404
+ checked={!!selected.id_2}
405
+ onChange={toggleSelected}
406
+ />
407
+ </TableDataCell>
408
+ <TableDataCell>Kwasi</TableDataCell>
409
+ <TableDataCell>Okafor</TableDataCell>
410
+ <TableDataCell>08/11/2010</TableDataCell>
411
+ <TableDataCell>02/26/1991</TableDataCell>
412
+ </TableRow>
413
+ <TableRow selected={!!selected.id_3}>
414
+ <TableDataCell width="48px">
415
+ <Checkbox
416
+ value="id_3"
417
+ checked={!!selected.id_3}
418
+ onChange={toggleSelected}
419
+ />
420
+ </TableDataCell>
421
+ <TableDataCell>Siyabonga</TableDataCell>
422
+ <TableDataCell>Abiodun</TableDataCell>
423
+ <TableDataCell>07/21/1981</TableDataCell>
424
+ <TableDataCell>02/06/2007</TableDataCell>
425
+ </TableRow>
426
+ </TableBody>
427
+ </Table>
428
+ )
429
+ }
430
+ export const SelectableRows = SelectableRowsTemplate.bind({})
431
+ SelectableRows.args = {}
432
+
433
+ const FixedHeaderTemplate = ({ ...args }) => (
434
+ <TableScrollBox maxHeight="350px">
435
+ <Table {...args}>
436
+ <TableHead>
437
+ <TableRow>
438
+ <TableHeaderCell fixed top="0">
439
+ First name
440
+ </TableHeaderCell>
441
+ <TableHeaderCell fixed top="0">
442
+ Last name
443
+ </TableHeaderCell>
444
+ <TableHeaderCell fixed top="0">
445
+ Incident date
446
+ </TableHeaderCell>
447
+ <TableHeaderCell fixed top="0">
448
+ Last updated
449
+ </TableHeaderCell>
450
+ <TableHeaderCell fixed top="0">
451
+ Age
452
+ </TableHeaderCell>
453
+ <TableHeaderCell fixed top="0">
454
+ Registering unit
455
+ </TableHeaderCell>
456
+ <TableHeaderCell fixed top="0">
457
+ Assigned user
458
+ </TableHeaderCell>
459
+ <TableHeaderCell fixed top="0">
460
+ Status
461
+ </TableHeaderCell>
462
+ </TableRow>
463
+ </TableHead>
464
+ <TableBody>
465
+ <TableRow>
466
+ <TableDataCell>Onyekachukwu</TableDataCell>
467
+ <TableDataCell>Kariuki</TableDataCell>
468
+ <TableDataCell>02/06/2007</TableDataCell>
469
+ <TableDataCell>05/25/1972</TableDataCell>
470
+ <TableDataCell>66</TableDataCell>
471
+ <TableDataCell>Jawi</TableDataCell>
472
+ <TableDataCell>Sofie Hubert</TableDataCell>
473
+ <TableDataCell>Incomplete</TableDataCell>
474
+ </TableRow>
475
+ <TableRow>
476
+ <TableDataCell>Kwasi</TableDataCell>
477
+ <TableDataCell>Okafor</TableDataCell>
478
+ <TableDataCell>08/11/2010</TableDataCell>
479
+ <TableDataCell>02/26/1991</TableDataCell>
480
+ <TableDataCell>38</TableDataCell>
481
+ <TableDataCell>Mokassie MCHP</TableDataCell>
482
+ <TableDataCell>Dashonte Clarke</TableDataCell>
483
+ <TableDataCell>Complete</TableDataCell>
484
+ </TableRow>
485
+ <TableRow>
486
+ <TableDataCell>Siyabonga</TableDataCell>
487
+ <TableDataCell>Abiodun</TableDataCell>
488
+ <TableDataCell>07/21/1981</TableDataCell>
489
+ <TableDataCell>02/06/2007</TableDataCell>
490
+ <TableDataCell>98</TableDataCell>
491
+ <TableDataCell>Bathurst MCHP</TableDataCell>
492
+ <TableDataCell>Unassigned</TableDataCell>
493
+ <TableDataCell>Incomplete</TableDataCell>
494
+ </TableRow>
495
+ <TableRow>
496
+ <TableDataCell>Chiyembekezo</TableDataCell>
497
+ <TableDataCell>Okeke</TableDataCell>
498
+ <TableDataCell>01/23/1982</TableDataCell>
499
+ <TableDataCell>07/15/2003</TableDataCell>
500
+ <TableDataCell>2</TableDataCell>
501
+ <TableDataCell>Mayolla MCHP</TableDataCell>
502
+ <TableDataCell>Wan Gengxin</TableDataCell>
503
+ <TableDataCell>Incomplete</TableDataCell>
504
+ </TableRow>
505
+ <TableRow>
506
+ <TableDataCell>Mtendere</TableDataCell>
507
+ <TableDataCell>Afolayan</TableDataCell>
508
+ <TableDataCell>08/12/1994</TableDataCell>
509
+ <TableDataCell>05/12/1972</TableDataCell>
510
+ <TableDataCell>37</TableDataCell>
511
+ <TableDataCell>Gbangadu MCHP</TableDataCell>
512
+ <TableDataCell>Gvozden Boskovsky</TableDataCell>
513
+ <TableDataCell>Complete</TableDataCell>
514
+ </TableRow>
515
+ <TableRow>
516
+ <TableDataCell>Inyene</TableDataCell>
517
+ <TableDataCell>Okonkwo</TableDataCell>
518
+ <TableDataCell>04/01/1971</TableDataCell>
519
+ <TableDataCell>03/16/2000</TableDataCell>
520
+ <TableDataCell>70</TableDataCell>
521
+ <TableDataCell>Kunike Barina</TableDataCell>
522
+ <TableDataCell>Oscar de la Cavallería</TableDataCell>
523
+ <TableDataCell>Complete</TableDataCell>
524
+ </TableRow>
525
+ <TableRow>
526
+ <TableDataCell>Amaka</TableDataCell>
527
+ <TableDataCell>Pretorius</TableDataCell>
528
+ <TableDataCell>01/25/1996</TableDataCell>
529
+ <TableDataCell>09/15/1986</TableDataCell>
530
+ <TableDataCell>32</TableDataCell>
531
+ <TableDataCell>Bargbo</TableDataCell>
532
+ <TableDataCell>Alberto Raya</TableDataCell>
533
+ <TableDataCell>Incomplete</TableDataCell>
534
+ </TableRow>
535
+ <TableRow>
536
+ <TableDataCell>Meti</TableDataCell>
537
+ <TableDataCell>Abiodun</TableDataCell>
538
+ <TableDataCell>10/24/2010</TableDataCell>
539
+ <TableDataCell>07/26/1989</TableDataCell>
540
+ <TableDataCell>8</TableDataCell>
541
+ <TableDataCell>Majihun MCHP</TableDataCell>
542
+ <TableDataCell>Unassigned</TableDataCell>
543
+ <TableDataCell>Complete</TableDataCell>
544
+ </TableRow>
545
+ <TableRow>
546
+ <TableDataCell>Eshe</TableDataCell>
547
+ <TableDataCell>Okeke</TableDataCell>
548
+ <TableDataCell>01/31/1995</TableDataCell>
549
+ <TableDataCell>01/31/1995</TableDataCell>
550
+ <TableDataCell>63</TableDataCell>
551
+ <TableDataCell>Mambiama CHP</TableDataCell>
552
+ <TableDataCell>Shadrias Pearson</TableDataCell>
553
+ <TableDataCell>Incomplete</TableDataCell>
554
+ </TableRow>
555
+ <TableRow>
556
+ <TableDataCell>Obi</TableDataCell>
557
+ <TableDataCell>Okafor</TableDataCell>
558
+ <TableDataCell>06/07/1990</TableDataCell>
559
+ <TableDataCell>01/03/2006</TableDataCell>
560
+ <TableDataCell>28</TableDataCell>
561
+ <TableDataCell>Dalakuru CHP</TableDataCell>
562
+ <TableDataCell>Anatoliy Shcherbatykh</TableDataCell>
563
+ <TableDataCell>Incomplete</TableDataCell>
564
+ </TableRow>
565
+ </TableBody>
566
+ </Table>
567
+ </TableScrollBox>
568
+ )
569
+ export const FixedHeader = FixedHeaderTemplate.bind({})
570
+ FixedHeader.args = {
571
+ borderless: true,
572
+ }
573
+
574
+ const FixedFirstColumnTemplate = (args) => (
575
+ <TableScrollBox maxWidth="500px">
576
+ <Table {...args}>
577
+ <TableHead>
578
+ <TableRow>
579
+ <TableHeaderCell fixed top="0" left="0">
580
+ First name
581
+ </TableHeaderCell>
582
+ <TableHeaderCell>Last name</TableHeaderCell>
583
+ <TableHeaderCell>Incident date</TableHeaderCell>
584
+ <TableHeaderCell>Last updated</TableHeaderCell>
585
+ <TableHeaderCell>Age</TableHeaderCell>
586
+ <TableHeaderCell>Registering unit</TableHeaderCell>
587
+ <TableHeaderCell>Assigned user</TableHeaderCell>
588
+ <TableHeaderCell>Status</TableHeaderCell>
589
+ </TableRow>
590
+ </TableHead>
591
+ <TableBody>
592
+ <TableRow>
593
+ <TableHeaderCell fixed left="0">
594
+ Onyekachukwu
595
+ </TableHeaderCell>
596
+ <TableDataCell>Kariuki</TableDataCell>
597
+ <TableDataCell>02/06/2007</TableDataCell>
598
+ <TableDataCell>05/25/1972</TableDataCell>
599
+ <TableDataCell>66</TableDataCell>
600
+ <TableDataCell>Jawi</TableDataCell>
601
+ <TableDataCell>Sofie Hubert</TableDataCell>
602
+ <TableDataCell>Incomplete</TableDataCell>
603
+ </TableRow>
604
+ <TableRow>
605
+ <TableHeaderCell fixed left="0">
606
+ Kwasi
607
+ </TableHeaderCell>
608
+ <TableDataCell>Okafor</TableDataCell>
609
+ <TableDataCell>08/11/2010</TableDataCell>
610
+ <TableDataCell>02/26/1991</TableDataCell>
611
+ <TableDataCell>38</TableDataCell>
612
+ <TableDataCell>Mokassie MCHP</TableDataCell>
613
+ <TableDataCell>Dashonte Clarke</TableDataCell>
614
+ <TableDataCell>Complete</TableDataCell>
615
+ </TableRow>
616
+ <TableRow>
617
+ <TableHeaderCell fixed left="0">
618
+ Siyabonga
619
+ </TableHeaderCell>
620
+ <TableDataCell>Abiodun</TableDataCell>
621
+ <TableDataCell>07/21/1981</TableDataCell>
622
+ <TableDataCell>02/06/2007</TableDataCell>
623
+ <TableDataCell>98</TableDataCell>
624
+ <TableDataCell>Bathurst MCHP</TableDataCell>
625
+ <TableDataCell>Unassigned</TableDataCell>
626
+ <TableDataCell>Incomplete</TableDataCell>
627
+ </TableRow>
628
+ <TableRow>
629
+ <TableHeaderCell fixed left="0">
630
+ Chiyembekezo
631
+ </TableHeaderCell>
632
+ <TableDataCell>Okeke</TableDataCell>
633
+ <TableDataCell>01/23/1982</TableDataCell>
634
+ <TableDataCell>07/15/2003</TableDataCell>
635
+ <TableDataCell>2</TableDataCell>
636
+ <TableDataCell>Mayolla MCHP</TableDataCell>
637
+ <TableDataCell>Wan Gengxin</TableDataCell>
638
+ <TableDataCell>Incomplete</TableDataCell>
639
+ </TableRow>
640
+ <TableRow>
641
+ <TableHeaderCell fixed left="0">
642
+ Mtendere
643
+ </TableHeaderCell>
644
+ <TableDataCell>Afolayan</TableDataCell>
645
+ <TableDataCell>08/12/1994</TableDataCell>
646
+ <TableDataCell>05/12/1972</TableDataCell>
647
+ <TableDataCell>37</TableDataCell>
648
+ <TableDataCell>Gbangadu MCHP</TableDataCell>
649
+ <TableDataCell>Gvozden Boskovsky</TableDataCell>
650
+ <TableDataCell>Complete</TableDataCell>
651
+ </TableRow>
652
+ <TableRow>
653
+ <TableHeaderCell fixed left="0">
654
+ Inyene
655
+ </TableHeaderCell>
656
+ <TableDataCell>Okonkwo</TableDataCell>
657
+ <TableDataCell>04/01/1971</TableDataCell>
658
+ <TableDataCell>03/16/2000</TableDataCell>
659
+ <TableDataCell>70</TableDataCell>
660
+ <TableDataCell>Kunike Barina</TableDataCell>
661
+ <TableDataCell>Oscar de la Cavallería</TableDataCell>
662
+ <TableDataCell>Complete</TableDataCell>
663
+ </TableRow>
664
+ <TableRow>
665
+ <TableHeaderCell fixed left="0">
666
+ Amaka
667
+ </TableHeaderCell>
668
+ <TableDataCell>Pretorius</TableDataCell>
669
+ <TableDataCell>01/25/1996</TableDataCell>
670
+ <TableDataCell>09/15/1986</TableDataCell>
671
+ <TableDataCell>32</TableDataCell>
672
+ <TableDataCell>Bargbo</TableDataCell>
673
+ <TableDataCell>Alberto Raya</TableDataCell>
674
+ <TableDataCell>Incomplete</TableDataCell>
675
+ </TableRow>
676
+ <TableRow>
677
+ <TableHeaderCell fixed left="0">
678
+ Meti
679
+ </TableHeaderCell>
680
+ <TableDataCell>Abiodun</TableDataCell>
681
+ <TableDataCell>10/24/2010</TableDataCell>
682
+ <TableDataCell>07/26/1989</TableDataCell>
683
+ <TableDataCell>8</TableDataCell>
684
+ <TableDataCell>Majihun MCHP</TableDataCell>
685
+ <TableDataCell>Unassigned</TableDataCell>
686
+ <TableDataCell>Complete</TableDataCell>
687
+ </TableRow>
688
+ <TableRow>
689
+ <TableHeaderCell fixed left="0">
690
+ Eshe
691
+ </TableHeaderCell>
692
+ <TableDataCell>Okeke</TableDataCell>
693
+ <TableDataCell>01/31/1995</TableDataCell>
694
+ <TableDataCell>01/31/1995</TableDataCell>
695
+ <TableDataCell>63</TableDataCell>
696
+ <TableDataCell>Mambiama CHP</TableDataCell>
697
+ <TableDataCell>Shadrias Pearson</TableDataCell>
698
+ <TableDataCell>Incomplete</TableDataCell>
699
+ </TableRow>
700
+ <TableRow>
701
+ <TableHeaderCell fixed left="0">
702
+ Obi
703
+ </TableHeaderCell>
704
+ <TableDataCell>Okafor</TableDataCell>
705
+ <TableDataCell>06/07/1990</TableDataCell>
706
+ <TableDataCell>01/03/2006</TableDataCell>
707
+ <TableDataCell>28</TableDataCell>
708
+ <TableDataCell>Dalakuru CHP</TableDataCell>
709
+ <TableDataCell>Anatoliy Shcherbatykh</TableDataCell>
710
+ <TableDataCell>Incomplete</TableDataCell>
711
+ </TableRow>
712
+ </TableBody>
713
+ </Table>
714
+ </TableScrollBox>
715
+ )
716
+ export const FixedFirstColumn = FixedFirstColumnTemplate.bind({})
717
+ FixedFirstColumn.args = {
718
+ borderless: true,
719
+ width: '1000px',
720
+ }
721
+
722
+ const FixedHeaderAndTwoColumnsTemplate = (args) => (
723
+ <TableScrollBox maxHeight="350px" maxWidth="500px">
724
+ <Table {...args}>
725
+ <TableHead>
726
+ <TableRow>
727
+ <TableHeaderCell fixed top="0" left="0" width="120px">
728
+ First name
729
+ </TableHeaderCell>
730
+ <TableHeaderCell fixed top="0" left="120px">
731
+ Last name
732
+ </TableHeaderCell>
733
+ <TableHeaderCell fixed top="0">
734
+ Incident date
735
+ </TableHeaderCell>
736
+ <TableHeaderCell fixed top="0">
737
+ Last updated
738
+ </TableHeaderCell>
739
+ <TableHeaderCell fixed top="0">
740
+ Age
741
+ </TableHeaderCell>
742
+ <TableHeaderCell fixed top="0">
743
+ Registering unit
744
+ </TableHeaderCell>
745
+ <TableHeaderCell fixed top="0">
746
+ Assigned user
747
+ </TableHeaderCell>
748
+ <TableHeaderCell fixed top="0">
749
+ Status
750
+ </TableHeaderCell>
751
+ </TableRow>
752
+ </TableHead>
753
+ <TableBody>
754
+ <TableRow>
755
+ <TableHeaderCell fixed left="0" width="120px">
756
+ Onyekachukwu
757
+ </TableHeaderCell>
758
+ <TableHeaderCell fixed left="120px">
759
+ Kariuki
760
+ </TableHeaderCell>
761
+ <TableDataCell>02/06/2007</TableDataCell>
762
+ <TableDataCell>05/25/1972</TableDataCell>
763
+ <TableDataCell>66</TableDataCell>
764
+ <TableDataCell>Jawi</TableDataCell>
765
+ <TableDataCell>Sofie Hubert</TableDataCell>
766
+ <TableDataCell>Incomplete</TableDataCell>
767
+ </TableRow>
768
+ <TableRow>
769
+ <TableHeaderCell fixed left="0" width="120px">
770
+ Kwasi
771
+ </TableHeaderCell>
772
+ <TableHeaderCell fixed left="120px">
773
+ Okafor
774
+ </TableHeaderCell>
775
+ <TableDataCell>08/11/2010</TableDataCell>
776
+ <TableDataCell>02/26/1991</TableDataCell>
777
+ <TableDataCell>38</TableDataCell>
778
+ <TableDataCell>Mokassie MCHP</TableDataCell>
779
+ <TableDataCell>Dashonte Clarke</TableDataCell>
780
+ <TableDataCell>Complete</TableDataCell>
781
+ </TableRow>
782
+ <TableRow>
783
+ <TableHeaderCell fixed left="0" width="120px">
784
+ Siyabonga
785
+ </TableHeaderCell>
786
+ <TableHeaderCell fixed left="120px">
787
+ Abiodun
788
+ </TableHeaderCell>
789
+ <TableDataCell>07/21/1981</TableDataCell>
790
+ <TableDataCell>02/06/2007</TableDataCell>
791
+ <TableDataCell>98</TableDataCell>
792
+ <TableDataCell>Bathurst MCHP</TableDataCell>
793
+ <TableDataCell>Unassigned</TableDataCell>
794
+ <TableDataCell>Incomplete</TableDataCell>
795
+ </TableRow>
796
+ <TableRow>
797
+ <TableHeaderCell fixed left="0" width="120px">
798
+ Chiyembekezo
799
+ </TableHeaderCell>
800
+ <TableHeaderCell fixed left="120px">
801
+ Okeke
802
+ </TableHeaderCell>
803
+ <TableDataCell>01/23/1982</TableDataCell>
804
+ <TableDataCell>07/15/2003</TableDataCell>
805
+ <TableDataCell>2</TableDataCell>
806
+ <TableDataCell>Mayolla MCHP</TableDataCell>
807
+ <TableDataCell>Wan Gengxin</TableDataCell>
808
+ <TableDataCell>Incomplete</TableDataCell>
809
+ </TableRow>
810
+ <TableRow>
811
+ <TableHeaderCell fixed left="0" width="120px">
812
+ Mtendere
813
+ </TableHeaderCell>
814
+ <TableHeaderCell fixed left="120px">
815
+ Afolayan
816
+ </TableHeaderCell>
817
+ <TableDataCell>08/12/1994</TableDataCell>
818
+ <TableDataCell>05/12/1972</TableDataCell>
819
+ <TableDataCell>37</TableDataCell>
820
+ <TableDataCell>Gbangadu MCHP</TableDataCell>
821
+ <TableDataCell>Gvozden Boskovsky</TableDataCell>
822
+ <TableDataCell>Complete</TableDataCell>
823
+ </TableRow>
824
+ <TableRow>
825
+ <TableHeaderCell fixed left="0" width="120px">
826
+ Inyene
827
+ </TableHeaderCell>
828
+ <TableHeaderCell fixed left="120px">
829
+ Okonkwo
830
+ </TableHeaderCell>
831
+ <TableDataCell>04/01/1971</TableDataCell>
832
+ <TableDataCell>03/16/2000</TableDataCell>
833
+ <TableDataCell>70</TableDataCell>
834
+ <TableDataCell>Kunike Barina</TableDataCell>
835
+ <TableDataCell>Oscar de la Cavallería</TableDataCell>
836
+ <TableDataCell>Complete</TableDataCell>
837
+ </TableRow>
838
+ <TableRow>
839
+ <TableHeaderCell fixed left="0" width="120px">
840
+ Amaka
841
+ </TableHeaderCell>
842
+ <TableHeaderCell fixed left="120px">
843
+ Pretorius
844
+ </TableHeaderCell>
845
+ <TableDataCell>01/25/1996</TableDataCell>
846
+ <TableDataCell>09/15/1986</TableDataCell>
847
+ <TableDataCell>32</TableDataCell>
848
+ <TableDataCell>Bargbo</TableDataCell>
849
+ <TableDataCell>Alberto Raya</TableDataCell>
850
+ <TableDataCell>Incomplete</TableDataCell>
851
+ </TableRow>
852
+ <TableRow>
853
+ <TableHeaderCell fixed left="0" width="120px">
854
+ Meti
855
+ </TableHeaderCell>
856
+ <TableHeaderCell fixed left="120px">
857
+ Abiodun
858
+ </TableHeaderCell>
859
+ <TableDataCell>10/24/2010</TableDataCell>
860
+ <TableDataCell>07/26/1989</TableDataCell>
861
+ <TableDataCell>8</TableDataCell>
862
+ <TableDataCell>Majihun MCHP</TableDataCell>
863
+ <TableDataCell>Unassigned</TableDataCell>
864
+ <TableDataCell>Complete</TableDataCell>
865
+ </TableRow>
866
+ <TableRow>
867
+ <TableHeaderCell fixed left="0" width="120px">
868
+ Eshe
869
+ </TableHeaderCell>
870
+ <TableHeaderCell fixed left="120px">
871
+ Okeke
872
+ </TableHeaderCell>
873
+ <TableDataCell>01/31/1995</TableDataCell>
874
+ <TableDataCell>01/31/1995</TableDataCell>
875
+ <TableDataCell>63</TableDataCell>
876
+ <TableDataCell>Mambiama CHP</TableDataCell>
877
+ <TableDataCell>Shadrias Pearson</TableDataCell>
878
+ <TableDataCell>Incomplete</TableDataCell>
879
+ </TableRow>
880
+ <TableRow>
881
+ <TableHeaderCell fixed left="0" width="120px">
882
+ Obi
883
+ </TableHeaderCell>
884
+ <TableHeaderCell fixed left="120px">
885
+ Okafor
886
+ </TableHeaderCell>
887
+ <TableDataCell>06/07/1990</TableDataCell>
888
+ <TableDataCell>01/03/2006</TableDataCell>
889
+ <TableDataCell>28</TableDataCell>
890
+ <TableDataCell>Dalakuru CHP</TableDataCell>
891
+ <TableDataCell>Anatoliy Shcherbatykh</TableDataCell>
892
+ <TableDataCell>Incomplete</TableDataCell>
893
+ </TableRow>
894
+ </TableBody>
895
+ </Table>
896
+ </TableScrollBox>
897
+ )
898
+
899
+ export const FixedHeaderAndTwoColumns = FixedHeaderAndTwoColumnsTemplate.bind(
900
+ {}
901
+ )
902
+ FixedHeaderAndTwoColumns.args = {
903
+ layout: 'fixed',
904
+ borderless: true,
905
+ width: '1000px',
906
+ }
907
+
908
+ const ScrollingTableWithToolbarsTemplate = (args) => (
909
+ <Box width="500px">
910
+ <TableToolbar>
911
+ <p>Content</p>
912
+ </TableToolbar>
913
+ <TableScrollBox maxHeight="350px" maxWidth="500px">
914
+ <Table {...args}>
915
+ <TableHead>
916
+ <TableRow>
917
+ <TableHeaderCell fixed top="0" left="0" width="120px">
918
+ First name
919
+ </TableHeaderCell>
920
+ <TableHeaderCell fixed top="0" left="120px">
921
+ Last name
922
+ </TableHeaderCell>
923
+ <TableHeaderCell fixed top="0">
924
+ Incident date
925
+ </TableHeaderCell>
926
+ <TableHeaderCell fixed top="0">
927
+ Last updated
928
+ </TableHeaderCell>
929
+ <TableHeaderCell fixed top="0">
930
+ Age
931
+ </TableHeaderCell>
932
+ <TableHeaderCell fixed top="0">
933
+ Registering unit
934
+ </TableHeaderCell>
935
+ <TableHeaderCell fixed top="0">
936
+ Assigned user
937
+ </TableHeaderCell>
938
+ <TableHeaderCell fixed top="0">
939
+ Status
940
+ </TableHeaderCell>
941
+ </TableRow>
942
+ </TableHead>
943
+ <TableBody>
944
+ <TableRow>
945
+ <TableHeaderCell fixed left="0" width="120px">
946
+ Onyekachukwu
947
+ </TableHeaderCell>
948
+ <TableHeaderCell fixed left="120px">
949
+ Kariuki
950
+ </TableHeaderCell>
951
+ <TableDataCell>02/06/2007</TableDataCell>
952
+ <TableDataCell>05/25/1972</TableDataCell>
953
+ <TableDataCell>66</TableDataCell>
954
+ <TableDataCell>Jawi</TableDataCell>
955
+ <TableDataCell>Sofie Hubert</TableDataCell>
956
+ <TableDataCell>Incomplete</TableDataCell>
957
+ </TableRow>
958
+ <TableRow>
959
+ <TableHeaderCell fixed left="0" width="120px">
960
+ Kwasi
961
+ </TableHeaderCell>
962
+ <TableHeaderCell fixed left="120px">
963
+ Okafor
964
+ </TableHeaderCell>
965
+ <TableDataCell>08/11/2010</TableDataCell>
966
+ <TableDataCell>02/26/1991</TableDataCell>
967
+ <TableDataCell>38</TableDataCell>
968
+ <TableDataCell>Mokassie MCHP</TableDataCell>
969
+ <TableDataCell>Dashonte Clarke</TableDataCell>
970
+ <TableDataCell>Complete</TableDataCell>
971
+ </TableRow>
972
+ <TableRow>
973
+ <TableHeaderCell fixed left="0" width="120px">
974
+ Siyabonga
975
+ </TableHeaderCell>
976
+ <TableHeaderCell fixed left="120px">
977
+ Abiodun
978
+ </TableHeaderCell>
979
+ <TableDataCell>07/21/1981</TableDataCell>
980
+ <TableDataCell>02/06/2007</TableDataCell>
981
+ <TableDataCell>98</TableDataCell>
982
+ <TableDataCell>Bathurst MCHP</TableDataCell>
983
+ <TableDataCell>Unassigned</TableDataCell>
984
+ <TableDataCell>Incomplete</TableDataCell>
985
+ </TableRow>
986
+ <TableRow>
987
+ <TableHeaderCell fixed left="0" width="120px">
988
+ Chiyembekezo
989
+ </TableHeaderCell>
990
+ <TableHeaderCell fixed left="120px">
991
+ Okeke
992
+ </TableHeaderCell>
993
+ <TableDataCell>01/23/1982</TableDataCell>
994
+ <TableDataCell>07/15/2003</TableDataCell>
995
+ <TableDataCell>2</TableDataCell>
996
+ <TableDataCell>Mayolla MCHP</TableDataCell>
997
+ <TableDataCell>Wan Gengxin</TableDataCell>
998
+ <TableDataCell>Incomplete</TableDataCell>
999
+ </TableRow>
1000
+ <TableRow>
1001
+ <TableHeaderCell fixed left="0" width="120px">
1002
+ Mtendere
1003
+ </TableHeaderCell>
1004
+ <TableHeaderCell fixed left="120px">
1005
+ Afolayan
1006
+ </TableHeaderCell>
1007
+ <TableDataCell>08/12/1994</TableDataCell>
1008
+ <TableDataCell>05/12/1972</TableDataCell>
1009
+ <TableDataCell>37</TableDataCell>
1010
+ <TableDataCell>Gbangadu MCHP</TableDataCell>
1011
+ <TableDataCell>Gvozden Boskovsky</TableDataCell>
1012
+ <TableDataCell>Complete</TableDataCell>
1013
+ </TableRow>
1014
+ <TableRow>
1015
+ <TableHeaderCell fixed left="0" width="120px">
1016
+ Inyene
1017
+ </TableHeaderCell>
1018
+ <TableHeaderCell fixed left="120px">
1019
+ Okonkwo
1020
+ </TableHeaderCell>
1021
+ <TableDataCell>04/01/1971</TableDataCell>
1022
+ <TableDataCell>03/16/2000</TableDataCell>
1023
+ <TableDataCell>70</TableDataCell>
1024
+ <TableDataCell>Kunike Barina</TableDataCell>
1025
+ <TableDataCell>Oscar de la Cavallería</TableDataCell>
1026
+ <TableDataCell>Complete</TableDataCell>
1027
+ </TableRow>
1028
+ <TableRow>
1029
+ <TableHeaderCell fixed left="0" width="120px">
1030
+ Amaka
1031
+ </TableHeaderCell>
1032
+ <TableHeaderCell fixed left="120px">
1033
+ Pretorius
1034
+ </TableHeaderCell>
1035
+ <TableDataCell>01/25/1996</TableDataCell>
1036
+ <TableDataCell>09/15/1986</TableDataCell>
1037
+ <TableDataCell>32</TableDataCell>
1038
+ <TableDataCell>Bargbo</TableDataCell>
1039
+ <TableDataCell>Alberto Raya</TableDataCell>
1040
+ <TableDataCell>Incomplete</TableDataCell>
1041
+ </TableRow>
1042
+ <TableRow>
1043
+ <TableHeaderCell fixed left="0" width="120px">
1044
+ Meti
1045
+ </TableHeaderCell>
1046
+ <TableHeaderCell fixed left="120px">
1047
+ Abiodun
1048
+ </TableHeaderCell>
1049
+ <TableDataCell>10/24/2010</TableDataCell>
1050
+ <TableDataCell>07/26/1989</TableDataCell>
1051
+ <TableDataCell>8</TableDataCell>
1052
+ <TableDataCell>Majihun MCHP</TableDataCell>
1053
+ <TableDataCell>Unassigned</TableDataCell>
1054
+ <TableDataCell>Complete</TableDataCell>
1055
+ </TableRow>
1056
+ <TableRow>
1057
+ <TableHeaderCell fixed left="0" width="120px">
1058
+ Eshe
1059
+ </TableHeaderCell>
1060
+ <TableHeaderCell fixed left="120px">
1061
+ Okeke
1062
+ </TableHeaderCell>
1063
+ <TableDataCell>01/31/1995</TableDataCell>
1064
+ <TableDataCell>01/31/1995</TableDataCell>
1065
+ <TableDataCell>63</TableDataCell>
1066
+ <TableDataCell>Mambiama CHP</TableDataCell>
1067
+ <TableDataCell>Shadrias Pearson</TableDataCell>
1068
+ <TableDataCell>Incomplete</TableDataCell>
1069
+ </TableRow>
1070
+ <TableRow>
1071
+ <TableHeaderCell fixed left="0" width="120px">
1072
+ Obi
1073
+ </TableHeaderCell>
1074
+ <TableHeaderCell fixed left="120px">
1075
+ Okafor
1076
+ </TableHeaderCell>
1077
+ <TableDataCell>06/07/1990</TableDataCell>
1078
+ <TableDataCell>01/03/2006</TableDataCell>
1079
+ <TableDataCell>28</TableDataCell>
1080
+ <TableDataCell>Dalakuru CHP</TableDataCell>
1081
+ <TableDataCell>Anatoliy Shcherbatykh</TableDataCell>
1082
+ <TableDataCell>Incomplete</TableDataCell>
1083
+ </TableRow>
1084
+ </TableBody>
1085
+ </Table>
1086
+ </TableScrollBox>
1087
+ <TableToolbar position="bottom">
1088
+ <p>Content (bottom)</p>
1089
+ </TableToolbar>
1090
+ </Box>
1091
+ )
1092
+
1093
+ export const ScrollingTableWithToolbars =
1094
+ ScrollingTableWithToolbarsTemplate.bind({})
1095
+ ScrollingTableWithToolbars.args = {
1096
+ layout: 'fixed',
1097
+ borderless: true,
1098
+ width: '1000px',
1099
+ }
1100
+
1101
+ const HeaderActionsTemplate = (args) => (
1102
+ <Table {...args}>
1103
+ <TableHead>
1104
+ <TableRow>
1105
+ <TableHeaderCell>
1106
+ <span
1107
+ style={{
1108
+ display: 'flex',
1109
+ height: '100%',
1110
+ alignItems: 'center',
1111
+ }}
1112
+ >
1113
+ First name
1114
+ <TableHeaderCellAction>
1115
+ <IconAttachment16 color="green" />
1116
+ </TableHeaderCellAction>
1117
+ </span>
1118
+ </TableHeaderCell>
1119
+ <TableHeaderCell>
1120
+ <span
1121
+ style={{
1122
+ display: 'flex',
1123
+ height: '100%',
1124
+ alignItems: 'center',
1125
+ }}
1126
+ >
1127
+ Last name
1128
+ <TableHeaderCellAction>
1129
+ <IconAttachment16 color="red" />
1130
+ </TableHeaderCellAction>
1131
+ </span>
1132
+ </TableHeaderCell>
1133
+ </TableRow>
1134
+ </TableHead>
1135
+ <TableBody>
1136
+ <TableRow>
1137
+ <TableDataCell colSpan="3"></TableDataCell>
1138
+ </TableRow>
1139
+ </TableBody>
1140
+ </Table>
1141
+ )
1142
+
1143
+ export const HeaderActions = HeaderActionsTemplate.bind({})
1144
+ HeaderActions.args = {}