@progress/kendo-themes-html 6.2.1-dev.0 → 6.2.1-dev.44

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 (116) hide show
  1. package/dist/action-sheet/tests/action-sheet-data-table.js +382 -2
  2. package/dist/action-sheet/tests/action-sheet-data-table.js.map +4 -4
  3. package/dist/dropdowngrid/dropdowngrid.js +1 -1
  4. package/dist/dropdowngrid/dropdowngrid.js.map +2 -2
  5. package/dist/dropdowngrid/tests/dropdowngrid-flat.js +1 -1
  6. package/dist/dropdowngrid/tests/dropdowngrid-flat.js.map +2 -2
  7. package/dist/dropdowngrid/tests/dropdowngrid-outline.js +1 -1
  8. package/dist/dropdowngrid/tests/dropdowngrid-outline.js.map +2 -2
  9. package/dist/dropdowngrid/tests/dropdowngrid.js +1 -1
  10. package/dist/dropdowngrid/tests/dropdowngrid.js.map +2 -2
  11. package/dist/fab/fab-item.js +104 -0
  12. package/dist/fab/fab-item.js.map +7 -0
  13. package/dist/fab/fab-items.js +64 -0
  14. package/dist/fab/fab-items.js.map +7 -0
  15. package/dist/fab/tests/fab-items.js +51 -4
  16. package/dist/fab/tests/fab-items.js.map +4 -4
  17. package/dist/fab/tests/fab-position.js +6 -0
  18. package/dist/fab/tests/fab-position.js.map +4 -4
  19. package/dist/fab/tests/fab-size.js +6 -0
  20. package/dist/fab/tests/fab-size.js.map +4 -4
  21. package/dist/fab/tests/fab-states.js +6 -0
  22. package/dist/fab/tests/fab-states.js.map +4 -4
  23. package/dist/fab/tests/fab.js +6 -0
  24. package/dist/fab/tests/fab.js.map +4 -4
  25. package/dist/grid/tests/grid-rows-resizing.js +1131 -0
  26. package/dist/grid/tests/grid-rows-resizing.js.map +7 -0
  27. package/dist/index.js +711 -184
  28. package/dist/index.js.map +4 -4
  29. package/dist/popup/tests/popup-dropdowngrid.js +508 -0
  30. package/dist/popup/tests/popup-dropdowngrid.js.map +7 -0
  31. package/dist/table/data-table.js +97 -0
  32. package/dist/table/data-table.js.map +7 -0
  33. package/dist/table/table-body.js +67 -0
  34. package/dist/table/table-body.js.map +7 -0
  35. package/dist/table/table-footer.js +66 -0
  36. package/dist/table/table-footer.js.map +7 -0
  37. package/dist/table/table-group-header.js +66 -0
  38. package/dist/table/table-group-header.js.map +7 -0
  39. package/dist/table/table-group-row.js +66 -0
  40. package/dist/table/table-group-row.js.map +7 -0
  41. package/dist/table/table-group-sticky-header.js +66 -0
  42. package/dist/table/table-group-sticky-header.js.map +7 -0
  43. package/dist/table/table-header.js +115 -0
  44. package/dist/table/table-header.js.map +7 -0
  45. package/dist/table/table-list-group-row.js +66 -0
  46. package/dist/table/table-list-group-row.js.map +7 -0
  47. package/dist/table/table-list-row.js +78 -0
  48. package/dist/table/table-list-row.js.map +7 -0
  49. package/dist/table/table-list-td.js +103 -0
  50. package/dist/table/table-list-td.js.map +7 -0
  51. package/dist/table/table-list-th.js +103 -0
  52. package/dist/table/table-list-th.js.map +7 -0
  53. package/dist/table/table-list.js +97 -0
  54. package/dist/table/table-list.js.map +7 -0
  55. package/dist/table/table-row.js +78 -0
  56. package/dist/table/table-row.js.map +7 -0
  57. package/dist/table/table-tbody.js +66 -0
  58. package/dist/table/table-tbody.js.map +7 -0
  59. package/dist/table/table-td.js +105 -0
  60. package/dist/table/table-td.js.map +7 -0
  61. package/dist/table/table-tfoot.js +66 -0
  62. package/dist/table/table-tfoot.js.map +7 -0
  63. package/dist/table/table-th.js +105 -0
  64. package/dist/table/table-th.js.map +7 -0
  65. package/dist/table/table-thead.js +66 -0
  66. package/dist/table/table-thead.js.map +7 -0
  67. package/dist/table/table.js +94 -0
  68. package/dist/table/table.js.map +7 -0
  69. package/dist/table/tests/table-data-sizes.js +392 -1
  70. package/dist/table/tests/table-data-sizes.js.map +4 -4
  71. package/dist/table/tests/table-list-jquery.js +409 -1
  72. package/dist/table/tests/table-list-jquery.js.map +4 -4
  73. package/dist/table/tests/table-list-sizes.js +453 -1
  74. package/dist/table/tests/table-list-sizes.js.map +4 -4
  75. package/dist/table/tests/table-list-virtual.js +373 -1
  76. package/dist/table/tests/table-list-virtual.js.map +4 -4
  77. package/dist/table/tests/table-native-sizes.js +335 -1
  78. package/dist/table/tests/table-native-sizes.js.map +4 -4
  79. package/dist/table/tests/table-native-states.js +299 -1
  80. package/dist/table/tests/table-native-states.js.map +4 -4
  81. package/package.json +2 -2
  82. package/src/action-sheet/tests/action-sheet-data-table.tsx +119 -144
  83. package/src/dropdowngrid/dropdowngrid.tsx +1 -1
  84. package/src/fab/fab-item.tsx +48 -0
  85. package/src/fab/fab-items.tsx +32 -0
  86. package/src/fab/index.ts +2 -0
  87. package/src/fab/tests/fab-items.tsx +65 -250
  88. package/src/grid/tests/grid-rows-resizing.tsx +202 -0
  89. package/src/index.ts +3 -0
  90. package/src/popup/tests/popup-dropdowngrid.tsx +163 -0
  91. package/src/table/data-table.tsx +37 -0
  92. package/src/table/index.ts +19 -0
  93. package/src/table/table-body.tsx +29 -0
  94. package/src/table/table-footer.tsx +28 -0
  95. package/src/table/table-group-header.tsx +28 -0
  96. package/src/table/table-group-row.tsx +28 -0
  97. package/src/table/table-group-sticky-header.tsx +28 -0
  98. package/src/table/table-header.tsx +31 -0
  99. package/src/table/table-list-group-row.tsx +28 -0
  100. package/src/table/table-list-row.tsx +45 -0
  101. package/src/table/table-list-td.tsx +38 -0
  102. package/src/table/table-list-th.tsx +38 -0
  103. package/src/table/table-list.tsx +37 -0
  104. package/src/table/table-row.tsx +45 -0
  105. package/src/table/table-tbody.tsx +28 -0
  106. package/src/table/table-td.tsx +39 -0
  107. package/src/table/table-tfoot.tsx +28 -0
  108. package/src/table/table-th.tsx +39 -0
  109. package/src/table/table-thead.tsx +28 -0
  110. package/src/table/table.tsx +33 -0
  111. package/src/table/tests/table-data-sizes.tsx +205 -228
  112. package/src/table/tests/table-list-jquery.tsx +187 -204
  113. package/src/table/tests/table-list-sizes.tsx +178 -189
  114. package/src/table/tests/table-list-virtual.tsx +76 -79
  115. package/src/table/tests/table-native-sizes.tsx +157 -168
  116. package/src/table/tests/table-native-states.tsx +62 -61
