@progress/kendo-themes-html 7.1.1-dev.0 → 7.2.0-dev.0

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 (279) hide show
  1. package/dist/cjs/action-sheet/tests/action-sheet-data-table.js +2 -0
  2. package/dist/cjs/autocomplete/tests/autocomplete-prefix-suffix.js +863 -778
  3. package/dist/cjs/combobox/tests/combobox-prefix-suffix.js +863 -778
  4. package/dist/cjs/dropdowngrid/dropdowngrid.spec.js +2 -0
  5. package/dist/cjs/dropdowngrid/templates/dropdowngrid-adaptive.js +2 -0
  6. package/dist/cjs/dropdowngrid/templates/dropdowngrid-normal.js +2 -0
  7. package/dist/cjs/dropdowngrid/templates/dropdowngrid-popup.js +2 -0
  8. package/dist/cjs/dropdowngrid/templates/dropdowngrid-prefix.js +2 -0
  9. package/dist/cjs/dropdowngrid/templates/dropdowngrid-suffix.js +2 -0
  10. package/dist/cjs/dropdowngrid/tests/dropdowngrid-adaptive.js +2 -0
  11. package/dist/cjs/dropdowngrid/tests/dropdowngrid-flat.js +2 -0
  12. package/dist/cjs/dropdowngrid/tests/dropdowngrid-opened.js +2 -0
  13. package/dist/cjs/dropdowngrid/tests/dropdowngrid-outline.js +2 -0
  14. package/dist/cjs/dropdowngrid/tests/dropdowngrid-prefix-suffix.js +2 -0
  15. package/dist/cjs/dropdowngrid/tests/dropdowngrid-size-rounded.js +2 -0
  16. package/dist/cjs/dropdowngrid/tests/dropdowngrid-solid.js +2 -0
  17. package/dist/cjs/filemanager/templates/filemanager-grid-preview.js +2 -0
  18. package/dist/cjs/filemanager/templates/filemanager-grid.js +2 -0
  19. package/dist/cjs/filemanager/tests/filemanager-gridview-preview.js +763 -678
  20. package/dist/cjs/filemanager/tests/filemanager-gridview.js +2 -0
  21. package/dist/cjs/filemanager/tests/filemanager-listview-preview.js +717 -632
  22. package/dist/cjs/form/tests/form-field-dropdowns.js +862 -777
  23. package/dist/cjs/grid/grid-container.spec.js +46 -0
  24. package/dist/cjs/grid/grid-content.spec.js +46 -0
  25. package/dist/cjs/grid/grid-footer-table.spec.js +283 -0
  26. package/dist/cjs/grid/grid-footer.spec.js +46 -0
  27. package/dist/cjs/grid/grid-grouping-header.spec.js +57 -0
  28. package/dist/cjs/grid/grid-header-cell.spec.js +4446 -0
  29. package/dist/cjs/grid/grid-header-table.spec.js +283 -0
  30. package/dist/cjs/grid/grid-header.spec.js +46 -0
  31. package/dist/cjs/grid/grid-pager.spec.js +6058 -0
  32. package/dist/cjs/grid/grid-table.spec.js +283 -0
  33. package/dist/cjs/grid/grid-toolbar.spec.js +7876 -0
  34. package/dist/cjs/grid/grid.spec.js +120 -0
  35. package/dist/cjs/grid/tests/grid-adaptive-pager.js +2740 -380
  36. package/dist/cjs/grid/tests/grid-adaptive-search.js +1745 -1203
  37. package/dist/cjs/grid/tests/grid-angular.js +3787 -1267
  38. package/dist/cjs/grid/tests/grid-column-menu-angular.js +4095 -115
  39. package/dist/cjs/grid/tests/grid-column-menu-blazor.js +4095 -116
  40. package/dist/cjs/grid/tests/grid-column-reordering-actions.js +1484 -1280
  41. package/dist/cjs/grid/tests/grid-column-reordering.js +1489 -1285
  42. package/dist/cjs/grid/tests/grid-column-resizing-actions.js +2119 -1915
  43. package/dist/cjs/grid/tests/grid-editing-custom-editor.js +1107 -869
  44. package/dist/cjs/grid/tests/grid-editing-inline-angular.js +1972 -1218
  45. package/dist/cjs/grid/tests/grid-editing-inline-blazor.js +1959 -1201
  46. package/dist/cjs/grid/tests/grid-editing.js +1391 -635
  47. package/dist/cjs/grid/tests/grid-filter-menu-angular.js +4092 -100
  48. package/dist/cjs/grid/tests/grid-filter-menu-blazor.js +4089 -101
  49. package/dist/cjs/grid/tests/grid-filter-row-angular.js +1327 -576
  50. package/dist/cjs/grid/tests/grid-filter-row-blazor.js +1313 -554
  51. package/dist/cjs/grid/tests/grid-filter-row.js +1496 -59
  52. package/dist/cjs/grid/tests/grid-grouping-actions.js +1450 -1246
  53. package/dist/cjs/grid/tests/grid-grouping-blazor.js +4162 -141
  54. package/dist/cjs/grid/tests/grid-grouping-detail-template.js +4297 -288
  55. package/dist/cjs/grid/tests/grid-grouping.js +2725 -1934
  56. package/dist/cjs/grid/tests/grid-hierarchy.js +4333 -43
  57. package/dist/cjs/grid/tests/grid-locked-columns-rtl.js +4365 -207
  58. package/dist/cjs/grid/tests/grid-locked-columns.js +4563 -424
  59. package/dist/cjs/grid/tests/grid-long-titles.js +4315 -124
  60. package/dist/cjs/grid/tests/grid-multicolumn-headers.js +4407 -135
  61. package/dist/cjs/grid/tests/grid-no-records.js +8627 -48
  62. package/dist/cjs/grid/tests/grid-pager.js +3120 -550
  63. package/dist/cjs/grid/tests/grid-react-basic.js +8500 -128
  64. package/dist/cjs/grid/tests/grid-react.js +4516 -190
  65. package/dist/cjs/grid/tests/grid-row-reordering.js +1711 -1499
  66. package/dist/cjs/grid/tests/grid-rows-resizing.js +2066 -1308
  67. package/dist/cjs/grid/tests/grid-rows-states.js +8369 -105
  68. package/dist/cjs/grid/tests/grid-rtl-angular.js +3987 -1430
  69. package/dist/cjs/grid/tests/grid-rtl.js +4028 -1469
  70. package/dist/cjs/grid/tests/grid-selection-aggregates.js +3318 -742
  71. package/dist/cjs/grid/tests/grid-size-sm-comp-sm.js +2038 -1537
  72. package/dist/cjs/grid/tests/grid-size-sm.js +1447 -946
  73. package/dist/cjs/grid/tests/grid-sticky-columns-rtl.js +4118 -1505
  74. package/dist/cjs/grid/tests/grid-sticky-columns.js +4445 -177
  75. package/dist/cjs/grid/tests/grid-sticky-multicolumn-headers.js +8571 -53
  76. package/dist/cjs/grid/tests/grid-toolbar.js +1896 -1349
  77. package/dist/cjs/grid/tests/grid-virtualization.js +8968 -450
  78. package/dist/cjs/grid/tests/grid.js +4055 -1496
  79. package/dist/cjs/index.js +2442 -2148
  80. package/dist/cjs/multiselect/templates/multiselect-prefix.js +838 -753
  81. package/dist/cjs/multiselect/templates/multiselect-suffix.js +838 -753
  82. package/dist/cjs/multiselect/tests/multiselect-adaptive.js +844 -759
  83. package/dist/cjs/multiselect/tests/multiselect-flat.js +868 -783
  84. package/dist/cjs/multiselect/tests/multiselect-grouping.js +844 -759
  85. package/dist/cjs/multiselect/tests/multiselect-opened.js +846 -761
  86. package/dist/cjs/multiselect/tests/multiselect-outline.js +868 -783
  87. package/dist/cjs/multiselect/tests/multiselect-prefix-suffix.js +875 -790
  88. package/dist/cjs/multiselect/tests/multiselect-size-rounded.js +847 -762
  89. package/dist/cjs/multiselect/tests/multiselect-solid.js +868 -783
  90. package/dist/cjs/scheduler/tests/scheduler-edit-dialog.js +877 -792
  91. package/dist/cjs/scheduler/tests/scheduler-editing-weekly.js +891 -806
  92. package/dist/cjs/table/table-th.js +2 -0
  93. package/dist/cjs/table/templates/data-table-normal.js +2 -0
  94. package/dist/cjs/table/templates/table-list-virtualization.js +2 -0
  95. package/dist/cjs/table/templates/table-list.js +2 -0
  96. package/dist/cjs/table/templates/table-native.js +2 -0
  97. package/dist/cjs/table/tests/table-data-sizes.js +2 -0
  98. package/dist/cjs/table/tests/table-list-jquery.js +2 -0
  99. package/dist/cjs/table/tests/table-list-sizes.js +2 -0
  100. package/dist/cjs/table/tests/table-list-virtual.js +2 -0
  101. package/dist/cjs/table/tests/table-native-sizes.js +2 -0
  102. package/dist/cjs/table/tests/table-native-states.js +2 -0
  103. package/dist/esm/action-sheet/tests/action-sheet-data-table.js +2 -0
  104. package/dist/esm/autocomplete/tests/autocomplete-prefix-suffix.js +863 -778
  105. package/dist/esm/combobox/tests/combobox-prefix-suffix.js +863 -778
  106. package/dist/esm/dropdowngrid/dropdowngrid.spec.js +2 -0
  107. package/dist/esm/dropdowngrid/templates/dropdowngrid-adaptive.js +2 -0
  108. package/dist/esm/dropdowngrid/templates/dropdowngrid-normal.js +2 -0
  109. package/dist/esm/dropdowngrid/templates/dropdowngrid-popup.js +2 -0
  110. package/dist/esm/dropdowngrid/templates/dropdowngrid-prefix.js +2 -0
  111. package/dist/esm/dropdowngrid/templates/dropdowngrid-suffix.js +2 -0
  112. package/dist/esm/dropdowngrid/tests/dropdowngrid-adaptive.js +2 -0
  113. package/dist/esm/dropdowngrid/tests/dropdowngrid-flat.js +2 -0
  114. package/dist/esm/dropdowngrid/tests/dropdowngrid-opened.js +2 -0
  115. package/dist/esm/dropdowngrid/tests/dropdowngrid-outline.js +2 -0
  116. package/dist/esm/dropdowngrid/tests/dropdowngrid-prefix-suffix.js +2 -0
  117. package/dist/esm/dropdowngrid/tests/dropdowngrid-size-rounded.js +2 -0
  118. package/dist/esm/dropdowngrid/tests/dropdowngrid-solid.js +2 -0
  119. package/dist/esm/filemanager/templates/filemanager-grid-preview.js +2 -0
  120. package/dist/esm/filemanager/templates/filemanager-grid.js +2 -0
  121. package/dist/esm/filemanager/tests/filemanager-gridview-preview.js +763 -678
  122. package/dist/esm/filemanager/tests/filemanager-gridview.js +2 -0
  123. package/dist/esm/filemanager/tests/filemanager-listview-preview.js +717 -632
  124. package/dist/esm/form/tests/form-field-dropdowns.js +862 -777
  125. package/dist/esm/grid/grid-container.spec.js +24 -0
  126. package/dist/esm/grid/grid-content.spec.js +24 -0
  127. package/dist/esm/grid/grid-footer-table.spec.js +261 -0
  128. package/dist/esm/grid/grid-footer.spec.js +24 -0
  129. package/dist/esm/grid/grid-grouping-header.spec.js +35 -0
  130. package/dist/esm/grid/grid-header-cell.spec.js +4430 -0
  131. package/dist/esm/grid/grid-header-table.spec.js +261 -0
  132. package/dist/esm/grid/grid-header.spec.js +24 -0
  133. package/dist/esm/grid/grid-pager.spec.js +6042 -0
  134. package/dist/esm/grid/grid-table.spec.js +261 -0
  135. package/dist/esm/grid/grid-toolbar.spec.js +7860 -0
  136. package/dist/esm/grid/grid.spec.js +98 -0
  137. package/dist/esm/grid/tests/grid-adaptive-pager.js +2740 -380
  138. package/dist/esm/grid/tests/grid-adaptive-search.js +1865 -1323
  139. package/dist/esm/grid/tests/grid-angular.js +3831 -1311
  140. package/dist/esm/grid/tests/grid-column-menu-angular.js +4095 -115
  141. package/dist/esm/grid/tests/grid-column-menu-blazor.js +4095 -116
  142. package/dist/esm/grid/tests/grid-column-reordering-actions.js +2314 -2110
  143. package/dist/esm/grid/tests/grid-column-reordering.js +2320 -2116
  144. package/dist/esm/grid/tests/grid-column-resizing-actions.js +2863 -2659
  145. package/dist/esm/grid/tests/grid-editing-custom-editor.js +1107 -869
  146. package/dist/esm/grid/tests/grid-editing-inline-angular.js +1905 -1151
  147. package/dist/esm/grid/tests/grid-editing-inline-blazor.js +1914 -1156
  148. package/dist/esm/grid/tests/grid-editing.js +1391 -635
  149. package/dist/esm/grid/tests/grid-filter-menu-angular.js +4092 -100
  150. package/dist/esm/grid/tests/grid-filter-menu-blazor.js +4089 -101
  151. package/dist/esm/grid/tests/grid-filter-row-angular.js +1327 -576
  152. package/dist/esm/grid/tests/grid-filter-row-blazor.js +1313 -554
  153. package/dist/esm/grid/tests/grid-filter-row.js +1496 -59
  154. package/dist/esm/grid/tests/grid-grouping-actions.js +2280 -2076
  155. package/dist/esm/grid/tests/grid-grouping-blazor.js +4162 -141
  156. package/dist/esm/grid/tests/grid-grouping-detail-template.js +4297 -288
  157. package/dist/esm/grid/tests/grid-grouping.js +2679 -1888
  158. package/dist/esm/grid/tests/grid-hierarchy.js +4333 -43
  159. package/dist/esm/grid/tests/grid-locked-columns-rtl.js +4366 -208
  160. package/dist/esm/grid/tests/grid-locked-columns.js +4564 -425
  161. package/dist/esm/grid/tests/grid-long-titles.js +4316 -125
  162. package/dist/esm/grid/tests/grid-multicolumn-headers.js +4407 -135
  163. package/dist/esm/grid/tests/grid-no-records.js +8632 -49
  164. package/dist/esm/grid/tests/grid-pager.js +3139 -569
  165. package/dist/esm/grid/tests/grid-react-basic.js +8506 -128
  166. package/dist/esm/grid/tests/grid-react.js +4516 -190
  167. package/dist/esm/grid/tests/grid-row-reordering.js +1385 -1173
  168. package/dist/esm/grid/tests/grid-rows-resizing.js +2145 -1387
  169. package/dist/esm/grid/tests/grid-rows-states.js +8375 -105
  170. package/dist/esm/grid/tests/grid-rtl-angular.js +3974 -1417
  171. package/dist/esm/grid/tests/grid-rtl.js +4022 -1463
  172. package/dist/esm/grid/tests/grid-selection-aggregates.js +3143 -567
  173. package/dist/esm/grid/tests/grid-size-sm-comp-sm.js +2100 -1599
  174. package/dist/esm/grid/tests/grid-size-sm.js +1513 -1012
  175. package/dist/esm/grid/tests/grid-sticky-columns-rtl.js +4113 -1500
  176. package/dist/esm/grid/tests/grid-sticky-columns.js +4445 -177
  177. package/dist/esm/grid/tests/grid-sticky-multicolumn-headers.js +8576 -54
  178. package/dist/esm/grid/tests/grid-toolbar.js +1906 -1359
  179. package/dist/esm/grid/tests/grid-virtualization.js +8975 -451
  180. package/dist/esm/grid/tests/grid.js +4052 -1493
  181. package/dist/esm/index.js +2442 -2148
  182. package/dist/esm/multiselect/templates/multiselect-prefix.js +838 -753
  183. package/dist/esm/multiselect/templates/multiselect-suffix.js +838 -753
  184. package/dist/esm/multiselect/tests/multiselect-adaptive.js +844 -759
  185. package/dist/esm/multiselect/tests/multiselect-flat.js +868 -783
  186. package/dist/esm/multiselect/tests/multiselect-grouping.js +844 -759
  187. package/dist/esm/multiselect/tests/multiselect-opened.js +846 -761
  188. package/dist/esm/multiselect/tests/multiselect-outline.js +868 -783
  189. package/dist/esm/multiselect/tests/multiselect-prefix-suffix.js +875 -790
  190. package/dist/esm/multiselect/tests/multiselect-size-rounded.js +847 -762
  191. package/dist/esm/multiselect/tests/multiselect-solid.js +868 -783
  192. package/dist/esm/scheduler/tests/scheduler-edit-dialog.js +877 -792
  193. package/dist/esm/scheduler/tests/scheduler-editing-weekly.js +891 -806
  194. package/dist/esm/table/table-th.js +2 -0
  195. package/dist/esm/table/templates/data-table-normal.js +2 -0
  196. package/dist/esm/table/templates/table-list-virtualization.js +2 -0
  197. package/dist/esm/table/templates/table-list.js +2 -0
  198. package/dist/esm/table/templates/table-native.js +2 -0
  199. package/dist/esm/table/tests/table-data-sizes.js +2 -0
  200. package/dist/esm/table/tests/table-list-jquery.js +2 -0
  201. package/dist/esm/table/tests/table-list-sizes.js +2 -0
  202. package/dist/esm/table/tests/table-list-virtual.js +2 -0
  203. package/dist/esm/table/tests/table-native-sizes.js +2 -0
  204. package/dist/esm/table/tests/table-native-states.js +2 -0
  205. package/dist/types/grid/grid-container.spec.d.ts +1 -0
  206. package/dist/types/grid/grid-content.spec.d.ts +1 -0
  207. package/dist/types/grid/grid-footer-table.spec.d.ts +3 -0
  208. package/dist/types/grid/grid-footer.spec.d.ts +1 -0
  209. package/dist/types/grid/grid-grouping-header.spec.d.ts +5 -0
  210. package/dist/types/grid/grid-header-cell.spec.d.ts +17 -0
  211. package/dist/types/grid/grid-header-table.spec.d.ts +3 -0
  212. package/dist/types/grid/grid-header.spec.d.ts +1 -0
  213. package/dist/types/grid/grid-pager.spec.d.ts +2 -0
  214. package/dist/types/grid/grid-table.spec.d.ts +3 -0
  215. package/dist/types/grid/grid-toolbar.spec.d.ts +2 -0
  216. package/dist/types/grid/grid.spec.d.ts +28 -0
  217. package/dist/types/grid/index.d.ts +12 -0
  218. package/dist/types/index.d.ts +1 -0
  219. package/dist/types/table/table-th.d.ts +1 -0
  220. package/package.json +2 -2
  221. package/src/grid/grid-container.spec.tsx +17 -0
  222. package/src/grid/grid-content.spec.tsx +16 -0
  223. package/src/grid/grid-footer-table.spec.tsx +20 -0
  224. package/src/grid/grid-footer.spec.tsx +17 -0
  225. package/src/grid/grid-grouping-header.spec.tsx +33 -0
  226. package/src/grid/grid-header-cell.spec.tsx +104 -0
  227. package/src/grid/grid-header-table.spec.tsx +20 -0
  228. package/src/grid/grid-header.spec.tsx +19 -0
  229. package/src/grid/grid-pager.spec.tsx +19 -0
  230. package/src/grid/grid-table.spec.tsx +20 -0
  231. package/src/grid/grid-toolbar.spec.tsx +19 -0
  232. package/src/grid/grid.spec.tsx +67 -0
  233. package/src/grid/index.ts +12 -0
  234. package/src/grid/tests/grid-adaptive-pager.tsx +9 -7
  235. package/src/grid/tests/grid-adaptive-search.tsx +11 -9
  236. package/src/grid/tests/grid-angular.tsx +154 -237
  237. package/src/grid/tests/grid-column-menu-angular.tsx +150 -181
  238. package/src/grid/tests/grid-column-menu-blazor.tsx +121 -189
  239. package/src/grid/tests/grid-column-reordering-actions.tsx +60 -97
  240. package/src/grid/tests/grid-column-reordering.tsx +60 -99
  241. package/src/grid/tests/grid-column-resizing-actions.tsx +60 -97
  242. package/src/grid/tests/grid-editing-custom-editor.tsx +168 -201
  243. package/src/grid/tests/grid-editing-inline-angular.tsx +132 -140
  244. package/src/grid/tests/grid-editing-inline-blazor.tsx +97 -118
  245. package/src/grid/tests/grid-editing.tsx +133 -163
  246. package/src/grid/tests/grid-filter-menu-angular.tsx +171 -174
  247. package/src/grid/tests/grid-filter-menu-blazor.tsx +114 -171
  248. package/src/grid/tests/grid-filter-row-angular.tsx +171 -182
  249. package/src/grid/tests/grid-filter-row-blazor.tsx +116 -153
  250. package/src/grid/tests/grid-filter-row.tsx +110 -109
  251. package/src/grid/tests/grid-grouping-actions.tsx +60 -98
  252. package/src/grid/tests/grid-grouping-blazor.tsx +162 -241
  253. package/src/grid/tests/grid-grouping-detail-template.tsx +383 -375
  254. package/src/grid/tests/grid-grouping.tsx +195 -293
  255. package/src/grid/tests/grid-hierarchy.tsx +82 -93
  256. package/src/grid/tests/grid-locked-columns-rtl.tsx +224 -312
  257. package/src/grid/tests/grid-locked-columns.tsx +414 -572
  258. package/src/grid/tests/grid-long-titles.tsx +122 -210
  259. package/src/grid/tests/grid-multicolumn-headers.tsx +114 -208
  260. package/src/grid/tests/grid-no-records.tsx +60 -82
  261. package/src/grid/tests/grid-pager.tsx +144 -197
  262. package/src/grid/tests/grid-react-basic.tsx +138 -172
  263. package/src/grid/tests/grid-react.tsx +224 -235
  264. package/src/grid/tests/grid-row-reordering.tsx +69 -104
  265. package/src/grid/tests/grid-rows-resizing.tsx +130 -159
  266. package/src/grid/tests/grid-rows-states.tsx +106 -104
  267. package/src/grid/tests/grid-rtl-angular.tsx +114 -168
  268. package/src/grid/tests/grid-rtl.tsx +104 -149
  269. package/src/grid/tests/grid-selection-aggregates.tsx +96 -115
  270. package/src/grid/tests/grid-size-sm-comp-sm.tsx +239 -323
  271. package/src/grid/tests/grid-size-sm.tsx +239 -326
  272. package/src/grid/tests/grid-sticky-columns-rtl.tsx +112 -140
  273. package/src/grid/tests/grid-sticky-columns.tsx +208 -312
  274. package/src/grid/tests/grid-sticky-multicolumn-headers.tsx +52 -159
  275. package/src/grid/tests/grid-toolbar.tsx +43 -43
  276. package/src/grid/tests/grid-virtualization.tsx +614 -758
  277. package/src/grid/tests/grid.tsx +141 -196
  278. package/src/index.ts +1 -1
  279. package/src/table/table-th.tsx +3 -0
