@progress/kendo-themes-html 6.2.1-dev.0 → 6.2.1-dev.44

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 (116) hide show
  1. package/dist/action-sheet/tests/action-sheet-data-table.js +382 -2
  2. package/dist/action-sheet/tests/action-sheet-data-table.js.map +4 -4
  3. package/dist/dropdowngrid/dropdowngrid.js +1 -1
  4. package/dist/dropdowngrid/dropdowngrid.js.map +2 -2
  5. package/dist/dropdowngrid/tests/dropdowngrid-flat.js +1 -1
  6. package/dist/dropdowngrid/tests/dropdowngrid-flat.js.map +2 -2
  7. package/dist/dropdowngrid/tests/dropdowngrid-outline.js +1 -1
  8. package/dist/dropdowngrid/tests/dropdowngrid-outline.js.map +2 -2
  9. package/dist/dropdowngrid/tests/dropdowngrid.js +1 -1
  10. package/dist/dropdowngrid/tests/dropdowngrid.js.map +2 -2
  11. package/dist/fab/fab-item.js +104 -0
  12. package/dist/fab/fab-item.js.map +7 -0
  13. package/dist/fab/fab-items.js +64 -0
  14. package/dist/fab/fab-items.js.map +7 -0
  15. package/dist/fab/tests/fab-items.js +51 -4
  16. package/dist/fab/tests/fab-items.js.map +4 -4
  17. package/dist/fab/tests/fab-position.js +6 -0
  18. package/dist/fab/tests/fab-position.js.map +4 -4
  19. package/dist/fab/tests/fab-size.js +6 -0
  20. package/dist/fab/tests/fab-size.js.map +4 -4
  21. package/dist/fab/tests/fab-states.js +6 -0
  22. package/dist/fab/tests/fab-states.js.map +4 -4
  23. package/dist/fab/tests/fab.js +6 -0
  24. package/dist/fab/tests/fab.js.map +4 -4
  25. package/dist/grid/tests/grid-rows-resizing.js +1131 -0
  26. package/dist/grid/tests/grid-rows-resizing.js.map +7 -0
  27. package/dist/index.js +711 -184
  28. package/dist/index.js.map +4 -4
  29. package/dist/popup/tests/popup-dropdowngrid.js +508 -0
  30. package/dist/popup/tests/popup-dropdowngrid.js.map +7 -0
  31. package/dist/table/data-table.js +97 -0
  32. package/dist/table/data-table.js.map +7 -0
  33. package/dist/table/table-body.js +67 -0
  34. package/dist/table/table-body.js.map +7 -0
  35. package/dist/table/table-footer.js +66 -0
  36. package/dist/table/table-footer.js.map +7 -0
  37. package/dist/table/table-group-header.js +66 -0
  38. package/dist/table/table-group-header.js.map +7 -0
  39. package/dist/table/table-group-row.js +66 -0
  40. package/dist/table/table-group-row.js.map +7 -0
  41. package/dist/table/table-group-sticky-header.js +66 -0
  42. package/dist/table/table-group-sticky-header.js.map +7 -0
  43. package/dist/table/table-header.js +115 -0
  44. package/dist/table/table-header.js.map +7 -0
  45. package/dist/table/table-list-group-row.js +66 -0
  46. package/dist/table/table-list-group-row.js.map +7 -0
  47. package/dist/table/table-list-row.js +78 -0
  48. package/dist/table/table-list-row.js.map +7 -0
  49. package/dist/table/table-list-td.js +103 -0
  50. package/dist/table/table-list-td.js.map +7 -0
  51. package/dist/table/table-list-th.js +103 -0
  52. package/dist/table/table-list-th.js.map +7 -0
  53. package/dist/table/table-list.js +97 -0
  54. package/dist/table/table-list.js.map +7 -0
  55. package/dist/table/table-row.js +78 -0
  56. package/dist/table/table-row.js.map +7 -0
  57. package/dist/table/table-tbody.js +66 -0
  58. package/dist/table/table-tbody.js.map +7 -0
  59. package/dist/table/table-td.js +105 -0
  60. package/dist/table/table-td.js.map +7 -0
  61. package/dist/table/table-tfoot.js +66 -0
  62. package/dist/table/table-tfoot.js.map +7 -0
  63. package/dist/table/table-th.js +105 -0
  64. package/dist/table/table-th.js.map +7 -0
  65. package/dist/table/table-thead.js +66 -0
  66. package/dist/table/table-thead.js.map +7 -0
  67. package/dist/table/table.js +94 -0
  68. package/dist/table/table.js.map +7 -0
  69. package/dist/table/tests/table-data-sizes.js +392 -1
  70. package/dist/table/tests/table-data-sizes.js.map +4 -4
  71. package/dist/table/tests/table-list-jquery.js +409 -1
  72. package/dist/table/tests/table-list-jquery.js.map +4 -4
  73. package/dist/table/tests/table-list-sizes.js +453 -1
  74. package/dist/table/tests/table-list-sizes.js.map +4 -4
  75. package/dist/table/tests/table-list-virtual.js +373 -1
  76. package/dist/table/tests/table-list-virtual.js.map +4 -4
  77. package/dist/table/tests/table-native-sizes.js +335 -1
  78. package/dist/table/tests/table-native-sizes.js.map +4 -4
  79. package/dist/table/tests/table-native-states.js +299 -1
  80. package/dist/table/tests/table-native-states.js.map +4 -4
  81. package/package.json +2 -2
  82. package/src/action-sheet/tests/action-sheet-data-table.tsx +119 -144
  83. package/src/dropdowngrid/dropdowngrid.tsx +1 -1
  84. package/src/fab/fab-item.tsx +48 -0
  85. package/src/fab/fab-items.tsx +32 -0
  86. package/src/fab/index.ts +2 -0
  87. package/src/fab/tests/fab-items.tsx +65 -250
  88. package/src/grid/tests/grid-rows-resizing.tsx +202 -0
  89. package/src/index.ts +3 -0
  90. package/src/popup/tests/popup-dropdowngrid.tsx +163 -0
  91. package/src/table/data-table.tsx +37 -0
  92. package/src/table/index.ts +19 -0
  93. package/src/table/table-body.tsx +29 -0
  94. package/src/table/table-footer.tsx +28 -0
  95. package/src/table/table-group-header.tsx +28 -0
  96. package/src/table/table-group-row.tsx +28 -0
  97. package/src/table/table-group-sticky-header.tsx +28 -0
  98. package/src/table/table-header.tsx +31 -0
  99. package/src/table/table-list-group-row.tsx +28 -0
  100. package/src/table/table-list-row.tsx +45 -0
  101. package/src/table/table-list-td.tsx +38 -0
  102. package/src/table/table-list-th.tsx +38 -0
  103. package/src/table/table-list.tsx +37 -0
  104. package/src/table/table-row.tsx +45 -0
  105. package/src/table/table-tbody.tsx +28 -0
  106. package/src/table/table-td.tsx +39 -0
  107. package/src/table/table-tfoot.tsx +28 -0
  108. package/src/table/table-th.tsx +39 -0
  109. package/src/table/table-thead.tsx +28 -0
  110. package/src/table/table.tsx +33 -0
  111. package/src/table/tests/table-data-sizes.tsx +205 -228
  112. package/src/table/tests/table-list-jquery.tsx +187 -204
  113. package/src/table/tests/table-list-sizes.tsx +178 -189
  114. package/src/table/tests/table-list-virtual.tsx +76 -79
  115. package/src/table/tests/table-native-sizes.tsx +157 -168
  116. package/src/table/tests/table-native-states.tsx +62 -61
