@progress/kendo-themes-html 7.2.1-dev.0 → 7.2.1-dev.1

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 (172) hide show
  1. package/dist/cjs/autocomplete/tests/autocomplete-prefix-suffix.js +1096 -888
  2. package/dist/cjs/column-menu/column-menu-expander.spec.js +5933 -0
  3. package/dist/cjs/column-menu/column-menu-item-content.js +47 -0
  4. package/dist/cjs/column-menu/column-menu-item-wrapper.js +46 -0
  5. package/dist/cjs/column-menu/column-menu-item.spec.js +4396 -0
  6. package/dist/cjs/column-menu/column-menu-multicheck-item.js +261 -0
  7. package/dist/cjs/column-menu/column-menu-multicheck-wrap.js +46 -0
  8. package/dist/cjs/column-menu/column-menu.spec.js +67 -0
  9. package/dist/cjs/column-menu/filter-menu.spec.js +61 -0
  10. package/dist/cjs/column-menu/templates/column-menu-normal.js +5957 -0
  11. package/dist/cjs/column-menu/templates/column-menu-tabbed.js +5947 -0
  12. package/dist/cjs/column-menu/templates/filter-menu-multi-check.js +5984 -0
  13. package/dist/cjs/column-menu/templates/filter-menu-normal.js +5947 -0
  14. package/dist/cjs/column-menu/tests/column-menu-rtl.js +6038 -0
  15. package/dist/cjs/column-menu/tests/column-menu-tabbed.js +6026 -0
  16. package/dist/cjs/column-menu/tests/column-menu.js +6038 -0
  17. package/dist/cjs/combobox/tests/combobox-prefix-suffix.js +1096 -888
  18. package/dist/cjs/filemanager/tests/filemanager-gridview-preview.js +957 -749
  19. package/dist/cjs/filemanager/tests/filemanager-listview-preview.js +911 -703
  20. package/dist/cjs/form/tests/form-field-dropdowns.js +1095 -887
  21. package/dist/cjs/grid/tests/grid-column-menu-rtl.js +707 -603
  22. package/dist/cjs/grid/tests/grid-column-menu-tabbed.js +841 -655
  23. package/dist/cjs/grid/tests/grid-column-menu.js +706 -602
  24. package/dist/cjs/grid/tests/grid-column-reordering-actions.js +302 -122
  25. package/dist/cjs/grid/tests/grid-column-reordering.js +308 -128
  26. package/dist/cjs/grid/tests/grid-column-resizing-actions.js +290 -107
  27. package/dist/cjs/grid/tests/grid-editing-custom-editor.js +1168 -960
  28. package/dist/cjs/grid/tests/grid-grouping-actions.js +272 -59
  29. package/dist/cjs/index.js +2539 -2199
  30. package/dist/cjs/multiselect/templates/multiselect-prefix.js +1071 -863
  31. package/dist/cjs/multiselect/templates/multiselect-suffix.js +1071 -863
  32. package/dist/cjs/multiselect/tests/multiselect-adaptive.js +1077 -869
  33. package/dist/cjs/multiselect/tests/multiselect-flat.js +1101 -893
  34. package/dist/cjs/multiselect/tests/multiselect-grouping.js +1077 -869
  35. package/dist/cjs/multiselect/tests/multiselect-opened.js +1079 -871
  36. package/dist/cjs/multiselect/tests/multiselect-outline.js +1101 -893
  37. package/dist/cjs/multiselect/tests/multiselect-prefix-suffix.js +1108 -900
  38. package/dist/cjs/multiselect/tests/multiselect-size-rounded.js +1080 -872
  39. package/dist/cjs/multiselect/tests/multiselect-solid.js +1101 -893
  40. package/dist/cjs/pivotgrid/tests/pivotgrid-column-menus.js +886 -739
  41. package/dist/cjs/pivotgrid/tests/pivotgrid-settings-panel-reordering.js +1172 -308
  42. package/dist/cjs/scheduler/tests/scheduler-edit-dialog.js +1110 -902
  43. package/dist/cjs/scheduler/tests/scheduler-editing-weekly.js +1124 -916
  44. package/dist/cjs/taskboard/taskboard-pane.js +1078 -870
  45. package/dist/cjs/taskboard/taskboard.spec.js +993 -785
  46. package/dist/cjs/taskboard/templates/taskboard-normal.js +1027 -819
  47. package/dist/cjs/taskboard/tests/taskboard-card-column-menu.js +1620 -64
  48. package/dist/cjs/taskboard/tests/taskboard-card.js +1099 -891
  49. package/dist/cjs/taskboard/tests/taskboard-column.js +1114 -906
  50. package/dist/cjs/taskboard/tests/taskboard-pane.js +1035 -827
  51. package/dist/cjs/taskboard/tests/taskboard-resources.js +1081 -873
  52. package/dist/cjs/taskboard/tests/taskboard-rtl.js +1033 -825
  53. package/dist/cjs/taskboard/tests/taskboard.js +1033 -825
  54. package/dist/cjs/treelist/tests/treelist-aggregate-react.js +4277 -73
  55. package/dist/cjs/treelist/tests/treelist-aggregates.js +4519 -216
  56. package/dist/cjs/treelist/tests/treelist-react.js +2518 -98
  57. package/dist/cjs/treelist/tests/treelist-row-reordering.js +4371 -59
  58. package/dist/cjs/treelist/tests/treelist.js +4409 -112
  59. package/dist/cjs/treelist/treelist.spec.js +8415 -0
  60. package/dist/esm/autocomplete/tests/autocomplete-prefix-suffix.js +1011 -803
  61. package/dist/esm/column-menu/column-menu-expander.spec.js +5917 -0
  62. package/dist/esm/column-menu/column-menu-item-content.js +25 -0
  63. package/dist/esm/column-menu/column-menu-item-wrapper.js +24 -0
  64. package/dist/esm/column-menu/column-menu-item.spec.js +4380 -0
  65. package/dist/esm/column-menu/column-menu-multicheck-item.js +239 -0
  66. package/dist/esm/column-menu/column-menu-multicheck-wrap.js +24 -0
  67. package/dist/esm/column-menu/column-menu.spec.js +45 -0
  68. package/dist/esm/column-menu/filter-menu.spec.js +39 -0
  69. package/dist/esm/column-menu/templates/column-menu-normal.js +5941 -0
  70. package/dist/esm/column-menu/templates/column-menu-tabbed.js +5931 -0
  71. package/dist/esm/column-menu/templates/filter-menu-multi-check.js +5968 -0
  72. package/dist/esm/column-menu/templates/filter-menu-normal.js +5931 -0
  73. package/dist/esm/column-menu/tests/column-menu-rtl.js +6022 -0
  74. package/dist/esm/column-menu/tests/column-menu-tabbed.js +6010 -0
  75. package/dist/esm/column-menu/tests/column-menu.js +6022 -0
  76. package/dist/esm/combobox/tests/combobox-prefix-suffix.js +1011 -803
  77. package/dist/esm/filemanager/tests/filemanager-gridview-preview.js +949 -741
  78. package/dist/esm/filemanager/tests/filemanager-listview-preview.js +903 -695
  79. package/dist/esm/form/tests/form-field-dropdowns.js +1010 -802
  80. package/dist/esm/grid/tests/grid-column-menu-rtl.js +707 -603
  81. package/dist/esm/grid/tests/grid-column-menu-tabbed.js +852 -666
  82. package/dist/esm/grid/tests/grid-column-menu.js +706 -602
  83. package/dist/esm/grid/tests/grid-column-reordering-actions.js +302 -122
  84. package/dist/esm/grid/tests/grid-column-reordering.js +308 -128
  85. package/dist/esm/grid/tests/grid-column-resizing-actions.js +290 -107
  86. package/dist/esm/grid/tests/grid-editing-custom-editor.js +1083 -875
  87. package/dist/esm/grid/tests/grid-grouping-actions.js +272 -59
  88. package/dist/esm/index.js +2495 -2155
  89. package/dist/esm/multiselect/templates/multiselect-prefix.js +986 -778
  90. package/dist/esm/multiselect/templates/multiselect-suffix.js +986 -778
  91. package/dist/esm/multiselect/tests/multiselect-adaptive.js +992 -784
  92. package/dist/esm/multiselect/tests/multiselect-flat.js +1016 -808
  93. package/dist/esm/multiselect/tests/multiselect-grouping.js +992 -784
  94. package/dist/esm/multiselect/tests/multiselect-opened.js +994 -786
  95. package/dist/esm/multiselect/tests/multiselect-outline.js +1016 -808
  96. package/dist/esm/multiselect/tests/multiselect-prefix-suffix.js +1023 -815
  97. package/dist/esm/multiselect/tests/multiselect-size-rounded.js +995 -787
  98. package/dist/esm/multiselect/tests/multiselect-solid.js +1016 -808
  99. package/dist/esm/pivotgrid/tests/pivotgrid-column-menus.js +886 -739
  100. package/dist/esm/pivotgrid/tests/pivotgrid-settings-panel-reordering.js +1172 -308
  101. package/dist/esm/scheduler/tests/scheduler-edit-dialog.js +1025 -817
  102. package/dist/esm/scheduler/tests/scheduler-editing-weekly.js +1039 -831
  103. package/dist/esm/taskboard/taskboard-pane.js +985 -777
  104. package/dist/esm/taskboard/taskboard.spec.js +981 -773
  105. package/dist/esm/taskboard/templates/taskboard-normal.js +1015 -807
  106. package/dist/esm/taskboard/tests/taskboard-card-column-menu.js +1620 -64
  107. package/dist/esm/taskboard/tests/taskboard-card.js +1014 -806
  108. package/dist/esm/taskboard/tests/taskboard-column.js +1029 -821
  109. package/dist/esm/taskboard/tests/taskboard-pane.js +1023 -815
  110. package/dist/esm/taskboard/tests/taskboard-resources.js +996 -788
  111. package/dist/esm/taskboard/tests/taskboard-rtl.js +1021 -813
  112. package/dist/esm/taskboard/tests/taskboard.js +1021 -813
  113. package/dist/esm/treelist/tests/treelist-aggregate-react.js +4277 -73
  114. package/dist/esm/treelist/tests/treelist-aggregates.js +4520 -217
  115. package/dist/esm/treelist/tests/treelist-react.js +2518 -98
  116. package/dist/esm/treelist/tests/treelist-row-reordering.js +4371 -59
  117. package/dist/esm/treelist/tests/treelist.js +4410 -113
  118. package/dist/esm/treelist/treelist.spec.js +8399 -0
  119. package/dist/types/column-menu/column-menu-expander.spec.d.ts +17 -0
  120. package/dist/types/column-menu/column-menu-item-content.d.ts +1 -0
  121. package/dist/types/column-menu/column-menu-item-wrapper.d.ts +1 -0
  122. package/dist/types/column-menu/column-menu-item.spec.d.ts +17 -0
  123. package/dist/types/column-menu/column-menu-multicheck-item.d.ts +4 -0
  124. package/dist/types/column-menu/column-menu-multicheck-wrap.d.ts +1 -0
  125. package/dist/types/column-menu/column-menu.spec.d.ts +14 -0
  126. package/dist/types/column-menu/filter-menu.spec.d.ts +9 -0
  127. package/dist/types/column-menu/index.d.ts +12 -0
  128. package/dist/types/column-menu/templates/column-menu-normal.d.ts +1 -0
  129. package/dist/types/column-menu/templates/column-menu-tabbed.d.ts +1 -0
  130. package/dist/types/column-menu/templates/filter-menu-multi-check.d.ts +1 -0
  131. package/dist/types/column-menu/templates/filter-menu-normal.d.ts +1 -0
  132. package/dist/types/column-menu/tests/column-menu-rtl.d.ts +2 -0
  133. package/dist/types/column-menu/tests/column-menu-tabbed.d.ts +2 -0
  134. package/dist/types/column-menu/tests/column-menu.d.ts +2 -0
  135. package/dist/types/index.d.ts +2 -0
  136. package/dist/types/treelist/index.d.ts +1 -0
  137. package/dist/types/treelist/treelist.spec.d.ts +9 -0
  138. package/package.json +2 -2
  139. package/src/column-menu/column-menu-expander.spec.tsx +66 -0
  140. package/src/column-menu/column-menu-item-content.tsx +18 -0
  141. package/src/column-menu/column-menu-item-wrapper.tsx +17 -0
  142. package/src/column-menu/column-menu-item.spec.tsx +56 -0
  143. package/src/column-menu/column-menu-multicheck-item.tsx +32 -0
  144. package/src/column-menu/column-menu-multicheck-wrap.tsx +17 -0
  145. package/src/column-menu/column-menu.spec.tsx +46 -0
  146. package/src/column-menu/filter-menu.spec.tsx +38 -0
  147. package/src/column-menu/index.ts +12 -0
  148. package/src/column-menu/templates/column-menu-normal.tsx +23 -0
  149. package/src/column-menu/templates/column-menu-tabbed.tsx +36 -0
  150. package/src/column-menu/templates/filter-menu-multi-check.tsx +26 -0
  151. package/src/column-menu/templates/filter-menu-normal.tsx +23 -0
  152. package/src/column-menu/tests/column-menu-rtl.tsx +119 -0
  153. package/src/column-menu/tests/column-menu-tabbed.tsx +113 -0
  154. package/src/column-menu/tests/column-menu.tsx +119 -0
  155. package/src/grid/tests/grid-column-menu-rtl.tsx +194 -367
  156. package/src/grid/tests/grid-column-menu-tabbed.tsx +147 -260
  157. package/src/grid/tests/grid-column-menu.tsx +194 -366
  158. package/src/grid/tests/grid-column-reordering-actions.tsx +48 -77
  159. package/src/grid/tests/grid-column-reordering.tsx +60 -86
  160. package/src/grid/tests/grid-column-resizing-actions.tsx +25 -64
  161. package/src/grid/tests/grid-grouping-actions.tsx +15 -11
  162. package/src/index.ts +2 -1
  163. package/src/pivotgrid/tests/pivotgrid-column-menus.tsx +141 -232
  164. package/src/pivotgrid/tests/pivotgrid-settings-panel-reordering.tsx +17 -34
  165. package/src/taskboard/tests/taskboard-card-column-menu.tsx +12 -22
  166. package/src/treelist/index.ts +1 -0
  167. package/src/treelist/tests/treelist-aggregate-react.tsx +73 -71
  168. package/src/treelist/tests/treelist-aggregates.tsx +219 -242
  169. package/src/treelist/tests/treelist-react.tsx +98 -95
  170. package/src/treelist/tests/treelist-row-reordering.tsx +95 -74
  171. package/src/treelist/tests/treelist.tsx +110 -139
  172. package/src/treelist/treelist.spec.tsx +32 -0