package/src/grid/tests/grid-virtualization.tsx CHANGED
@@ -1,4 +1,6 @@
1
1
  import { SkeletonNormal } from "../../skeleton";
2
+ import { Grid, GridHeader, GridContainer, GridContent, GridHeaderTable, GridHeaderCell, GridTable } from '../../grid';
3
+ import { TableThead, TableTbody, TableRow, TableTd } from '../../table';
2
4
 
3
5
  export default () =>(
4
6
  <>
@@ -7,117 +9,44 @@ export default () =>(
7
9
  <span className="col-2">Grid with Virtualization</span>
8
10
 
9
11
  <section className="col-2">
10
- <div className="k-grid k-grid-md k-grid-virtual" style={{ height: "220px", width: "500px" }} >
11
- <div className="k-grid-header">
12
+ <Grid className="k-grid-virtual" style={{ height: "220px", width: "500px" }} >
13
+ <GridHeader>
12
14
  <div className="k-grid-header-wrap">
13
- <table className="k-grid-header-table k-table k-table-md">
15
+ <GridHeaderTable>
14
16
  <colgroup>
15
- <col style={{ width: "110px" }} />
16
- <col style={{ width: "110px" }} />
17
- <col style={{ width: "110px" }} />
18
- <col style={{ width: "110px" }} />
19
- <col style={{ width: "110px" }} />
20
- <col style={{ width: "110px" }} />
21
- <col style={{ width: "110px" }} />
22
- <col style={{ width: "110px" }} />
23
- <col style={{ width: "110px" }} />
24
- <col style={{ width: "110px" }} />
17
+ <col style={{ width: "110px" }}/>
18
+ <col style={{ width: "110px" }}/>
19
+ <col style={{ width: "110px" }}/>
20
+ <col style={{ width: "110px" }}/>
21
+ <col style={{ width: "110px" }}/>
22
+ <col style={{ width: "110px" }}/>
23
+ <col style={{ width: "110px" }}/>
24
+ <col style={{ width: "110px" }}/>
25
+ <col style={{ width: "110px" }}/>
26
+ <col style={{ width: "110px" }}/>
25
27
  </colgroup>
26
-
27
- <thead className="k-table-thead" >
28
- <tr className="k-table-row">
29
- <th className="k-header k-touch-action-none k-table-th ">
30
- <span className="k-cell-inner">
31
- <span className="k-link">
32
- <span className="k-column-title">Field 1</span>
33
- </span>
34
- </span>
35
- <span className="k-column-resizer k-touch-action-none"></span>
36
- </th>
37
- <th className="k-header k-touch-action-none k-table-th ">
38
- <span className="k-cell-inner">
39
- <span className="k-link">
40
- <span className="k-column-title">Field 2</span>
41
- </span>
42
- </span>
43
- <span className="k-column-resizer k-touch-action-none"></span>
44
- </th>
45
- <th className="k-header k-touch-action-none k-table-th">
46
- <span className="k-cell-inner">
47
- <span className="k-link">
48
- <span className="k-column-title">Field 3</span>
49
- </span>
50
- </span>
51
- <span className="k-column-resizer k-touch-action-none"></span>
52
- </th>
53
- <th className="k-header k-touch-action-none k-table-th">
54
- <span className="k-cell-inner">
55
- <span className="k-link">
56
- <span className="k-column-title">Field 4</span>
57
- </span>
58
- </span>
59
- <span className="k-column-resizer k-touch-action-none"></span>
60
- </th>
61
- <th className="k-header k-touch-action-none k-table-th ">
62
-
63
- <span className="k-cell-inner">
64
- <span className="k-link">
65
- <span className="k-column-title">Field 5</span>
66
- </span>
67
- </span>
68
- <span className="k-column-resizer k-touch-action-none"></span>
69
- </th>
70
- <th className="k-header k-touch-action-none k-table-th">
71
- <span className="k-cell-inner">
72
- <span className="k-link">
73
- <span className="k-column-title">Field 6</span>
74
- </span>
75
- </span>
76
- <span className="k-column-resizer k-touch-action-none"></span>
77
- </th>
78
- <th className="k-header k-touch-action-none k-table-th ">
79
- <span className="k-cell-inner">
80
- <span className="k-link">
81
- <span className="k-column-title">Field 7</span>
82
- </span>
83
- </span>
84
- <span className="k-column-resizer k-touch-action-none"></span>
85
- </th>
86
- <th className="k-header k-touch-action-none k-table-th ">
87
- <span className="k-cell-inner">
88
- <span className="k-link">
89
- <span className="k-column-title">Field 8</span>
90
- </span>
91
- </span>
92
- <span className="k-column-resizer k-touch-action-none"></span>
93
- </th>
94
- <th className="k-header k-touch-action-none k-table-th ">
95
- <span className="k-cell-inner">
96
- <span className="k-link">
97
- <span className="k-column-title">Field 9</span>
98
- </span>
99
- </span>
100
- <span className="k-column-resizer k-touch-action-none"></span>
101
- </th>
102
- <th className="k-header k-touch-action-none k-table-th ">
103
- <span className="k-cell-inner">
104
- <span className="k-link">
105
- <span className="k-column-title">Field 10</span>
106
- </span>
107
- </span>
108
- <span className="k-column-resizer k-touch-action-none"></span>
109
- </th>
110
- </tr>
111
- </thead>
112
- </table>
28
+ <TableThead>
29
+ <TableRow>
30
+ <GridHeaderCell columnTitle="Field 1" resizable></GridHeaderCell>
31
+ <GridHeaderCell columnTitle="Field 2" resizable></GridHeaderCell>
32
+ <GridHeaderCell columnTitle="Field 3" resizable></GridHeaderCell>
33
+ <GridHeaderCell columnTitle="Field 4" resizable></GridHeaderCell>
34
+ <GridHeaderCell columnTitle="Field 5" resizable></GridHeaderCell>
35
+ <GridHeaderCell columnTitle="Field 6" resizable></GridHeaderCell>
36
+ <GridHeaderCell columnTitle="Field 7" resizable></GridHeaderCell>
37
+ <GridHeaderCell columnTitle="Field 8" resizable></GridHeaderCell>
38
+ <GridHeaderCell columnTitle="Field 9" resizable></GridHeaderCell>
39
+ <GridHeaderCell columnTitle="Field 10" resizable></GridHeaderCell>
40
+ </TableRow>
41
+ </TableThead>
42
+ </GridHeaderTable>
113
43
  </div>
114
- </div>
115
-
116
- <div className="k-grid-container">
117
- <div className="k-grid-content k-virtual-scroller">
44
+ </GridHeader>
45
+ <GridContainer>
46
+ <GridContent className="k-virtual-scroller">
118
47
  <div className="k-virtual-scroller-wrap">
119
48
  <div className="k-virtual-scroller-content" style={{ transform: "translateY(-600px)" }}>
120
- <table data-role="grid" className="k-grid-table k-table k-table-md" style={{ height: "auto" }}>
49
+ <GridTable style={{ height: "auto" }}>
121
50
  <colgroup>
122
51
  <col style={{ width: "110px" }} />
123
52
  <col style={{ width: "110px" }} />
@@ -130,487 +59,414 @@ export default () =>(
130
59
  <col style={{ width: "110px" }} />
131
60
  <col style={{ width: "110px" }} />
132
61
  </colgroup>
133
- <tbody className="k-table-tbody" >
134
- <tr className="k-master-row k-table-row " style={{ height: "60px" }}>
135
- <td className="k-table-td ">
62
+ <TableTbody>
63
+ <TableRow className="k-master-row" style={{ height: "60px" }}>
64
+ <TableTd>
136
65
  <SkeletonNormal animation={false} />
137
- </td>
138
- <td className="k-table-td ">
66
+ </TableTd>
67
+ <TableTd>
139
68
  <SkeletonNormal animation={false} />
140
- </td>
141
- <td className="k-table-td ">
69
+ </TableTd>
70
+ <TableTd>
142
71
  <SkeletonNormal animation={false} />
143
- </td>
144
- <td className="k-table-td ">
72
+ </TableTd>
73
+ <TableTd>
145
74
  <SkeletonNormal animation={false} />
146
- </td>
147
- <td className="k-table-td ">
75
+ </TableTd>
76
+ <TableTd>
148
77
  <SkeletonNormal animation={false} />
149
- </td>
150
- <td className="k-table-td ">
78
+ </TableTd>
79
+ <TableTd>
151
80
  <SkeletonNormal animation={false} />
152
- </td>
153
- <td className="k-table-td ">
81
+ </TableTd>
82
+ <TableTd>
154
83
  <SkeletonNormal animation={false} />
155
- </td>
156
- <td className="k-table-td ">
84
+ </TableTd>
85
+ <TableTd>
157
86
  <SkeletonNormal animation={false} />
158
- </td>
159
- <td className="k-table-td ">
87
+ </TableTd>
88
+ <TableTd>
160
89
  <SkeletonNormal animation={false} />
161
- </td>
162
- <td className="k-table-td ">
90
+ </TableTd>
91
+ <TableTd>
163
92
  <SkeletonNormal animation={false} />
164
- </td>
165
- </tr>
166
- <tr className="k-master-row k-table-row k-alt k-table-alt-row" style={{ height: "60px" }}>
167
- <td className="k-table-td ">
93
+ </TableTd>
94
+ </TableRow>
95
+ <TableRow alt className="k-master-row k-alt" style={{ height: "60px" }}>
96
+ <TableTd>
168
97
  <SkeletonNormal animation={false} />
169
- </td>
170
- <td className="k-table-td ">
98
+ </TableTd>
99
+ <TableTd>
171
100
  <SkeletonNormal animation={false} />
172
- </td>
173
- <td className="k-table-td ">
101
+ </TableTd>
102
+ <TableTd>
174
103
  <SkeletonNormal animation={false} />
175
- </td>
176
- <td className="k-table-td ">
104
+ </TableTd>
105
+ <TableTd>
177
106
  <SkeletonNormal animation={false} />
178
- </td>
179
- <td className="k-table-td ">
107
+ </TableTd>
108
+ <TableTd>
180
109
  <SkeletonNormal animation={false} />
181
- </td>
182
- <td className="k-table-td ">
110
+ </TableTd>
111
+ <TableTd>
183
112
  <SkeletonNormal animation={false} />
184
- </td>
185
- <td className="k-table-td ">
113
+ </TableTd>
114
+ <TableTd>
186
115
  <SkeletonNormal animation={false} />
187
- </td>
188
- <td className="k-table-td ">
116
+ </TableTd>
117
+ <TableTd>
189
118
  <SkeletonNormal animation={false} />
190
- </td>
191
- <td className="k-table-td ">
119
+ </TableTd>
120
+ <TableTd>
192
121
  <SkeletonNormal animation={false} />
193
- </td>
194
- <td className="k-table-td ">
122
+ </TableTd>
123
+ <TableTd>
195
124
  <SkeletonNormal animation={false} />
196
- </td>
197
- </tr>
198
- <tr className="k-master-row k-table-row " style={{ height: "60px" }}>
199
- <td className="k-table-td ">
125
+ </TableTd>
126
+ </TableRow>
127
+ <TableRow className="k-master-row" style={{ height: "60px" }}>
128
+ <TableTd>
200
129
  <SkeletonNormal animation={false} />
201
- </td>
202
- <td className="k-table-td ">
130
+ </TableTd>
131
+ <TableTd>
203
132
  <SkeletonNormal animation={false} />
204
- </td>
205
- <td className="k-table-td ">
133
+ </TableTd>
134
+ <TableTd>
206
135
  <SkeletonNormal animation={false} />
207
- </td>
208
- <td className="k-table-td ">
136
+ </TableTd>
137
+ <TableTd>
209
138
  <SkeletonNormal animation={false} />
210
- </td>
211
- <td className="k-table-td ">
139
+ </TableTd>
140
+ <TableTd>
212
141
  <SkeletonNormal animation={false} />
213
- </td>
214
- <td className="k-table-td ">
142
+ </TableTd>
143
+ <TableTd>
215
144
  <SkeletonNormal animation={false} />
216
- </td>
217
- <td className="k-table-td ">
145
+ </TableTd>
146
+ <TableTd>
218
147
  <SkeletonNormal animation={false} />
219
- </td>
220
- <td className="k-table-td ">
148
+ </TableTd>
149
+ <TableTd>
221
150
  <SkeletonNormal animation={false} />
222
- </td>
223
- <td className="k-table-td ">
151
+ </TableTd>
152
+ <TableTd>
224
153
  <SkeletonNormal animation={false} />
225
- </td>
226
- <td className="k-table-td ">
154
+ </TableTd>
155
+ <TableTd>
227
156
  <SkeletonNormal animation={false} />
228
- </td>
229
- </tr>
230
- <tr className="k-master-row k-table-row k-alt k-table-alt-row" style={{ height: "60px" }}>
231
- <td className="k-table-td ">
157
+ </TableTd>
158
+ </TableRow>
159
+ <TableRow alt className="k-master-row k-alt" style={{ height: "60px" }}>
160
+ <TableTd>
232
161
  <SkeletonNormal animation={false} />
233
- </td>
234
- <td className="k-table-td ">
162
+ </TableTd>
163
+ <TableTd>
235
164
  <SkeletonNormal animation={false} />
236
- </td>
237
- <td className="k-table-td ">
165
+ </TableTd>
166
+ <TableTd>
238
167
  <SkeletonNormal animation={false} />
239
- </td>
240
- <td className="k-table-td ">
168
+ </TableTd>
169
+ <TableTd>
241
170
  <SkeletonNormal animation={false} />
242
- </td>
243
- <td className="k-table-td ">
171
+ </TableTd>
172
+ <TableTd>
244
173
  <SkeletonNormal animation={false} />
245
- </td>
246
- <td className="k-table-td ">
174
+ </TableTd>
175
+ <TableTd>
247
176
  <SkeletonNormal animation={false} />
248
- </td>
249
- <td className="k-table-td ">
177
+ </TableTd>
178
+ <TableTd>
250
179
  <SkeletonNormal animation={false} />
251
- </td>
252
- <td className="k-table-td ">
180
+ </TableTd>
181
+ <TableTd>
253
182
  <SkeletonNormal animation={false} />
254
- </td>
255
- <td className="k-table-td ">
183
+ </TableTd>
184
+ <TableTd>
256
185
  <SkeletonNormal animation={false} />
257
- </td>
258
- <td className="k-table-td ">
186
+ </TableTd>
187
+ <TableTd>
259
188
  <SkeletonNormal animation={false} />
260
- </td>
261
- </tr>
262
- <tr className="k-master-row k-table-row " style={{ height: "60px" }}>
263
- <td className="k-table-td ">
189
+ </TableTd>
190
+ </TableRow>
191
+ <TableRow className="k-master-row" style={{ height: "60px" }}>
192
+ <TableTd>
264
193
  <SkeletonNormal animation={false} />
265
- </td>
266
- <td className="k-table-td ">
194
+ </TableTd>
195
+ <TableTd>
267
196
  <SkeletonNormal animation={false} />
268
- </td>
269
- <td className="k-table-td ">
197
+ </TableTd>
198
+ <TableTd>
270
199
  <SkeletonNormal animation={false} />
271
- </td>
272
- <td className="k-table-td ">
200
+ </TableTd>
201
+ <TableTd>
273
202
  <SkeletonNormal animation={false} />
274
- </td>
275
- <td className="k-table-td ">
203
+ </TableTd>
204
+ <TableTd>
276
205
  <SkeletonNormal animation={false} />
277
- </td>
278
- <td className="k-table-td ">
206
+ </TableTd>
207
+ <TableTd>
279
208
  <SkeletonNormal animation={false} />
280
- </td>
281
- <td className="k-table-td ">
209
+ </TableTd>
210
+ <TableTd>
282
211
  <SkeletonNormal animation={false} />
283
- </td>
284
- <td className="k-table-td ">
212
+ </TableTd>
213
+ <TableTd>
285
214
  <SkeletonNormal animation={false} />
286
- </td>
287
- <td className="k-table-td ">
215
+ </TableTd>
216
+ <TableTd>
288
217
  <SkeletonNormal animation={false} />
289
- </td>
290
- <td className="k-table-td ">
218
+ </TableTd>
219
+ <TableTd>
291
220
  <SkeletonNormal animation={false} />
292
- </td>
293
- </tr>
294
- <tr className="k-master-row k-table-row k-alt k-table-alt-row" style={{ height: "60px" }}>
295
- <td className="k-table-td ">
221
+ </TableTd>
222
+ </TableRow>
223
+ <TableRow alt className="k-master-row k-alt" style={{ height: "60px" }}>
224
+ <TableTd>
296
225
  <SkeletonNormal animation={false} />
297
- </td>
298
- <td className="k-table-td ">
226
+ </TableTd>
227
+ <TableTd>
299
228
  <SkeletonNormal animation={false} />
300
- </td>
301
- <td className="k-table-td ">
229
+ </TableTd>
230
+ <TableTd>
302
231
  <SkeletonNormal animation={false} />
303
- </td>
304
- <td className="k-table-td ">
232
+ </TableTd>
233
+ <TableTd>
305
234
  <SkeletonNormal animation={false} />
306
- </td>
307
- <td className="k-table-td ">
235
+ </TableTd>
236
+ <TableTd>
308
237
  <SkeletonNormal animation={false} />
309
- </td>
310
- <td className="k-table-td ">
238
+ </TableTd>
239
+ <TableTd>
311
240
  <SkeletonNormal animation={false} />
312
- </td>
313
- <td className="k-table-td ">
241
+ </TableTd>
242
+ <TableTd>
314
243
  <SkeletonNormal animation={false} />
315
- </td>
316
- <td className="k-table-td ">
244
+ </TableTd>
245
+ <TableTd>
317
246
  <SkeletonNormal animation={false} />
318
- </td>
319
- <td className="k-table-td ">
247
+ </TableTd>
248
+ <TableTd>
320
249
  <SkeletonNormal animation={false} />
321
- </td>
322
- <td className="k-table-td ">
250
+ </TableTd>
251
+ <TableTd>
323
252
  <SkeletonNormal animation={false} />
324
- </td>
325
- </tr>
326
- <tr className="k-master-row k-table-row " style={{ height: "60px" }}>
327
- <td className="k-table-td ">
253
+ </TableTd>
254
+ </TableRow>
255
+ <TableRow className="k-master-row" style={{ height: "60px" }}>
256
+ <TableTd>
328
257
  <SkeletonNormal animation={false} />
329
- </td>
330
- <td className="k-table-td ">
258
+ </TableTd>
259
+ <TableTd>
331
260
  <SkeletonNormal animation={false} />
332
- </td>
333
- <td className="k-table-td ">
261
+ </TableTd>
262
+ <TableTd>
334
263
  <SkeletonNormal animation={false} />
335
- </td>
336
- <td className="k-table-td ">
264
+ </TableTd>
265
+ <TableTd>
337
266
  <SkeletonNormal animation={false} />
338
- </td>
339
- <td className="k-table-td ">
267
+ </TableTd>
268
+ <TableTd>
340
269
  <SkeletonNormal animation={false} />
341
- </td>
342
- <td className="k-table-td ">
270
+ </TableTd>
271
+ <TableTd>
343
272
  <SkeletonNormal animation={false} />
344
- </td>
345
- <td className="k-table-td ">
273
+ </TableTd>
274
+ <TableTd>
346
275
  <SkeletonNormal animation={false} />
347
- </td>
348
- <td className="k-table-td ">
276
+ </TableTd>
277
+ <TableTd>
349
278
  <SkeletonNormal animation={false} />
350
- </td>
351
- <td className="k-table-td ">
279
+ </TableTd>
280
+ <TableTd>
352
281
  <SkeletonNormal animation={false} />
353
- </td>
354
- <td className="k-table-td ">
282
+ </TableTd>
283
+ <TableTd>
355
284
  <SkeletonNormal animation={false} />
356
- </td>
357
- </tr>
358
- <tr className="k-master-row k-table-row k-alt k-table-alt-row" style={{ height: "60px" }}>
359
- <td className="k-table-td ">
285
+ </TableTd>
286
+ </TableRow>
287
+ <TableRow alt className="k-master-row k-alt" style={{ height: "60px" }}>
288
+ <TableTd>
360
289
  <SkeletonNormal animation={false} />
361
- </td>
362
- <td className="k-table-td ">
290
+ </TableTd>
291
+ <TableTd>
363
292
  <SkeletonNormal animation={false} />
364
- </td>
365
- <td className="k-table-td ">
293
+ </TableTd>
294
+ <TableTd>
366
295
  <SkeletonNormal animation={false} />
367
- </td>
368
- <td className="k-table-td ">
296
+ </TableTd>
297
+ <TableTd>
369
298
  <SkeletonNormal animation={false} />
370
- </td>
371
- <td className="k-table-td ">
299
+ </TableTd>
300
+ <TableTd>
372
301
  <SkeletonNormal animation={false} />
373
- </td>
374
- <td className="k-table-td ">
302
+ </TableTd>
303
+ <TableTd>
375
304
  <SkeletonNormal animation={false} />
376
- </td>
377
- <td className="k-table-td ">
305
+ </TableTd>
306
+ <TableTd>
378
307
  <SkeletonNormal animation={false} />
379
- </td>
380
- <td className="k-table-td ">
308
+ </TableTd>
309
+ <TableTd>
381
310
  <SkeletonNormal animation={false} />
382
- </td>
383
- <td className="k-table-td ">
311
+ </TableTd>
312
+ <TableTd>
384
313
  <SkeletonNormal animation={false} />
385
- </td>
386
- <td className="k-table-td ">
314
+ </TableTd>
315
+ <TableTd>
387
316
  <SkeletonNormal animation={false} />
388
- </td>
389
- </tr>
390
- <tr className="k-master-row k-table-row " style={{ height: "60px" }}>
391
- <td className="k-table-td ">
317
+ </TableTd>
318
+ </TableRow>
319
+ <TableRow className="k-master-row" style={{ height: "60px" }}>
320
+ <TableTd>
392
321
  <SkeletonNormal animation={false} />
393
- </td>
394
- <td className="k-table-td ">
322
+ </TableTd>
323
+ <TableTd>
395
324
  <SkeletonNormal animation={false} />
396
- </td>
397
- <td className="k-table-td ">
325
+ </TableTd>
326
+ <TableTd>
398
327
  <SkeletonNormal animation={false} />
399
- </td>
400
- <td className="k-table-td ">
328
+ </TableTd>
329
+ <TableTd>
401
330
  <SkeletonNormal animation={false} />
402
- </td>
403
- <td className="k-table-td ">
331
+ </TableTd>
332
+ <TableTd>
404
333
  <SkeletonNormal animation={false} />
405
- </td>
406
- <td className="k-table-td ">
334
+ </TableTd>
335
+ <TableTd>
407
336
  <SkeletonNormal animation={false} />
408
- </td>
409
- <td className="k-table-td ">
337
+ </TableTd>
338
+ <TableTd>
410
339
  <SkeletonNormal animation={false} />
411
- </td>
412
- <td className="k-table-td ">
340
+ </TableTd>
341
+ <TableTd>
413
342
  <SkeletonNormal animation={false} />
414
- </td>
415
- <td className="k-table-td ">
416
- <SkeletonNormal animation={false} />
417
- </td>
418
- <td className="k-table-td ">
419
- <SkeletonNormal animation={false} />
420
- </td>
421
- </tr>
422
- <tr className="k-master-row k-table-row k-alt k-table-alt-row" style={{ height: "60px" }}>
423
- <td className="k-table-td ">
424
- <SkeletonNormal animation={false} />
425
- </td>
426
- <td className="k-table-td ">
427
- <SkeletonNormal animation={false} />
428
- </td>
429
- <td className="k-table-td ">
430
- <SkeletonNormal animation={false} />
431
- </td>
432
- <td className="k-table-td ">
433
- <SkeletonNormal animation={false} />
434
- </td>
435
- <td className="k-table-td ">
436
- <SkeletonNormal animation={false} />
437
- </td>
438
- <td className="k-table-td ">
439
- <SkeletonNormal animation={false} />
440
- </td>
441
- <td className="k-table-td ">
442
- <SkeletonNormal animation={false} />
443
- </td>
444
- <td className="k-table-td ">
445
- <SkeletonNormal animation={false} />
446
- </td>
447
- <td className="k-table-td ">
448
- <SkeletonNormal animation={false} />
449
- </td>
450
- <td className="k-table-td ">
451
- <SkeletonNormal animation={false} />
452
- </td>
453
- </tr>
454
- <tr className="k-master-row k-table-row" style={{ height: "60px" }}>
455
- <td className="k-table-td">Row: 1, Col: 1</td>
456
- <td className="k-table-td">Row: 1, Col: 2</td>
457
- <td className="k-table-td">Row: 1, Col: 3</td>
458
- <td className="k-table-td">Row: 1, Col: 4</td>
459
- <td className="k-table-td">Row: 1, Col: 5</td>
460
- <td className="k-table-td">Row: 1, Col: 6</td>
461
- <td className="k-table-td">Row: 1, Col: 7</td>
462
- <td className="k-table-td">Row: 1, Col: 8</td>
463
- <td className="k-table-td">Row: 1, Col: 9</td>
464
- <td className="k-table-td">Row: 1, Col: 10</td>
465
- </tr>
466
- <tr className="k-master-row k-table-row k-alt k-table-alt-row" style={{ height: "60px" }}>
467
- <td className="k-table-td">Row: 2, Col: 1</td>
468
- <td className="k-table-td">Row: 2, Col: 2</td>
469
- <td className="k-table-td">Row: 2, Col: 3</td>
470
- <td className="k-table-td">Row: 2, Col: 4</td>
471
- <td className="k-table-td">Row: 2, Col: 5</td>
472
- <td className="k-table-td">Row: 2, Col: 6</td>
473
- <td className="k-table-td">Row: 2, Col: 7</td>
474
- <td className="k-table-td">Row: 2, Col: 8</td>
475
- <td className="k-table-td">Row: 2, Col: 9</td>
476
- <td className="k-table-td">Row: 2, Col: 10</td>
477
- </tr>
478
- <tr className="k-master-row k-table-row" style={{ height: "60px" }}>
479
- <td className="k-table-td">Row: 3, Col: 1</td>
480
- <td className="k-table-td">Row: 3, Col: 2</td>
481
- <td className="k-table-td">Row: 3, Col: 3</td>
482
- <td className="k-table-td">Row: 3, Col: 4</td>
483
- <td className="k-table-td">Row: 3, Col: 5</td>
484
- <td className="k-table-td">Row: 3, Col: 6</td>
485
- <td className="k-table-td">Row: 3, Col: 7</td>
486
- <td className="k-table-td">Row: 3, Col: 8</td>
487
- <td className="k-table-td">Row: 3, Col: 9</td>
488
- <td className="k-table-td">Row: 3, Col: 10</td>
489
- </tr>
490
- </tbody>
491
- </table>
343
+ </TableTd>
344
+ <TableTd>
345
+ <SkeletonNormal animation={false} />
346
+ </TableTd>
347
+ <TableTd>
348
+ <SkeletonNormal animation={false} />
349
+ </TableTd>
350
+ </TableRow>
351
+ <TableRow alt className="k-master-row k-alt" style={{ height: "60px" }}>
352
+ <TableTd>
353
+ <SkeletonNormal animation={false} />
354
+ </TableTd>
355
+ <TableTd>
356
+ <SkeletonNormal animation={false} />
357
+ </TableTd>
358
+ <TableTd>
359
+ <SkeletonNormal animation={false} />
360
+ </TableTd>
361
+ <TableTd>
362
+ <SkeletonNormal animation={false} />
363
+ </TableTd>
364
+ <TableTd>
365
+ <SkeletonNormal animation={false} />
366
+ </TableTd>
367
+ <TableTd>
368
+ <SkeletonNormal animation={false} />
369
+ </TableTd>
370
+ <TableTd>
371
+ <SkeletonNormal animation={false} />
372
+ </TableTd>
373
+ <TableTd>
374
+ <SkeletonNormal animation={false} />
375
+ </TableTd>
376
+ <TableTd>
377
+ <SkeletonNormal animation={false} />
378
+ </TableTd>
379
+ <TableTd>
380
+ <SkeletonNormal animation={false} />
381
+ </TableTd>
382
+ </TableRow>
383
+ <TableRow className="k-master-row" style={{ height: "60px" }}>
384
+ <TableTd>Row: 1, Col: 1</TableTd>
385
+ <TableTd>Row: 1, Col: 2</TableTd>
386
+ <TableTd>Row: 1, Col: 3</TableTd>
387
+ <TableTd>Row: 1, Col: 4</TableTd>
388
+ <TableTd>Row: 1, Col: 5</TableTd>
389
+ <TableTd>Row: 1, Col: 6</TableTd>
390
+ <TableTd>Row: 1, Col: 7</TableTd>
391
+ <TableTd>Row: 1, Col: 8</TableTd>
392
+ <TableTd>Row: 1, Col: 9</TableTd>
393
+ <TableTd>Row: 1, Col: 10</TableTd>
394
+ </TableRow>
395
+ <TableRow alt className="k-master-row k-alt" style={{ height: "60px" }}>
396
+ <TableTd>Row: 2, Col: 1</TableTd>
397
+ <TableTd>Row: 2, Col: 2</TableTd>
398
+ <TableTd>Row: 2, Col: 3</TableTd>
399
+ <TableTd>Row: 2, Col: 4</TableTd>
400
+ <TableTd>Row: 2, Col: 5</TableTd>
401
+ <TableTd>Row: 2, Col: 6</TableTd>
402
+ <TableTd>Row: 2, Col: 7</TableTd>
403
+ <TableTd>Row: 2, Col: 8</TableTd>
404
+ <TableTd>Row: 2, Col: 9</TableTd>
405
+ <TableTd>Row: 2, Col: 10</TableTd>
406
+ </TableRow>
407
+ <TableRow className="k-master-row" style={{ height: "60px" }}>
408
+ <TableTd>Row: 3, Col: 1</TableTd>
409
+ <TableTd>Row: 3, Col: 2</TableTd>
410
+ <TableTd>Row: 3, Col: 3</TableTd>
411
+ <TableTd>Row: 3, Col: 4</TableTd>
412
+ <TableTd>Row: 3, Col: 5</TableTd>
413
+ <TableTd>Row: 3, Col: 6</TableTd>
414
+ <TableTd>Row: 3, Col: 7</TableTd>
415
+ <TableTd>Row: 3, Col: 8</TableTd>
416
+ <TableTd>Row: 3, Col: 9</TableTd>
417
+ <TableTd>Row: 3, Col: 10</TableTd>
418
+ </TableRow>
419
+ </TableTbody>
420
+ </GridTable>
492
421
  </div>
493
422
  </div>
494
423
  <div className="k-virtual-scroller-size" style={{ height: "30000px" }}></div>
495
- </div>
496
- </div>
497
- </div>
424
+ </GridContent>
425
+ </GridContainer>
426
+ </Grid>
498
427
  </section>
499
428
 
500
429
  <span className="col-2">Grid with Virtualization RTL</span>
501
430
 
502
431
  <section className="col-2">
503
- <div className="k-grid k-grid-md k-grid-virtual" dir="rtl" style={{ height: "220px", width: "500px" }} >
504
- <div className="k-grid-header">
432
+ <Grid className="k-grid-virtual" dir="rtl" style={{ height: "220px", width: "500px" }} >
433
+ <GridHeader>
505
434
  <div className="k-grid-header-wrap">
506
- <table className="k-grid-header-table k-table k-table-md">
435
+ <GridHeaderTable>
507
436
  <colgroup>
508
- <col style={{ width: "110px" }} />
509
- <col style={{ width: "110px" }} />
510
- <col style={{ width: "110px" }} />
511
- <col style={{ width: "110px" }} />
512
- <col style={{ width: "110px" }} />
513
- <col style={{ width: "110px" }} />
514
- <col style={{ width: "110px" }} />
515
- <col style={{ width: "110px" }} />
516
- <col style={{ width: "110px" }} />
517
- <col style={{ width: "110px" }} />
437
+ <col style={{ width: "110px" }}/>
438
+ <col style={{ width: "110px" }}/>
439
+ <col style={{ width: "110px" }}/>
440
+ <col style={{ width: "110px" }}/>
441
+ <col style={{ width: "110px" }}/>
442
+ <col style={{ width: "110px" }}/>
443
+ <col style={{ width: "110px" }}/>
444
+ <col style={{ width: "110px" }}/>
445
+ <col style={{ width: "110px" }}/>
446
+ <col style={{ width: "110px" }}/>
518
447
  </colgroup>
519
-
520
- <thead className="k-table-thead" >
521
- <tr className="k-table-row">
522
- <th className="k-header k-touch-action-none k-table-th ">
523
- <span className="k-cell-inner">
524
- <span className="k-link">
525
- <span className="k-column-title">Field 1</span>
526
- </span>
527
- </span>
528
- <span className="k-column-resizer k-touch-action-none"></span>
529
- </th>
530
- <th className="k-header k-touch-action-none k-table-th ">
531
- <span className="k-cell-inner">
532
- <span className="k-link">
533
- <span className="k-column-title">Field 2</span>
534
- </span>
535
- </span>
536
- <span className="k-column-resizer k-touch-action-none"></span>
537
- </th>
538
- <th className="k-header k-touch-action-none k-table-th">
539
- <span className="k-cell-inner">
540
- <span className="k-link">
541
- <span className="k-column-title">Field 3</span>
542
- </span>
543
- </span>
544
- <span className="k-column-resizer k-touch-action-none"></span>
545
- </th>
546
- <th className="k-header k-touch-action-none k-table-th">
547
- <span className="k-cell-inner">
548
- <span className="k-link">
549
- <span className="k-column-title">Field 4</span>
550
- </span>
551
- </span>
552
- <span className="k-column-resizer k-touch-action-none"></span>
553
- </th>
554
- <th className="k-header k-touch-action-none k-table-th ">
555
-
556
- <span className="k-cell-inner">
557
- <span className="k-link">
558
- <span className="k-column-title">Field 5</span>
559
- </span>
560
- </span>
561
- <span className="k-column-resizer k-touch-action-none"></span>
562
- </th>
563
- <th className="k-header k-touch-action-none k-table-th">
564
- <span className="k-cell-inner">
565
- <span className="k-link">
566
- <span className="k-column-title">Field 6</span>
567
- </span>
568
- </span>
569
- <span className="k-column-resizer k-touch-action-none"></span>
570
- </th>
571
- <th className="k-header k-touch-action-none k-table-th ">
572
- <span className="k-cell-inner">
573
- <span className="k-link">
574
- <span className="k-column-title">Field 7</span>
575
- </span>
576
- </span>
577
- <span className="k-column-resizer k-touch-action-none"></span>
578
- </th>
579
- <th className="k-header k-touch-action-none k-table-th ">
580
- <span className="k-cell-inner">
581
- <span className="k-link">
582
- <span className="k-column-title">Field 8</span>
583
- </span>
584
- </span>
585
- <span className="k-column-resizer k-touch-action-none"></span>
586
- </th>
587
- <th className="k-header k-touch-action-none k-table-th ">
588
- <span className="k-cell-inner">
589
- <span className="k-link">
590
- <span className="k-column-title">Field 9</span>
591
- </span>
592
- </span>
593
- <span className="k-column-resizer k-touch-action-none"></span>
594
- </th>
595
- <th className="k-header k-touch-action-none k-table-th ">
596
- <span className="k-cell-inner">
597
- <span className="k-link">
598
- <span className="k-column-title">Field 10</span>
599
- </span>
600
- </span>
601
- <span className="k-column-resizer k-touch-action-none"></span>
602
- </th>
603
- </tr>
604
- </thead>
605
- </table>
448
+ <TableThead>
449
+ <TableRow>
450
+ <GridHeaderCell columnTitle="Field 1" resizable></GridHeaderCell>
451
+ <GridHeaderCell columnTitle="Field 2" resizable></GridHeaderCell>
452
+ <GridHeaderCell columnTitle="Field 3" resizable></GridHeaderCell>
453
+ <GridHeaderCell columnTitle="Field 4" resizable></GridHeaderCell>
454
+ <GridHeaderCell columnTitle="Field 5" resizable></GridHeaderCell>
455
+ <GridHeaderCell columnTitle="Field 6" resizable></GridHeaderCell>
456
+ <GridHeaderCell columnTitle="Field 7" resizable></GridHeaderCell>
457
+ <GridHeaderCell columnTitle="Field 8" resizable></GridHeaderCell>
458
+ <GridHeaderCell columnTitle="Field 9" resizable></GridHeaderCell>
459
+ <GridHeaderCell columnTitle="Field 10" resizable></GridHeaderCell>
460
+ </TableRow>
461
+ </TableThead>
462
+ </GridHeaderTable>
606
463
  </div>
607
- </div>
608
-
609
- <div className="k-grid-container">
610
- <div className="k-grid-content k-virtual-scroller">
464
+ </GridHeader>
465
+ <GridContainer>
466
+ <GridContent className="k-virtual-scroller">
611
467
  <div className="k-virtual-scroller-wrap">
612
468
  <div className="k-virtual-scroller-content" style={{ transform: "translateY(-600px)" }}>
613
- <table data-role="grid" className="k-grid-table k-table k-table-md" style={{ height: "auto" }}>
469
+ <GridTable style={{ height: "auto" }}>
614
470
  <colgroup>
615
471
  <col style={{ width: "110px" }} />
616
472
  <col style={{ width: "110px" }} />
@@ -623,371 +479,371 @@ export default () =>(
623
479
  <col style={{ width: "110px" }} />
624
480
  <col style={{ width: "110px" }} />
625
481
  </colgroup>
626
- <tbody className="k-table-tbody" >
627
- <tr className="k-master-row k-table-row " style={{ height: "60px" }}>
628
- <td className="k-table-td ">
482
+ <TableTbody>
483
+ <TableRow className="k-master-row" style={{ height: "60px" }}>
484
+ <TableTd>
629
485
  <SkeletonNormal animation={false} />
630
- </td>
631
- <td className="k-table-td ">
486
+ </TableTd>
487
+ <TableTd>
632
488
  <SkeletonNormal animation={false} />
633
- </td>
634
- <td className="k-table-td ">
489
+ </TableTd>
490
+ <TableTd>
635
491
  <SkeletonNormal animation={false} />
636
- </td>
637
- <td className="k-table-td ">
492
+ </TableTd>
493
+ <TableTd>
638
494
  <SkeletonNormal animation={false} />
639
- </td>
640
- <td className="k-table-td ">
495
+ </TableTd>
496
+ <TableTd>
641
497
  <SkeletonNormal animation={false} />
642
- </td>
643
- <td className="k-table-td ">
498
+ </TableTd>
499
+ <TableTd>
644
500
  <SkeletonNormal animation={false} />
645
- </td>
646
- <td className="k-table-td ">
501
+ </TableTd>
502
+ <TableTd>
647
503
  <SkeletonNormal animation={false} />
648
- </td>
649
- <td className="k-table-td ">
504
+ </TableTd>
505
+ <TableTd>
650
506
  <SkeletonNormal animation={false} />
651
- </td>
652
- <td className="k-table-td ">
507
+ </TableTd>
508
+ <TableTd>
653
509
  <SkeletonNormal animation={false} />
654
- </td>
655
- <td className="k-table-td ">
510
+ </TableTd>
511
+ <TableTd>
656
512
  <SkeletonNormal animation={false} />
657
- </td>
658
- </tr>
659
- <tr className="k-master-row k-table-row k-alt k-table-alt-row" style={{ height: "60px" }}>
660
- <td className="k-table-td ">
513
+ </TableTd>
514
+ </TableRow>
515
+ <TableRow alt className="k-master-row k-alt" style={{ height: "60px" }}>
516
+ <TableTd>
661
517
  <SkeletonNormal animation={false} />
662
- </td>
663
- <td className="k-table-td ">
518
+ </TableTd>
519
+ <TableTd>
664
520
  <SkeletonNormal animation={false} />
665
- </td>
666
- <td className="k-table-td ">
521
+ </TableTd>
522
+ <TableTd>
667
523
  <SkeletonNormal animation={false} />
668
- </td>
669
- <td className="k-table-td ">
524
+ </TableTd>
525
+ <TableTd>
670
526
  <SkeletonNormal animation={false} />
671
- </td>
672
- <td className="k-table-td ">
527
+ </TableTd>
528
+ <TableTd>
673
529
  <SkeletonNormal animation={false} />
674
- </td>
675
- <td className="k-table-td ">
530
+ </TableTd>
531
+ <TableTd>
676
532
  <SkeletonNormal animation={false} />
677
- </td>
678
- <td className="k-table-td ">
533
+ </TableTd>
534
+ <TableTd>
679
535
  <SkeletonNormal animation={false} />
680
- </td>
681
- <td className="k-table-td ">
536
+ </TableTd>
537
+ <TableTd>
682
538
  <SkeletonNormal animation={false} />
683
- </td>
684
- <td className="k-table-td ">
539
+ </TableTd>
540
+ <TableTd>
685
541
  <SkeletonNormal animation={false} />
686
- </td>
687
- <td className="k-table-td ">
542
+ </TableTd>
543
+ <TableTd>
688
544
  <SkeletonNormal animation={false} />
689
- </td>
690
- </tr>
691
- <tr className="k-master-row k-table-row " style={{ height: "60px" }}>
692
- <td className="k-table-td ">
545
+ </TableTd>
546
+ </TableRow>
547
+ <TableRow className="k-master-row" style={{ height: "60px" }}>
548
+ <TableTd>
693
549
  <SkeletonNormal animation={false} />
694
- </td>
695
- <td className="k-table-td ">
550
+ </TableTd>
551
+ <TableTd>
696
552
  <SkeletonNormal animation={false} />
697
- </td>
698
- <td className="k-table-td ">
553
+ </TableTd>
554
+ <TableTd>
699
555
  <SkeletonNormal animation={false} />
700
- </td>
701
- <td className="k-table-td ">
556
+ </TableTd>
557
+ <TableTd>
702
558
  <SkeletonNormal animation={false} />
703
- </td>
704
- <td className="k-table-td ">
559
+ </TableTd>
560
+ <TableTd>
705
561
  <SkeletonNormal animation={false} />
706
- </td>
707
- <td className="k-table-td ">
562
+ </TableTd>
563
+ <TableTd>
708
564
  <SkeletonNormal animation={false} />
709
- </td>
710
- <td className="k-table-td ">
565
+ </TableTd>
566
+ <TableTd>
711
567
  <SkeletonNormal animation={false} />
712
- </td>
713
- <td className="k-table-td ">
568
+ </TableTd>
569
+ <TableTd>
714
570
  <SkeletonNormal animation={false} />
715
- </td>
716
- <td className="k-table-td ">
571
+ </TableTd>
572
+ <TableTd>
717
573
  <SkeletonNormal animation={false} />
718
- </td>
719
- <td className="k-table-td ">
574
+ </TableTd>
575
+ <TableTd>
720
576
  <SkeletonNormal animation={false} />
721
- </td>
722
- </tr>
723
- <tr className="k-master-row k-table-row k-alt k-table-alt-row" style={{ height: "60px" }}>
724
- <td className="k-table-td ">
577
+ </TableTd>
578
+ </TableRow>
579
+ <TableRow alt className="k-master-row k-alt" style={{ height: "60px" }}>
580
+ <TableTd>
725
581
  <SkeletonNormal animation={false} />
726
- </td>
727
- <td className="k-table-td ">
582
+ </TableTd>
583
+ <TableTd>
728
584
  <SkeletonNormal animation={false} />
729
- </td>
730
- <td className="k-table-td ">
585
+ </TableTd>
586
+ <TableTd>
731
587
  <SkeletonNormal animation={false} />
732
- </td>
733
- <td className="k-table-td ">
588
+ </TableTd>
589
+ <TableTd>
734
590
  <SkeletonNormal animation={false} />
735
- </td>
736
- <td className="k-table-td ">
591
+ </TableTd>
592
+ <TableTd>
737
593
  <SkeletonNormal animation={false} />
738
- </td>
739
- <td className="k-table-td ">
594
+ </TableTd>
595
+ <TableTd>
740
596
  <SkeletonNormal animation={false} />
741
- </td>
742
- <td className="k-table-td ">
597
+ </TableTd>
598
+ <TableTd>
743
599
  <SkeletonNormal animation={false} />
744
- </td>
745
- <td className="k-table-td ">
600
+ </TableTd>
601
+ <TableTd>
746
602
  <SkeletonNormal animation={false} />
747
- </td>
748
- <td className="k-table-td ">
603
+ </TableTd>
604
+ <TableTd>
749
605
  <SkeletonNormal animation={false} />
750
- </td>
751
- <td className="k-table-td ">
606
+ </TableTd>
607
+ <TableTd>
752
608
  <SkeletonNormal animation={false} />
753
- </td>
754
- </tr>
755
- <tr className="k-master-row k-table-row " style={{ height: "60px" }}>
756
- <td className="k-table-td ">
609
+ </TableTd>
610
+ </TableRow>
611
+ <TableRow className="k-master-row" style={{ height: "60px" }}>
612
+ <TableTd>
757
613
  <SkeletonNormal animation={false} />
758
- </td>
759
- <td className="k-table-td ">
614
+ </TableTd>
615
+ <TableTd>
760
616
  <SkeletonNormal animation={false} />
761
- </td>
762
- <td className="k-table-td ">
617
+ </TableTd>
618
+ <TableTd>
763
619
  <SkeletonNormal animation={false} />
764
- </td>
765
- <td className="k-table-td ">
620
+ </TableTd>
621
+ <TableTd>
766
622
  <SkeletonNormal animation={false} />
767
- </td>
768
- <td className="k-table-td ">
623
+ </TableTd>
624
+ <TableTd>
769
625
  <SkeletonNormal animation={false} />
770
- </td>
771
- <td className="k-table-td ">
626
+ </TableTd>
627
+ <TableTd>
772
628
  <SkeletonNormal animation={false} />
773
- </td>
774
- <td className="k-table-td ">
629
+ </TableTd>
630
+ <TableTd>
775
631
  <SkeletonNormal animation={false} />
776
- </td>
777
- <td className="k-table-td ">
632
+ </TableTd>
633
+ <TableTd>
778
634
  <SkeletonNormal animation={false} />
779
- </td>
780
- <td className="k-table-td ">
635
+ </TableTd>
636
+ <TableTd>
781
637
  <SkeletonNormal animation={false} />
782
- </td>
783
- <td className="k-table-td ">
638
+ </TableTd>
639
+ <TableTd>
784
640
  <SkeletonNormal animation={false} />
785
- </td>
786
- </tr>
787
- <tr className="k-master-row k-table-row k-alt k-table-alt-row" style={{ height: "60px" }}>
788
- <td className="k-table-td ">
641
+ </TableTd>
642
+ </TableRow>
643
+ <TableRow alt className="k-master-row k-alt" style={{ height: "60px" }}>
644
+ <TableTd>
789
645
  <SkeletonNormal animation={false} />
790
- </td>
791
- <td className="k-table-td ">
646
+ </TableTd>
647
+ <TableTd>
792
648
  <SkeletonNormal animation={false} />
793
- </td>
794
- <td className="k-table-td ">
649
+ </TableTd>
650
+ <TableTd>
795
651
  <SkeletonNormal animation={false} />
796
- </td>
797
- <td className="k-table-td ">
652
+ </TableTd>
653
+ <TableTd>
798
654
  <SkeletonNormal animation={false} />
799
- </td>
800
- <td className="k-table-td ">
655
+ </TableTd>
656
+ <TableTd>
801
657
  <SkeletonNormal animation={false} />
802
- </td>
803
- <td className="k-table-td ">
658
+ </TableTd>
659
+ <TableTd>
804
660
  <SkeletonNormal animation={false} />
805
- </td>
806
- <td className="k-table-td ">
661
+ </TableTd>
662
+ <TableTd>
807
663
  <SkeletonNormal animation={false} />
808
- </td>
809
- <td className="k-table-td ">
664
+ </TableTd>
665
+ <TableTd>
810
666
  <SkeletonNormal animation={false} />
811
- </td>
812
- <td className="k-table-td ">
667
+ </TableTd>
668
+ <TableTd>
813
669
  <SkeletonNormal animation={false} />
814
- </td>
815
- <td className="k-table-td ">
670
+ </TableTd>
671
+ <TableTd>
816
672
  <SkeletonNormal animation={false} />
817
- </td>
818
- </tr>
819
- <tr className="k-master-row k-table-row " style={{ height: "60px" }}>
820
- <td className="k-table-td ">
673
+ </TableTd>
674
+ </TableRow>
675
+ <TableRow className="k-master-row" style={{ height: "60px" }}>
676
+ <TableTd>
821
677
  <SkeletonNormal animation={false} />
822
- </td>
823
- <td className="k-table-td ">
678
+ </TableTd>
679
+ <TableTd>
824
680
  <SkeletonNormal animation={false} />
825
- </td>
826
- <td className="k-table-td ">
681
+ </TableTd>
682
+ <TableTd>
827
683
  <SkeletonNormal animation={false} />
828
- </td>
829
- <td className="k-table-td ">
684
+ </TableTd>
685
+ <TableTd>
830
686
  <SkeletonNormal animation={false} />
831
- </td>
832
- <td className="k-table-td ">
687
+ </TableTd>
688
+ <TableTd>
833
689
  <SkeletonNormal animation={false} />
834
- </td>
835
- <td className="k-table-td ">
690
+ </TableTd>
691
+ <TableTd>
836
692
  <SkeletonNormal animation={false} />
837
- </td>
838
- <td className="k-table-td ">
693
+ </TableTd>
694
+ <TableTd>
839
695
  <SkeletonNormal animation={false} />
840
- </td>
841
- <td className="k-table-td ">
696
+ </TableTd>
697
+ <TableTd>
842
698
  <SkeletonNormal animation={false} />
843
- </td>
844
- <td className="k-table-td ">
699
+ </TableTd>
700
+ <TableTd>
845
701
  <SkeletonNormal animation={false} />
846
- </td>
847
- <td className="k-table-td ">
702
+ </TableTd>
703
+ <TableTd>
848
704
  <SkeletonNormal animation={false} />
849
- </td>
850
- </tr>
851
- <tr className="k-master-row k-table-row k-alt k-table-alt-row" style={{ height: "60px" }}>
852
- <td className="k-table-td ">
705
+ </TableTd>
706
+ </TableRow>
707
+ <TableRow alt className="k-master-row k-alt" style={{ height: "60px" }}>
708
+ <TableTd>
853
709
  <SkeletonNormal animation={false} />
854
- </td>
855
- <td className="k-table-td ">
710
+ </TableTd>
711
+ <TableTd>
856
712
  <SkeletonNormal animation={false} />
857
- </td>
858
- <td className="k-table-td ">
713
+ </TableTd>
714
+ <TableTd>
859
715
  <SkeletonNormal animation={false} />
860
- </td>
861
- <td className="k-table-td ">
716
+ </TableTd>
717
+ <TableTd>
862
718
  <SkeletonNormal animation={false} />
863
- </td>
864
- <td className="k-table-td ">
719
+ </TableTd>
720
+ <TableTd>
865
721
  <SkeletonNormal animation={false} />
866
- </td>
867
- <td className="k-table-td ">
722
+ </TableTd>
723
+ <TableTd>
868
724
  <SkeletonNormal animation={false} />
869
- </td>
870
- <td className="k-table-td ">
725
+ </TableTd>
726
+ <TableTd>
871
727
  <SkeletonNormal animation={false} />
872
- </td>
873
- <td className="k-table-td ">
728
+ </TableTd>
729
+ <TableTd>
874
730
  <SkeletonNormal animation={false} />
875
- </td>
876
- <td className="k-table-td ">
731
+ </TableTd>
732
+ <TableTd>
877
733
  <SkeletonNormal animation={false} />
878
- </td>
879
- <td className="k-table-td ">
734
+ </TableTd>
735
+ <TableTd>
880
736
  <SkeletonNormal animation={false} />
881
- </td>
882
- </tr>
883
- <tr className="k-master-row k-table-row " style={{ height: "60px" }}>
884
- <td className="k-table-td ">
737
+ </TableTd>
738
+ </TableRow>
739
+ <TableRow className="k-master-row" style={{ height: "60px" }}>
740
+ <TableTd>
885
741
  <SkeletonNormal animation={false} />
886
- </td>
887
- <td className="k-table-td ">
742
+ </TableTd>
743
+ <TableTd>
888
744
  <SkeletonNormal animation={false} />
889
- </td>
890
- <td className="k-table-td ">
745
+ </TableTd>
746
+ <TableTd>
891
747
  <SkeletonNormal animation={false} />
892
- </td>
893
- <td className="k-table-td ">
748
+ </TableTd>
749
+ <TableTd>
894
750
  <SkeletonNormal animation={false} />
895
- </td>
896
- <td className="k-table-td ">
751
+ </TableTd>
752
+ <TableTd>
897
753
  <SkeletonNormal animation={false} />
898
- </td>
899
- <td className="k-table-td ">
754
+ </TableTd>
755
+ <TableTd>
900
756
  <SkeletonNormal animation={false} />
901
- </td>
902
- <td className="k-table-td ">
757
+ </TableTd>
758
+ <TableTd>
903
759
  <SkeletonNormal animation={false} />
904
- </td>
905
- <td className="k-table-td ">
760
+ </TableTd>
761
+ <TableTd>
906
762
  <SkeletonNormal animation={false} />
907
- </td>
908
- <td className="k-table-td ">
909
- <SkeletonNormal animation={false} />
910
- </td>
911
- <td className="k-table-td ">
912
- <SkeletonNormal animation={false} />
913
- </td>
914
- </tr>
915
- <tr className="k-master-row k-table-row k-alt k-table-alt-row" style={{ height: "60px" }}>
916
- <td className="k-table-td ">
917
- <SkeletonNormal animation={false} />
918
- </td>
919
- <td className="k-table-td ">
920
- <SkeletonNormal animation={false} />
921
- </td>
922
- <td className="k-table-td ">
923
- <SkeletonNormal animation={false} />
924
- </td>
925
- <td className="k-table-td ">
926
- <SkeletonNormal animation={false} />
927
- </td>
928
- <td className="k-table-td ">
929
- <SkeletonNormal animation={false} />
930
- </td>
931
- <td className="k-table-td ">
932
- <SkeletonNormal animation={false} />
933
- </td>
934
- <td className="k-table-td ">
935
- <SkeletonNormal animation={false} />
936
- </td>
937
- <td className="k-table-td ">
938
- <SkeletonNormal animation={false} />
939
- </td>
940
- <td className="k-table-td ">
941
- <SkeletonNormal animation={false} />
942
- </td>
943
- <td className="k-table-td ">
944
- <SkeletonNormal animation={false} />
945
- </td>
946
- </tr>
947
- <tr className="k-master-row k-table-row" style={{ height: "60px" }}>
948
- <td className="k-table-td">Row: 1, Col: 1</td>
949
- <td className="k-table-td">Row: 1, Col: 2</td>
950
- <td className="k-table-td">Row: 1, Col: 3</td>
951
- <td className="k-table-td">Row: 1, Col: 4</td>
952
- <td className="k-table-td">Row: 1, Col: 5</td>
953
- <td className="k-table-td">Row: 1, Col: 6</td>
954
- <td className="k-table-td">Row: 1, Col: 7</td>
955
- <td className="k-table-td">Row: 1, Col: 8</td>
956
- <td className="k-table-td">Row: 1, Col: 9</td>
957
- <td className="k-table-td">Row: 1, Col: 10</td>
958
- </tr>
959
- <tr className="k-master-row k-table-row k-alt k-table-alt-row" style={{ height: "60px" }}>
960
- <td className="k-table-td">Row: 2, Col: 1</td>
961
- <td className="k-table-td">Row: 2, Col: 2</td>
962
- <td className="k-table-td">Row: 2, Col: 3</td>
963
- <td className="k-table-td">Row: 2, Col: 4</td>
964
- <td className="k-table-td">Row: 2, Col: 5</td>
965
- <td className="k-table-td">Row: 2, Col: 6</td>
966
- <td className="k-table-td">Row: 2, Col: 7</td>
967
- <td className="k-table-td">Row: 2, Col: 8</td>
968
- <td className="k-table-td">Row: 2, Col: 9</td>
969
- <td className="k-table-td">Row: 2, Col: 10</td>
970
- </tr>
971
- <tr className="k-master-row k-table-row" style={{ height: "60px" }}>
972
- <td className="k-table-td">Row: 3, Col: 1</td>
973
- <td className="k-table-td">Row: 3, Col: 2</td>
974
- <td className="k-table-td">Row: 3, Col: 3</td>
975
- <td className="k-table-td">Row: 3, Col: 4</td>
976
- <td className="k-table-td">Row: 3, Col: 5</td>
977
- <td className="k-table-td">Row: 3, Col: 6</td>
978
- <td className="k-table-td">Row: 3, Col: 7</td>
979
- <td className="k-table-td">Row: 3, Col: 8</td>
980
- <td className="k-table-td">Row: 3, Col: 9</td>
981
- <td className="k-table-td">Row: 3, Col: 10</td>
982
- </tr>
983
- </tbody>
984
- </table>
763
+ </TableTd>
764
+ <TableTd>
765
+ <SkeletonNormal animation={false} />
766
+ </TableTd>
767
+ <TableTd>
768
+ <SkeletonNormal animation={false} />
769
+ </TableTd>
770
+ </TableRow>
771
+ <TableRow alt className="k-master-row k-alt" style={{ height: "60px" }}>
772
+ <TableTd>
773
+ <SkeletonNormal animation={false} />
774
+ </TableTd>
775
+ <TableTd>
776
+ <SkeletonNormal animation={false} />
777
+ </TableTd>
778
+ <TableTd>
779
+ <SkeletonNormal animation={false} />
780
+ </TableTd>
781
+ <TableTd>
782
+ <SkeletonNormal animation={false} />
783
+ </TableTd>
784
+ <TableTd>
785
+ <SkeletonNormal animation={false} />
786
+ </TableTd>
787
+ <TableTd>
788
+ <SkeletonNormal animation={false} />
789
+ </TableTd>
790
+ <TableTd>
791
+ <SkeletonNormal animation={false} />
792
+ </TableTd>
793
+ <TableTd>
794
+ <SkeletonNormal animation={false} />
795
+ </TableTd>
796
+ <TableTd>
797
+ <SkeletonNormal animation={false} />
798
+ </TableTd>
799
+ <TableTd>
800
+ <SkeletonNormal animation={false} />
801
+ </TableTd>
802
+ </TableRow>
803
+ <TableRow className="k-master-row" style={{ height: "60px" }}>
804
+ <TableTd>Row: 1, Col: 1</TableTd>
805
+ <TableTd>Row: 1, Col: 2</TableTd>
806
+ <TableTd>Row: 1, Col: 3</TableTd>
807
+ <TableTd>Row: 1, Col: 4</TableTd>
808
+ <TableTd>Row: 1, Col: 5</TableTd>
809
+ <TableTd>Row: 1, Col: 6</TableTd>
810
+ <TableTd>Row: 1, Col: 7</TableTd>
811
+ <TableTd>Row: 1, Col: 8</TableTd>
812
+ <TableTd>Row: 1, Col: 9</TableTd>
813
+ <TableTd>Row: 1, Col: 10</TableTd>
814
+ </TableRow>
815
+ <TableRow alt className="k-master-row k-alt" style={{ height: "60px" }}>
816
+ <TableTd>Row: 2, Col: 1</TableTd>
817
+ <TableTd>Row: 2, Col: 2</TableTd>
818
+ <TableTd>Row: 2, Col: 3</TableTd>
819
+ <TableTd>Row: 2, Col: 4</TableTd>
820
+ <TableTd>Row: 2, Col: 5</TableTd>
821
+ <TableTd>Row: 2, Col: 6</TableTd>
822
+ <TableTd>Row: 2, Col: 7</TableTd>
823
+ <TableTd>Row: 2, Col: 8</TableTd>
824
+ <TableTd>Row: 2, Col: 9</TableTd>
825
+ <TableTd>Row: 2, Col: 10</TableTd>
826
+ </TableRow>
827
+ <TableRow className="k-master-row" style={{ height: "60px" }}>
828
+ <TableTd>Row: 3, Col: 1</TableTd>
829
+ <TableTd>Row: 3, Col: 2</TableTd>
830
+ <TableTd>Row: 3, Col: 3</TableTd>
831
+ <TableTd>Row: 3, Col: 4</TableTd>
832
+ <TableTd>Row: 3, Col: 5</TableTd>
833
+ <TableTd>Row: 3, Col: 6</TableTd>
834
+ <TableTd>Row: 3, Col: 7</TableTd>
835
+ <TableTd>Row: 3, Col: 8</TableTd>
836
+ <TableTd>Row: 3, Col: 9</TableTd>
837
+ <TableTd>Row: 3, Col: 10</TableTd>
838
+ </TableRow>
839
+ </TableTbody>
840
+ </GridTable>
985
841
  </div>
986
842
  </div>
987
843
  <div className="k-virtual-scroller-size" style={{ height: "30000px" }}></div>
988
- </div>
989
- </div>
990
- </div>
844
+ </GridContent>
845
+ </GridContainer>
846
+ </Grid>
991
847
  </section>
992
848
 
993
849
  </div>