@progress/kendo-themes-html 7.1.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 (281) 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/{textarea/tests/textarea-resizable.js → grid/grid-header-cell.spec.js} +100 -712
  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/{textarea/tests/textarea-resizable.js → grid/grid-header-cell.spec.js} +96 -708
  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
  280. package/dist/types/textarea/tests/textarea-resizable.d.ts +0 -2
  281. package/src/textarea/tests/textarea-resizable.tsx +0 -101
package/src/grid/tests/grid-grouping-blazor.tsx CHANGED
@@ -2,127 +2,100 @@ import { Button } from '../../button';
2
2
  import { Checkbox } from '../../checkbox';
3
3
  import { Icon } from '../../icon';
4
4
  import { Chip, ChipList, ChipAction } from '../../chip';
5
+ import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridGroupingHeader, GridContainer, GridContent, GridTable } from '../../grid';
6
+ import { TableThead, TableTbody, TableRow, TableTd } from '../../table';
5
7
 
6
8
 
7
9
  export default () =>(
8
10
  <>
9
11
  <div id="test-area" className="k-d-grid">
10
12
  <h3>Base</h3>
11
- <div className="k-grid k-grid-md telerik-blazor">
12
- <div className="k-grouping-header">
13
- <div className="k-grouping-drop-container">
14
- Drag a column header and drop it here to group by that column
15
- </div>
16
- </div>
17
- <div className="k-grid-header">
13
+ <Grid className="telerik-blazor" groupingHeader={(
14
+ <GridGroupingHeader dropHint="Drag a column header and drop it here to group by that column"/>
15
+ )}>
16
+ <GridHeader>
18
17
  <div className="k-grid-header-wrap">
19
- <table className="k-table k-table-md k-grid-header-table" role="grid">
18
+ <GridHeaderTable>
20
19
  <colgroup>
21
20
  <col style={{ width: "65px" }} />
22
21
  <col />
23
22
  <col />
24
23
  <col />
25
24
  </colgroup>
26
- <thead className="k-table-thead">
27
- <tr className="k-table-row">
28
- <th className="k-table-th k-header" colSpan={1}>
25
+ <TableThead>
26
+ <TableRow>
27
+ <GridHeaderCell colspan={1}>
29
28
  <Checkbox />
30
- </th>
31
- <th className="k-table-th k-header" colSpan={1}>
32
- <span className="k-cell-inner">
33
- <span className="k-link">
34
- <span className="k-column-title">Id</span>
35
- </span>
36
- </span>
37
- </th>
38
- <th className="k-table-th k-header" colSpan={1}>
39
- <span className="k-cell-inner">
40
- <span className="k-link">
41
- <span className="k-column-title">Name</span>
42
- </span>
43
- </span>
44
- </th>
45
- <th className="k-table-th k-header" colSpan={1}>
46
- <span className="k-cell-inner">
47
- <span className="k-link">
48
- <span className="k-column-title">Command</span>
49
- </span>
50
- </span>
51
- </th>
52
- </tr>
53
- </thead>
54
- </table>
29
+ </GridHeaderCell>
30
+ <GridHeaderCell colspan={1} columnTitle="Id"></GridHeaderCell>
31
+ <GridHeaderCell colspan={1} columnTitle="Name"></GridHeaderCell>
32
+ <GridHeaderCell colspan={1} columnTitle="Command"></GridHeaderCell>
33
+ </TableRow>
34
+ </TableThead>
35
+ </GridHeaderTable>
55
36
  </div>
56
- </div>
57
- <div className="k-grid-container">
58
- <div className="k-grid-content k-virtual-content">
37
+ </GridHeader>
38
+ <GridContainer>
39
+ <GridContent className="k-virtual-content">
59
40
  <div className="k-pos-relative">
60
41
  <div className="k-virtual-position">
61
- <table role="grid" className="k-table k-table-md k-grid-table" style={{ height: 'auto' }}>
42
+ <GridTable role="grid" style={{ height: 'auto' }}>
62
43
  <colgroup>
63
44
  <col style={{ width: "65px" }} />
64
45
  <col />
65
46
  <col />
66
47
  <col />
67
48
  </colgroup>
68
- <tbody className="k-table-tbody">
69
- <tr className="k-table-row k-master-row">
70
- <td className="k-table-td" colSpan={0}>
49
+ <TableTbody>
50
+ <TableRow className="k-master-row">
51
+ <TableTd colspan={0}>
71
52
  <span>
72
53
  <Checkbox className="k-grid-checkbox" />
73
54
  </span>
74
- </td>
75
- <td className="k-table-td" colSpan={0}>
76
- 1
77
- </td>
78
- <td className="k-table-td" colSpan={0}>
79
- Product1
80
- </td>
81
- <td className="k-table-td k-command-cell" colSpan={0}>
55
+ </TableTd>
56
+ <TableTd colspan={0}>1</TableTd>
57
+ <TableTd colspan={0}>Product1</TableTd>
58
+ <TableTd className="k-command-cell" colspan={0}>
82
59
  <span>
83
60
  <Button icon="trash">Delete</Button>
84
61
  </span>
85
- </td>
86
- </tr>
87
- <tr className="k-table-row k-table-alt-row k-master-row k-alt">
88
- <td className="k-table-td" colSpan={0}>
62
+ </TableTd>
63
+ </TableRow>
64
+ <TableRow className="k-master-row k-alt" alt>
65
+ <TableTd colspan={0}>
89
66
  <span>
90
67
  <Checkbox className="k-grid-checkbox" />
91
68
  </span>
92
- </td>
93
- <td className="k-table-td" colSpan={0}>
94
- 2
95
- </td>
96
- <td className="k-table-td" colSpan={0}>
97
- Product2
98
- </td>
99
- <td className="k-table-td k-command-cell" colSpan={0}>
69
+ </TableTd>
70
+ <TableTd colspan={0}>2</TableTd>
71
+ <TableTd colspan={0}>Product2</TableTd>
72
+ <TableTd className="k-command-cell" colspan={0}>
100
73
  <span>
101
74
  <Button icon="trash">Delete</Button>
102
75
  </span>
103
- </td>
104
- </tr>
105
- </tbody>
106
- </table>
76
+ </TableTd>
77
+ </TableRow>
78
+ </TableTbody>
79
+ </GridTable>
107
80
  </div>
108
81
  </div>
109
82
  <div className="k-height-container">
110
83
  <div></div>
111
84
  </div>
112
- </div>
113
- </div>
114
- </div>
85
+ </GridContent>
86
+ </GridContainer>
87
+ </Grid>
115
88
  <h3>Single Group</h3>
116
- <div className="k-grid k-grid-md telerik-blazor">
117
- <div className="k-grouping-header">
89
+ <Grid className="telerik-blazor" groupingHeader={(
90
+ <GridGroupingHeader>
118
91
  <ChipList>
119
92
  <Chip actions={ <ChipAction type="remove"/> }>Id</Chip>
120
93
  </ChipList>
121
- <div className="k-grouping-drop-container"></div>
122
- </div>
123
- <div className="k-grid-header">
94
+ </GridGroupingHeader>
95
+ )}>
96
+ <GridHeader>
124
97
  <div className="k-grid-header-wrap">
125
- <table className="k-table k-table-md k-grid-header-table" role="grid">
98
+ <GridHeaderTable>
126
99
  <colgroup>
127
100
  <col className="k-group-col" />
128
101
  <col style={{ width: "65px" }} />
@@ -130,43 +103,25 @@ export default () =>(
130
103
  <col />
131
104
  <col />
132
105
  </colgroup>
133
- <thead className="k-table-thead">
134
- <tr className="k-table-row">
135
- <th colSpan={1} rowSpan={1} className="k-table-th k-group-cell k-header"></th>
136
- <th className="k-table-th k-header" colSpan={1}>
106
+ <TableThead>
107
+ <TableRow>
108
+ <GridHeaderCell className="k-group-cell" colspan={1} rowspan={1}></GridHeaderCell>
109
+ <GridHeaderCell colspan={1}>
137
110
  <Checkbox />
138
- </th>
139
- <th className="k-table-th k-header" colSpan={1}>
140
- <span className="k-cell-inner">
141
- <span className="k-link">
142
- <span className="k-column-title">Id</span>
143
- </span>
144
- </span>
145
- </th>
146
- <th className="k-table-th k-header" colSpan={1}>
147
- <span className="k-cell-inner">
148
- <span className="k-link">
149
- <span className="k-column-title">Name</span>
150
- </span>
151
- </span>
152
- </th>
153
- <th className="k-table-th k-header" colSpan={1}>
154
- <span className="k-cell-inner">
155
- <span className="k-link">
156
- <span className="k-column-title">Command</span>
157
- </span>
158
- </span>
159
- </th>
160
- </tr>
161
- </thead>
162
- </table>
111
+ </GridHeaderCell>
112
+ <GridHeaderCell colspan={1} columnTitle="Id"></GridHeaderCell>
113
+ <GridHeaderCell colspan={1} columnTitle="Name"></GridHeaderCell>
114
+ <GridHeaderCell colspan={1} columnTitle="Command"></GridHeaderCell>
115
+ </TableRow>
116
+ </TableThead>
117
+ </GridHeaderTable>
163
118
  </div>
164
- </div>
165
- <div className="k-grid-container">
166
- <div className="k-grid-content k-virtual-content">
119
+ </GridHeader>
120
+ <GridContainer>
121
+ <GridContent className="k-virtual-content">
167
122
  <div className="k-pos-relative">
168
123
  <div className="k-virtual-position">
169
- <table role="grid" className="k-table k-table-md k-grid-table" style={{ height: 'auto' }}>
124
+ <GridTable role="grid" style={{ height: 'auto' }}>
170
125
  <colgroup>
171
126
  <col className="k-group-col" />
172
127
  <col style={{ width: "65px" }} />
@@ -174,83 +129,75 @@ export default () =>(
174
129
  <col />
175
130
  <col />
176
131
  </colgroup>
177
- <tbody className="k-table-tbody">
178
- <tr role="row" className="k-table-row k-table-group-row k-grouping-row">
179
- <td className="k-table-td" colSpan={5}>
132
+ <TableTbody>
133
+ <TableRow className="k-table-group-row k-grouping-row">
134
+ <TableTd colspan={5}>
180
135
  <p className="k-reset">
181
136
  <Icon icon="caret-alt-down" />
182
137
  Id: 1
183
138
  </p>
184
- </td>
185
- </tr>
186
- <tr className="k-table-row k-master-row">
187
- <td className="k-table-td k-table-group-td k-group-cell"></td>
188
- <td className="k-table-td" colSpan={0}>
139
+ </TableTd>
140
+ </TableRow>
141
+ <TableRow className="k-master-row">
142
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
143
+ <TableTd colspan={0}>
189
144
  <span>
190
145
  <Checkbox className="k-grid-checkbox" />
191
146
  </span>
192
- </td>
193
- <td className="k-table-td" colSpan={0}>
194
- 1
195
- </td>
196
- <td className="k-table-td" colSpan={0}>
197
- Product1
198
- </td>
199
- <td className="k-table-td k-command-cell" colSpan={0}>
147
+ </TableTd>
148
+ <TableTd colspan={0}>1</TableTd>
149
+ <TableTd colspan={0}>Product1</TableTd>
150
+ <TableTd className="k-command-cell" colspan={0}>
200
151
  <span>
201
152
  <Button icon="trash">Delete</Button>
202
153
  </span>
203
- </td>
204
- </tr>
205
- <tr role="row" className="k-table-row k-table-group-row k-grouping-row">
206
- <td className="k-table-td" colSpan={5}>
154
+ </TableTd>
155
+ </TableRow>
156
+ <TableRow role="row" className="k-table-group-row k-grouping-row">
157
+ <TableTd colspan={5}>
207
158
  <p className="k-reset">
208
159
  <Icon icon="caret-alt-down" />
209
160
  Id: 2
210
161
  </p>
211
- </td>
212
- </tr>
213
- <tr className="k-table-row k-table-alt-row k-master-row k-alt">
214
- <td className="k-table-td k-table-group-td k-group-cell"></td>
215
- <td className="k-table-td" colSpan={0}>
162
+ </TableTd>
163
+ </TableRow>
164
+ <TableRow className="k-master-row k-alt" alt>
165
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
166
+ <TableTd colspan={0}>
216
167
  <span>
217
168
  <Checkbox className="k-grid-checkbox" />
218
169
  </span>
219
- </td>
220
- <td className="k-table-td" colSpan={0}>
221
- 2
222
- </td>
223
- <td className="k-table-td" colSpan={0}>
224
- Product2
225
- </td>
226
- <td className="k-table-td k-command-cell" colSpan={0}>
170
+ </TableTd>
171
+ <TableTd colspan={0}>2</TableTd>
172
+ <TableTd colspan={0}>Product2</TableTd>
173
+ <TableTd className="k-command-cell" colspan={0}>
227
174
  <span>
228
175
  <Button icon="trash">Delete</Button>
229
176
  </span>
230
- </td>
231
- </tr>
232
- </tbody>
233
- </table>
177
+ </TableTd>
178
+ </TableRow>
179
+ </TableTbody>
180
+ </GridTable>
234
181
  </div>
235
182
  </div>
236
183
  <div className="k-height-container">
237
184
  <div></div>
238
185
  </div>
239
- </div>
240
- </div>
241
- </div>
186
+ </GridContent>
187
+ </GridContainer>
188
+ </Grid>
242
189
  <h3>Two Groups</h3>
243
- <div className="k-grid k-grid-md telerik-blazor">
244
- <div className="k-grouping-header">
190
+ <Grid className="telerik-blazor" groupingHeader={(
191
+ <GridGroupingHeader>
245
192
  <ChipList>
246
193
  <Chip actions={ <ChipAction type="remove"/> }>Id</Chip>
247
194
  <Chip actions={ <ChipAction type="remove"/> }>Name</Chip>
248
195
  </ChipList>
249
- <div className="k-grouping-drop-container"></div>
250
- </div>
251
- <div className="k-grid-header">
196
+ </GridGroupingHeader>
197
+ )}>
198
+ <GridHeader>
252
199
  <div className="k-grid-header-wrap">
253
- <table className="k-table k-table-md k-grid-header-table" role="grid">
200
+ <GridHeaderTable>
254
201
  <colgroup>
255
202
  <col className="k-group-col" />
256
203
  <col className="k-group-col" />
@@ -259,44 +206,26 @@ export default () =>(
259
206
  <col />
260
207
  <col />
261
208
  </colgroup>
262
- <thead className="k-table-thead">
263
- <tr className="k-table-row">
264
- <th colSpan={1} rowSpan={1} className="k-table-th k-group-cell k-header"></th>
265
- <th colSpan={1} rowSpan={1} className="k-table-th k-group-cell k-header"></th>
266
- <th className="k-table-th k-header" colSpan={1}>
209
+ <TableThead>
210
+ <TableRow>
211
+ <GridHeaderCell className="k-group-cell" colspan={1} rowspan={1}></GridHeaderCell>
212
+ <GridHeaderCell className="k-group-cell" colspan={1} rowspan={1}></GridHeaderCell>
213
+ <GridHeaderCell colspan={1}>
267
214
  <Checkbox />
268
- </th>
269
- <th className="k-table-th k-header" colSpan={1}>
270
- <span className="k-cell-inner">
271
- <span className="k-link">
272
- <span className="k-column-title">Id</span>
273
- </span>
274
- </span>
275
- </th>
276
- <th className="k-table-th k-header" colSpan={1}>
277
- <span className="k-cell-inner">
278
- <span className="k-link">
279
- <span className="k-column-title">Name</span>
280
- </span>
281
- </span>
282
- </th>
283
- <th className="k-table-th k-header" colSpan={1}>
284
- <span className="k-cell-inner">
285
- <span className="k-link">
286
- <span className="k-column-title">Command</span>
287
- </span>
288
- </span>
289
- </th>
290
- </tr>
291
- </thead>
292
- </table>
215
+ </GridHeaderCell>
216
+ <GridHeaderCell colspan={1} columnTitle="Id"></GridHeaderCell>
217
+ <GridHeaderCell colspan={1} columnTitle="Name"></GridHeaderCell>
218
+ <GridHeaderCell colspan={1} columnTitle="Command"></GridHeaderCell>
219
+ </TableRow>
220
+ </TableThead>
221
+ </GridHeaderTable>
293
222
  </div>
294
- </div>
295
- <div className="k-grid-container">
296
- <div className="k-grid-content k-virtual-content">
223
+ </GridHeader>
224
+ <GridContainer>
225
+ <GridContent className="k-virtual-content">
297
226
  <div className="k-pos-relative">
298
227
  <div className="k-virtual-position">
299
- <table role="grid" className="k-table k-table-md k-grid-table" style={{ height: 'auto' }}>
228
+ <GridTable role="grid" style={{ height: 'auto' }}>
300
229
  <colgroup>
301
230
  <col className="k-group-col" />
302
231
  <col className="k-group-col" />
@@ -305,91 +234,83 @@ export default () =>(
305
234
  <col />
306
235
  <col />
307
236
  </colgroup>
308
- <tbody className="k-table-tbody">
309
- <tr role="row" className="k-table-row k-table-group-row k-grouping-row">
310
- <td className="k-table-td" colSpan={6}>
237
+ <TableTbody>
238
+ <TableRow role="row" className="k-table-group-row k-grouping-row">
239
+ <TableTd colspan={6}>
311
240
  <p className="k-reset">
312
241
  <Icon icon="caret-alt-down" />
313
242
  Id: 1
314
243
  </p>
315
- </td>
316
- </tr>
317
- <tr role="row" className="k-table-row k-table-group-row k-grouping-row">
318
- <td className="k-table-td k-table-group-td k-group-cell"></td>
319
- <td className="k-table-td" colSpan={5}>
244
+ </TableTd>
245
+ </TableRow>
246
+ <TableRow role="row" className="k-table-group-row k-grouping-row">
247
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
248
+ <TableTd colspan={5}>
320
249
  <p className="k-reset">
321
250
  <Icon icon="caret-alt-down" />
322
251
  Name: Product1
323
252
  </p>
324
- </td>
325
- </tr>
326
- <tr className="k-table-row k-master-row">
327
- <td className="k-table-td k-table-group-td k-group-cell"></td>
328
- <td className="k-table-td k-table-group-td k-group-cell"></td>
329
- <td className="k-table-td" colSpan={0}>
253
+ </TableTd>
254
+ </TableRow>
255
+ <TableRow className="k-master-row">
256
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
257
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
258
+ <TableTd colspan={0}>
330
259
  <span>
331
260
  <Checkbox className="k-grid-checkbox" />
332
261
  </span>
333
- </td>
334
- <td className="k-table-td" colSpan={0}>
335
- 1
336
- </td>
337
- <td className="k-table-td" colSpan={0}>
338
- Product1
339
- </td>
340
- <td className="k-table-td k-command-cell" colSpan={0}>
262
+ </TableTd>
263
+ <TableTd colspan={0}>1</TableTd>
264
+ <TableTd colspan={0}>Product1</TableTd>
265
+ <TableTd className="k-command-cell" colspan={0}>
341
266
  <span>
342
267
  <Button icon="trash">Delete</Button>
343
268
  </span>
344
- </td>
345
- </tr>
346
- <tr role="row" className="k-table-row k-table-group-row k-grouping-row">
347
- <td className="k-table-td" colSpan={6}>
269
+ </TableTd>
270
+ </TableRow>
271
+ <TableRow role="row" className="k-table-group-row k-grouping-row">
272
+ <TableTd colspan={6}>
348
273
  <p className="k-reset">
349
274
  <Icon icon="caret-alt-down" />
350
275
  Id: 2
351
276
  </p>
352
- </td>
353
- </tr>
354
- <tr role="row" className="k-table-row k-table-group-row k-grouping-row">
355
- <td className="k-table-td k-table-group-td k-group-cell"></td>
356
- <td className="k-table-td" colSpan={5}>
277
+ </TableTd>
278
+ </TableRow>
279
+ <TableRow role="row" className="k-table-group-row k-grouping-row">
280
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
281
+ <TableTd colspan={5}>
357
282
  <p className="k-reset">
358
283
  <Icon icon="caret-alt-down" />
359
284
  Name: Product2
360
285
  </p>
361
- </td>
362
- </tr>
363
- <tr className="k-table-row k-table-alt-row k-master-row k-alt">
364
- <td className="k-table-td k-table-group-td k-group-cell"></td>
365
- <td className="k-table-td k-table-group-td k-group-cell"></td>
366
- <td className="k-table-td" colSpan={0}>
286
+ </TableTd>
287
+ </TableRow>
288
+ <TableRow className="k-master-row k-alt" alt>
289
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
290
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
291
+ <TableTd colspan={0}>
367
292
  <span>
368
293
  <Checkbox className="k-grid-checkbox" />
369
294
  </span>
370
- </td>
371
- <td className="k-table-td" colSpan={0}>
372
- 2
373
- </td>
374
- <td className="k-table-td" colSpan={0}>
375
- Product2
376
- </td>
377
- <td className="k-table-td k-command-cell" colSpan={0}>
295
+ </TableTd>
296
+ <TableTd colspan={0}>2</TableTd>
297
+ <TableTd colspan={0}>Product2</TableTd>
298
+ <TableTd className="k-command-cell" colspan={0}>
378
299
  <span>
379
300
  <Button icon="trash">Delete</Button>
380
301
  </span>
381
- </td>
382
- </tr>
383
- </tbody>
384
- </table>
302
+ </TableTd>
303
+ </TableRow>
304
+ </TableTbody>
305
+ </GridTable>
385
306
  </div>
386
307
  </div>
387
308
  <div className="k-height-container">
388
309
  <div></div>
389
310
  </div>
390
- </div>
391
- </div>
392
- </div>
311
+ </GridContent>
312
+ </GridContainer>
313
+ </Grid>
393
314
  </div>
394
315
  </>
395
316
  );