package/src/table/tests/table-list-sizes.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import ReactDOM from 'react-dom/client';
3
+ import { DataTable, TableBody, TableFooter, TableGroupStickyHeader, TableHeader, TableList, TableListGroupRow, TableListRow, TableListTd, TableListTh, TableRow, TableTh, TableThead } from '../../table';
3
4
 
4
5
  const root = ReactDOM.createRoot(
5
6
  document.getElementById('app') as HTMLElement
@@ -27,201 +28,189 @@ root.render(
27
28
  <span>Table list large</span>
28
29
 
29
30
  <section>
30
- <div className="k-data-table k-table-sm">
31
- <div className="k-table-header">
32
- <div className="k-table-header-wrap">
33
- <table className="k-table">
34
- <colgroup>
35
- <col style={{ width: '50px' }} />
36
- <col style={{ width: "160px" }} />
37
- <col />
38
- </colgroup>
39
- <thead className="k-table-thead">
40
- <tr className="k-table-row">
41
- <th className="k-table-th">ID</th>
42
- <th className="k-table-th">Name</th>
43
- <th className="k-table-th">Job Title</th>
44
- </tr>
45
- </thead>
46
- </table>
47
- </div>
48
- </div>
49
- <div className="k-table-group-sticky-header">
50
- <span className="k-table-th">Initial group</span>
51
- </div>
52
- <div className="k-table-scroller">
53
- <ul className="k-table k-table-list">
54
- <li className="k-table-row">
55
- <span style={{ width: '50px' }} className="k-table-td">1</span>
56
- <span style={{ width: "160px" }} className="k-table-td">Data 1.2</span>
57
- <span className="k-table-td">Data 1.3</span>
58
- </li>
59
- <li className="k-table-row k-table-alt-row">
60
- <span style={{ width: '50px' }} className="k-table-td">2</span>
61
- <span style={{ width: "160px" }} className="k-table-td">Data 2.2 (alt)</span>
62
- <span className="k-table-td">Data 2.3</span>
63
- </li>
64
- <li className="k-table-row">
65
- <span style={{ width: '50px' }} className="k-table-td">3</span>
66
- <span style={{ width: "160px" }} className="k-table-td">Data 3.2</span>
67
- <span className="k-table-td">Data 3.3</span>
68
- </li>
69
- <li className="k-table-group-row">
70
- <span className="k-table-th">Group</span>
71
- </li>
72
- <li className="k-table-row">
73
- <span style={{ width: '50px' }} className="k-table-td">4</span>
74
- <span style={{ width: "160px" }} className="k-table-td">Data 4.2</span>
75
- <span className="k-table-td">Data 4.3</span>
76
- </li>
77
- <li className="k-table-row k-table-alt-row">
78
- <span style={{ width: '50px' }} className="k-table-td">5</span>
79
- <span style={{ width: "160px" }} className="k-table-td">Data 5.2 (alt)</span>
80
- <span className="k-table-td">Data 5.3</span>
81
- </li>
82
- <li className="k-table-row">
83
- <span style={{ width: '50px' }} className="k-table-td">6</span>
84
- <span style={{ width: "160px" }} className="k-table-td">Data 6.2</span>
85
- <span className="k-table-td">Data 6.3</span>
86
- </li>
87
- </ul>
88
- </div>
89
- <div className="k-table-footer">
90
- <span className="k-table-td">30 records in total</span>
91
- </div>
92
- </div>
31
+ <DataTable size="small">
32
+ <TableHeader>
33
+ <colgroup>
34
+ <col style={{ width: '50px' }} />
35
+ <col style={{ width: '160px' }} />
36
+ <col />
37
+ </colgroup>
38
+ <TableThead>
39
+ <TableRow>
40
+ <TableTh text="ID"></TableTh>
41
+ <TableTh text="Name"></TableTh>
42
+ <TableTh text="Job Title"></TableTh>
43
+ </TableRow>
44
+ </TableThead>
45
+ </TableHeader>
46
+ <TableGroupStickyHeader>
47
+ <TableListTh text="Initial group"></TableListTh>
48
+ </TableGroupStickyHeader>
49
+ <TableBody>
50
+ <TableList>
51
+ <TableListRow>
52
+ <TableListTd text="1" style={{ width: '50px' }}></TableListTd>
53
+ <TableListTd text="Data 1.2" style={{ width: '160px' }}></TableListTd>
54
+ <TableListTd text="Data 1.3"></TableListTd>
55
+ </TableListRow>
56
+ <TableListRow alt>
57
+ <TableListTd text="2" style={{ width: '50px' }}></TableListTd>
58
+ <TableListTd text="Data 2.2 (alt)" style={{ width: '160px' }}></TableListTd>
59
+ <TableListTd text="Data 2.3"></TableListTd>
60
+ </TableListRow>
61
+ <TableListRow>
62
+ <TableListTd text="3" style={{ width: '50px' }}></TableListTd>
63
+ <TableListTd text="Data 3.2" style={{ width: '160px' }}></TableListTd>
64
+ <TableListTd text="Data 3.3"></TableListTd>
65
+ </TableListRow>
66
+ <TableListGroupRow>
67
+ <TableListTh text="Group"></TableListTh>
68
+ </TableListGroupRow>
69
+ <TableListRow>
70
+ <TableListTd text="4" style={{ width: '50px' }}></TableListTd>
71
+ <TableListTd text="Data 4.2" style={{ width: '160px' }}></TableListTd>
72
+ <TableListTd text="Data 4.3"></TableListTd>
73
+ </TableListRow>
74
+ <TableListRow alt>
75
+ <TableListTd text="5" style={{ width: '50px' }}></TableListTd>
76
+ <TableListTd text="Data 5.2 (alt)" style={{ width: '160px' }}></TableListTd>
77
+ <TableListTd text="Data 5.3"></TableListTd>
78
+ </TableListRow>
79
+ <TableListRow>
80
+ <TableListTd text="6" style={{ width: '50px' }}></TableListTd>
81
+ <TableListTd text="Data 6.2" style={{ width: '160px' }}></TableListTd>
82
+ <TableListTd text="Data 6.3"></TableListTd>
83
+ </TableListRow>
84
+ </TableList>
85
+ </TableBody>
86
+ <TableFooter>
87
+ <TableListTd text="30 records in total"></TableListTd>
88
+ </TableFooter>
89
+ </DataTable>
93
90
  </section>
94
91
 
95
92
  <section>
96
- <div className="k-data-table k-table-md">
97
- <div className="k-table-header">
98
- <div className="k-table-header-wrap">
99
- <table className="k-table">
100
- <colgroup>
101
- <col style={{ width: '50px' }} />
102
- <col style={{ width: "160px" }} />
103
- <col />
104
- </colgroup>
105
- <thead className="k-table-thead">
106
- <tr className="k-table-row">
107
- <th className="k-table-th">ID</th>
108
- <th className="k-table-th">Name</th>
109
- <th className="k-table-th">Job Title</th>
110
- </tr>
111
- </thead>
112
- </table>
113
- </div>
114
- </div>
115
- <div className="k-table-group-sticky-header">
116
- <span className="k-table-th">Initial group</span>
117
- </div>
118
- <div className="k-table-scroller">
119
- <ul className="k-table k-table-list">
120
- <li className="k-table-row">
121
- <span style={{ width: '50px' }} className="k-table-td">1</span>
122
- <span style={{ width: "160px" }} className="k-table-td">Data 1.2</span>
123
- <span className="k-table-td">Data 1.3</span>
124
- </li>
125
- <li className="k-table-row k-table-alt-row">
126
- <span style={{ width: '50px' }} className="k-table-td">2</span>
127
- <span style={{ width: "160px" }} className="k-table-td">Data 2.2 (alt)</span>
128
- <span className="k-table-td">Data 2.3</span>
129
- </li>
130
- <li className="k-table-row">
131
- <span style={{ width: '50px' }} className="k-table-td">3</span>
132
- <span style={{ width: "160px" }} className="k-table-td">Data 3.2</span>
133
- <span className="k-table-td">Data 3.3</span>
134
- </li>
135
- <li className="k-table-group-row">
136
- <span className="k-table-th">Group</span>
137
- </li>
138
- <li className="k-table-row">
139
- <span style={{ width: '50px' }} className="k-table-td">4</span>
140
- <span style={{ width: "160px" }} className="k-table-td">Data 4.2</span>
141
- <span className="k-table-td">Data 4.3</span>
142
- </li>
143
- <li className="k-table-row k-table-alt-row">
144
- <span style={{ width: '50px' }} className="k-table-td">5</span>
145
- <span style={{ width: "160px" }} className="k-table-td">Data 5.2 (alt)</span>
146
- <span className="k-table-td">Data 5.3</span>
147
- </li>
148
- <li className="k-table-row">
149
- <span style={{ width: '50px' }} className="k-table-td">6</span>
150
- <span style={{ width: "160px" }} className="k-table-td">Data 6.2</span>
151
- <span className="k-table-td">Data 6.3</span>
152
- </li>
153
- </ul>
154
- </div>
155
- <div className="k-table-footer">
156
- <span className="k-table-td">30 records in total</span>
157
- </div>
158
- </div>
93
+ <DataTable size="medium">
94
+ <TableHeader>
95
+ <colgroup>
96
+ <col style={{ width: '50px' }} />
97
+ <col style={{ width: '160px' }} />
98
+ <col />
99
+ </colgroup>
100
+ <TableThead>
101
+ <TableRow>
102
+ <TableTh text="ID"></TableTh>
103
+ <TableTh text="Name"></TableTh>
104
+ <TableTh text="Job Title"></TableTh>
105
+ </TableRow>
106
+ </TableThead>
107
+ </TableHeader>
108
+ <TableGroupStickyHeader>
109
+ <TableListTh text="Initial group"></TableListTh>
110
+ </TableGroupStickyHeader>
111
+ <TableBody>
112
+ <TableList>
113
+ <TableListRow>
114
+ <TableListTd text="1" style={{ width: '50px' }}></TableListTd>
115
+ <TableListTd text="Data 1.2" style={{ width: '160px' }}></TableListTd>
116
+ <TableListTd text="Data 1.3"></TableListTd>
117
+ </TableListRow>
118
+ <TableListRow alt>
119
+ <TableListTd text="2" style={{ width: '50px' }}></TableListTd>
120
+ <TableListTd text="Data 2.2 (alt)" style={{ width: '160px' }}></TableListTd>
121
+ <TableListTd text="Data 2.3"></TableListTd>
122
+ </TableListRow>
123
+ <TableListRow>
124
+ <TableListTd text="3" style={{ width: '50px' }}></TableListTd>
125
+ <TableListTd text="Data 3.2" style={{ width: '160px' }}></TableListTd>
126
+ <TableListTd text="Data 3.3"></TableListTd>
127
+ </TableListRow>
128
+ <TableListGroupRow>
129
+ <TableListTh text="Group"></TableListTh>
130
+ </TableListGroupRow>
131
+ <TableListRow>
132
+ <TableListTd text="4" style={{ width: '50px' }}></TableListTd>
133
+ <TableListTd text="Data 4.2" style={{ width: '160px' }}></TableListTd>
134
+ <TableListTd text="Data 4.3"></TableListTd>
135
+ </TableListRow>
136
+ <TableListRow alt>
137
+ <TableListTd text="5" style={{ width: '50px' }}></TableListTd>
138
+ <TableListTd text="Data 5.2 (alt)" style={{ width: '160px' }}></TableListTd>
139
+ <TableListTd text="Data 5.3"></TableListTd>
140
+ </TableListRow>
141
+ <TableListRow>
142
+ <TableListTd text="6" style={{ width: '50px' }}></TableListTd>
143
+ <TableListTd text="Data 6.2" style={{ width: '160px' }}></TableListTd>
144
+ <TableListTd text="Data 6.3"></TableListTd>
145
+ </TableListRow>
146
+ </TableList>
147
+ </TableBody>
148
+ <TableFooter>
149
+ <TableListTd text="30 records in total"></TableListTd>
150
+ </TableFooter>
151
+ </DataTable>
159
152
  </section>
160
153
 
161
154
  <section>
162
- <div className="k-data-table k-table-lg">
163
- <div className="k-table-header">
164
- <div className="k-table-header-wrap">
165
- <table className="k-table">
166
- <colgroup>
167
- <col style={{ width: '50px' }} />
168
- <col style={{ width: "160px" }} />
169
- <col />
170
- </colgroup>
171
- <thead className="k-table-thead">
172
- <tr className="k-table-row">
173
- <th className="k-table-th">ID</th>
174
- <th className="k-table-th">Name</th>
175
- <th className="k-table-th">Job Title</th>
176
- </tr>
177
- </thead>
178
- </table>
179
- </div>
180
- </div>
181
- <div className="k-table-group-sticky-header">
182
- <span className="k-table-th">Initial group</span>
183
- </div>
184
- <div className="k-table-scroller">
185
- <ul className="k-table k-table-list">
186
- <li className="k-table-row">
187
- <span style={{ width: '50px' }} className="k-table-td">1</span>
188
- <span style={{ width: "160px" }} className="k-table-td">Data 1.2</span>
189
- <span className="k-table-td">Data 1.3</span>
190
- </li>
191
- <li className="k-table-row k-table-alt-row">
192
- <span style={{ width: '50px' }} className="k-table-td">2</span>
193
- <span style={{ width: "160px" }} className="k-table-td">Data 2.2 (alt)</span>
194
- <span className="k-table-td">Data 2.3</span>
195
- </li>
196
- <li className="k-table-row">
197
- <span style={{ width: '50px' }} className="k-table-td">3</span>
198
- <span style={{ width: "160px" }} className="k-table-td">Data 3.2</span>
199
- <span className="k-table-td">Data 3.3</span>
200
- </li>
201
- <li className="k-table-group-row">
202
- <span className="k-table-th">Group</span>
203
- </li>
204
- <li className="k-table-row">
205
- <span style={{ width: '50px' }} className="k-table-td">4</span>
206
- <span style={{ width: "160px" }} className="k-table-td">Data 4.2</span>
207
- <span className="k-table-td">Data 4.3</span>
208
- </li>
209
- <li className="k-table-row k-table-alt-row">
210
- <span style={{ width: '50px' }} className="k-table-td">5</span>
211
- <span style={{ width: "160px" }} className="k-table-td">Data 5.2 (alt)</span>
212
- <span className="k-table-td">Data 5.3</span>
213
- </li>
214
- <li className="k-table-row">
215
- <span style={{ width: '50px' }} className="k-table-td">6</span>
216
- <span style={{ width: "160px" }} className="k-table-td">Data 6.2</span>
217
- <span className="k-table-td">Data 6.3</span>
218
- </li>
219
- </ul>
220
- </div>
221
- <div className="k-table-footer">
222
- <span className="k-table-td">30 records in total</span>
223
- </div>
224
- </div>
155
+ <DataTable size="large">
156
+ <TableHeader>
157
+ <colgroup>
158
+ <col style={{ width: '50px' }} />
159
+ <col style={{ width: '160px' }} />
160
+ <col />
161
+ </colgroup>
162
+ <TableThead>
163
+ <TableRow>
164
+ <TableTh text="ID"></TableTh>
165
+ <TableTh text="Name"></TableTh>
166
+ <TableTh text="Job Title"></TableTh>
167
+ </TableRow>
168
+ </TableThead>
169
+ </TableHeader>
170
+ <TableGroupStickyHeader>
171
+ <TableListTh text="Initial group"></TableListTh>
172
+ </TableGroupStickyHeader>
173
+ <TableBody>
174
+ <TableList>
175
+ <TableListRow>
176
+ <TableListTd text="1" style={{ width: '50px' }}></TableListTd>
177
+ <TableListTd text="Data 1.2" style={{ width: '160px' }}></TableListTd>
178
+ <TableListTd text="Data 1.3"></TableListTd>
179
+ </TableListRow>
180
+ <TableListRow alt>
181
+ <TableListTd text="2" style={{ width: '50px' }}></TableListTd>
182
+ <TableListTd text="Data 2.2 (alt)" style={{ width: '160px' }}></TableListTd>
183
+ <TableListTd text="Data 2.3"></TableListTd>
184
+ </TableListRow>
185
+ <TableListRow>
186
+ <TableListTd text="3" style={{ width: '50px' }}></TableListTd>
187
+ <TableListTd text="Data 3.2" style={{ width: '160px' }}></TableListTd>
188
+ <TableListTd text="Data 3.3"></TableListTd>
189
+ </TableListRow>
190
+ <TableListGroupRow>
191
+ <TableListTh text="Group"></TableListTh>
192
+ </TableListGroupRow>
193
+ <TableListRow>
194
+ <TableListTd text="4" style={{ width: '50px' }}></TableListTd>
195
+ <TableListTd text="Data 4.2" style={{ width: '160px' }}></TableListTd>
196
+ <TableListTd text="Data 4.3"></TableListTd>
197
+ </TableListRow>
198
+ <TableListRow alt>
199
+ <TableListTd text="5" style={{ width: '50px' }}></TableListTd>
200
+ <TableListTd text="Data 5.2 (alt)" style={{ width: '160px' }}></TableListTd>
201
+ <TableListTd text="Data 5.3"></TableListTd>
202
+ </TableListRow>
203
+ <TableListRow>
204
+ <TableListTd text="6" style={{ width: '50px' }}></TableListTd>
205
+ <TableListTd text="Data 6.2" style={{ width: '160px' }}></TableListTd>
206
+ <TableListTd text="Data 6.3"></TableListTd>
207
+ </TableListRow>
208
+ </TableList>
209
+ </TableBody>
210
+ <TableFooter>
211
+ <TableListTd text="30 records in total"></TableListTd>
212
+ </TableFooter>
213
+ </DataTable>
225
214
  </section>
226
215
 
227
216
  </div>
package/src/table/tests/table-list-virtual.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import ReactDOM from 'react-dom/client';
3
+ import { DataTable, TableBody, TableHeader, TableList, TableListRow, TableListTd, TableRow, TableTh, TableThead } from '../../table';
3
4
 
4
5
  const root = ReactDOM.createRoot(
5
6
  document.getElementById('app') as HTMLElement
@@ -28,85 +29,81 @@ root.render(
28
29
  <span>Table list virtual</span>
29
30
 
30
31
  <section>
31
- <div className="k-data-table k-table-md">
32
- <div className="k-table-header">
33
- <div className="k-table-header-wrap">
34
- <table className="k-table">
35
- <colgroup>
36
- <col style={{ width: '50px' }} />
37
- <col style={{ width: "160px" }} />
38
- <col />
39
- </colgroup>
40
- <thead className="k-table-thead">
41
- <tr className="k-table-row">
42
- <th className="k-table-th">ID</th>
43
- <th className="k-table-th">Name</th>
44
- <th className="k-table-th">Job Title</th>
45
- </tr>
46
- </thead>
47
- </table>
48
- </div>
49
- </div>
50
- <div className="k-table-body k-table-scroller">
51
- <ul className="k-table k-table-list k-virtual-table">
52
- <li className="k-table-row">
53
- <span style={{ width: '50px' }} className="k-table-td">1</span>
54
- <span style={{ width: "160px" }} className="k-table-td">Data 1.2</span>
55
- <span className="k-table-td">Data 1.3</span>
56
- </li>
57
- <li className="k-table-row k-table-alt-row">
58
- <span style={{ width: '50px' }} className="k-table-td">2</span>
59
- <span style={{ width: "160px" }} className="k-table-td">Data 2.2 (alt)</span>
60
- <span className="k-table-td">Data 2.3</span>
61
- </li>
62
- <li className="k-table-row">
63
- <span style={{ width: '50px' }} className="k-table-td">3</span>
64
- <span style={{ width: "160px" }} className="k-table-td">Data 3.2</span>
65
- <span className="k-table-td">Data 3.3</span>
66
- </li>
67
- <li className="k-table-row">
68
- <span style={{ width: '50px' }} className="k-table-td">4</span>
69
- <span style={{ width: "160px" }} className="k-table-td">Data 4.2</span>
70
- <span className="k-table-td">Data 4.3</span>
71
- </li>
72
- <li className="k-table-row k-table-alt-row">
73
- <span style={{ width: '50px' }} className="k-table-td">5</span>
74
- <span style={{ width: "160px" }} className="k-table-td">Data 5.2 (alt)</span>
75
- <span className="k-table-td">Data 5.3</span>
76
- </li>
77
- <li className="k-table-row">
78
- <span style={{ width: '50px' }} className="k-table-td">6</span>
79
- <span style={{ width: "160px" }} className="k-table-td">Data 6.2</span>
80
- <span className="k-table-td">Data 6.3</span>
81
- </li>
82
- <li className="k-table-row">
83
- <span style={{ width: '50px' }} className="k-table-td">7</span>
84
- <span style={{ width: "160px" }} className="k-table-td">Data 7.2</span>
85
- <span className="k-table-td">Data 7.3</span>
86
- </li>
87
- <li className="k-table-row">
88
- <span style={{ width: '50px' }} className="k-table-td">8</span>
89
- <span style={{ width: "160px" }} className="k-table-td">Data 8.2</span>
90
- <span className="k-table-td">Data 8.3</span>
91
- </li>
92
- <li className="k-table-row">
93
- <span style={{ width: '50px' }} className="k-table-td">9</span>
94
- <span style={{ width: "160px" }} className="k-table-td">Data 9.2</span>
95
- <span className="k-table-td">Data 9.3</span>
96
- </li>
97
- <li className="k-table-row">
98
- <span style={{ width: '50px' }} className="k-table-td">10</span>
99
- <span style={{ width: "160px" }} className="k-table-td">Data 10.2</span>
100
- <span className="k-table-td">Data 10.3</span>
101
- </li>
102
- <li className="k-table-row">
103
- <span style={{ width: '50px' }} className="k-table-td">11</span>
104
- <span style={{ width: "160px" }} className="k-table-td">Data 11.2</span>
105
- <span className="k-table-td">Data 11.3</span>
106
- </li>
107
- </ul>
108
- </div>
109
- </div>
32
+ <DataTable size="medium">
33
+ <TableHeader>
34
+ <colgroup>
35
+ <col style={{ width: '50px' }} />
36
+ <col style={{ width: '160px' }} />
37
+ <col />
38
+ </colgroup>
39
+ <TableThead>
40
+ <TableRow>
41
+ <TableTh text="ID"></TableTh>
42
+ <TableTh text="Name"></TableTh>
43
+ <TableTh text="Job Title"></TableTh>
44
+ </TableRow>
45
+ </TableThead>
46
+ </TableHeader>
47
+ <TableBody>
48
+ <TableList virtualization>
49
+ <TableListRow>
50
+ <TableListTd text="1" style={{ width: '50px' }}></TableListTd>
51
+ <TableListTd text="Data 1.2" style={{ width: '160px' }}></TableListTd>
52
+ <TableListTd text="Data 1.3"></TableListTd>
53
+ </TableListRow>
54
+ <TableListRow alt>
55
+ <TableListTd text="2" style={{ width: '50px' }}></TableListTd>
56
+ <TableListTd text="Data 2.2 (alt)" style={{ width: '160px' }}></TableListTd>
57
+ <TableListTd text="Data 2.3"></TableListTd>
58
+ </TableListRow>
59
+ <TableListRow>
60
+ <TableListTd text="3" style={{ width: '50px' }}></TableListTd>
61
+ <TableListTd text="Data 3.2" style={{ width: '160px' }}></TableListTd>
62
+ <TableListTd text="Data 3.3"></TableListTd>
63
+ </TableListRow>
64
+ <TableListRow>
65
+ <TableListTd text="4" style={{ width: '50px' }}></TableListTd>
66
+ <TableListTd text="Data 4.2" style={{ width: '160px' }}></TableListTd>
67
+ <TableListTd text="Data 4.3"></TableListTd>
68
+ </TableListRow>
69
+ <TableListRow alt>
70
+ <TableListTd text="5" style={{ width: '50px' }}></TableListTd>
71
+ <TableListTd text="Data 5.2 (alt)" style={{ width: '160px' }}></TableListTd>
72
+ <TableListTd text="Data 5.3"></TableListTd>
73
+ </TableListRow>
74
+ <TableListRow>
75
+ <TableListTd text="6" style={{ width: '50px' }}></TableListTd>
76
+ <TableListTd text="Data 6.2" style={{ width: '160px' }}></TableListTd>
77
+ <TableListTd text="Data 6.3"></TableListTd>
78
+ </TableListRow>
79
+ <TableListRow>
80
+ <TableListTd text="7" style={{ width: '50px' }}></TableListTd>
81
+ <TableListTd text="Data 7.2" style={{ width: '160px' }}></TableListTd>
82
+ <TableListTd text="Data 7.3"></TableListTd>
83
+ </TableListRow>
84
+ <TableListRow>
85
+ <TableListTd text="8" style={{ width: '50px' }}></TableListTd>
86
+ <TableListTd text="Data 8.2" style={{ width: '160px' }}></TableListTd>
87
+ <TableListTd text="Data 8.3"></TableListTd>
88
+ </TableListRow>
89
+ <TableListRow>
90
+ <TableListTd text="9" style={{ width: '50px' }}></TableListTd>
91
+ <TableListTd text="Data 9.2" style={{ width: '160px' }}></TableListTd>
92
+ <TableListTd text="Data 9.3"></TableListTd>
93
+ </TableListRow>
94
+ <TableListRow>
95
+ <TableListTd text="10" style={{ width: '50px' }}></TableListTd>
96
+ <TableListTd text="Data 10.2" style={{ width: '160px' }}></TableListTd>
97
+ <TableListTd text="Data 10.3"></TableListTd>
98
+ </TableListRow>
99
+ <TableListRow>
100
+ <TableListTd text="11" style={{ width: '50px' }}></TableListTd>
101
+ <TableListTd text="Data 11.2" style={{ width: '160px' }}></TableListTd>
102
+ <TableListTd text="Data 11.3"></TableListTd>
103
+ </TableListRow>
104
+ </TableList>
105
+ </TableBody>
106
+ </DataTable>
110
107
  </section>
111
108
 
112
109
  </div>