@dhis2-ui/table 10.16.1 → 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/table/table.prod.stories.js ADDED
@@ -0,0 +1,724 @@
1
+ import { Button } from '@dhis2-ui/button'
2
+ import React from 'react'
3
+ import { TableBody } from './table-body.js'
4
+ import { TableCellHead } from './table-cell-head.js'
5
+ import { TableCell } from './table-cell.js'
6
+ import { TableFoot } from './table-foot.js'
7
+ import { TableHead } from './table-head.js'
8
+ import { TableRowHead } from './table-row-head.js'
9
+ import { TableRow } from './table-row.js'
10
+ import { Table } from './table.js'
11
+
12
+ const subtitle = 'Used to display information in a standard, effective way.'
13
+
14
+ const description = `
15
+ Should be used with multiple Table-related child components - see the table and examples below.
16
+
17
+ \`\`\`js
18
+ import {
19
+ Table,
20
+ TableBody,
21
+ TableCell,
22
+ TableCellHead,
23
+ TableFoot,
24
+ TableHead,
25
+ TableRow,
26
+ TableRowHead,
27
+ } from '@dhis2/ui'
28
+ \`\`\`
29
+ `
30
+
31
+ const TableFooterButton = () => (
32
+ <div>
33
+ <Button primary>Table footer button</Button>
34
+
35
+ <style jsx>{`
36
+ div {
37
+ text-align: right;
38
+ padding: 16px 0;
39
+ }
40
+ `}</style>
41
+ </div>
42
+ )
43
+
44
+ const TableButton = () => <Button primary>Table button</Button>
45
+
46
+ export default {
47
+ title: 'Table',
48
+ component: Table,
49
+ // Add subcomponents to the args table
50
+ subcomponents: {
51
+ TableHead,
52
+ TableBody,
53
+ TableFoot,
54
+ TableRowHead,
55
+ TableCellHead,
56
+ TableRow,
57
+ TableCell,
58
+ },
59
+ parameters: {
60
+ componentSubtitle: subtitle,
61
+ docs: { description: { component: description } },
62
+ },
63
+ }
64
+
65
+ export const StaticLayout = (args) => (
66
+ <Table {...args}>
67
+ <TableHead>
68
+ <TableRowHead>
69
+ <TableCellHead>First name</TableCellHead>
70
+ <TableCellHead>Last name</TableCellHead>
71
+ <TableCellHead>Incident date</TableCellHead>
72
+ <TableCellHead>Last updated</TableCellHead>
73
+ <TableCellHead>Age</TableCellHead>
74
+ <TableCellHead>Registering unit</TableCellHead>
75
+ <TableCellHead>Assigned user</TableCellHead>
76
+ <TableCellHead>Status</TableCellHead>
77
+ </TableRowHead>
78
+ </TableHead>
79
+ <TableBody>
80
+ <TableRow>
81
+ <TableCell>Onyekachukwu</TableCell>
82
+ <TableCell>Kariuki</TableCell>
83
+ <TableCell>02/06/2007</TableCell>
84
+ <TableCell>05/25/1972</TableCell>
85
+ <TableCell>66</TableCell>
86
+ <TableCell>Jawi</TableCell>
87
+ <TableCell>Sofie Hubert</TableCell>
88
+ <TableCell>Incomplete</TableCell>
89
+ </TableRow>
90
+ <TableRow>
91
+ <TableCell>Kwasi</TableCell>
92
+ <TableCell>Okafor</TableCell>
93
+ <TableCell>08/11/2010</TableCell>
94
+ <TableCell>02/26/1991</TableCell>
95
+ <TableCell>38</TableCell>
96
+ <TableCell>Mokassie MCHP</TableCell>
97
+ <TableCell>Dashonte Clarke</TableCell>
98
+ <TableCell>Complete</TableCell>
99
+ </TableRow>
100
+ <TableRow>
101
+ <TableCell>Siyabonga</TableCell>
102
+ <TableCell>Abiodun</TableCell>
103
+ <TableCell>07/21/1981</TableCell>
104
+ <TableCell>02/06/2007</TableCell>
105
+ <TableCell>98</TableCell>
106
+ <TableCell>Bathurst MCHP</TableCell>
107
+ <TableCell>Unassigned</TableCell>
108
+ <TableCell>Incomplete</TableCell>
109
+ </TableRow>
110
+ <TableRow>
111
+ <TableCell>Chiyembekezo</TableCell>
112
+ <TableCell>Okeke</TableCell>
113
+ <TableCell>01/23/1982</TableCell>
114
+ <TableCell>07/15/2003</TableCell>
115
+ <TableCell>2</TableCell>
116
+ <TableCell>Mayolla MCHP</TableCell>
117
+ <TableCell>Wan Gengxin</TableCell>
118
+ <TableCell>Incomplete</TableCell>
119
+ </TableRow>
120
+ <TableRow>
121
+ <TableCell>Mtendere</TableCell>
122
+ <TableCell>Afolayan</TableCell>
123
+ <TableCell>08/12/1994</TableCell>
124
+ <TableCell>05/12/1972</TableCell>
125
+ <TableCell>37</TableCell>
126
+ <TableCell>Gbangadu MCHP</TableCell>
127
+ <TableCell>Gvozden Boskovsky</TableCell>
128
+ <TableCell>Complete</TableCell>
129
+ </TableRow>
130
+ <TableRow>
131
+ <TableCell>Inyene</TableCell>
132
+ <TableCell>Okonkwo</TableCell>
133
+ <TableCell>04/01/1971</TableCell>
134
+ <TableCell>03/16/2000</TableCell>
135
+ <TableCell>70</TableCell>
136
+ <TableCell>Kunike Barina</TableCell>
137
+ <TableCell>Oscar de la Cavallería</TableCell>
138
+ <TableCell>Complete</TableCell>
139
+ </TableRow>
140
+ <TableRow>
141
+ <TableCell>Amaka</TableCell>
142
+ <TableCell>Pretorius</TableCell>
143
+ <TableCell>01/25/1996</TableCell>
144
+ <TableCell>09/15/1986</TableCell>
145
+ <TableCell>32</TableCell>
146
+ <TableCell>Bargbo</TableCell>
147
+ <TableCell>Alberto Raya</TableCell>
148
+ <TableCell>Incomplete</TableCell>
149
+ </TableRow>
150
+ <TableRow>
151
+ <TableCell>Meti</TableCell>
152
+ <TableCell>Abiodun</TableCell>
153
+ <TableCell>10/24/2010</TableCell>
154
+ <TableCell>07/26/1989</TableCell>
155
+ <TableCell>8</TableCell>
156
+ <TableCell>Majihun MCHP</TableCell>
157
+ <TableCell>Unassigned</TableCell>
158
+ <TableCell>Complete</TableCell>
159
+ </TableRow>
160
+ <TableRow>
161
+ <TableCell>Eshe</TableCell>
162
+ <TableCell>Okeke</TableCell>
163
+ <TableCell>01/31/1995</TableCell>
164
+ <TableCell>01/31/1995</TableCell>
165
+ <TableCell>63</TableCell>
166
+ <TableCell>Mambiama CHP</TableCell>
167
+ <TableCell>Shadrias Pearson</TableCell>
168
+ <TableCell>Incomplete</TableCell>
169
+ </TableRow>
170
+ <TableRow>
171
+ <TableCell>Obi</TableCell>
172
+ <TableCell>Okafor</TableCell>
173
+ <TableCell>06/07/1990</TableCell>
174
+ <TableCell>01/03/2006</TableCell>
175
+ <TableCell>28</TableCell>
176
+ <TableCell>Dalakuru CHP</TableCell>
177
+ <TableCell>Anatoliy Shcherbatykh</TableCell>
178
+ <TableCell>Incomplete</TableCell>
179
+ </TableRow>
180
+ </TableBody>
181
+ <TableFoot>
182
+ <TableRow>
183
+ <TableCell colSpan="8">
184
+ <TableFooterButton />
185
+ </TableCell>
186
+ </TableRow>
187
+ </TableFoot>
188
+ </Table>
189
+ )
190
+
191
+ export const OneDenseCell = (args) => (
192
+ <Table {...args}>
193
+ <TableHead>
194
+ <TableRowHead>
195
+ <TableCellHead>First name</TableCellHead>
196
+ <TableCellHead>Last name</TableCellHead>
197
+ <TableCellHead>Incident date</TableCellHead>
198
+ <TableCellHead>Last updated</TableCellHead>
199
+ <TableCellHead>Age</TableCellHead>
200
+ <TableCellHead>Registering unit</TableCellHead>
201
+ <TableCellHead>Assigned user</TableCellHead>
202
+ <TableCellHead>Button</TableCellHead>
203
+ </TableRowHead>
204
+ </TableHead>
205
+ <TableBody>
206
+ <TableRow>
207
+ <TableCell>Onyekachukwu</TableCell>
208
+ <TableCell>Kariuki</TableCell>
209
+ <TableCell>02/06/2007</TableCell>
210
+ <TableCell>05/25/1972</TableCell>
211
+ <TableCell>66</TableCell>
212
+ <TableCell>Jawi</TableCell>
213
+ <TableCell>Sofie Hubert</TableCell>
214
+ <TableCell dense>
215
+ <TableButton />
216
+ </TableCell>
217
+ </TableRow>
218
+ <TableRow>
219
+ <TableCell>Kwasi</TableCell>
220
+ <TableCell>Okafor</TableCell>
221
+ <TableCell>08/11/2010</TableCell>
222
+ <TableCell>02/26/1991</TableCell>
223
+ <TableCell>38</TableCell>
224
+ <TableCell>Mokassie MCHP</TableCell>
225
+ <TableCell>Dashonte Clarke</TableCell>
226
+ <TableCell dense>
227
+ <TableButton />
228
+ </TableCell>
229
+ </TableRow>
230
+ <TableRow>
231
+ <TableCell>Siyabonga</TableCell>
232
+ <TableCell>Abiodun</TableCell>
233
+ <TableCell>07/21/1981</TableCell>
234
+ <TableCell>02/06/2007</TableCell>
235
+ <TableCell>98</TableCell>
236
+ <TableCell>Bathurst MCHP</TableCell>
237
+ <TableCell>Unassigned</TableCell>
238
+ <TableCell dense>
239
+ <TableButton />
240
+ </TableCell>
241
+ </TableRow>
242
+ <TableRow>
243
+ <TableCell>Chiyembekezo</TableCell>
244
+ <TableCell>Okeke</TableCell>
245
+ <TableCell>01/23/1982</TableCell>
246
+ <TableCell>07/15/2003</TableCell>
247
+ <TableCell>2</TableCell>
248
+ <TableCell>Mayolla MCHP</TableCell>
249
+ <TableCell>Wan Gengxin</TableCell>
250
+ <TableCell dense>
251
+ <TableButton />
252
+ </TableCell>
253
+ </TableRow>
254
+ <TableRow>
255
+ <TableCell>Mtendere</TableCell>
256
+ <TableCell>Afolayan</TableCell>
257
+ <TableCell>08/12/1994</TableCell>
258
+ <TableCell>05/12/1972</TableCell>
259
+ <TableCell>37</TableCell>
260
+ <TableCell>Gbangadu MCHP</TableCell>
261
+ <TableCell>Gvozden Boskovsky</TableCell>
262
+ <TableCell dense>
263
+ <TableButton />
264
+ </TableCell>
265
+ </TableRow>
266
+ <TableRow>
267
+ <TableCell>Inyene</TableCell>
268
+ <TableCell>Okonkwo</TableCell>
269
+ <TableCell>04/01/1971</TableCell>
270
+ <TableCell>03/16/2000</TableCell>
271
+ <TableCell>70</TableCell>
272
+ <TableCell>Kunike Barina</TableCell>
273
+ <TableCell>Oscar de la Cavallería</TableCell>
274
+ <TableCell dense>
275
+ <TableButton />
276
+ </TableCell>
277
+ </TableRow>
278
+ <TableRow>
279
+ <TableCell>Amaka</TableCell>
280
+ <TableCell>Pretorius</TableCell>
281
+ <TableCell>01/25/1996</TableCell>
282
+ <TableCell>09/15/1986</TableCell>
283
+ <TableCell>32</TableCell>
284
+ <TableCell>Bargbo</TableCell>
285
+ <TableCell>Alberto Raya</TableCell>
286
+ <TableCell dense>
287
+ <TableButton />
288
+ </TableCell>
289
+ </TableRow>
290
+ <TableRow>
291
+ <TableCell>Meti</TableCell>
292
+ <TableCell>Abiodun</TableCell>
293
+ <TableCell>10/24/2010</TableCell>
294
+ <TableCell>07/26/1989</TableCell>
295
+ <TableCell>8</TableCell>
296
+ <TableCell>Majihun MCHP</TableCell>
297
+ <TableCell>Unassigned</TableCell>
298
+ <TableCell dense>
299
+ <TableButton />
300
+ </TableCell>
301
+ </TableRow>
302
+ <TableRow>
303
+ <TableCell>Eshe</TableCell>
304
+ <TableCell>Okeke</TableCell>
305
+ <TableCell>01/31/1995</TableCell>
306
+ <TableCell>01/31/1995</TableCell>
307
+ <TableCell>63</TableCell>
308
+ <TableCell>Mambiama CHP</TableCell>
309
+ <TableCell>Shadrias Pearson</TableCell>
310
+ <TableCell dense>
311
+ <TableButton />
312
+ </TableCell>
313
+ </TableRow>
314
+ <TableRow>
315
+ <TableCell>Obi</TableCell>
316
+ <TableCell>Okafor</TableCell>
317
+ <TableCell>06/07/1990</TableCell>
318
+ <TableCell>01/03/2006</TableCell>
319
+ <TableCell>28</TableCell>
320
+ <TableCell>Dalakuru CHP</TableCell>
321
+ <TableCell>Anatoliy Shcherbatykh</TableCell>
322
+ <TableCell dense>
323
+ <TableButton />
324
+ </TableCell>
325
+ </TableRow>
326
+ </TableBody>
327
+ <TableFoot>
328
+ <TableRow>
329
+ <TableCell colSpan="8">
330
+ <TableFooterButton />
331
+ </TableCell>
332
+ </TableRow>
333
+ </TableFoot>
334
+ </Table>
335
+ )
336
+
337
+ export const NoAlternatingBgColor = (args) => (
338
+ <Table {...args}>
339
+ <TableHead>
340
+ <TableRowHead>
341
+ <TableCellHead>Name</TableCellHead>
342
+ <TableCellHead colSpan="7" />
343
+ </TableRowHead>
344
+ <TableRowHead>
345
+ <TableCellHead>First name</TableCellHead>
346
+ <TableCellHead>Last name</TableCellHead>
347
+ <TableCellHead>Incident date</TableCellHead>
348
+ <TableCellHead>Last updated</TableCellHead>
349
+ <TableCellHead>Age</TableCellHead>
350
+ <TableCellHead>Registering unit</TableCellHead>
351
+ <TableCellHead>Assigned user</TableCellHead>
352
+ <TableCellHead>Status</TableCellHead>
353
+ </TableRowHead>
354
+ </TableHead>
355
+ <TableBody>
356
+ <TableRow>
357
+ <TableCell>Onyekachukwu</TableCell>
358
+ <TableCell>Kariuki</TableCell>
359
+ <TableCell>02/06/2007</TableCell>
360
+ <TableCell>05/25/1972</TableCell>
361
+ <TableCell>66</TableCell>
362
+ <TableCell>Jawi</TableCell>
363
+ <TableCell>Sofie Hubert</TableCell>
364
+ <TableCell>Incomplete</TableCell>
365
+ </TableRow>
366
+ <TableRow>
367
+ <TableCell>Kwasi</TableCell>
368
+ <TableCell>Okafor</TableCell>
369
+ <TableCell>08/11/2010</TableCell>
370
+ <TableCell>02/26/1991</TableCell>
371
+ <TableCell>38</TableCell>
372
+ <TableCell>Mokassie MCHP</TableCell>
373
+ <TableCell>Dashonte Clarke</TableCell>
374
+ <TableCell>Complete</TableCell>
375
+ </TableRow>
376
+ <TableRow>
377
+ <TableCell>Siyabonga</TableCell>
378
+ <TableCell>Abiodun</TableCell>
379
+ <TableCell>07/21/1981</TableCell>
380
+ <TableCell>02/06/2007</TableCell>
381
+ <TableCell>98</TableCell>
382
+ <TableCell>Bathurst MCHP</TableCell>
383
+ <TableCell>Unassigned</TableCell>
384
+ <TableCell>Incomplete</TableCell>
385
+ </TableRow>
386
+ <TableRow>
387
+ <TableCell>Chiyembekezo</TableCell>
388
+ <TableCell>Okeke</TableCell>
389
+ <TableCell>01/23/1982</TableCell>
390
+ <TableCell>07/15/2003</TableCell>
391
+ <TableCell>2</TableCell>
392
+ <TableCell>Mayolla MCHP</TableCell>
393
+ <TableCell>Wan Gengxin</TableCell>
394
+ <TableCell>Incomplete</TableCell>
395
+ </TableRow>
396
+ <TableRow>
397
+ <TableCell>Mtendere</TableCell>
398
+ <TableCell>Afolayan</TableCell>
399
+ <TableCell>08/12/1994</TableCell>
400
+ <TableCell>05/12/1972</TableCell>
401
+ <TableCell>37</TableCell>
402
+ <TableCell>Gbangadu MCHP</TableCell>
403
+ <TableCell>Gvozden Boskovsky</TableCell>
404
+ <TableCell>Complete</TableCell>
405
+ </TableRow>
406
+ <TableRow>
407
+ <TableCell>Inyene</TableCell>
408
+ <TableCell>Okonkwo</TableCell>
409
+ <TableCell>04/01/1971</TableCell>
410
+ <TableCell>03/16/2000</TableCell>
411
+ <TableCell>70</TableCell>
412
+ <TableCell>Kunike Barina</TableCell>
413
+ <TableCell>Oscar de la Cavallería</TableCell>
414
+ <TableCell>Complete</TableCell>
415
+ </TableRow>
416
+ <TableRow>
417
+ <TableCell>Amaka</TableCell>
418
+ <TableCell>Pretorius</TableCell>
419
+ <TableCell>01/25/1996</TableCell>
420
+ <TableCell>09/15/1986</TableCell>
421
+ <TableCell>32</TableCell>
422
+ <TableCell>Bargbo</TableCell>
423
+ <TableCell>Alberto Raya</TableCell>
424
+ <TableCell>Incomplete</TableCell>
425
+ </TableRow>
426
+ <TableRow>
427
+ <TableCell>Meti</TableCell>
428
+ <TableCell>Abiodun</TableCell>
429
+ <TableCell>10/24/2010</TableCell>
430
+ <TableCell>07/26/1989</TableCell>
431
+ <TableCell>8</TableCell>
432
+ <TableCell>Majihun MCHP</TableCell>
433
+ <TableCell>Unassigned</TableCell>
434
+ <TableCell>Complete</TableCell>
435
+ </TableRow>
436
+ <TableRow>
437
+ <TableCell>Eshe</TableCell>
438
+ <TableCell>Okeke</TableCell>
439
+ <TableCell>01/31/1995</TableCell>
440
+ <TableCell>01/31/1995</TableCell>
441
+ <TableCell>63</TableCell>
442
+ <TableCell>Mambiama CHP</TableCell>
443
+ <TableCell>Shadrias Pearson</TableCell>
444
+ <TableCell>Incomplete</TableCell>
445
+ </TableRow>
446
+ <TableRow>
447
+ <TableCell>Obi</TableCell>
448
+ <TableCell>Okafor</TableCell>
449
+ <TableCell>06/07/1990</TableCell>
450
+ <TableCell>01/03/2006</TableCell>
451
+ <TableCell>28</TableCell>
452
+ <TableCell>Dalakuru CHP</TableCell>
453
+ <TableCell>Anatoliy Shcherbatykh</TableCell>
454
+ <TableCell>Incomplete</TableCell>
455
+ </TableRow>
456
+ </TableBody>
457
+ <TableFoot>
458
+ <TableRow>
459
+ <TableCell colSpan="8">
460
+ <TableFooterButton />
461
+ </TableCell>
462
+ </TableRow>
463
+ </TableFoot>
464
+ </Table>
465
+ )
466
+ NoAlternatingBgColor.args = { suppressZebraStriping: true }
467
+
468
+ export const CustomAlternatingBgColor = () => (
469
+ <Table>
470
+ <TableHead>
471
+ <TableRowHead>
472
+ <TableCellHead>Name</TableCellHead>
473
+ <TableCellHead colSpan="7" />
474
+ </TableRowHead>
475
+ <TableRowHead>
476
+ <TableCellHead>First name</TableCellHead>
477
+ <TableCellHead>Last name</TableCellHead>
478
+ <TableCellHead>Incident date</TableCellHead>
479
+ <TableCellHead>Last updated</TableCellHead>
480
+ <TableCellHead>Age</TableCellHead>
481
+ <TableCellHead>Registering unit</TableCellHead>
482
+ <TableCellHead>Assigned user</TableCellHead>
483
+ <TableCellHead>Status</TableCellHead>
484
+ </TableRowHead>
485
+ </TableHead>
486
+ <TableBody>
487
+ <TableRow>
488
+ <TableCell>Onyekachukwu</TableCell>
489
+ <TableCell>Kariuki</TableCell>
490
+ <TableCell>02/06/2007</TableCell>
491
+ <TableCell>05/25/1972</TableCell>
492
+ <TableCell>66</TableCell>
493
+ <TableCell>Jawi</TableCell>
494
+ <TableCell>Sofie Hubert</TableCell>
495
+ <TableCell>Incomplete</TableCell>
496
+ </TableRow>
497
+ <TableRow suppressZebraStriping>
498
+ <TableCell>Kwasi</TableCell>
499
+ <TableCell>Okafor</TableCell>
500
+ <TableCell>08/11/2010</TableCell>
501
+ <TableCell>02/26/1991</TableCell>
502
+ <TableCell>38</TableCell>
503
+ <TableCell>Mokassie MCHP</TableCell>
504
+ <TableCell>Dashonte Clarke</TableCell>
505
+ <TableCell>Complete</TableCell>
506
+ </TableRow>
507
+ <TableRow>
508
+ <TableCell>Siyabonga</TableCell>
509
+ <TableCell>Abiodun</TableCell>
510
+ <TableCell>07/21/1981</TableCell>
511
+ <TableCell>02/06/2007</TableCell>
512
+ <TableCell>98</TableCell>
513
+ <TableCell>Bathurst MCHP</TableCell>
514
+ <TableCell>Unassigned</TableCell>
515
+ <TableCell>Incomplete</TableCell>
516
+ </TableRow>
517
+ <TableRow>
518
+ <TableCell>Chiyembekezo</TableCell>
519
+ <TableCell>Okeke</TableCell>
520
+ <TableCell>01/23/1982</TableCell>
521
+ <TableCell>07/15/2003</TableCell>
522
+ <TableCell>2</TableCell>
523
+ <TableCell>Mayolla MCHP</TableCell>
524
+ <TableCell>Wan Gengxin</TableCell>
525
+ <TableCell>Incomplete</TableCell>
526
+ </TableRow>
527
+ <TableRow>
528
+ <TableCell>Mtendere</TableCell>
529
+ <TableCell>Afolayan</TableCell>
530
+ <TableCell>08/12/1994</TableCell>
531
+ <TableCell>05/12/1972</TableCell>
532
+ <TableCell>37</TableCell>
533
+ <TableCell>Gbangadu MCHP</TableCell>
534
+ <TableCell>Gvozden Boskovsky</TableCell>
535
+ <TableCell>Complete</TableCell>
536
+ </TableRow>
537
+ <TableRow>
538
+ <TableCell>Inyene</TableCell>
539
+ <TableCell>Okonkwo</TableCell>
540
+ <TableCell>04/01/1971</TableCell>
541
+ <TableCell>03/16/2000</TableCell>
542
+ <TableCell>70</TableCell>
543
+ <TableCell>Kunike Barina</TableCell>
544
+ <TableCell>Oscar de la Cavallería</TableCell>
545
+ <TableCell>Complete</TableCell>
546
+ </TableRow>
547
+ <TableRow>
548
+ <TableCell>Amaka</TableCell>
549
+ <TableCell>Pretorius</TableCell>
550
+ <TableCell>01/25/1996</TableCell>
551
+ <TableCell>09/15/1986</TableCell>
552
+ <TableCell>32</TableCell>
553
+ <TableCell>Bargbo</TableCell>
554
+ <TableCell>Alberto Raya</TableCell>
555
+ <TableCell>Incomplete</TableCell>
556
+ </TableRow>
557
+ <TableRow>
558
+ <TableCell>Meti</TableCell>
559
+ <TableCell>Abiodun</TableCell>
560
+ <TableCell>10/24/2010</TableCell>
561
+ <TableCell>07/26/1989</TableCell>
562
+ <TableCell>8</TableCell>
563
+ <TableCell>Majihun MCHP</TableCell>
564
+ <TableCell>Unassigned</TableCell>
565
+ <TableCell>Complete</TableCell>
566
+ </TableRow>
567
+ <TableRow>
568
+ <TableCell>Eshe</TableCell>
569
+ <TableCell>Okeke</TableCell>
570
+ <TableCell>01/31/1995</TableCell>
571
+ <TableCell>01/31/1995</TableCell>
572
+ <TableCell>63</TableCell>
573
+ <TableCell>Mambiama CHP</TableCell>
574
+ <TableCell>Shadrias Pearson</TableCell>
575
+ <TableCell>Incomplete</TableCell>
576
+ </TableRow>
577
+ <TableRow>
578
+ <TableCell>Obi</TableCell>
579
+ <TableCell>Okafor</TableCell>
580
+ <TableCell>06/07/1990</TableCell>
581
+ <TableCell>01/03/2006</TableCell>
582
+ <TableCell>28</TableCell>
583
+ <TableCell>Dalakuru CHP</TableCell>
584
+ <TableCell>Anatoliy Shcherbatykh</TableCell>
585
+ <TableCell>Incomplete</TableCell>
586
+ </TableRow>
587
+ </TableBody>
588
+ <TableFoot>
589
+ <TableRow>
590
+ <TableCell colSpan="8">
591
+ <TableFooterButton />
592
+ </TableCell>
593
+ </TableRow>
594
+ </TableFoot>
595
+ </Table>
596
+ )
597
+
598
+ export const RTL = (args) => (
599
+ <div dir="rtl">
600
+ <Table {...args}>
601
+ <TableHead>
602
+ <TableRowHead>
603
+ <TableCellHead>First name</TableCellHead>
604
+ <TableCellHead>Last name</TableCellHead>
605
+ <TableCellHead>Incident date</TableCellHead>
606
+ <TableCellHead>Last updated</TableCellHead>
607
+ <TableCellHead>Age</TableCellHead>
608
+ <TableCellHead>Registering unit</TableCellHead>
609
+ <TableCellHead>Assigned user</TableCellHead>
610
+ <TableCellHead>Status</TableCellHead>
611
+ </TableRowHead>
612
+ </TableHead>
613
+ <TableBody>
614
+ <TableRow>
615
+ <TableCell>Onyekachukwu</TableCell>
616
+ <TableCell>Kariuki</TableCell>
617
+ <TableCell>02/06/2007</TableCell>
618
+ <TableCell>05/25/1972</TableCell>
619
+ <TableCell>66</TableCell>
620
+ <TableCell>Jawi</TableCell>
621
+ <TableCell>Sofie Hubert</TableCell>
622
+ <TableCell>Incomplete</TableCell>
623
+ </TableRow>
624
+ <TableRow>
625
+ <TableCell>Kwasi</TableCell>
626
+ <TableCell>Okafor</TableCell>
627
+ <TableCell>08/11/2010</TableCell>
628
+ <TableCell>02/26/1991</TableCell>
629
+ <TableCell>38</TableCell>
630
+ <TableCell>Mokassie MCHP</TableCell>
631
+ <TableCell>Dashonte Clarke</TableCell>
632
+ <TableCell>Complete</TableCell>
633
+ </TableRow>
634
+ <TableRow>
635
+ <TableCell>Siyabonga</TableCell>
636
+ <TableCell>Abiodun</TableCell>
637
+ <TableCell>07/21/1981</TableCell>
638
+ <TableCell>02/06/2007</TableCell>
639
+ <TableCell>98</TableCell>
640
+ <TableCell>Bathurst MCHP</TableCell>
641
+ <TableCell>Unassigned</TableCell>
642
+ <TableCell>Incomplete</TableCell>
643
+ </TableRow>
644
+ <TableRow>
645
+ <TableCell>Chiyembekezo</TableCell>
646
+ <TableCell>Okeke</TableCell>
647
+ <TableCell>01/23/1982</TableCell>
648
+ <TableCell>07/15/2003</TableCell>
649
+ <TableCell>2</TableCell>
650
+ <TableCell>Mayolla MCHP</TableCell>
651
+ <TableCell>Wan Gengxin</TableCell>
652
+ <TableCell>Incomplete</TableCell>
653
+ </TableRow>
654
+ <TableRow>
655
+ <TableCell>Mtendere</TableCell>
656
+ <TableCell>Afolayan</TableCell>
657
+ <TableCell>08/12/1994</TableCell>
658
+ <TableCell>05/12/1972</TableCell>
659
+ <TableCell>37</TableCell>
660
+ <TableCell>Gbangadu MCHP</TableCell>
661
+ <TableCell>Gvozden Boskovsky</TableCell>
662
+ <TableCell>Complete</TableCell>
663
+ </TableRow>
664
+ <TableRow>
665
+ <TableCell>Inyene</TableCell>
666
+ <TableCell>Okonkwo</TableCell>
667
+ <TableCell>04/01/1971</TableCell>
668
+ <TableCell>03/16/2000</TableCell>
669
+ <TableCell>70</TableCell>
670
+ <TableCell>Kunike Barina</TableCell>
671
+ <TableCell>Oscar de la Cavallería</TableCell>
672
+ <TableCell>Complete</TableCell>
673
+ </TableRow>
674
+ <TableRow>
675
+ <TableCell>Amaka</TableCell>
676
+ <TableCell>Pretorius</TableCell>
677
+ <TableCell>01/25/1996</TableCell>
678
+ <TableCell>09/15/1986</TableCell>
679
+ <TableCell>32</TableCell>
680
+ <TableCell>Bargbo</TableCell>
681
+ <TableCell>Alberto Raya</TableCell>
682
+ <TableCell>Incomplete</TableCell>
683
+ </TableRow>
684
+ <TableRow>
685
+ <TableCell>Meti</TableCell>
686
+ <TableCell>Abiodun</TableCell>
687
+ <TableCell>10/24/2010</TableCell>
688
+ <TableCell>07/26/1989</TableCell>
689
+ <TableCell>8</TableCell>
690
+ <TableCell>Majihun MCHP</TableCell>
691
+ <TableCell>Unassigned</TableCell>
692
+ <TableCell>Complete</TableCell>
693
+ </TableRow>
694
+ <TableRow>
695
+ <TableCell>Eshe</TableCell>
696
+ <TableCell>Okeke</TableCell>
697
+ <TableCell>01/31/1995</TableCell>
698
+ <TableCell>01/31/1995</TableCell>
699
+ <TableCell>63</TableCell>
700
+ <TableCell>Mambiama CHP</TableCell>
701
+ <TableCell>Shadrias Pearson</TableCell>
702
+ <TableCell>Incomplete</TableCell>
703
+ </TableRow>
704
+ <TableRow>
705
+ <TableCell>Obi</TableCell>
706
+ <TableCell>Okafor</TableCell>
707
+ <TableCell>06/07/1990</TableCell>
708
+ <TableCell>01/03/2006</TableCell>
709
+ <TableCell>28</TableCell>
710
+ <TableCell>Dalakuru CHP</TableCell>
711
+ <TableCell>Anatoliy Shcherbatykh</TableCell>
712
+ <TableCell>Incomplete</TableCell>
713
+ </TableRow>
714
+ </TableBody>
715
+ <TableFoot>
716
+ <TableRow>
717
+ <TableCell colSpan="8">
718
+ <TableFooterButton />
719
+ </TableCell>
720
+ </TableRow>
721
+ </TableFoot>
722
+ </Table>
723
+ </div>
724
+ )