@progress/kendo-themes-html 7.1.1-dev.0 → 7.2.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 +1159 -1074
  3. package/dist/cjs/combobox/tests/combobox-prefix-suffix.js +1159 -1074
  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 +1055 -970
  20. package/dist/cjs/filemanager/tests/filemanager-gridview.js +2 -0
  21. package/dist/cjs/filemanager/tests/filemanager-listview-preview.js +1009 -924
  22. package/dist/cjs/form/tests/form-field-dropdowns.js +1158 -1073
  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 +2746 -2444
  80. package/dist/cjs/multiselect/templates/multiselect-prefix.js +1134 -1049
  81. package/dist/cjs/multiselect/templates/multiselect-suffix.js +1134 -1049
  82. package/dist/cjs/multiselect/tests/multiselect-adaptive.js +1140 -1055
  83. package/dist/cjs/multiselect/tests/multiselect-flat.js +1164 -1079
  84. package/dist/cjs/multiselect/tests/multiselect-grouping.js +1140 -1055
  85. package/dist/cjs/multiselect/tests/multiselect-opened.js +1142 -1057
  86. package/dist/cjs/multiselect/tests/multiselect-outline.js +1164 -1079
  87. package/dist/cjs/multiselect/tests/multiselect-prefix-suffix.js +1171 -1086
  88. package/dist/cjs/multiselect/tests/multiselect-size-rounded.js +1143 -1058
  89. package/dist/cjs/multiselect/tests/multiselect-solid.js +1164 -1079
  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 +1126 -1041
  105. package/dist/esm/combobox/tests/combobox-prefix-suffix.js +1126 -1041
  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 +1026 -941
  122. package/dist/esm/filemanager/tests/filemanager-gridview.js +2 -0
  123. package/dist/esm/filemanager/tests/filemanager-listview-preview.js +980 -895
  124. package/dist/esm/form/tests/form-field-dropdowns.js +1125 -1040
  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 +2751 -2449
  182. package/dist/esm/multiselect/templates/multiselect-prefix.js +1101 -1016
  183. package/dist/esm/multiselect/templates/multiselect-suffix.js +1101 -1016
  184. package/dist/esm/multiselect/tests/multiselect-adaptive.js +1107 -1022
  185. package/dist/esm/multiselect/tests/multiselect-flat.js +1131 -1046
  186. package/dist/esm/multiselect/tests/multiselect-grouping.js +1107 -1022
  187. package/dist/esm/multiselect/tests/multiselect-opened.js +1109 -1024
  188. package/dist/esm/multiselect/tests/multiselect-outline.js +1131 -1046
  189. package/dist/esm/multiselect/tests/multiselect-prefix-suffix.js +1138 -1053
  190. package/dist/esm/multiselect/tests/multiselect-size-rounded.js +1110 -1025
  191. package/dist/esm/multiselect/tests/multiselect-solid.js +1131 -1046
  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 +2 -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 +2 -1
  279. package/src/table/table-th.tsx +3 -0
package/src/grid/tests/grid-grouping.tsx CHANGED
@@ -1,9 +1,9 @@
1
1
  import { Button } from '../../button';
2
2
  import { ButtonGroup } from '../../button-group';
3
3
  import { Icon } from '../../icon';
4
- import { Toolbar } from '../../toolbar';
5
4
  import { Chip, ChipList, ChipAction } from '../../chip';
6
-
5
+ import { Grid, GridHeader, GridHeaderCell, GridHeaderTable, GridGroupingHeader, GridContainer, GridContent, GridTable, GridToolbar } from '../../grid';
6
+ import { TableThead, TableRow, TableTd, TableTbody } from '../../table';
7
7
 
