@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-column-menu-blazor.tsx CHANGED
@@ -1,287 +1,219 @@
1
1
  import { Button } from '../../button';
2
2
  import { Checkbox } from '../../checkbox';
3
- import { Icon } from '../../icon';
4
-
3
+ import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid';
4
+ import { TableThead, TableTbody, TableRow, TableTd } from '../../table';
5
5
 
6
6
  export default () =>(
7
7
  <>
8
8
  <div id="test-area" className="k-d-grid">
9
- <div className="k-grid k-grid-md telerik-blazor">
10
- <div className="k-grid-header">
9
+ <Grid className="telerik-blazor">
10
+ <GridHeader>
11
11
  <div className="k-grid-header-wrap">
12
- <table className="k-table k-table-md k-grid-header-table" role="grid">
12
+ <GridHeaderTable role="grid">
13
13
  <colgroup>
14
14
  <col style={{ width: "65px" }} />
15
15
  <col />
16
16
  <col />
17
17
  </colgroup>
18
- <thead className="k-table-thead">
19
- <tr className="k-table-row">
20
- <th className="k-table-th k-header" colSpan={1}>
18
+ <TableThead>
19
+ <TableRow>
20
+ <GridHeaderCell colspan={1}>
21
21
  <Checkbox/>
22
- </th>
23
- <th className="k-table-th k-header" colSpan={1}>
24
- <span className="k-cell-inner">
25
- <span className="k-link">
26
- <span className="k-column-title">Name</span>
27
- </span>
28
- <div><a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon icon="more-vertical" /></a></div>
29
- </span>
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">Command</span>
35
- </span>
36
- <div><a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon icon="more-vertical" /></a></div>
37
- </span>
38
- </th>
39
- </tr>
40
- </thead>
41
- </table>
22
+ </GridHeaderCell>
23
+ <GridHeaderCell colspan={1} menu="column" columnTitle="Name"></GridHeaderCell>
24
+ <GridHeaderCell colspan={1} menu="column" columnTitle="Command"></GridHeaderCell>
25
+ </TableRow>
26
+ </TableThead>
27
+ </GridHeaderTable>
42
28
  </div>
43
- </div>
44
- <div className="k-grid-container">
45
- <div className="k-grid-content k-virtual-content">
29
+ </GridHeader>
30
+ <GridContainer>
31
+ <GridContent className="k-virtual-content">
46
32
  <div style={{ position: "relative" }}>
47
33
  <div className="k-virtual-position">
48
- <table role="grid" className="k-table k-table-md k-grid-table" style={{ height: 'auto' }}>
34
+ <GridTable role="grid" style={{ height: 'auto' }}>
49
35
  <colgroup>
50
36
  <col style={{ width: "65px" }} />
51
37
  <col />
52
38
  <col />
53
39
  </colgroup>
54
- <tbody className="k-table-tbody">
55
- <tr className="k-table-row k-master-row">
56
- <td className="k-table-td" colSpan={0}>
40
+ <TableTbody>
41
+ <TableRow className="k-master-row">
42
+ <TableTd colspan={0}>
57
43
  <span>
58
44
  <Checkbox className="k-grid-checkbox" />
59
45
  </span>
60
- </td>
61
- <td className="k-table-td" colSpan={0}>
62
- Product1
63
- </td>
64
- <td className="k-table-td k-command-cell" colSpan={0}>
46
+ </TableTd>
47
+ <TableTd colspan={0}>Product1</TableTd>
48
+ <TableTd className="k-command-cell" colspan={0}>
65
49
  <span>
66
50
  <Button icon="trash">Delete</Button>
67
51
  </span>
68
- </td>
69
- </tr>
70
- <tr className="k-table-row k-table-alt-row k-master-row k-alt">
71
- <td className="k-table-td" colSpan={0}>
52
+ </TableTd>
53
+ </TableRow>
54
+ <TableRow className="k-master-row k-alt" alt>
55
+ <TableTd colspan={0}>
72
56
  <span>
73
57
  <Checkbox className="k-grid-checkbox" />
74
58
  </span>
75
- </td>
76
- <td className="k-table-td" colSpan={0}>
77
- Product2
78
- </td>
79
- <td className="k-table-td k-command-cell" colSpan={0}>
59
+ </TableTd>
60
+ <TableTd colspan={0}>Product2</TableTd>
61
+ <TableTd className="k-command-cell" colspan={0}>
80
62
  <span>
81
63
  <Button icon="trash">Delete</Button>
82
64
  </span>
83
- </td>
84
- </tr>
85
- </tbody>
86
- </table>
65
+ </TableTd>
66
+ </TableRow>
67
+ </TableTbody>
68
+ </GridTable>
69
+ </div>
70
+ <div className="k-height-container">
71
+ <div></div>
87
72
  </div>
88
73
  </div>
89
- <div className="k-height-container">
90
- <div></div>
91
- </div>
92
- </div>
93
- </div>
94
- </div>
74
+ </GridContent>
75
+ </GridContainer>
76
+ </Grid>
95
77
 
96
78
  <h3>Sortable</h3>
97
-
98
- <div className="k-grid k-grid-md telerik-blazor">
99
- <div className="k-grid-header">
79
+ <Grid className="telerik-blazor">
80
+ <GridHeader>
100
81
  <div className="k-grid-header-wrap">
101
- <table className="k-table k-table-md k-grid-header-table" role="grid">
82
+ <GridHeaderTable role="grid">
102
83
  <colgroup>
103
84
  <col style={{ width: "65px" }} />
104
85
  <col />
105
86
  <col />
106
87
  </colgroup>
107
- <thead className="k-table-thead">
108
- <tr className="k-table-row">
109
- <th className="k-table-th k-header" colSpan={1}>
88
+ <TableThead>
89
+ <TableRow>
90
+ <GridHeaderCell colspan={1}>
110
91
  <Checkbox/>
111
- </th>
112
- <th className="k-table-th k-header" colSpan={1}>
113
- <span className="k-cell-inner">
114
- <span className="k-link">
115
- <span className="k-column-title">
116
- Name
117
- </span>
118
- <span className="k-sort-icon"><Icon icon="sort-asc-small" /></span>
119
- </span>
120
- </span>
121
- <span className="k-grid-header-menu k-grid-column-menu">
122
- <Icon icon="more-vertical" />
123
- </span>
124
- </th>
125
- <th className="k-table-th k-header" colSpan={1}>
126
- <span className="k-cell-inner">
127
- <span className="k-link">
128
- <span className="k-column-title">Command</span>
129
- </span>
130
- <div><a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon icon="more-vertical" /></a></div>
131
- </span>
132
- </th>
133
- </tr>
134
- </thead>
135
- </table>
92
+ </GridHeaderCell>
93
+ <GridHeaderCell colspan={1} sortable menu="column" columnTitle="Name"></GridHeaderCell>
94
+ <GridHeaderCell colspan={1} menu="column" columnTitle="Command"></GridHeaderCell>
95
+ </TableRow>
96
+ </TableThead>
97
+ </GridHeaderTable>
136
98
  </div>
137
- </div>
138
- <div className="k-grid-container">
139
- <div className="k-grid-content k-virtual-content">
99
+ </GridHeader>
100
+ <GridContainer>
101
+ <GridContent className="k-virtual-content">
140
102
  <div style={{ position: "relative" }}>
141
103
  <div className="k-virtual-position">
142
- <table role="grid" className="k-table k-table-md k-grid-table" style={{ height: 'auto' }}>
104
+ <GridTable role="grid" style={{ height: 'auto' }}>
143
105
  <colgroup>
144
106
  <col style={{ width: "65px" }} />
145
- <col />
107
+ <col className="k-sorted" />
146
108
  <col />
147
109
  </colgroup>
148
- <tbody className="k-table-tbody">
149
- <tr className="k-table-row k-master-row">
150
- <td className="k-table-td" colSpan={0}>
110
+ <TableTbody>
111
+ <TableRow className="k-master-row">
112
+ <TableTd colspan={0}>
151
113
  <span>
152
114
  <Checkbox className="k-grid-checkbox" />
153
115
  </span>
154
- </td>
155
- <td className="k-table-td" colSpan={0}>
156
- Product1
157
- </td>
158
- <td className="k-table-td k-command-cell" colSpan={0}>
116
+ </TableTd>
117
+ <TableTd colspan={0}>Product1</TableTd>
118
+ <TableTd className="k-command-cell" colspan={0}>
159
119
  <span>
160
120
  <Button icon="trash">Delete</Button>
161
121
  </span>
162
- </td>
163
- </tr>
164
- <tr className="k-table-row k-table-alt-row k-master-row k-alt">
165
- <td className="k-table-td" colSpan={0}>
122
+ </TableTd>
123
+ </TableRow>
124
+ <TableRow className="k-master-row k-alt" alt>
125
+ <TableTd colspan={0}>
166
126
  <span>
167
127
  <Checkbox className="k-grid-checkbox" />
168
128
  </span>
169
- </td>
170
- <td className="k-table-td" colSpan={0}>
171
- Product2
172
- </td>
173
- <td className="k-table-td k-command-cell" colSpan={0}>
129
+ </TableTd>
130
+ <TableTd colspan={0}>Product2</TableTd>
131
+ <TableTd className="k-command-cell" colspan={0}>
174
132
  <span>
175
133
  <Button icon="trash">Delete</Button>
176
134
  </span>
177
- </td>
178
- </tr>
179
- </tbody>
180
- </table>
135
+ </TableTd>
136
+ </TableRow>
137
+ </TableTbody>
138
+ </GridTable>
139
+ </div>
140
+ <div className="k-height-container">
141
+ <div></div>
181
142
  </div>
182
143
  </div>
183
- <div className="k-height-container">
184
- <div></div>
185
- </div>
186
- </div>
187
- </div>
188
- </div>
144
+ </GridContent>
145
+ </GridContainer>
146
+ </Grid>
189
147
 
190
148
  <h3>Sortable & Resizable</h3>
191
-
192
- <div className="k-grid k-grid-md telerik-blazor">
193
- <div className="k-grid-header">
149
+ <Grid className="telerik-blazor">
150
+ <GridHeader>
194
151
  <div className="k-grid-header-wrap">
195
- <table className="k-table k-table-md k-grid-header-table" role="grid">
152
+ <GridHeaderTable role="grid">
196
153
  <colgroup>
197
154
  <col style={{ width: "65px" }} />
198
155
  <col />
199
156
  <col />
200
157
  </colgroup>
201
- <thead className="k-table-thead">
202
- <tr className="k-table-row">
203
- <th className="k-table-th k-header" colSpan={1}>
158
+ <TableThead>
159
+ <TableRow>
160
+ <GridHeaderCell resizable colspan={1}>
204
161
  <Checkbox/>
205
- <span className="k-column-resizer" style={{ right: '0px', cursor: "col-resize" }}></span>
206
- </th>
207
- <th className="k-table-th k-header" colSpan={1}>
208
- <span className="k-cell-inner">
209
- <span className="k-link">
210
- <span className="k-column-title">
211
- Name
212
- </span>
213
- </span>
214
- </span>
215
- <span className="k-grid-header-menu k-grid-column-menu">
216
- <Icon icon="more-vertical" />
217
- </span>
218
- <span className="k-column-resizer" style={{ right: '0px', cursor: "col-resize" }}></span>
219
- </th>
220
- <th className="k-table-th k-header" colSpan={1}>
221
- <span className="k-cell-inner">
222
- <span className="k-link">
223
- <span className="k-column-title">Command</span>
224
- </span>
225
- <div><a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon icon="more-vertical" /></a></div>
226
- </span>
227
- <span className="k-column-resizer" style={{ right: '0px', cursor: "col-resize" }}></span>
228
- </th>
229
- </tr>
230
- </thead>
231
- </table>
162
+ </GridHeaderCell>
163
+ <GridHeaderCell colspan={1} resizable sortable menu="column" columnTitle="Name"></GridHeaderCell>
164
+ <GridHeaderCell colspan={1} resizable menu="column" columnTitle="Command"></GridHeaderCell>
165
+ </TableRow>
166
+ </TableThead>
167
+ </GridHeaderTable>
232
168
  </div>
233
- </div>
234
- <div className="k-grid-container">
235
- <div className="k-grid-content k-virtual-content">
169
+ </GridHeader>
170
+ <GridContainer>
171
+ <GridContent className="k-virtual-content">
236
172
  <div style={{ position: "relative" }}>
237
173
  <div className="k-virtual-position">
238
- <table role="grid" className="k-table k-table-md k-grid-table" style={{ height: 'auto' }}>
174
+ <GridTable role="grid" style={{ height: 'auto' }}>
239
175
  <colgroup>
240
176
  <col style={{ width: "65px" }} />
241
- <col />
177
+ <col className="k-sorted" />
242
178
  <col />
243
179
  </colgroup>
244
- <tbody className="k-table-tbody">
245
- <tr className="k-table-row k-master-row">
246
- <td className="k-table-td" colSpan={0}>
180
+ <TableTbody>
181
+ <TableRow className="k-master-row">
182
+ <TableTd colspan={0}>
247
183
  <span>
248
184
  <Checkbox className="k-grid-checkbox" />
249
185
  </span>
250
- </td>
251
- <td className="k-table-td" colSpan={0}>
252
- Product1
253
- </td>
254
- <td className="k-table-td k-command-cell" colSpan={0}>
186
+ </TableTd>
187
+ <TableTd colspan={0}>Product1</TableTd>
188
+ <TableTd className="k-command-cell" colspan={0}>
255
189
  <span>
256
190
  <Button icon="trash">Delete</Button>
257
191
  </span>
258
- </td>
259
- </tr>
260
- <tr className="k-table-row k-table-alt-row k-master-row k-alt">
261
- <td className="k-table-td" colSpan={0}>
192
+ </TableTd>
193
+ </TableRow>
194
+ <TableRow className="k-master-row k-alt" alt>
195
+ <TableTd colspan={0}>
262
196
  <span>
263
197
  <Checkbox className="k-grid-checkbox" />
264
198
  </span>
265
- </td>
266
- <td className="k-table-td" colSpan={0}>
267
- Product2
268
- </td>
269
- <td className="k-table-td k-command-cell" colSpan={0}>
199
+ </TableTd>
200
+ <TableTd colspan={0}>Product2</TableTd>
201
+ <TableTd className="k-command-cell" colspan={0}>
270
202
  <span>
271
203
  <Button icon="trash">Delete</Button>
272
204
  </span>
273
- </td>
274
- </tr>
275
- </tbody>
276
- </table>
205
+ </TableTd>
206
+ </TableRow>
207
+ </TableTbody>
208
+ </GridTable>
209
+ </div>
210
+ <div className="k-height-container">
211
+ <div></div>
277
212
  </div>
278
213
  </div>
279
- <div className="k-height-container">
280
- <div></div>
281
- </div>
282
- </div>
283
- </div>
284
- </div>
214
+ </GridContent>
215
+ </GridContainer>
216
+ </Grid>
285
217
 
286
218
  </div>
287
219
  </>
package/src/grid/tests/grid-column-reordering-actions.tsx CHANGED
@@ -1,9 +1,8 @@
1
1
  import { Chip, ChipAction, ChipList } from '../../chip';
2
2
  import { Icon } from '../../icon';
3
- import { Pager } from '../../pager';
4
- import { Table, TableThead, TableTbody, TableRow, TableTh, TableTd } from '../../table';
5
- import { Toolbar } from '../../toolbar';
3
+ import { TableThead, TableTbody, TableRow, TableTd } from '../../table';
6
4
  import { Popup } from '../../popup';
5
+ import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable, GridToolbar, GridPager } from '../../grid';
7
6
 
