@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-locked-columns.tsx CHANGED
@@ -1,5 +1,7 @@
1
1
  import { Checkbox } from '../../checkbox';
2
2
  import { Icon } from '../../icon';
3
+ import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridFooter, GridFooterTable } from '../../grid';
4
+ import { TableThead, TableTbody, TableTfoot, TableRow, TableTd } from '../../table';
3
5
 
4
6
 
5
7
  const styles = `
@@ -17,632 +19,472 @@ export default () =>(
17
19
  <>
18
20
  <style>{styles}</style>
19
21
  <div id="test-area" className="k-d-grid">
20
- <div className="k-grid k-grid-md k-grid-display-block k-reorderable k-grid-lockedcolumns">
21
- <div className="k-grid-header">
22
+ <Grid className="k-grid-display-block k-reordable k-grid-lockedcolumns">
23
+ <GridHeader>
22
24
  <div className="k-grid-header-locked" style={{ width: "400px" }}>
23
- <table className="k-table k-table-md k-grid-header-table">
25
+ <GridHeaderTable>
24
26
  <colgroup>
25
27
  <col style={{ width: "150px" }} />
26
28
  <col style={{ width: "300px" }} />
27
29
  </colgroup>
28
- <thead className="k-table-thead">
29
- <tr className="k-table-row">
30
- <th className="k-table-th k-header k-filterable">
31
- <span className="k-cell-inner">
32
- <span className="k-link">
33
- <span className="k-column-title">Order ID</span>
34
- </span>
35
- <a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon icon="more-vertical" /></a>
36
- </span>
37
- </th>
38
- <th className="k-table-th k-header k-filterable">
39
- <span className="k-cell-inner">
40
- <span className="k-link">
41
- <span className="k-column-title">Ship Name</span>
42
- </span>
43
- <a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon icon="more-vertical" /></a>
44
- </span>
45
- </th>
46
- </tr>
47
- </thead>
48
- </table>
30
+ <TableThead>
31
+ <TableRow>
32
+ <GridHeaderCell className="k-filterable" menu="column" columnTitle="Order ID"></GridHeaderCell>
33
+ <GridHeaderCell className="k-filterable" menu="column" columnTitle="Ship Name"></GridHeaderCell>
34
+ </TableRow>
35
+ </TableThead>
36
+ </GridHeaderTable>
49
37
  </div>
50
38
  <div className="k-grid-header-wrap k-auto-scrollable" style={{ width: "581px" }}>
51
- <table className="k-table k-table-md k-grid-header-table" style={{ width: "1000px" }}>
39
+ <GridHeaderTable>
52
40
  <colgroup>
53
41
  <col style={{ width: "300px" }} />
54
42
  <col style={{ width: "300px" }} />
55
43
  <col style={{ width: "400px" }} />
56
44
  </colgroup>
57
- <thead className="k-table-thead">
58
- <tr className="k-table-row">
59
- <th className="k-table-th k-header k-filterable">
60
- <span className="k-cell-inner">
61
- <span className="k-link">
62
- <span className="k-column-title">Ship Country</span>
63
- </span>
64
- <a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon icon="more-vertical" /></a>
65
- </span>
66
- </th>
67
- <th className="k-table-th k-header k-filterable">
68
- <span className="k-cell-inner">
69
- <span className="k-link">
70
- <span className="k-column-title">Ship City</span>
71
- </span>
72
- <a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon icon="more-vertical" /></a>
73
- </span>
74
- </th>
75
- <th className="k-table-th k-header k-filterable">
76
- <span className="k-cell-inner">
77
- <span className="k-link">
78
- <span className="k-column-title">Ship Address</span>
79
- </span>
80
- <a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon icon="more-vertical" /></a>
81
- </span>
82
- </th>
83
- </tr>
84
- </thead>
85
- </table>
45
+ <TableThead>
46
+ <TableRow>
47
+ <GridHeaderCell className="k-filterable" menu="column" columnTitle="Ship Country"></GridHeaderCell>
48
+ <GridHeaderCell className="k-filterable" menu="column" columnTitle="Ship City"></GridHeaderCell>
49
+ <GridHeaderCell className="k-filterable" menu="column" columnTitle="Ship Address"></GridHeaderCell>
50
+ </TableRow>
51
+ </TableThead>
52
+ </GridHeaderTable>
86
53
  <div className="k-resize-handle" style={{ top: '0px', left: "595.5px", height: "37px", width: "9px" }}>
87
54
  <div className="k-resize-handle-inner"></div>
88
55
  </div>
89
56
  </div>
90
- </div>
91
- <div className="k-grid-content-locked" style={{ width: "400px", height: "303px" }}>
92
- <table className="k-table k-table-md k-grid-table">
93
- <colgroup>
94
- <col style={{ width: "150px" }} />
95
- <col style={{ width: "300px" }} />
96
- </colgroup>
97
- <tbody className="k-table-tbody">
98
- <tr className="k-table-row">
99
- <td className="k-table-td">10248</td>
100
- <td className="k-table-td">Vins et alcools Chevalier</td>
101
- </tr>
102
- <tr className="k-table-row k-table-alt-row k-alt">
103
- <td className="k-table-td">10249</td>
104
- <td className="k-table-td">Toms Spezialitäten</td>
105
- </tr>
106
- <tr className="k-table-row">
107
- <td className="k-table-td">10250</td>
108
- <td className="k-table-td">Hanari Carnes</td>
109
- </tr>
110
- <tr className="k-table-row k-table-alt-row k-alt k-hover">
111
- <td className="k-table-td">10251</td>
112
- <td className="k-table-td">Victuailles en stock (Hovered)</td>
113
- </tr>
114
- <tr className="k-table-row k-selected">
115
- <td className="k-table-td">10252</td>
116
- <td className="k-table-td">Suprêmes délices (Selected)</td>
117
- </tr>
118
- <tr className="k-table-row k-table-alt-row k-alt k-hover k-selected">
119
- <td className="k-table-td">10253</td>
120
- <td className="k-table-td">Hanari (Selected and Hovered)</td>
121
- </tr>
122
- <tr className="k-table-row">
123
- <td className="k-table-td">10254</td>
124
- <td className="k-table-td">Chop-suey Chinese</td>
125
- </tr>
126
- <tr className="k-table-row k-table-alt-row k-alt">
127
- <td className="k-table-td">10255</td>
128
- <td className="k-table-td">Richter Supermarkt</td>
129
- </tr>
130
- </tbody>
131
- </table>
132
- </div>
133
- <div className="k-grid-content k-auto-scrollable" style={{ width: "597px", height: "320px" }}>
134
- <table className="k-table k-table-md k-grid-table" style={{ width: "1000px" }}>
135
- <colgroup>
136
- <col style={{ width: "300px" }} />
137
- <col style={{ width: "300px" }} />
138
- <col style={{ width: "400px" }} />
139
- </colgroup>
140
- <tbody className="k-table-tbody">
141
- <tr className="k-table-row">
142
- <td className="k-table-td">France</td>
143
- <td className="k-table-td">Reims</td>
144
- <td className="k-table-td">59 rue de l&apos;Abbaye</td>
145
- </tr>
146
- <tr className="k-table-row k-table-alt-row k-alt">
147
- <td className="k-table-td">Germany</td>
148
- <td className="k-table-td">Münster</td>
149
- <td className="k-table-td">Luisenstr. 48</td>
150
- </tr>
151
- <tr className="k-table-row">
152
- <td className="k-table-td">Brazil</td>
153
- <td className="k-table-td">Rio de Janeiro</td>
154
- <td className="k-table-td">Rua do Paço, 67</td>
155
- </tr>
156
- <tr className="k-table-row k-table-alt-row k-alt k-hover">
157
- <td className="k-table-td">France</td>
158
- <td className="k-table-td">Lyon</td>
159
- <td className="k-table-td">2, rue du Commerce</td>
160
- </tr>
161
- <tr className="k-table-row k-selected">
162
- <td className="k-table-td">Belgium</td>
163
- <td className="k-table-td">Charleroi</td>
164
- <td className="k-table-td">Boulevard Tirou, 255</td>
165
- </tr>
166
- <tr className="k-table-row k-table-alt-row k-alt k-selected k-hover">
167
- <td className="k-table-td">Brazil</td>
168
- <td className="k-table-td">Rio de Janeiro</td>
169
- <td className="k-table-td">Rua do Paço, 67</td>
170
- </tr>
171
- <tr className="k-table-row">
172
- <td className="k-table-td">Switzerland</td>
173
- <td className="k-table-td">Bern</td>
174
- <td className="k-table-td">Hauptstr. 31</td>
175
- </tr>
176
- <tr className="k-table-row k-table-alt-row k-alt">
177
- <td className="k-table-td">Switzerland</td>
178
- <td className="k-table-td">Genève</td>
179
- <td className="k-table-td">Starenweg 5</td>
180
- </tr>
181
- </tbody>
182
- </table>
183
- </div>
184
- </div>
57
+ </GridHeader>
58
+ <GridContainer>
59
+ <div className="k-grid-content-locked" style={{ width: "400px", height: "303px" }}>
60
+ <GridTable>
61
+ <colgroup>
62
+ <col style={{ width: "150px" }} />
63
+ <col style={{ width: "300px" }} />
64
+ </colgroup>
65
+ <TableTbody>
66
+ <TableRow>
67
+ <TableTd>10248</TableTd>
68
+ <TableTd>Vins et alcools Chevalier</TableTd>
69
+ </TableRow>
70
+ <TableRow className="k-alt" alt>
71
+ <TableTd>10249</TableTd>
72
+ <TableTd>Toms Spezialitäten</TableTd>
73
+ </TableRow>
74
+ <TableRow>
75
+ <TableTd>10250</TableTd>
76
+ <TableTd>Hanari Carnes</TableTd>
77
+ </TableRow>
78
+ <TableRow className="k-alt" alt hover>
79
+ <TableTd>10251</TableTd>
80
+ <TableTd>Victuailles en stock (Hovered)</TableTd>
81
+ </TableRow>
82
+ <TableRow selected>
83
+ <TableTd>10252</TableTd>
84
+ <TableTd>Suprêmes délices (Selected)</TableTd>
85
+ </TableRow>
86
+ <TableRow className="k-alt" alt selected hover>
87
+ <TableTd>10253</TableTd>
88
+ <TableTd>Hanari (Selected and Hovered)</TableTd>
89
+ </TableRow>
90
+ <TableRow>
91
+ <TableTd>10254</TableTd>
92
+ <TableTd>Chop-suey Chinese</TableTd>
93
+ </TableRow>
94
+ <TableRow className="k-alt" alt>
95
+ <TableTd>10255</TableTd>
96
+ <TableTd>Richter Supermarkt</TableTd>
97
+ </TableRow>
98
+ </TableTbody>
99
+ </GridTable>
100
+ </div>
101
+ <GridContent className="k-auto-scrollable" style={{ width: "605px", height: "320px" }}>
102
+ <GridTable style={{ width: "1000px" }}>
103
+ <colgroup>
104
+ <col style={{ width: "300px" }} />
105
+ <col style={{ width: "300px" }} />
106
+ <col style={{ width: "400px" }} />
107
+ </colgroup>
108
+ <TableTbody>
109
+ <TableRow>
110
+ <TableTd>France</TableTd>
111
+ <TableTd>Reims</TableTd>
112
+ <TableTd>59 rue de l&apos;Abbaye</TableTd>
113
+ </TableRow>
114
+ <TableRow className="k-alt" alt>
115
+ <TableTd>Germany</TableTd>
116
+ <TableTd>Münster</TableTd>
117
+ <TableTd>Luisenstr. 48</TableTd>
118
+ </TableRow>
119
+ <TableRow>
120
+ <TableTd>Brazil</TableTd>
121
+ <TableTd>Rio de Janeiro</TableTd>
122
+ <TableTd>Rua do Paço, 67</TableTd>
123
+ </TableRow>
124
+ <TableRow className="k-alt" alt hover>
125
+ <TableTd>France</TableTd>
126
+ <TableTd>Lyon</TableTd>
127
+ <TableTd>2, rue du Commerce</TableTd>
128
+ </TableRow>
129
+ <TableRow selected>
130
+ <TableTd>Belgium</TableTd>
131
+ <TableTd>Charleroi</TableTd>
132
+ <TableTd>Boulevard Tirou, 255</TableTd>
133
+ </TableRow>
134
+ <TableRow className="k-alt" alt selected hover>
135
+ <TableTd>Brazil</TableTd>
136
+ <TableTd>Rio de Janeiro</TableTd>
137
+ <TableTd>Rua do Paço, 67</TableTd>
138
+ </TableRow>
139
+ <TableRow>
140
+ <TableTd>Switzerland</TableTd>
141
+ <TableTd>Bern</TableTd>
142
+ <TableTd>Hauptstr. 31</TableTd>
143
+ </TableRow>
144
+ <TableRow className="k-alt" alt>
145
+ <TableTd>Switzerland</TableTd>
146
+ <TableTd>Genève</TableTd>
147
+ <TableTd>Starenweg 5</TableTd>
148
+ </TableRow>
149
+ </TableTbody>
150
+ </GridTable>
151
+ </GridContent>
152
+ </GridContainer>
153
+ </Grid>
185
154
 
186
155
  <div>
187
156
  <span>jQuery Grid - Frozen columns and sorting</span>
188
- <div style={{ width: "1000px", height: "200px" }} className="k-grid k-grid-md k-grid-display-block k-grid-lockedcolumns">
189
- <div className="k-grid-header">
157
+ <Grid style={{ width: "1000px", height: "200px" }} className="k-grid-display-block k-grid-lockedcolumns">
158
+ <GridHeader>
190
159
  <div className="k-grid-header-locked" style={{ width: "400px" }}>
191
- <table className="k-table k-table-md k-grid-header-table">
160
+ <GridHeaderTable>
192
161
  <colgroup>
193
162
  <col style={{ width: "150px" }} />
194
163
  <col style={{ width: "250px" }} />
195
164
  </colgroup>
196
- <thead className="k-table-thead">
197
- <tr className="k-table-row">
198
- <th rowSpan={1} className="k-table-th k-header">
199
- <span className="k-cell-inner">
200
- <span className="k-link">
201
- <span className="k-column-title">Order ID</span>
202
- </span>
203
- </span>
204
- </th>
205
- <th rowSpan={1} className="k-table-th k-header k-sorted">
206
- <span className="k-cell-inner">
207
- <span className="k-link">
208
- <span className="k-column-title">Ship Name</span>
209
- <span className="k-sort-icon"><Icon icon="sort-desc-small" /></span>
210
- <span className="k-sort-order">1</span>
211
- </span>
212
- </span>
213
- </th>
214
- </tr>
215
- </thead>
216
- </table>
165
+ <TableThead>
166
+ <TableRow>
167
+ <GridHeaderCell rowspan={1} columnTitle="Order ID"></GridHeaderCell>
168
+ <GridHeaderCell sortable sortIcon="sort-desc-small" sortOrder={1} rowspan={1} columnTitle="Ship Name"></GridHeaderCell>
169
+ </TableRow>
170
+ </TableThead>
171
+ </GridHeaderTable>
217
172
  </div>
218
173
  <div className="k-grid-header-wrap k-auto-scrollable" style={{ width: "581px" }}>
219
- <table className="k-table k-table-md k-grid-header-table" style={{ width: "900px" }}>
174
+ <GridHeaderTable style={{ width: "900px" }}>
220
175
  <colgroup>
221
176
  <col style={{ width: "400px" }} />
222
177
  <col style={{ width: "500px" }} />
223
178
  </colgroup>
224
- <thead className="k-table-thead">
225
- <tr className="k-table-row">
226
- <th rowSpan={1} className="k-table-th k-header k-sorted">
227
- <span className="k-cell-inner">
228
- <span className="k-link">
229
- <span className="k-column-title">Ship Country</span>
230
- <span className="k-sort-icon"><Icon icon="sort-asc-small" /></span>
231
- <span className="k-sort-order">2</span>
232
- </span>
233
- </span>
234
- </th>
235
- <th rowSpan={1} className="k-table-th k-header">
236
- <span className="k-cell-inner">
237
- <span className="k-link">
238
- <span className="k-column-title">Ship City</span>
239
- </span>
240
- </span>
241
- </th>
242
- </tr>
243
- </thead>
244
- </table>
179
+ <TableThead>
180
+ <TableRow>
181
+ <GridHeaderCell sortable sortOrder={2} rowspan={1} columnTitle="Ship Country"></GridHeaderCell>
182
+ <GridHeaderCell rowspan={1} columnTitle="Ship City"></GridHeaderCell>
183
+ </TableRow>
184
+ </TableThead>
185
+ </GridHeaderTable>
245
186
  </div>
246
- </div>
247
- <div className="k-grid-content-locked" style={{ width: "400px", height: "146px" }}>
248
- <table className="k-table k-table-md k-grid-table">
249
- <colgroup>
250
- <col style={{ width: "150px" }} />
251
- <col style={{ width: "250px" }} className="k-sorted" />
252
- </colgroup>
253
- <tbody className="k-table-tbody">
254
- <tr className="k-table-row">
255
- <td className="k-table-td">10374</td>
256
- <td className="k-table-td">Wolski Zajazd</td>
257
- </tr>
258
- <tr className="k-table-row k-table-alt-row k-alt">
259
- <td className="k-table-td">10611</td>
260
- <td className="k-table-td">Wolski Zajazd</td>
261
- </tr>
262
- <tr className="k-table-row">
263
- <td className="k-table-td">10792</td>
264
- <td className="k-table-td">Wolski Zajazd</td>
265
- </tr>
266
- <tr className="k-table-row k-table-alt-row k-alt">
267
- <td className="k-table-td">10792</td>
268
- <td className="k-table-td">Wolski Zajazd</td>
269
- </tr>
270
- </tbody>
271
- </table>
272
- </div><div className="k-grid-content k-auto-scrollable" style={{ width: "597px", height: "161px" }}>
273
- <table className="k-table k-table-md k-grid-table" role="grid" style={{ height: 'auto', width: "900px" }}>
274
- <colgroup>
275
- <col style={{ width: "400px" }} className="k-sorted" />
276
- <col style={{ width: "500px" }} />
277
- </colgroup>
278
- <tbody className="k-table-tbody">
279
- <tr className="k-table-row">
280
- <td className="k-table-td">Poland</td>
281
- <td className="k-table-td">Warszawa</td>
282
- </tr>
283
- <tr className="k-table-row k-table-alt-row k-alt">
284
- <td className="k-table-td">Poland</td>
285
- <td className="k-table-td">Warszawa</td>
286
- </tr>
287
- <tr className="k-table-row">
288
- <td className="k-table-td">Poland</td>
289
- <td className="k-table-td">Warszawa</td>
290
- </tr>
291
- <tr className="k-table-row k-table-alt-row k-alt">
292
- <td className="k-table-td">Poland</td>
293
- <td className="k-table-td">Warszawa</td>
294
- </tr>
295
- </tbody>
296
- </table>
297
- </div>
298
- </div>
299
-
187
+ </GridHeader>
188
+ <GridContainer>
189
+ <div className="k-grid-content-locked" style={{ width: "400px", height: "146px" }}>
190
+ <GridTable>
191
+ <colgroup>
192
+ <col style={{ width: "150px" }} />
193
+ <col style={{ width: "250px" }} className="k-sorted" />
194
+ </colgroup>
195
+ <TableTbody>
196
+ <TableRow>
197
+ <TableTd>10374</TableTd>
198
+ <TableTd>Wolski Zajazd</TableTd>
199
+ </TableRow>
200
+ <TableRow className="k-alt" alt>
201
+ <TableTd>10611</TableTd>
202
+ <TableTd>Wolski Zajazd</TableTd>
203
+ </TableRow>
204
+ <TableRow>
205
+ <TableTd>10792</TableTd>
206
+ <TableTd>Wolski Zajazd</TableTd>
207
+ </TableRow>
208
+ <TableRow className="k-alt" alt>
209
+ <TableTd>10792</TableTd>
210
+ <TableTd>Wolski Zajazd</TableTd>
211
+ </TableRow>
212
+ </TableTbody>
213
+ </GridTable>
214
+ </div>
215
+ <GridContent className="k-auto-scrollable" style={{ width: "597px", height: "161px" }}>
216
+ <GridTable role="grid" style={{ height: 'auto', width: "900px" }}>
217
+ <colgroup>
218
+ <col style={{ width: "400px" }} className="k-sorted" />
219
+ <col style={{ width: "500px" }} />
220
+ </colgroup>
221
+ <TableTbody>
222
+ <TableRow>
223
+ <TableTd>Poland</TableTd>
224
+ <TableTd>Warszawa</TableTd>
225
+ </TableRow>
226
+ <TableRow className="k-alt" alt>
227
+ <TableTd>Poland</TableTd>
228
+ <TableTd>Warszawa</TableTd>
229
+ </TableRow>
230
+ <TableRow>
231
+ <TableTd>Poland</TableTd>
232
+ <TableTd>Warszawa</TableTd>
233
+ </TableRow>
234
+ <TableRow className="k-alt" alt>
235
+ <TableTd>Poland</TableTd>
236
+ <TableTd>Warszawa</TableTd>
237
+ </TableRow>
238
+ </TableTbody>
239
+ </GridTable>
240
+ </GridContent>
241
+ </GridContainer>
242
+ </Grid>
300
243
  </div>
301
244
 
302
245
  <div>
303
246
  <span>Angular Grid with locked columns, Grouping and Multiline headers</span>
304
- <div className="k-grid k-grid-md k-grid-lockedcolumns grid-styling-overrides" style={{ height: "430px" }}>
305
- <div className="k-grid-aria-root">
306
- <div className="k-grid-header">
307
- <div className="k-grid-header-locked" style={{ width: "582px" }}>
308
- <table className="k-table k-table-md k-grid-header-table" style={{ width: "582px" }}>
247
+ <Grid className="k-grid-lockedcolumns grid-styling-overrides" style={{ height: "430px" }}>
248
+ <GridHeader>
249
+ <div className="k-grid-header-locked" style={{ width: "582px" }}>
250
+ <GridHeaderTable>
251
+ <colgroup>
252
+ <col className="k-group-col" />
253
+ <col style={{ width: "200px" }} />
254
+ <col style={{ width: "350px" }} />
255
+ </colgroup>
256
+ <TableThead>
257
+ <TableRow style={{ height: "38px" }}>
258
+ <GridHeaderCell className="k-group-cell"></GridHeaderCell>
259
+ <GridHeaderCell rowspan={2} colspan={1} columnTitle="Product ID"></GridHeaderCell>
260
+ <GridHeaderCell rowspan={2} colspan={1} columnTitle="Product Name"></GridHeaderCell>
261
+ </TableRow>
262
+ <TableRow style={{ height: "38px" }}>
263
+ <GridHeaderCell className="k-group-cell"></GridHeaderCell>
264
+ </TableRow>
265
+ </TableThead>
266
+ </GridHeaderTable>
267
+ </div>
268
+ <div className="k-grid-header-wrap">
269
+ <GridHeaderTable>
270
+ <colgroup>
271
+ <col style={{ height: "120px" }} />
272
+ <col style={{ height: "120px" }} />
273
+ <col style={{ height: "120px" }} />
274
+ <col style={{ height: "120px" }} />
275
+ </colgroup>
276
+ <TableThead>
277
+ <TableRow style={{ height: "38px" }}>
278
+ <GridHeaderCell rowspan={1} colspan={3} columnTitle="Availability"></GridHeaderCell>
279
+ <GridHeaderCell rowspan={2} colspan={1} columnTitle="Discontinued"></GridHeaderCell>
280
+ </TableRow>
281
+ <TableRow style={{ height: "38px" }}>
282
+ <GridHeaderCell rowspan={1} colspan={1} columnTitle="Unit Price"></GridHeaderCell>
283
+ <GridHeaderCell rowspan={1} colspan={1} columnTitle="Units On Order"></GridHeaderCell>
284
+ <GridHeaderCell rowspan={1} colspan={1} columnTitle="Units In Stock"></GridHeaderCell>
285
+ </TableRow>
286
+ </TableThead>
287
+ </GridHeaderTable>
288
+ </div>
289
+ </GridHeader>
290
+ <GridContainer>
291
+ <div className="k-grid-content-locked" style={{ width: "582px", height: "570px" }}>
292
+ <div className="k-grid-table-wrap">
293
+ <GridTable style={{ width: "582px" }}>
309
294
  <colgroup>
310
295
  <col className="k-group-col" />
311
- <col style={{ width: "200px" }} />
296
+ <col style={{ width: "200px" }}/>
312
297
  <col style={{ width: "350px" }} />
313
298
  </colgroup>
314
- <thead className="k-table-thead">
315
- <tr className="k-table-row" style={{ height: "38px" }}>
316
- <th className="k-table-th k-group-cell k-header"></th>
317
- <th className="k-table-th k-header" rowSpan={2} colSpan={1}>
318
- <span className="k-cell-inner">
319
- <span className="k-link">
320
- <span className="k-column-title">Product ID</span>
321
- </span>
322
- </span>
323
- </th>
324
- <th className="k-table-th k-header" rowSpan={2} colSpan={1}>
325
- <span className="k-cell-inner">
326
- <span className="k-link">
327
- <span className="k-column-title">Product Name</span>
328
- </span>
329
- </span>
330
- </th>
331
- </tr>
332
- <tr className="k-table-row" style={{ height: "38px" }}>
333
- <th className="k-table-th k-group-cell k-header"></th>
334
- </tr>
335
- </thead>
336
- </table>
337
- </div>
338
- <div className="k-grid-header-wrap">
339
- <table className="k-table k-table-md k-grid-header-table">
340
- <colgroup>
341
- <col style={{ height: "120px" }} />
342
- <col style={{ height: "120px" }} />
343
- <col style={{ height: "120px" }} />
344
- <col style={{ height: "120px" }} />
345
- </colgroup>
346
- <thead className="k-table-thead">
347
- <tr className="k-table-row" style={{ height: "38px" }}>
348
- <th className="k-table-th k-header" rowSpan={1} colSpan={3}>
349
- <span className="k-cell-inner">
350
- <span className="k-link">
351
- <span className="k-column-title">Availability</span>
352
- </span>
353
- </span>
354
- </th>
355
- <th className="k-table-th k-header" rowSpan={2} colSpan={1}>
356
- <span className="k-cell-inner">
357
- <span className="k-link">
358
- <span className="k-column-title">Discontinued</span>
359
- </span>
360
- </span>
361
- </th>
362
- </tr>
363
- <tr className="k-table-row" style={{ height: "38px" }}>
364
- <th className="k-table-th k-header" rowSpan={1} colSpan={1}>
365
- <span className="k-cell-inner">
366
- <span className="k-link">
367
- <span className="k-column-title">Unit Price</span>
368
- </span>
369
- </span>
370
- </th>
371
- <th className="k-table-th k-header" rowSpan={1} colSpan={1}>
372
- <span className="k-cell-inner">
373
- <span className="k-link">
374
- <span className="k-column-title">Units On Order</span>
375
- </span>
376
- </span>
377
- </th>
378
- <th className="k-table-th k-header" rowSpan={1} colSpan={1}>
379
- <span className="k-cell-inner">
380
- <span className="k-link">
381
- <span className="k-column-title">Units In Stock</span>
382
- </span>
383
- </span>
384
- </th>
385
- </tr>
386
- </thead>
387
- </table>
388
- </div>
389
- </div>
390
- <div className="k-grid-container">
391
- <div className="k-grid-content-locked" style={{ width: "582px", height: "570px" }}>
392
- <div className="k-grid-table-wrap">
393
- <table className="k-table k-table-md k-grid-table" style={{ width: "582px" }}>
394
- <colgroup>
395
- <col className="k-group-col" />
396
- <col style={{ width: "200px" }}/>
397
- <col style={{ width: "350px" }} />
398
- </colgroup>
399
- <tbody className="k-table-tbody">
400
- <tr className="k-table-row k-table-group-row k-grouping-row" style={{ height: "37px" }}>
401
- <td className="k-table-td" colSpan={3}>
402
- <p className="k-reset">
403
- <Icon icon="caret-alt-down" />
299
+ <TableTbody>
300
+ <TableRow className="k-table-group-row k-grouping-row" style={{ height: "37px" }}>
301
+ <TableTd colspan={3}>
302
+ <p className="k-reset">
303
+ <Icon icon="caret-alt-down" />
404
304
 
405
305
  Discontinued: false
406
- </p>
407
- </td>
408
- </tr>
409
- <tr className="k-table-row" style={{ height: "38px" }}>
410
- <td className="k-table-td k-table-group-td k-group-cell"></td>
411
- <td className="k-table-td" colSpan={1}></td>
412
- <td className="k-table-td" colSpan={1}>Chai</td>
413
- </tr>
414
- <tr className="k-table-row k-table-alt-row k-alt" style={{ width: "37px" }}>
415
- <td className="k-table-td k-table-group-td k-group-cell"></td>
416
- <td className="k-table-td" colSpan={1}>2</td>
417
- <td className="k-table-td" colSpan={1}>Chang</td>
418
- </tr>
419
- <tr className="k-table-row" style={{ width: "37px" }}>
420
- <td className="k-table-td k-table-group-td k-group-cell"></td>
421
- <td className="k-table-td" colSpan={1}>3</td>
422
- <td className="k-table-td" colSpan={1}>
423
- Aniseed Syrup
424
- </td>
425
- </tr>
426
- <tr className="k-table-row k-table-alt-row k-alt" style={{ width: "37px" }}>
427
- <td className="k-table-td k-table-group-td k-group-cell"></td>
428
- <td className="k-table-td" colSpan={1}>
429
- 4
430
- </td>
431
- <td className="k-table-td" colSpan={1}>
432
- Chef Anton&apos;s Cajun Seasoning
433
- </td>
434
- </tr>
435
- <tr className="k-table-row" style={{ width: "37px" }}>
436
- <td className="k-table-td k-table-group-td k-group-cell"></td>
437
- <td className="k-table-td" colSpan={1}>
438
- 6
439
- </td>
440
- <td className="k-table-td" colSpan={1}>
441
- Grandma&apos;s Boysenberry Spread
442
- </td>
443
- </tr>
444
- <tr className="k-table-row k-group-footer" style={{ height: "39px" }}>
445
- <td className="k-table-td k-table-group-td k-group-cell"></td>
446
- <td className="k-table-td"></td>
447
- <td className="k-table-td"></td>
448
- </tr>
449
-
450
- <tr className="k-table-row k-table-group-row k-grouping-row" style={{ height: "37px" }}>
451
- <td className="k-table-td" colSpan={3}>
452
- <p className="k-reset">
453
- <Icon icon="caret-alt-down" />
306
+ </p>
307
+ </TableTd>
308
+ </TableRow>
309
+ <TableRow style={{ height: "38px" }}>
310
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
311
+ <TableTd colspan={1}></TableTd>
312
+ <TableTd colspan={1}>Chai</TableTd>
313
+ </TableRow>
314
+ <TableRow className="k-alt" alt style={{ width: "37px" }}>
315
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
316
+ <TableTd colspan={1}>2</TableTd>
317
+ <TableTd colspan={1}>Chang</TableTd>
318
+ </TableRow>
319
+ <TableRow style={{ width: "37px" }}>
320
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
321
+ <TableTd colspan={1}>3</TableTd>
322
+ <TableTd colspan={1}>
323
+ Aniseed Syrup
324
+ </TableTd>
325
+ </TableRow>
326
+ <TableRow className="k-alt" alt style={{ width: "37px" }}>
327
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
328
+ <TableTd colspan={1}>
329
+ 4
330
+ </TableTd>
331
+ <TableTd colspan={1}>
332
+ Chef Anton&apos;s Cajun Seasoning
333
+ </TableTd>
334
+ </TableRow>
335
+ <TableRow style={{ width: "37px" }}>
336
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
337
+ <TableTd colspan={1}>6</TableTd>
338
+ <TableTd colspan={1}>Grandma&apos;s Boysenberry Spread</TableTd>
339
+ </TableRow>
340
+ <TableRow className="k-group-footer" style={{ height: "39px" }}>
341
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
342
+ <TableTd></TableTd>
343
+ <TableTd></TableTd>
344
+ </TableRow>
345
+ <TableRow className="k-table-group-row k-grouping-row" style={{ height: "37px" }}>
346
+ <TableTd colspan={3}>
347
+ <p className="k-reset">
348
+ <Icon icon="caret-alt-down" />
454
349
  Discontinued: true
455
- </p>
456
- </td>
457
- </tr>
458
- <tr className="k-table-row k-table-alt-row k-alt" style={{ height: "38px" }}>
459
- <td className="k-table-td k-table-group-td k-group-cell"></td>
460
- <td className="k-table-td" colSpan={1}>
461
- 5
462
- </td>
463
- <td className="k-table-td" colSpan={1}>
464
- Chef Anton&apos;s Gumbo Mix
465
- </td>
466
- </tr>
467
- <tr className="k-table-row k-group-footer" style={{ height: "39px" }}>
468
- <td className="k-table-td k-table-group-td k-group-cell"></td>
469
- <td className="k-table-td"></td>
470
- <td className="k-table-td"></td>
471
- </tr>
472
- </tbody>
473
- </table>
474
- <div></div>
475
- </div>
476
- <div className="k-height-container">
477
- <div></div>
478
- </div>
350
+ </p>
351
+ </TableTd>
352
+ </TableRow>
353
+ <TableRow className="k-alt" alt style={{ height: "38px" }}>
354
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
355
+ <TableTd colspan={1}>
356
+ 5
357
+ </TableTd>
358
+ <TableTd colspan={1}>
359
+ Chef Anton&apos;s Gumbo Mix
360
+ </TableTd>
361
+ </TableRow>
362
+ <TableRow className="k-group-footer" style={{ height: "39px" }}>
363
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
364
+ <TableTd></TableTd>
365
+ <TableTd></TableTd>
366
+ </TableRow>
367
+ </TableTbody>
368
+ </GridTable>
479
369
  </div>
480
- <div className="k-grid-content k-virtual-content">
481
- <div className="k-grid-table-wrap">
482
- <table className="k-table k-table-md k-grid-table">
483
- <colgroup>
484
- <col style={{ height: "120px" }} />
485
- <col style={{ height: "120px" }} />
486
- <col style={{ height: "120px" }} />
487
- <col style={{ height: "120px" }} />
488
- </colgroup>
489
- <tbody className="k-table-tbody">
490
- <tr className="k-table-row k-table-group-row k-grouping-row" style={{ height: "37px" }}>
491
- <td className="k-table-td" colSpan={4}>
492
- <p className="k-reset"></p>
493
- </td>
494
- </tr>
495
- <tr className="k-table-row" style={{ height: "38px" }}>
496
- <td className="k-table-td" colSpan={1}>
497
- 18
498
- </td>
499
- <td className="k-table-td" colSpan={1}>
500
- 0
501
- </td>
502
- <td className="k-table-td" colSpan={1}>
503
- 39
504
- </td>
505
- <td className="k-table-td" colSpan={1}>
506
- <Checkbox />
507
- </td>
508
- </tr>
509
- <tr className="k-table-row k-table-alt-row k-alt" style={{ width: "37px" }}>
510
- <td className="k-table-td" colSpan={1}>
511
- 19
512
- </td>
513
- <td className="k-table-td" colSpan={1}>
514
- 40
515
- </td>
516
- <td className="k-table-td" colSpan={1}>
517
- 17
518
- </td>
519
- <td className="k-table-td" colSpan={1}>
520
- <Checkbox />
521
- </td>
522
- </tr>
523
- <tr className="k-table-row" style={{ width: "37px" }}>
524
- <td className="k-table-td" colSpan={1}>
525
- 10
526
- </td>
527
- <td className="k-table-td" colSpan={1}>
528
- 70
529
- </td>
530
- <td className="k-table-td" colSpan={1}>
531
- 13
532
- </td>
533
- <td className="k-table-td" colSpan={1}>
534
- <Checkbox />
535
- </td>
536
- </tr>
537
- <tr className="k-table-row k-table-alt-row k-alt" style={{ width: "37px" }}>
538
- <td className="k-table-td" colSpan={1}>
539
- 22
540
- </td>
541
- <td className="k-table-td" colSpan={1}>
542
- 0
543
- </td>
544
- <td className="k-table-td" colSpan={1}>
545
- 53
546
- </td>
547
- <td className="k-table-td" colSpan={1}>
548
- <Checkbox />
549
- </td>
550
- </tr>
551
- <tr className="k-table-row" style={{ width: "37px" }}>
552
- <td className="k-table-td" colSpan={1}>
553
- 25
554
- </td>
555
- <td className="k-table-td" colSpan={1}>
556
- 0
557
- </td>
558
- <td className="k-table-td" colSpan={1}>
559
- 120
560
- </td>
561
- <td className="k-table-td" colSpan={1}>
562
- <Checkbox />
563
- </td>
564
- </tr>
565
- <tr className="k-table-row k-group-footer" style={{ height: "39px" }}>
566
- <td className="k-table-td">
567
- Sum: 94
568
- </td>
569
- <td className="k-table-td"></td>
570
- <td className="k-table-td"></td>
571
- <td className="k-table-td"></td>
572
- </tr>
573
-
574
- <tr className="k-table-row k-table-group-row k-grouping-row" style={{ height: "37px" }}>
575
- <td className="k-table-td" colSpan={4}>
576
- <p className="k-reset"></p>
577
- </td>
578
- </tr>
579
- <tr className="k-table-row k-table-alt-row k-alt" style={{ height: "38px" }}>
580
- <td className="k-table-td" colSpan={1}>21.35</td>
581
- <td className="k-table-td" colSpan={1}>
582
- 0
583
- </td>
584
- <td className="k-table-td" colSpan={1}>
585
- 0
586
- </td>
587
- <td className="k-table-td" colSpan={1}>
588
- <Checkbox />
589
- </td>
590
- </tr>
591
- <tr className="k-table-row k-group-footer" style={{ height: "39px" }}>
592
- <td className="k-table-td">
593
- Sum: 24
594
- </td>
595
- <td className="k-table-td"></td>
596
- <td className="k-table-td"></td>
597
- <td className="k-table-td"></td>
598
- </tr>
599
- </tbody>
600
- </table>
601
- </div>
370
+ <div className="k-height-container">
602
371
  <div></div>
603
- <div className="k-height-container">
604
- <div></div>
605
- </div>
606
372
  </div>
607
373
  </div>
608
- <div className="k-grid-footer">
609
- <div className="k-grid-footer-locked" style={{ width: "582px" }}>
610
- <table className="k-table k-table-md k-grid-footer-table" style={{ width: "582px" }}>
611
- <colgroup>
612
- <col className="k-group-col" />
613
- <col style={{ width: "200px" }}/>
614
- <col style={{ width: "350px" }} />
615
- </colgroup>
616
- <tfoot className="k-table-tfoot">
617
- <tr className="k-table-row k-footer-template">
618
- <td className="k-table-td k-table-group-td k-group-cell"></td>
619
- <td className="k-table-td"></td>
620
- <td className="k-table-td"></td>
621
- </tr>
622
- </tfoot>
623
- </table>
624
- </div>
625
- <div className="k-grid-footer-wrap" >
626
- <table className="k-table k-table-md k-grid-footer-table">
374
+ <GridContent className="k-virtual-content">
375
+ <div className="k-grid-table-wrap">
376
+ <GridTable>
627
377
  <colgroup>
628
378
  <col style={{ height: "120px" }} />
629
379
  <col style={{ height: "120px" }} />
630
380
  <col style={{ height: "120px" }} />
631
381
  <col style={{ height: "120px" }} />
632
382
  </colgroup>
633
- <tfoot className="k-table-tfoot">
634
- <tr className="k-table-row k-footer-template">
635
- <td className="k-table-td">Total Unit Price: 115.35</td>
636
- <td className="k-table-td"></td>
637
- <td className="k-table-td"></td>
638
- <td className="k-table-td"></td>
639
- </tr>
640
- </tfoot>
641
- </table>
383
+ <TableTbody>
384
+ <TableRow className="k-table-group-row k-grouping-row" style={{ height: "37px" }}>
385
+ <TableTd colspan={4}>
386
+ <p className="k-reset"></p>
387
+ </TableTd>
388
+ </TableRow>
389
+ <TableRow style={{ height: "38px" }}>
390
+ <TableTd colspan={1}>18</TableTd>
391
+ <TableTd colspan={1}>0</TableTd>
392
+ <TableTd colspan={1}>39</TableTd>
393
+ <TableTd colspan={1}><Checkbox /></TableTd>
394
+ </TableRow>
395
+ <TableRow className="k-alt" alt style={{ width: "37px" }}>
396
+ <TableTd colspan={1}>19</TableTd>
397
+ <TableTd colspan={1}>40</TableTd>
398
+ <TableTd colspan={1}>17</TableTd>
399
+ <TableTd colspan={1}><Checkbox /></TableTd>
400
+ </TableRow>
401
+ <TableRow style={{ width: "37px" }}>
402
+ <TableTd colspan={1}>10</TableTd>
403
+ <TableTd colspan={1}>70</TableTd>
404
+ <TableTd colspan={1}>13</TableTd>
405
+ <TableTd colspan={1}><Checkbox /></TableTd>
406
+ </TableRow>
407
+ <TableRow className="k-alt" alt style={{ width: "37px" }}>
408
+ <TableTd colspan={1}>22</TableTd>
409
+ <TableTd colspan={1}>0</TableTd>
410
+ <TableTd colspan={1}>53</TableTd>
411
+ <TableTd colspan={1}><Checkbox /></TableTd>
412
+ </TableRow>
413
+ <TableRow style={{ width: "37px" }}>
414
+ <TableTd colspan={1}>25</TableTd>
415
+ <TableTd colspan={1}>0</TableTd>
416
+ <TableTd colspan={1}>120</TableTd>
417
+ <TableTd colspan={1}><Checkbox /></TableTd>
418
+ </TableRow>
419
+ <TableRow className="k-group-footer" style={{ height: "39px" }}>
420
+ <TableTd>Sum: 94</TableTd>
421
+ <TableTd></TableTd>
422
+ <TableTd></TableTd>
423
+ <TableTd></TableTd>
424
+ </TableRow>
425
+ <TableRow className="k-table-group-row k-grouping-row" style={{ height: "37px" }}>
426
+ <TableTd className="k-table-td" colspan={4}>
427
+ <p className="k-reset"></p>
428
+ </TableTd>
429
+ </TableRow>
430
+ <TableRow alt className="k-table-row k-alt" style={{ height: "38px" }}>
431
+ <TableTd className="k-table-td" colspan={1}>21.35</TableTd>
432
+ <TableTd className="k-table-td" colspan={1}>0</TableTd>
433
+ <TableTd className="k-table-td" colspan={1}>0</TableTd>
434
+ <TableTd className="k-table-td" colspan={1}>
435
+ <Checkbox />
436
+ </TableTd>
437
+ </TableRow>
438
+ <TableRow className="k-table-row k-group-footer" style={{ height: "39px" }}>
439
+ <TableTd className="k-table-td">Sum: 24</TableTd>
440
+ <TableTd className="k-table-td"></TableTd>
441
+ <TableTd className="k-table-td"></TableTd>
442
+ <TableTd className="k-table-td"></TableTd>
443
+ </TableRow>
444
+ </TableTbody>
445
+ </GridTable>
642
446
  </div>
447
+ <div></div>
448
+ <div className="k-height-container"><div></div></div>
449
+ </GridContent>
450
+ </GridContainer>
451
+ <GridFooter>
452
+ <div className="k-grid-footer-locked" style={{ width: "582px" }}>
453
+ <GridFooterTable>
454
+ <colgroup>
455
+ <col className="k-group-col" />
456
+ <col style={{ width: "200px" }}/>
457
+ <col style={{ width: "350px" }} />
458
+ </colgroup>
459
+ <TableTfoot>
460
+ <TableRow className="k-footer-template">
461
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
462
+ <TableTd></TableTd>
463
+ <TableTd></TableTd>
464
+ </TableRow>
465
+ </TableTfoot>
466
+ </GridFooterTable>
643
467
  </div>
644
- </div>
645
- </div>
468
+ <div className="k-grid-footer-wrap">
469
+ <GridFooterTable>
470
+ <colgroup>
471
+ <col style={{ height: "120px" }} />
472
+ <col style={{ height: "120px" }} />
473
+ <col style={{ height: "120px" }} />
474
+ <col style={{ height: "120px" }} />
475
+ </colgroup>
476
+ <TableTfoot>
477
+ <TableRow className="k-footer-template">
478
+ <TableTd>Total Unit Price: 115.35</TableTd>
479
+ <TableTd></TableTd>
480
+ <TableTd></TableTd>
481
+ <TableTd></TableTd>
482
+ </TableRow>
483
+ </TableTfoot>
484
+ </GridFooterTable>
485
+ </div>
486
+ </GridFooter>
487
+ </Grid>
646
488
  </div>
647
489
  </div>
648
490
  </>