package/src/table/tests/table-data-sizes.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import ReactDOM from 'react-dom/client';
3
+ import { DataTable, Table, TableBody, TableFooter, TableGroupRow, TableHeader, TableRow, TableTbody, TableTd, TableTfoot, TableTh, TableThead } from '../../table';
3
4
 
4
5
  const root = ReactDOM.createRoot(
5
6
  document.getElementById('app') as HTMLElement
@@ -27,252 +28,228 @@ root.render(
27
28
  <span>Data table large</span>
28
29
 
29
30
  <section>
30
- <div className="k-data-table k-table-sm">
31
- <div className="k-table-header">
32
- <div className="k-table-header-wrap">
33
- <table className="k-table">
34
- <colgroup>
35
- <col style={{ width: '50px' }} />
36
- <col style={{ width: "160px" }} />
37
- <col />
38
- </colgroup>
39
- <thead className="k-table-thead">
40
- <tr className="k-table-row">
41
- <th className="k-table-th">ID</th>
42
- <th className="k-table-th">Name</th>
43
- <th className="k-table-th">Job Title</th>
44
- </tr>
45
- </thead>
46
- </table>
47
- </div>
48
- </div>
49
- <div className="k-table-scroller">
50
- <table className="k-table">
31
+ <DataTable size="small">
32
+ <TableHeader>
33
+ <colgroup>
34
+ <col style={{ width: '50px' }} />
35
+ <col style={{ width: '160px' }} />
36
+ <col />
37
+ </colgroup>
38
+ <TableThead>
39
+ <TableRow>
40
+ <TableTh text="ID"></TableTh>
41
+ <TableTh text="Name"></TableTh>
42
+ <TableTh text="Job Title"></TableTh>
43
+ </TableRow>
44
+ </TableThead>
45
+ </TableHeader>
46
+ <TableBody>
47
+ <Table>
51
48
  <colgroup>
52
49
  <col style={{ width: '50px' }} />
53
- <col style={{ width: "160px" }} />
50
+ <col style={{ width: '160px' }} />
54
51
  <col />
55
52
  </colgroup>
56
- <tbody className="k-table-tbody">
57
- <tr className="k-table-group-row">
58
- <th colSpan={3} className="k-table-th">
59
- Group row
60
- </th>
61
- </tr>
62
- <tr className="k-table-row">
63
- <td className="k-table-td">1</td>
64
- <td className="k-table-td">Data 1.2</td>
65
- <td className="k-table-td">Data 1.3</td>
66
- </tr>
67
- <tr className="k-table-row k-table-alt-row">
68
- <td className="k-table-td">2</td>
69
- <td className="k-table-td">Data 2.2 (alt)</td>
70
- <td className="k-table-td">Data 2.3</td>
71
- </tr>
72
- <tr className="k-table-row">
73
- <td className="k-table-td">3</td>
74
- <td className="k-table-td">Data 3.2</td>
75
- <td className="k-table-td">Data 3.3</td>
76
- </tr>
77
- <tr className="k-table-group-row">
78
- <th colSpan={3} className="k-table-th">
79
- Group row
80
- </th>
81
- </tr>
82
- <tr className="k-table-row">
83
- <td className="k-table-td">4</td>
84
- <td className="k-table-td">Data 4.2</td>
85
- <td className="k-table-td">Data 4.3</td>
86
- </tr>
87
- <tr className="k-table-row k-table-alt-row">
88
- <td className="k-table-td">5</td>
89
- <td className="k-table-td">Data 5.2 (alt)</td>
90
- <td className="k-table-td">Data 5.3</td>
91
- </tr>
92
- <tr className="k-table-row">
93
- <td className="k-table-td">6</td>
94
- <td className="k-table-td">Data 6.2</td>
95
- <td className="k-table-td">Data 6.3</td>
96
- </tr>
97
- </tbody>
98
- </table>
99
- </div>
100
- <div className="k-table-footer">
101
- <table className="k-table">
102
- <tfoot className="k-table-tfoot">
103
- <tr className="k-table-row">
104
- <td className="k-table-td">30 records in total</td>
105
- </tr>
106
- </tfoot>
107
- </table>
108
- </div>
109
- </div>
53
+ <TableTbody>
54
+ <TableGroupRow>
55
+ <TableTh text="Group row" colspan="3"></TableTh>
56
+ </TableGroupRow>
57
+ <TableRow>
58
+ <TableTd text="1"></TableTd>
59
+ <TableTd text="Data 1.2"></TableTd>
60
+ <TableTd text="Data 1.3"></TableTd>
61
+ </TableRow>
62
+ <TableRow alt>
63
+ <TableTd text="2"></TableTd>
64
+ <TableTd text="Data 2.2 (alt)"></TableTd>
65
+ <TableTd text="Data 2.3"></TableTd>
66
+ </TableRow>
67
+ <TableRow>
68
+ <TableTd text="3"></TableTd>
69
+ <TableTd text="Data 3.2"></TableTd>
70
+ <TableTd text="Data 3.3"></TableTd>
71
+ </TableRow>
72
+ <TableGroupRow>
73
+ <TableTh text="Group row" colspan="3"></TableTh>
74
+ </TableGroupRow>
75
+ <TableRow>
76
+ <TableTd text="4"></TableTd>
77
+ <TableTd text="Data 4.2"></TableTd>
78
+ <TableTd text="Data 4.3"></TableTd>
79
+ </TableRow>
80
+ <TableRow alt>
81
+ <TableTd text="5"></TableTd>
82
+ <TableTd text="Data 5.2 (alt)"></TableTd>
83
+ <TableTd text="Data 5.3"></TableTd>
84
+ </TableRow>
85
+ <TableRow>
86
+ <TableTd text="6"></TableTd>
87
+ <TableTd text="Data 6.2"></TableTd>
88
+ <TableTd text="Data 6.3"></TableTd>
89
+ </TableRow>
90
+ </TableTbody>
91
+ </Table>
92
+ </TableBody>
93
+ <TableFooter>
94
+ <Table>
95
+ <TableTfoot>
96
+ <TableRow>
97
+ <TableTd text="30 records in total"></TableTd>
98
+ </TableRow>
99
+ </TableTfoot>
100
+ </Table>
101
+ </TableFooter>
102
+ </DataTable>
110
103
  </section>
111
104
 
112
105
  <section>
113
- <div className="k-data-table k-table-md">
114
- <div className="k-table-header">
115
- <div className="k-table-header-wrap">
116
- <table className="k-table">
117
- <colgroup>
118
- <col style={{ width: '50px' }} />
119
- <col style={{ width: "160px" }} />
120
- <col />
121
- </colgroup>
122
- <thead className="k-table-thead">
123
- <tr className="k-table-row">
124
- <th className="k-table-th">ID</th>
125
- <th className="k-table-th">Name</th>
126
- <th className="k-table-th">Job Title</th>
127
- </tr>
128
- </thead>
129
- </table>
130
- </div>
131
- </div>
132
- <div className="k-table-scroller">
133
- <table className="k-table">
106
+ <DataTable size="medium">
107
+ <TableHeader>
108
+ <colgroup>
109
+ <col style={{ width: '50px' }} />
110
+ <col style={{ width: '160px' }} />
111
+ <col />
112
+ </colgroup>
113
+ <TableThead>
114
+ <TableRow>
115
+ <TableTh text="ID"></TableTh>
116
+ <TableTh text="Name"></TableTh>
117
+ <TableTh text="Job Title"></TableTh>
118
+ </TableRow>
119
+ </TableThead>
120
+ </TableHeader>
121
+ <TableBody>
122
+ <Table>
134
123
  <colgroup>
135
124
  <col style={{ width: '50px' }} />
136
- <col style={{ width: "160px" }} />
125
+ <col style={{ width: '160px' }} />
137
126
  <col />
138
127
  </colgroup>
139
- <tbody className="k-table-tbody">
140
- <tr className="k-table-group-row">
141
- <th colSpan={3} className="k-table-th">
142
- Group row
143
- </th>
144
- </tr>
145
- <tr className="k-table-row">
146
- <td className="k-table-td">1</td>
147
- <td className="k-table-td">Data 1.2</td>
148
- <td className="k-table-td">Data 1.3</td>
149
- </tr>
150
- <tr className="k-table-row k-table-alt-row">
151
- <td className="k-table-td">2</td>
152
- <td className="k-table-td">Data 2.2 (alt)</td>
153
- <td className="k-table-td">Data 2.3</td>
154
- </tr>
155
- <tr className="k-table-row">
156
- <td className="k-table-td">3</td>
157
- <td className="k-table-td">Data 3.2</td>
158
- <td className="k-table-td">Data 3.3</td>
159
- </tr>
160
- <tr className="k-table-group-row">
161
- <th colSpan={3} className="k-table-th">
162
- Group row
163
- </th>
164
- </tr>
165
- <tr className="k-table-row">
166
- <td className="k-table-td">4</td>
167
- <td className="k-table-td">Data 4.2</td>
168
- <td className="k-table-td">Data 4.3</td>
169
- </tr>
170
- <tr className="k-table-row k-table-alt-row">
171
- <td className="k-table-td">5</td>
172
- <td className="k-table-td">Data 5.2 (alt)</td>
173
- <td className="k-table-td">Data 5.3</td>
174
- </tr>
175
- <tr className="k-table-row">
176
- <td className="k-table-td">6</td>
177
- <td className="k-table-td">Data 6.2</td>
178
- <td className="k-table-td">Data 6.3</td>
179
- </tr>
180
- </tbody>
181
- </table>
182
- </div>
183
- <div className="k-table-footer">
184
- <table className="k-table">
185
- <tfoot className="k-table-tfoot">
186
- <tr className="k-table-row">
187
- <td className="k-table-td">30 records in total</td>
188
- </tr>
189
- </tfoot>
190
- </table>
191
- </div>
192
- </div>
128
+ <TableTbody>
129
+ <TableGroupRow>
130
+ <TableTh text="Group row" colspan="3"></TableTh>
131
+ </TableGroupRow>
132
+ <TableRow>
133
+ <TableTd text="1"></TableTd>
134
+ <TableTd text="Data 1.2"></TableTd>
135
+ <TableTd text="Data 1.3"></TableTd>
136
+ </TableRow>
137
+ <TableRow alt>
138
+ <TableTd text="2"></TableTd>
139
+ <TableTd text="Data 2.2 (alt)"></TableTd>
140
+ <TableTd text="Data 2.3"></TableTd>
141
+ </TableRow>
142
+ <TableRow>
143
+ <TableTd text="3"></TableTd>
144
+ <TableTd text="Data 3.2"></TableTd>
145
+ <TableTd text="Data 3.3"></TableTd>
146
+ </TableRow>
147
+ <TableGroupRow>
148
+ <TableTh text="Group row" colspan="3"></TableTh>
149
+ </TableGroupRow>
150
+ <TableRow>
151
+ <TableTd text="4"></TableTd>
152
+ <TableTd text="Data 4.2"></TableTd>
153
+ <TableTd text="Data 4.3"></TableTd>
154
+ </TableRow>
155
+ <TableRow alt>
156
+ <TableTd text="5"></TableTd>
157
+ <TableTd text="Data 5.2 (alt)"></TableTd>
158
+ <TableTd text="Data 5.3"></TableTd>
159
+ </TableRow>
160
+ <TableRow>
161
+ <TableTd text="6"></TableTd>
162
+ <TableTd text="Data 6.2"></TableTd>
163
+ <TableTd text="Data 6.3"></TableTd>
164
+ </TableRow>
165
+ </TableTbody>
166
+ </Table>
167
+ </TableBody>
168
+ <TableFooter>
169
+ <Table>
170
+ <TableTfoot>
171
+ <TableRow>
172
+ <TableTd text="30 records in total"></TableTd>
173
+ </TableRow>
174
+ </TableTfoot>
175
+ </Table>
176
+ </TableFooter>
177
+ </DataTable>
193
178
  </section>
194
179
 
195
180
  <section>
196
- <div className="k-data-table k-table-lg">
197
- <div className="k-table-header">
198
- <div className="k-table-header-wrap">
199
- <table className="k-table">
200
- <colgroup>
201
- <col style={{ width: '50px' }} />
202
- <col style={{ width: "160px" }} />
203
- <col />
204
- </colgroup>
205
- <thead className="k-table-thead">
206
- <tr className="k-table-row">
207
- <th className="k-table-th">ID</th>
208
- <th className="k-table-th">Name</th>
209
- <th className="k-table-th">Job Title</th>
210
- </tr>
211
- </thead>
212
- </table>
213
- </div>
214
- </div>
215
- <div className="k-table-scroller">
216
- <table className="k-table">
181
+ <DataTable size="large">
182
+ <TableHeader>
183
+ <colgroup>
184
+ <col style={{ width: '50px' }} />
185
+ <col style={{ width: '160px' }} />
186
+ <col />
187
+ </colgroup>
188
+ <TableThead>
189
+ <TableRow>
190
+ <TableTh text="ID"></TableTh>
191
+ <TableTh text="Name"></TableTh>
192
+ <TableTh text="Job Title"></TableTh>
193
+ </TableRow>
194
+ </TableThead>
195
+ </TableHeader>
196
+ <TableBody>
197
+ <Table>
217
198
  <colgroup>
218
199
  <col style={{ width: '50px' }} />
219
- <col style={{ width: "160px" }} />
200
+ <col style={{ width: '160px' }} />
220
201
  <col />
221
202
  </colgroup>
222
- <tbody className="k-table-tbody">
223
- <tr className="k-table-group-row">
224
- <th colSpan={3} className="k-table-th">
225
- Group row
226
- </th>
227
- </tr>
228
- <tr className="k-table-row">
229
- <td className="k-table-td">1</td>
230
- <td className="k-table-td">Data 1.2</td>
231
- <td className="k-table-td">Data 1.3</td>
232
- </tr>
233
- <tr className="k-table-row k-table-alt-row">
234
- <td className="k-table-td">2</td>
235
- <td className="k-table-td">Data 2.2 (alt)</td>
236
- <td className="k-table-td">Data 2.3</td>
237
- </tr>
238
- <tr className="k-table-row">
239
- <td className="k-table-td">3</td>
240
- <td className="k-table-td">Data 3.2</td>
241
- <td className="k-table-td">Data 3.3</td>
242
- </tr>
243
- <tr className="k-table-group-row">
244
- <th colSpan={3} className="k-table-th">
245
- Group row
246
- </th>
247
- </tr>
248
- <tr className="k-table-row">
249
- <td className="k-table-td">4</td>
250
- <td className="k-table-td">Data 4.2</td>
251
- <td className="k-table-td">Data 4.3</td>
252
- </tr>
253
- <tr className="k-table-row k-table-alt-row">
254
- <td className="k-table-td">5</td>
255
- <td className="k-table-td">Data 5.2 (alt)</td>
256
- <td className="k-table-td">Data 5.3</td>
257
- </tr>
258
- <tr className="k-table-row">
259
- <td className="k-table-td">6</td>
260
- <td className="k-table-td">Data 6.2</td>
261
- <td className="k-table-td">Data 6.3</td>
262
- </tr>
263
- </tbody>
264
- </table>
265
- </div>
266
- <div className="k-table-footer">
267
- <table className="k-table">
268
- <tfoot className="k-table-tfoot">
269
- <tr className="k-table-row">
270
- <td className="k-table-td">30 records in total</td>
271
- </tr>
272
- </tfoot>
273
- </table>
274
- </div>
275
- </div>
203
+ <TableTbody>
204
+ <TableGroupRow>
205
+ <TableTh text="Group row" colspan="3"></TableTh>
206
+ </TableGroupRow>
207
+ <TableRow>
208
+ <TableTd text="1"></TableTd>
209
+ <TableTd text="Data 1.2"></TableTd>
210
+ <TableTd text="Data 1.3"></TableTd>
211
+ </TableRow>
212
+ <TableRow alt>
213
+ <TableTd text="2"></TableTd>
214
+ <TableTd text="Data 2.2 (alt)"></TableTd>
215
+ <TableTd text="Data 2.3"></TableTd>
216
+ </TableRow>
217
+ <TableRow>
218
+ <TableTd text="3"></TableTd>
219
+ <TableTd text="Data 3.2"></TableTd>
220
+ <TableTd text="Data 3.3"></TableTd>
221
+ </TableRow>
222
+ <TableGroupRow>
223
+ <TableTh text="Group row" colspan="3"></TableTh>
224
+ </TableGroupRow>
225
+ <TableRow>
226
+ <TableTd text="4"></TableTd>
227
+ <TableTd text="Data 4.2"></TableTd>
228
+ <TableTd text="Data 4.3"></TableTd>
229
+ </TableRow>
230
+ <TableRow alt>
231
+ <TableTd text="5"></TableTd>
232
+ <TableTd text="Data 5.2 (alt)"></TableTd>
233
+ <TableTd text="Data 5.3"></TableTd>
234
+ </TableRow>
235
+ <TableRow>
236
+ <TableTd text="6"></TableTd>
237
+ <TableTd text="Data 6.2"></TableTd>
238
+ <TableTd text="Data 6.3"></TableTd>
239
+ </TableRow>
240
+ </TableTbody>
241
+ </Table>
242
+ </TableBody>
243
+ <TableFooter>
244
+ <Table>
245
+ <TableTfoot>
246
+ <TableRow>
247
+ <TableTd text="30 records in total"></TableTd>
248
+ </TableRow>
249
+ </TableTfoot>
250
+ </Table>
251
+ </TableFooter>
252
+ </DataTable>
276
253
  </section>
277
254
 
278
255
  </div>