8
7
  const styles = `
9
8
  .k-animation-container,
@@ -21,8 +20,8 @@ export default () =>(
21
20
  <div id="test-area">
22
21
 
23
22
  <section>
24
- <div className="k-grid k-grid-md k-grid-no-scrollbar">
25
- <Toolbar className="k-grid-toolbar">
23
+ <Grid className="k-grid-no-scrollbar" toolbar={(
24
+ <GridToolbar>
26
25
  <ChipList>
27
26
  <Chip text="Units in Stock" icon="sort-asc-small" actions={
28
27
  <>
@@ -37,10 +36,13 @@ export default () =>(
37
36
  </>
38
37
  } />
39
38
  </ChipList>
40
- </Toolbar>
41
- <div className="k-grid-header">
39
+ </GridToolbar>
40
+ )} pager={(
41
+ <GridPager refresh={false} />
42
+ )}>
43
+ <GridHeader>
42
44
  <div className="k-grid-header-wrap">
43
- <Table size="medium" className="k-grid-header-table" >
45
+ <GridHeaderTable>
44
46
  <colgroup>
45
47
  <col />
46
48
  <col />
@@ -48,98 +50,59 @@ export default () =>(
48
50
  </colgroup>
49
51
  <TableThead>
50
52
  <TableRow>
51
- <TableTh className="k-header k-sorted">
52
- <span className="k-cell-inner">
53
- <span className="k-link">
54
- <span className="k-column-title">Product Id</span>
55
- <span className="k-sort-icon"><Icon icon="sort-asc-small" /></span>
56
- </span>
57
- <a href="#" className="k-grid-header-menu k-grid-column-menu">
58
- <Icon icon="more-vertical" />
59
- </a>
60
- </span>
61
- </TableTh>
62
- <TableTh className="k-header k-sorted">
63
- <span className="k-cell-inner">
64
- <span className="k-link">
65
- <span className="k-column-title">Unit Price</span>
66
- <span className="k-sort-icon"><Icon icon="sort-asc-small" /></span>
67
- </span>
68
- <a href="#" className="k-grid-header-menu k-grid-column-menu">
69
- <Icon icon="more-vertical" />
70
- </a>
71
- </span>
72
- </TableTh>
73
- <TableTh className="k-header k-sorted">
74
- <span className="k-cell-inner">
75
- <span className="k-link">
76
- <span className="k-column-title">Discontinued</span>
77
- <span className="k-sort-icon"><Icon icon="sort-asc-small" /></span>
78
- </span>
79
- <a href="#" className="k-grid-header-menu k-grid-column-menu">
80
- <Icon icon="more-vertical" />
81
- </a>
82
- </span>
83
- </TableTh>
84
- <TableTh className="k-header k-sorted">
85
- <span className="k-cell-inner">
86
- <span className="k-link">
87
- <span className="k-column-title">Category</span>
88
- <span className="k-sort-icon"><Icon icon="sort-asc-small" /></span>
89
- </span>
90
- <a href="#" className="k-grid-header-menu k-grid-column-menu">
91
- <Icon icon="more-vertical" />
92
- </a>
93
- </span>
94
- </TableTh>
53
+ <GridHeaderCell sortable menu="column" columnTitle="Product Id"></GridHeaderCell>
54
+ <GridHeaderCell sortable menu="column" columnTitle="Unit Price"></GridHeaderCell>
55
+ <GridHeaderCell sortable menu="column" columnTitle="Discontinued"></GridHeaderCell>
56
+ <GridHeaderCell sortable menu="column" columnTitle="Category"></GridHeaderCell>
95
57
  </TableRow>
96
58
  </TableThead>
97
- </Table>
59
+ </GridHeaderTable>
98
60
  </div>
99
- </div>
100
- <div className="k-grid-content">
101
- <Table size="medium" className="k-grid-table">
102
- <colgroup>
103
- <col />
104
- <col />
105
- <col />
106
- </colgroup>
107
- <TableTbody>
108
- <TableRow className="k-master-row">
109
- <TableTd>Chef Anton's Gumbo</TableTd>
110
- <TableTd>21.35</TableTd>
111
- <TableTd>0</TableTd>
112
- <TableTd>Condiments</TableTd>
113
- </TableRow>
114
- <TableRow alt>
115
- <TableTd>Alice Mutton</TableTd>
116
- <TableTd>39</TableTd>
117
- <TableTd>0</TableTd>
118
- <TableTd>Meat/Poultry</TableTd>
119
- </TableRow>
120
- <TableRow className="k-master-row">
121
- <TableTd>Singaporean Hokkien Fried Mee</TableTd>
122
- <TableTd>123.79</TableTd>
123
- <TableTd>1</TableTd>
124
- <TableTd>Meat/Poultry</TableTd>
125
- </TableRow>
126
- <TableRow alt>
127
- <TableTd>Gorgonzola Telino</TableTd>
128
- <TableTd>12.5</TableTd>
129
- <TableTd>0</TableTd>
130
- <TableTd>Meat/Poultry</TableTd>
131
- </TableRow>
132
- <TableRow className="k-master-row">
133
- <TableTd>Perth Pasties</TableTd>
134
- <TableTd>32.8</TableTd>
135
- <TableTd>0</TableTd>
136
- <TableTd>Meat/Poultry</TableTd>
137
- </TableRow>
138
- </TableTbody>
139
- </Table>
140
- </div>
141
- <Pager refresh={false} className="k-grid-pager"/>
142
- </div>
61
+ </GridHeader>
62
+ <GridContainer>
63
+ <GridContent>
64
+ <GridTable>
65
+ <colgroup>
66
+ <col />
67
+ <col />
68
+ <col />
69
+ </colgroup>
70
+ <TableTbody>
71
+ <TableRow className="k-master-row">
72
+ <TableTd>Chef Anton's Gumbo</TableTd>
73
+ <TableTd>21.35</TableTd>
74
+ <TableTd>0</TableTd>
75
+ <TableTd>Condiments</TableTd>
76
+ </TableRow>
77
+ <TableRow className="k-alt" alt>
78
+ <TableTd>Alice Mutton</TableTd>
79
+ <TableTd>39</TableTd>
80
+ <TableTd>0</TableTd>
81
+ <TableTd>Meat/Poultry</TableTd>
82
+ </TableRow>
83
+ <TableRow className="k-master-row">
84
+ <TableTd>Singaporean Hokkien Fried Mee</TableTd>
85
+ <TableTd>123.79</TableTd>
86
+ <TableTd>1</TableTd>
87
+ <TableTd>Meat/Poultry</TableTd>
88
+ </TableRow>
89
+ <TableRow className="k-alt" alt>
90
+ <TableTd>Gorgonzola Telino</TableTd>
91
+ <TableTd>12.5</TableTd>
92
+ <TableTd>0</TableTd>
93
+ <TableTd>Meat/Poultry</TableTd>
94
+ </TableRow>
95
+ <TableRow className="k-master-row">
96
+ <TableTd>Perth Pasties</TableTd>
97
+ <TableTd>32.8</TableTd>
98
+ <TableTd>0</TableTd>
99
+ <TableTd>Meat/Poultry</TableTd>
100
+ </TableRow>
101
+ </TableTbody>
102
+ </GridTable>
103
+ </GridContent>
104
+ </GridContainer>
105
+ </Grid>
143
106
  </section>
144
107
 
145
108
  <Popup className="k-column-menu k-grid-columnmenu-popup">