8
8
  const styles = `
9
9
  .k-grouping-header .k-grouping-dropclue {
@@ -22,352 +22,254 @@ export default () =>(
22
22
  <span>angular no grouping</span>
23
23
  <span>jquery no grouping</span>
24
24
 
25
- <div className="k-grid k-grid-md k-grid-no-scrollbar">
26
- <Toolbar className="k-grid-toolbar">
25
+ <Grid _renderAriaRoot className="k-grid-no-scrollbar" toolbar={(
26
+ <GridToolbar>
27
27
  <Button>Button</Button>
28
28
  <ButtonGroup>
29
29
  <Button icon="bold"></Button>
30
30
  <Button icon="italic"></Button>
31
31
  <Button icon="underline"></Button>
32
32
  </ButtonGroup>
33
- </Toolbar>
34
- <div className="k-grouping-header">
35
- <div className="k-grouping-dropclue"></div>
36
- <div className="k-grouping-drop-container">
37
- Drag a column header and drop it here to group by that column
33
+ </GridToolbar>
34
+ )}
35
+ groupingHeader={(
36
+ <GridGroupingHeader dropClue dropHint="Drag a column header and drop it here to group by that column" />
37
+ )}>
38
+ <GridHeader>
39
+ <div className="k-grid-header-wrap">
40
+ <GridHeaderTable>
41
+ <colgroup>
42
+ <col /><col /><col /><col />
43
+ </colgroup>
44
+ <TableThead>
45
+ <TableRow>
46
+ <GridHeaderCell columnTitle="Name"></GridHeaderCell>
47
+ <GridHeaderCell columnTitle="Price"></GridHeaderCell>
48
+ <GridHeaderCell columnTitle="Available"></GridHeaderCell>
49
+ <GridHeaderCell columnTitle="Units"></GridHeaderCell>
50
+ </TableRow>
51
+ </TableThead>
52
+ </GridHeaderTable>
38
53
  </div>
39
- </div>
40
- <div className="k-grid-aria-root">
41
- <div className="k-grid-header">
42
- <div className="k-grid-header-wrap">
43
- <table className="k-table k-table-md k-grid-header-table">
54
+ </GridHeader>
55
+ <GridContainer>
56
+ <GridContent className="k-virtual-content">
57
+ <div className="k-grid-table-wrap">
58
+ <GridTable>
44
59
  <colgroup>
45
60
  <col /><col /><col /><col />
46
61
  </colgroup>
47
- <thead className="k-table-thead">
48
- <tr className="k-table-row">
49
- <th className="k-table-th k-header">
50
- <span className="k-cell-inner">
51
- <span className="k-link">
52
- <span className="k-column-title">Name</span>
53
- </span>
54
- </span>
55
- </th>
56
- <th className="k-table-th k-header">
57
- <span className="k-cell-inner">
58
- <span className="k-link">
59
- <span className="k-column-title">Price</span>
60
- </span>
61
- </span>
62
- </th>
63
- <th className="k-table-th k-header">
64
- <span className="k-cell-inner">
65
- <span className="k-link">
66
- <span className="k-column-title">Available</span>
67
- </span>
68
- </span>
69
- </th>
70
- <th className="k-table-th k-header">
71
- <span className="k-cell-inner">
72
- <span className="k-link">
73
- <span className="k-column-title">Units</span>
74
- </span>
75
- </span>
76
- </th>
77
- </tr>
78
- </thead>
79
- </table>
80
- </div>
81
- </div>
82
- <div className="k-grid-container">
83
- <div className="k-grid-content k-virtual-content">
84
- <div>
85
- <table className="k-table k-table-md k-grid-table">
86
- <colgroup>
87
- <col /><col /><col /><col />
88
- </colgroup>
89
- <tbody className="k-table-tbody">
90
- <tr className="k-table-row">
91
- <td className="k-table-td">Chai</td>
92
- <td className="k-table-td">30</td>
93
- <td className="k-table-td">false</td>
94
- <td className="k-table-td">15</td>
95
- </tr>
96
- </tbody>
97
- </table>
98
- </div>
62
+ <TableTbody>
63
+ <TableRow>
64
+ <TableTd>Chai</TableTd>
65
+ <TableTd>30</TableTd>
66
+ <TableTd>false</TableTd>
67
+ <TableTd>15</TableTd>
68
+ </TableRow>
69
+ </TableTbody>
70
+ </GridTable>
99
71
  </div>
100
- </div>
101
- </div>
102
- </div>
72
+ </GridContent>
73
+ </GridContainer>
74
+ </Grid>
103
75
 
104
- <div className="k-grid k-grid-md k-grid-no-scrollbar">
105
- <Toolbar className="k-grid-toolbar">
76
+ <Grid className="k-grid-no-scrollbar" toolbar={(
77
+ <GridToolbar>
106
78
  <Button>Button</Button>
107
- <span className="k-button-group">
79
+ <ButtonGroup>
108
80
  <Button icon="bold"></Button>
109
81
  <Button icon="italic"></Button>
110
82
  <Button icon="underline"></Button>
111
- </span>
112
- </Toolbar>
113
- <div className="k-grouping-header">
114
- <div className="k-grouping-dropclue"></div>
115
- <div className="k-grouping-drop-container">
116
- Drag a column header and drop it here to group by that column
117
- </div>
118
- </div>
119
- <div className="k-grid-header">
83
+ </ButtonGroup>
84
+ </GridToolbar>
85
+ )}
86
+ groupingHeader={(
87
+ <GridGroupingHeader dropClue dropHint="Drag a column header and drop it here to group by that column" />
88
+ )}>
89
+ <GridHeader>
120
90
  <div className="k-grid-header-wrap">
121
- <table className="k-table k-table-md k-grid-header-table">
91
+ <GridHeaderTable>
122
92
  <colgroup>
123
93
  <col /><col /><col /><col />
124
94
  </colgroup>
125
- <thead className="k-table-thead">
126
- <tr className="k-table-row">
127
- <th className="k-table-th k-header">
128
- <span className="k-cell-inner">
129
- <span className="k-link">
130
- <span className="k-column-title">Name</span>
131
- </span>
132
- </span>
133
- </th>
134
- <th className="k-table-th k-header">
135
- <span className="k-cell-inner">
136
- <span className="k-link">
137
- <span className="k-column-title">Price</span>
138
- </span>
139
- </span>
140
- </th>
141
- <th className="k-table-th k-header">
142
- <span className="k-cell-inner">
143
- <span className="k-link">
144
- <span className="k-column-title">Available</span>
145
- </span>
146
- </span>
147
- </th>
148
- <th className="k-table-th k-header">
149
- <span className="k-cell-inner">
150
- <span className="k-link">
151
- <span className="k-column-title">Units</span>
152
- </span>
153
- </span>
154
- </th>
155
- </tr>
156
- </thead>
157
- </table>
95
+ <TableThead>
96
+ <TableRow>
97
+ <GridHeaderCell columnTitle="Name"></GridHeaderCell>
98
+ <GridHeaderCell columnTitle="Price"></GridHeaderCell>
99
+ <GridHeaderCell columnTitle="Available"></GridHeaderCell>
100
+ <GridHeaderCell columnTitle="Units"></GridHeaderCell>
101
+ </TableRow>
102
+ </TableThead>
103
+ </GridHeaderTable>
158
104
  </div>
159
- </div>
160
- <div className="k-grid-content">
161
- <table className="k-table k-table-md k-grid-table">
162
- <colgroup>
163
- <col /><col /><col /><col />
164
- </colgroup>
165
- <tbody className="k-table-tbody">
166
- <tr className="k-table-row">
167
- <td className="k-table-td">Chai</td>
168
- <td className="k-table-td">30</td>
169
- <td className="k-table-td">false</td>
170
- <td className="k-table-td">15</td>
171
- </tr>
172
- </tbody>
173
- </table>
174
- </div>
175
- </div>
105
+ </GridHeader>
106
+ <GridContainer>
107
+ <GridContent>
108
+ <GridTable>
109
+ <colgroup>
110
+ <col /><col /><col /><col />
111
+ </colgroup>
112
+ <TableTbody>
113
+ <TableRow>
114
+ <TableTd>Chai</TableTd>
115
+ <TableTd>30</TableTd>
116
+ <TableTd>false</TableTd>
117
+ <TableTd>15</TableTd>
118
+ </TableRow>
119
+ </TableTbody>
120
+ </GridTable>
121
+ </GridContent>
122
+ </GridContainer>
123
+ </Grid>
176
124
 
177
125
  <span>angular with grouping</span>
178
126
  <span>jquery with grouping</span>
179
127
 
180
- <div className="k-grid k-grid-md k-grid-no-scrollbar">
181
- <Toolbar className="k-grid-toolbar">
128
+ <Grid _renderAriaRoot className="k-grid-no-scrollbar" toolbar={(
129
+ <GridToolbar>
182
130
  <Button>Button</Button>
183
131
  <ButtonGroup>
184
132
  <Button icon="bold"></Button>
185
133
  <Button icon="italic"></Button>
186
134
  <Button icon="underline"></Button>
187
135
  </ButtonGroup>
188
- </Toolbar>
189
- <div className="k-grouping-header">
190
- <div className="k-grouping-dropclue"></div>
136
+ </GridToolbar>
137
+ )}
138
+ groupingHeader={(
139
+ <GridGroupingHeader dropClue>
191
140
  <ChipList>
192
141
  <Chip icon="sort-asc-small" actions={ <ChipAction type="remove"/> }>Price</Chip>
193
142
  <Chip icon="sort-desc-small" actions={ <ChipAction type="remove"/> }>Name</Chip>
194
143
  </ChipList>
195
- <div className="k-grouping-drop-container"></div>
196
- </div>
197
- <div className="k-grid-aria-root">
198
- <div className="k-grid-header">
199
- <div className="k-grid-header-wrap">
200
- <table className="k-table k-table-md k-grid-header-table">
144
+ </GridGroupingHeader>
145
+ )}>
146
+ <GridHeader>
147
+ <div className="k-grid-header-wrap">
148
+ <GridHeaderTable>
149
+ <colgroup>
150
+ <col className="k-group-col"/><col /><col /><col /><col />
151
+ </colgroup>
152
+ <TableThead>
153
+ <TableRow>
154
+ <GridHeaderCell className="k-group-cell"></GridHeaderCell>
155
+ <GridHeaderCell columnTitle="Name"></GridHeaderCell>
156
+ <GridHeaderCell columnTitle="Price"></GridHeaderCell>
157
+ <GridHeaderCell columnTitle="Discontinued"></GridHeaderCell>
158
+ <GridHeaderCell columnTitle="Units"></GridHeaderCell>
159
+ </TableRow>
160
+ </TableThead>
161
+ </GridHeaderTable>
162
+ </div>
163
+ </GridHeader>
164
+ <GridContainer>
165
+ <GridContent className="k-virtual-content">
166
+ <div className="k-grid-table-wrap">
167
+ <GridTable>
201
168
  <colgroup>
202
169
  <col className="k-group-col" /><col /><col /><col /><col />
203
170
  </colgroup>
204
- <thead className="k-table-thead">
205
- <tr className="k-table-row">
206
- <th className="k-table-th k-group-cell k-header"></th>
207
- <th className="k-table-th k-header">
208
- <span className="k-cell-inner">
209
- <span className="k-link">
210
- <span className="k-column-title">Name</span>
211
- </span>
212
- </span>
213
- </th>
214
- <th className="k-table-th k-header">
215
- <span className="k-cell-inner">
216
- <span className="k-link">
217
- <span className="k-column-title">Price</span>
218
- </span>
219
- </span>
220
- </th>
221
- <th className="k-table-th k-header">
222
- <span className="k-cell-inner">
223
- <span className="k-link">
224
- <span className="k-column-title">Discontinued</span>
225
- </span>
226
- </span>
227
- </th>
228
- <th className="k-table-th k-header">
229
- <span className="k-cell-inner">
230
- <span className="k-link">
231
- <span className="k-column-title">Units</span>
232
- </span>
233
- </span>
234
- </th>
235
- </tr>
236
- </thead>
237
- </table>
171
+ <TableTbody>
172
+ <TableRow className="k-table-group-row k-grouping-row">
173
+ <TableTd colspan={5}>
174
+ <p className="k-reset">
175
+ <Icon icon="caret-alt-right"></Icon>
176
+ Price: 19
177
+ </p>
178
+ </TableTd>
179
+ </TableRow>
180
+ <TableRow className="k-table-group-row k-grouping-row">
181
+ <TableTd colspan={5}>
182
+ <p className="k-reset">
183
+ <Icon icon="caret-alt-down"></Icon>
184
+ Price: 30
185
+ </p>
186
+ </TableTd>
187
+ </TableRow>
188
+ <TableRow>
189
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
190
+ <TableTd>Chai</TableTd>
191
+ <TableTd>30</TableTd>
192
+ <TableTd>false</TableTd>
193
+ <TableTd>15</TableTd>
194
+ </TableRow>
195
+ </TableTbody>
196
+ </GridTable>
238
197
  </div>
239
- </div>
240
- <div className="k-grid-container">
241
- <div className="k-grid-content k-virtual-content">
242
- <div>
243
- <table className="k-table k-table-md k-grid-table">
244
- <colgroup>
245
- <col className="k-group-col" /><col /><col /><col /><col />
246
- </colgroup>
247
- <tbody className="k-table-tbody">
248
- <tr className="k-table-row k-table-group-row k-grouping-row">
249
- <td className="k-table-td" colSpan={5}>
250
- <p className="k-reset">
251
- <Icon icon="caret-alt-right" />
252
- Price: 19
253
- </p>
254
- </td>
255
- </tr>
256
- <tr className="k-table-row k-table-group-row k-grouping-row">
257
- <td className="k-table-td" colSpan={5}>
258
- <p className="k-reset">
259
- <Icon icon="caret-alt-down" />
260
- Price: 30
261
- </p>
262
- </td>
263
- </tr>
264
- <tr className="k-table-row">
265
- <td className="k-table-td k-table-group-td k-group-cell"></td>
266
- <td className="k-table-td">Chai</td>
267
- <td className="k-table-td">30</td>
268
- <td className="k-table-td">false</td>
269
- <td className="k-table-td">15</td>
270
- </tr>
271
- </tbody>
272
- </table>
273
- </div>
274
- </div>
275
- </div>
276
- </div>
277
- </div>
198
+ </GridContent>
199
+ </GridContainer>
200
+ </Grid>
278
201
 
279
- <div className="k-grid k-grid-md k-grid-no-scrollbar k-grid-display-block">
280
- <Toolbar className="k-grid-toolbar">
202
+ <Grid className="k-grid-no-scrollbar k-grid-display-block" toolbar={(
203
+ <GridToolbar>
281
204
  <Button>Button</Button>
282
205
  <ButtonGroup>
283
206
  <Button icon="bold"></Button>
284
207
  <Button icon="italic"></Button>
285
208
  <Button icon="underline"></Button>
286
209
  </ButtonGroup>
287
- </Toolbar>
288
- <div className="k-grouping-header">
289
- <div className="k-grouping-dropclue"></div>
210
+ </GridToolbar>
211
+ )}
212
+ groupingHeader={(
213
+ <GridGroupingHeader dropClue>
290
214
  <ChipList>
291
215
  <Chip icon="sort-asc-small" actions={ <ChipAction type="remove"/> }>Price</Chip>
292
216
  <Chip icon="sort-desc-small" actions={ <ChipAction type="remove"/> }>Name</Chip>
293
217
  </ChipList>
294
- <div className="k-grouping-drop-container"></div>
295
- </div>
296
- <div className="k-grid-header">
218
+ </GridGroupingHeader>
219
+ )}>
220
+ <GridHeader>
297
221
  <div className="k-grid-header-wrap">
298
- <table className="k-table k-table-md k-grid-header-table">
222
+ <GridHeaderTable>
299
223
  <colgroup>
300
224
  <col className="k-group-col" /><col /><col /><col /><col />
301
225
  </colgroup>
302
- <thead className="k-table-thead">
303
- <tr className="k-table-row">
304
- <th className="k-table-th k-group-cell k-header" scope="col"></th>
305
- <th className="k-table-th k-header">
306
- <span className="k-cell-inner">
307
- <span className="k-link">
308
- <span className="k-column-title">Name</span>
309
- </span>
310
- </span>
311
- </th>
312
- <th className="k-table-th k-header">
313
- <span className="k-cell-inner">
314
- <span className="k-link">
315
- <span className="k-column-title">Price</span>
316
- </span>
317
- </span>
318
- </th>
319
- <th className="k-table-th k-header">
320
- <span className="k-cell-inner">
321
- <span className="k-link">
322
- <span className="k-column-title">Available</span>
323
- </span>
324
- </span>
325
- </th>
326
- <th className="k-table-th k-header">
327
- <span className="k-cell-inner">
328
- <span className="k-link">
329
- <span className="k-column-title">Units</span>
330
- </span>
331
- </span>
332
- </th>
333
- </tr>
334
- </thead>
335
- </table>
226
+ <TableThead>
227
+ <TableRow>
228
+ <GridHeaderCell className="k-group-cell" scope="col"></GridHeaderCell>
229
+ <GridHeaderCell columnTitle="Name"></GridHeaderCell>
230
+ <GridHeaderCell columnTitle="Price"></GridHeaderCell>
231
+ <GridHeaderCell columnTitle="Available"></GridHeaderCell>
232
+ <GridHeaderCell columnTitle="Units"></GridHeaderCell>
233
+ </TableRow>
234
+ </TableThead>
235
+ </GridHeaderTable>
336
236
  </div>
337
- </div>
338
- <div className="k-grid-content">
339
- <table className="k-table k-table-md k-grid-table" style={{ height: 'auto' }}>
340
- <colgroup>
341
- <col className="k-group-col" /><col /><col /><col /><col />
342
- </colgroup>
343
- <tbody className="k-table-tbody">
344
- <tr className="k-table-row k-table-group-row k-grouping-row">
345
- <td className="k-table-td" colSpan={5}>
346
- <p className="k-reset">
347
- <Icon icon="caret-alt-right" />
348
- Price: 19
349
- </p>
350
- </td>
351
- </tr>
352
- <tr className="k-table-row k-table-group-row k-grouping-row">
353
- <td className="k-table-td" colSpan={5}>
354
- <p className="k-reset">
355
- <Icon icon="caret-alt-down" />
356
- Price: 30
357
- </p>
358
- </td>
359
- </tr>
360
- <tr className="k-table-row">
361
- <td className="k-table-td k-table-group-td k-group-cell">&nbsp;</td>
362
- <td className="k-table-td">Chai</td>
363
- <td className="k-table-td">30</td>
364
- <td className="k-table-td">false</td>
365
- <td className="k-table-td">15</td>
366
- </tr>
367
- </tbody>
368
- </table>
369
- </div>
370
- </div>
237
+ </GridHeader>
238
+ <GridContainer>
239
+ <GridContent>
240
+ <GridTable>
241
+ <colgroup>
242
+ <col className="k-group-col" /><col /><col /><col /><col />
243
+ </colgroup>
244
+ <TableTbody>
245
+ <TableRow className="k-table-group-row k-grouping-row">
246
+ <TableTd colspan={5}>
247
+ <p className="k-reset">
248
+ <Icon icon="caret-alt-right" />
249
+ Price: 19
250
+ </p>
251
+ </TableTd>
252
+ </TableRow>
253
+ <TableRow className="k-table-group-row k-grouping-row">
254
+ <TableTd colspan={5}>
255
+ <p className="k-reset">
256
+ <Icon icon="caret-alt-down" />
257
+ Price: 30
258
+ </p>
259
+ </TableTd>
260
+ </TableRow>
261
+ <TableRow>
262
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
263
+ <TableTd>Chai</TableTd>
264
+ <TableTd>30</TableTd>
265
+ <TableTd>false</TableTd>
266
+ <TableTd>15</TableTd>
267
+ </TableRow>
268
+ </TableTbody>
269
+ </GridTable>
270
+ </GridContent>
271
+ </GridContainer>
272
+ </Grid>
371
273
 
372
274
  <span>angular grid drag clue</span>
373
275
  <span>jquery grid drag clue</span>