package/src/treelist/tests/treelist-aggregates.tsx CHANGED
@@ -1,5 +1,7 @@
1
1
  import { Icon } from '../../icon';
2
-
2
+ import { TreeList } from '../../treelist';
3
+ import { GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid';
4
+ import { TableThead, TableTbody, TableRow, TableTd } from '../../table';
3
5
 
4
6
  export default () =>(
5
7
  <>
@@ -7,265 +9,240 @@ export default () =>(
7
9
 
8
10
  <section>
9
11
  <span>jQuery</span>
10
- <div id="treelist" className="k-treelist k-grid k-grid-md k-grid-display-block" style={{ height: "650px" }}>
11
- <div className="k-grid-header">
12
+ <TreeList id="treelist" className="k-grid-display-block" style={{ height: "650px" }}>
13
+ <GridHeader>
12
14
  <div className="k-grid-header-wrap">
13
- <table className="k-table k-table-md k-grid-header-table">
15
+ <GridHeaderTable>
14
16
  <colgroup>
15
17
  <col />
16
18
  <col />
17
19
  <col />
18
20
  </colgroup>
19
- <thead className="k-table-thead">
20
- <tr className="k-table-row">
21
- <th className="k-table-th k-header k-filterable" rowSpan={1}>
22
- <span className="k-cell-inner">
23
- <span className="k-link">
24
- <span className="k-column-title">Name</span>
25
- </span>
26
- <a href="#" className="k-grid-filter-menu k-grid-header-menu"><Icon icon="filter" /></a>
27
- </span>
28
- </th>
29
- <th className="k-table-th k-header k-filterable" rowSpan={1} data-index={1}>
30
- <span className="k-cell-inner">
31
- <span className="k-link">
32
- <span className="k-column-title">Position</span>
33
- </span>
34
- <a href="#" className="k-grid-filter-menu k-grid-header-menu"><Icon icon="filter" /></a>
35
- </span>
36
- </th>
37
- <th data-title="Hire Date" className="k-table-th k-header k-filterable" rowSpan={1}>
38
- <span className="k-cell-inner">
39
- <span className="k-link">
40
- <span className="k-column-title">Hire Date</span>
41
- </span>
42
- <a href="#" className="k-grid-filter-menu k-grid-header-menu"><Icon icon="filter" /></a>
43
- </span>
44
- </th>
45
- </tr>
46
- </thead>
47
- </table>
21
+ <TableThead>
22
+ <TableRow>
23
+ <GridHeaderCell rowspan={1} menu="filter" columnTitle="Name"></GridHeaderCell>
24
+ <GridHeaderCell rowspan={1} data-index={1} menu="filter" columnTitle="Position"></GridHeaderCell>
25
+ <GridHeaderCell rowspan={1} menu="filter" columnTitle="Hire Date"></GridHeaderCell>
26
+ </TableRow>
27
+ </TableThead>
28
+ </GridHeaderTable>
48
29
  </div>
49
- </div>
50
- <div className="k-grid-content k-auto-scrollable" style={{ display: "block", height: "591px" }}>
51
- <table className="k-table k-table-md k-grid-table">
52
- <colgroup>
53
- <col />
54
- <col />
55
- <col />
56
- </colgroup>
57
- <tbody className="k-table-tbody">
58
- <tr className="k-table-row k-treelist-group">
59
- <td className="k-table-td" style={{ whiteSpace: "nowrap" }}>
60
- <Icon className="k-treelist-toggle" icon="caret-alt-down" />
61
- Daryl Sweeney
62
- </td>
63
- <td className="k-table-td">CEO</td>
64
- <td className="k-table-td">February 7, 2012</td>
65
- </tr>
66
- <tr className="k-table-row k-table-alt-row k-alt k-treelist-group">
67
- <td className="k-table-td" style={{ whiteSpace: "nowrap" }}><Icon className="k-treelist-toggle" icon="none"></Icon>
68
- <Icon className="k-treelist-toggle" icon="caret-alt-right" />
69
- Guy Wooten
70
- </td>
71
- <td className="k-table-td">Chief Technical Officer</td>
72
- <td className="k-table-td">March 3, 2010</td>
73
- </tr>
74
- <tr className="k-table-row k-treelist-group">
75
- <td className="k-table-td" style={{ whiteSpace: "nowrap" }}><Icon className="k-treelist-toggle" icon="none"></Icon>
76
- <Icon className="k-treelist-toggle" icon="caret-alt-right" />
77
- Priscilla Frank
78
- </td>
79
- <td className="k-table-td">Chief Product Officer</td>
80
- <td className="k-table-td">November 30, 2014</td>
81
- </tr>
82
- <tr className="k-table-row k-table-alt-row k-alt k-treelist-group">
83
- <td className="k-table-td" style={{ whiteSpace: "nowrap" }}><Icon className="k-treelist-toggle" icon="none"></Icon>
84
- <Icon className="k-treelist-toggle" icon="caret-alt-down" />
85
- Anika Vega
86
- </td>
87
- <td className="k-table-td">Chief Process Officer</td>
88
- <td className="k-table-td">February 25, 2010</td>
89
- </tr>
90
- <tr className="k-table-row k-treelist-group">
91
- <td className="k-table-td" style={{ whiteSpace: "nowrap" }}><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>
92
- <Icon className="k-treelist-toggle" icon="caret-alt-right" />
93
- Vernon Ballard
94
- </td>
95
- <td className="k-table-td">Director Facilities</td>
96
- <td className="k-table-td">June 26, 2015</td>
97
- </tr>
98
- <tr className="k-table-row k-footer-template">
99
- <td className="k-table-td k-focus"><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>7 employee(s)</td>
100
- <td className="k-table-td"></td>
101
- <td className="k-table-td">Last employee hired on July 30, 2015</td>
102
- </tr>
103
- <tr className="k-table-row k-table-alt-row k-alt k-treelist-group">
104
- <td className="k-table-td" style={{ whiteSpace: "nowrap" }}><Icon className="k-treelist-toggle" icon="none"></Icon>
105
- <Icon className="k-treelist-toggle" icon="caret-alt-right" />
106
- Nevada Hart
107
- </td>
108
- <td className="k-table-td">Chief Financial Officer</td>
109
- <td className="k-table-td">August 17, 2015</td>
110
- </tr>
111
- <tr className="k-table-row k-treelist-group">
112
- <td className="k-table-td" style={{ whiteSpace: "nowrap" }}><Icon className="k-treelist-toggle" icon="none"></Icon>
113
- <Icon className="k-treelist-toggle" icon="caret-alt-right" />
114
- Hunter Fry
115
- </td>
116
- <td className="k-table-td">General Counsel</td>
117
- <td className="k-table-td">February 12, 2011</td>
118
- </tr>
119
- <tr className="k-table-row k-footer-template">
120
- <td className="k-table-td"><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>98 employee(s)</td>
121
- <td className="k-table-td"></td>
122
- <td className="k-table-td">Last employee hired on August 17, 2015</td>
123
- </tr>
124
- <tr className="k-table-row k-footer-template">
125
- <td className="k-table-td"><Icon className="k-treelist-toggle" icon="none"></Icon>99 employee(s)</td>
126
- <td className="k-table-td"></td>
127
- <td className="k-table-td">Last employee hired on August 17, 2015</td>
128
- </tr>
129
- </tbody>
130
- </table>
131
- </div>
132
- </div>
30
+ </GridHeader>
31
+ <GridContainer>
32
+ <GridContent className="k-auto-scrollable" style={{ display: "block", height: "591px" }}>
33
+ <GridTable>
34
+ <colgroup>
35
+ <col />
36
+ <col />
37
+ <col />
38
+ </colgroup>
39
+ <TableTbody>
40
+ <TableRow className="k-treelist-group">
41
+ <TableTd style={{ whiteSpace: "nowrap" }}>
42
+ <Icon className="k-treelist-toggle" icon="caret-alt-down" />
43
+ Daryl Sweeney
44
+ </TableTd>
45
+ <TableTd>CEO</TableTd>
46
+ <TableTd>February 7, 2012</TableTd>
47
+ </TableRow>
48
+ <TableRow className="k-alt k-treelist-group" alt>
49
+ <TableTd style={{ whiteSpace: "nowrap" }}>
50
+ <Icon className="k-treelist-toggle" icon="none" />
51
+ <Icon className="k-treelist-toggle" icon="caret-alt-right" />
52
+ Guy Wooten
53
+ </TableTd>
54
+ <TableTd>Chief Technical Officer</TableTd>
55
+ <TableTd>March 3, 2010</TableTd>
56
+ </TableRow>
57
+ <TableRow className="k-treelist-group">
58
+ <TableTd style={{ whiteSpace: "nowrap" }}>
59
+ <Icon className="k-treelist-toggle" icon="none" />
60
+ <Icon className="k-treelist-toggle" icon="caret-alt-right" />
61
+ Priscilla Frank
62
+ </TableTd>
63
+ <TableTd>Chief Product Officer</TableTd>
64
+ <TableTd>November 30, 2014</TableTd>
65
+ </TableRow>
66
+ <TableRow className="k-treelist-group k-alt" alt>
67
+ <TableTd style={{ whiteSpace: "nowrap" }}>
68
+ <Icon className="k-treelist-toggle" icon="none" />
69
+ <Icon className="k-treelist-toggle" icon="caret-alt-down" />
70
+ Anika Vega
71
+ </TableTd>
72
+ <TableTd>Chief Process Officer</TableTd>
73
+ <TableTd>February 25, 2010</TableTd>
74
+ </TableRow>
75
+ <TableRow className="k-treelist-group">
76
+ <TableTd style={{ whiteSpace: "nowrap" }}>
77
+ <Icon className="k-treelist-toggle" icon="none" />
78
+ <Icon className="k-treelist-toggle" icon="none" />
79
+ <Icon className="k-treelist-toggle" icon="caret-alt-right" />
80
+ Vernon Ballard
81
+ </TableTd>
82
+ <TableTd>Director Facilities</TableTd>
83
+ <TableTd>June 26, 2015</TableTd>
84
+ </TableRow>
85
+ <TableRow className="k-footer-template">
86
+ <TableTd className="k-focus">
87
+ <Icon className="k-treelist-toggle" icon="none" />
88
+ <Icon className="k-treelist-toggle" icon="none" />
89
+ <Icon className="k-treelist-toggle" icon="none" />
90
+ 7 employee(s)
91
+ </TableTd>
92
+ <TableTd></TableTd>
93
+ <TableTd>Last employee hired on July 30, 2015</TableTd>
94
+ </TableRow>
95
+ <TableRow className="k-alt k-treelist-group" alt>
96
+ <TableTd style={{ whiteSpace: "nowrap" }}>
97
+ <Icon className="k-treelist-toggle" icon="none" />
98
+ <Icon className="k-treelist-toggle" icon="caret-alt-right" />
99
+ Nevada Hart
100
+ </TableTd>
101
+ <TableTd>Chief Financial Officer</TableTd>
102
+ <TableTd>August 17, 2015</TableTd>
103
+ </TableRow>
104
+ <TableRow className="k-treelist-group">
105
+ <TableTd style={{ whiteSpace: "nowrap" }}>
106
+ <Icon className="k-treelist-toggle" icon="none" />
107
+ <Icon className="k-treelist-toggle" icon="caret-alt-right" />
108
+ Hunter Fry
109
+ </TableTd>
110
+ <TableTd>General Counsel</TableTd>
111
+ <TableTd>February 12, 2011</TableTd>
112
+ </TableRow>
113
+ <TableRow className="k-footer-template">
114
+ <TableTd>
115
+ <Icon className="k-treelist-toggle" icon="none" />
116
+ <Icon className="k-treelist-toggle" icon="none" />
117
+ 98 employee(s)
118
+ </TableTd>
119
+ <TableTd></TableTd>
120
+ <TableTd>Last employee hired on August 17, 2015</TableTd>
121
+ </TableRow>
122
+ <TableRow className="k-footer-template">
123
+ <TableTd>
124
+ <Icon className="k-treelist-toggle" icon="none" />
125
+ 99 employee(s)
126
+ </TableTd>
127
+ <TableTd></TableTd>
128
+ <TableTd>Last employee hired on August 17, 2015</TableTd>
129
+ </TableRow>
130
+ </TableTbody>
131
+ </GridTable>
132
+ </GridContent>
133
+ </GridContainer>
134
+ </TreeList>
133
135
  </section>
134
136
 
135
137
  <section>
136
138
  <span>Angular</span>
137
- <div className="k-grid k-grid-md k-treelist" style={{ height: "410px" }}>
138
- <div className="k-grid-aria-root">
139
- <div className="k-grid-header">
140
- <div className="k-grid-header-wrap">
141
- <table className="k-table k-table-md k-grid-header-table">
139
+ <TreeList _renderAriaRoot style={{ height: "410px" }}>
140
+ <GridHeader>
141
+ <div className="k-grid-header-wrap">
142
+ <GridHeaderTable>
143
+ <colgroup>
144
+ <col style={{ width: "250px" }} />
145
+ <col style={{ width: "180px" }} />
146
+ <col style={{ width: "180px" }} />
147
+ </colgroup>
148
+ <TableThead>
149
+ <TableRow>
150
+ <GridHeaderCell rowspan={1} colspan={1} columnTitle="Name"></GridHeaderCell>
151
+ <GridHeaderCell rowspan={1} colspan={1} columnTitle="Title"></GridHeaderCell>
152
+ <GridHeaderCell rowspan={1} colspan={1} columnTitle="hireDate"></GridHeaderCell>
153
+ </TableRow>
154
+ </TableThead>
155
+ </GridHeaderTable>
156
+ </div>
157
+ </GridHeader>
158
+ <GridContainer>
159
+ <GridContent className="k-virtual-content">
160
+ <div className="k-grid-table-wrap">
161
+ <GridTable>
142
162
  <colgroup>
143
163
  <col style={{ width: "250px" }} />
144
164
  <col style={{ width: "180px" }} />
145
165
  <col style={{ width: "180px" }} />
146
166
  </colgroup>
147
- <thead className="k-table-thead">
148
- <tr className="k-table-row">
149
- <th className="k-table-th k-header" rowSpan={1} colSpan={1}>
150
- <span className="k-cell-inner">
151
- <span className="k-link">
152
- <span className="k-column-title">Name</span>
153
- </span>
154
- </span>
155
- </th>
156
- <th className="k-table-th k-header" rowSpan={1} colSpan={1}>
157
- <span className="k-cell-inner">
158
- <span className="k-link">
159
- <span className="k-column-title">Title</span>
160
- </span>
161
- </span>
162
- </th>
163
- <th className="k-table-th k-header" rowSpan={1} colSpan={1}>
164
- <span className="k-cell-inner">
165
- <span className="k-link">
166
- <span className="k-column-title">hireDate</span>
167
- </span>
168
- </span>
169
- </th>
170
- </tr>
171
- </thead>
172
- </table>
173
- </div>
174
- </div>
175
- <div className="k-grid-container">
176
- <div className="k-grid-content k-virtual-content">
177
- <div className="k-grid-table-wrap">
178
- <table className="k-table k-table-md k-grid-table">
179
- <colgroup>
180
- <col style={{ width: "250px" }} />
181
- <col style={{ width: "180px" }} />
182
- <col style={{ width: "180px" }} />
183
- </colgroup>
184
- <tbody className="k-table-tbody">
185
- <tr className="k-table-row">
186
- <td colSpan={1} className="k-table-td">
187
- <Icon className="k-treelist-toggle" icon="caret-alt-down" />
167
+ <TableTbody>
168
+ <TableRow>
169
+ <TableTd colspan={1}>
170
+ <Icon className="k-treelist-toggle" icon="caret-alt-down" />
188
171
  Daryl Sweeney
189
- </td>
190
- <td colSpan={1} className="k-table-td">
191
- Chief Executive Officer
192
- </td>
193
- <td colSpan={1} className="k-table-td">1/15/2019</td>
194
- </tr>
195
- <tr className="k-table-row k-table-alt-row k-alt">
196
- <td colSpan={1} className="k-table-td">
197
- <Icon className="k-treelist-toggle" icon="none"></Icon>
198
- <Icon className="k-treelist-toggle" icon="caret-alt-down" />
199
- Guy Wooten
200
- </td>
201
- <td colSpan={1} className="k-table-td">
202
- Chief Technical Officer
203
- </td>
204
- <td colSpan={1} className="k-table-td">2/19/2019</td>
205
- </tr>
206
- <tr className="k-table-row">
207
- <td colSpan={1} className="k-table-td">
208
- <Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>
209
- <Icon className="k-treelist-toggle" icon="caret-alt-right" />
210
- Buffy Weber
211
- </td>
212
- <td colSpan={1} className="k-table-td">
213
- VP, Engineering
214
- </td>
215
- <td colSpan={1} className="k-table-td">4/13/2019</td>
216
- </tr>
217
- <tr className="k-table-row k-footer">
218
- <td className="k-table-td k-focus">
219
- <Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>
220
- 35 employee(s)
221
- </td>
222
- <td className="k-table-td"></td>
223
- <td className="k-table-td">
224
- Last employee hired on 10/21/2019
225
- </td>
226
- </tr>
227
- <tr className="k-table-row k-table-alt-row k-alt">
228
- <td colSpan={1} className="k-table-td">
229
- <Icon className="k-treelist-toggle" icon="none"></Icon>
230
- <Icon className="k-treelist-toggle" icon="caret-alt-right"></Icon>
231
- Priscilla Frank
232
- </td>
233
- <td colSpan={1} className="k-table-td">
234
- Chief Product Officer
235
- </td>
236
- <td colSpan={1} className="k-table-td">4/22/2019</td>
237
- </tr>
238
- <tr className="k-footer">
239
- <td className="k-table-td">
240
- <Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>
241
- 42 employee(s)
242
- </td>
243
- <td className="k-table-td"></td>
244
- <td className="k-table-td">
245
- Last employee hired on 10/21/2019
246
- </td>
247
- </tr>
248
- <tr className="k-table-row k-footer">
249
- <td className="k-table-td">
250
- <Icon className="k-treelist-toggle" icon="none"></Icon>
251
- 43 employee(s)
252
- </td>
253
- <td className="k-table-td"></td>
254
- <td className="k-table-td">
255
- Last employee hired on 10/21/2019
256
- </td>
257
- </tr>
258
- </tbody>
259
- </table>
260
- </div>
261
- <div className="k-height-container">
262
- <div style={{ height: '0px' }}></div>
263
- </div>
172
+ </TableTd>
173
+ <TableTd colspan={1}>Chief Executive Officer</TableTd>
174
+ <TableTd colspan={1}>1/15/2019</TableTd>
175
+ </TableRow>
176
+ <TableRow className="k-alt" alt>
177
+ <TableTd colspan={1}>
178
+ <Icon className="k-treelist-toggle" icon="none" />
179
+ <Icon className="k-treelist-toggle" icon="caret-alt-down" />
180
+ Guy Wooten
181
+ </TableTd>
182
+ <TableTd colspan={1}>Chief Technical Officer</TableTd>
183
+ <TableTd colspan={1}>2/19/2019</TableTd>
184
+ </TableRow>
185
+ <TableRow>
186
+ <TableTd colspan={1}>
187
+ <Icon className="k-treelist-toggle" icon="none" />
188
+ <Icon className="k-treelist-toggle" icon="none" />
189
+ <Icon className="k-treelist-toggle" icon="caret-alt-right" />
190
+ Buffy Weber
191
+ </TableTd>
192
+ <TableTd colspan={1}>VP, Engineering</TableTd>
193
+ <TableTd colspan={1}>4/13/2019</TableTd>
194
+ </TableRow>
195
+ <TableRow className="k-footer">
196
+ <TableTd className="k-focus">
197
+ <Icon className="k-treelist-toggle" icon="none" />
198
+ <Icon className="k-treelist-toggle" icon="none" />
199
+ <Icon className="k-treelist-toggle" icon="none" />
200
+ 35 employee(s)
201
+ </TableTd>
202
+ <TableTd></TableTd>
203
+ <TableTd>
204
+ Last employee hired on 10/21/2019
205
+ </TableTd>
206
+ </TableRow>
207
+ <TableRow className="k-alt" alt>
208
+ <TableTd colspan={1}>
209
+ <Icon className="k-treelist-toggle" icon="none" />
210
+ <Icon className="k-treelist-toggle" icon="caret-alt-right" />
211
+ Priscilla Frank
212
+ </TableTd>
213
+ <TableTd colspan={1}>Chief Product Officer</TableTd>
214
+ <TableTd colspan={1}>4/22/2019</TableTd>
215
+ </TableRow>
216
+ <TableRow className="k-footer">
217
+ <TableTd>
218
+ <Icon className="k-treelist-toggle" icon="none" />
219
+ <Icon className="k-treelist-toggle" icon="none" />
220
+ 42 employee(s)
221
+ </TableTd>
222
+ <TableTd></TableTd>
223
+ <TableTd>
224
+ Last employee hired on 10/21/2019
225
+ </TableTd>
226
+ </TableRow>
227
+ <TableRow className="k-footer">
228
+ <TableTd>
229
+ <Icon className="k-treelist-toggle" icon="none" />
230
+ 43 employee(s)
231
+ </TableTd>
232
+ <TableTd></TableTd>
233
+ <TableTd>
234
+ Last employee hired on 10/21/2019
235
+ </TableTd>
236
+ </TableRow>
237
+ </TableTbody>
238
+ </GridTable>
264
239
  </div>
265
- </div>
266
- </div>
267
- </div>
268
-
240
+ <div className="k-height-container">
241
+ <div style={{ height: '0px' }}></div>
242
+ </div>
243
+ </GridContent>
244
+ </GridContainer>
245
+ </TreeList>
269
246
  </section>
270
247
  </div>
271
248
  </>