@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-native-sizes.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import ReactDOM from 'react-dom/client';
3
+ import { Table, TableGroupRow, TableRow, TableTbody, TableTd, TableTfoot, TableTh, TableThead } from '../../table';
3
4
 
4
5
  const root = ReactDOM.createRoot(
5
6
  document.getElementById('app') as HTMLElement
@@ -21,195 +22,183 @@ root.render(
21
22
  <span>Native table large</span>
22
23
 
23
24
  <section>
24
- <table className="k-table k-table-sm">
25
+ <Table size="small">
25
26
  <colgroup>
26
27
  <col style={{ width: '50px' }} />
27
28
  <col />
28
29
  <col />
29
30
  </colgroup>
30
- <thead className="k-table-thead">
31
- <tr className="k-table-row">
32
- <th className="k-table-th">ID</th>
33
- <th className="k-table-th">Name</th>
34
- <th className="k-table-th">Job Title</th>
35
- </tr>
36
- </thead>
37
- <tbody className="k-table-tbody">
38
- <tr className="k-table-group-row">
39
- <th colSpan={3} className="k-table-th">
40
- Group row
41
- </th>
42
- </tr>
43
- <tr className="k-table-row">
44
- <td className="k-table-td">1</td>
45
- <td className="k-table-td">Data 1.2</td>
46
- <td className="k-table-td">Data 1.3</td>
47
- </tr>
48
- <tr className="k-table-row k-table-alt-row">
49
- <td className="k-table-td">2</td>
50
- <td className="k-table-td">Data 2.2 (alt)</td>
51
- <td className="k-table-td">Data 2.3</td>
52
- </tr>
53
- <tr className="k-table-row">
54
- <td className="k-table-td">3</td>
55
- <td className="k-table-td">Data 3.2</td>
56
- <td className="k-table-td">Data 3.3</td>
57
- </tr>
58
- <tr className="k-table-group-row">
59
- <th colSpan={3} className="k-table-th">
60
- Group row
61
- </th>
62
- </tr>
63
- <tr className="k-table-row">
64
- <td className="k-table-td">4</td>
65
- <td className="k-table-td">Data 4.2</td>
66
- <td className="k-table-td">Data 4.3</td>
67
- </tr>
68
- <tr className="k-table-row k-table-alt-row">
69
- <td className="k-table-td">5</td>
70
- <td className="k-table-td">Data 5.2 (alt)</td>
71
- <td className="k-table-td">Data 5.3</td>
72
- </tr>
73
- <tr className="k-table-row">
74
- <td className="k-table-td">6</td>
75
- <td className="k-table-td">Data 6.2</td>
76
- <td className="k-table-td">Data 6.3</td>
77
- </tr>
78
- </tbody>
79
- <tfoot className="k-table-tfoot">
80
- <tr className="k-table-row">
81
- <td colSpan={3} className="k-table-td">30 records in total</td>
82
- </tr>
83
- </tfoot>
84
- </table>
31
+ <TableThead>
32
+ <TableRow>
33
+ <TableTh text="ID"></TableTh>
34
+ <TableTh text="Name"></TableTh>
35
+ <TableTh text="Job Title"></TableTh>
36
+ </TableRow>
37
+ </TableThead>
38
+ <TableTbody>
39
+ <TableGroupRow>
40
+ <TableTh text="Group row" colspan="3"></TableTh>
41
+ </TableGroupRow>
42
+ <TableRow>
43
+ <TableTd text="1"></TableTd>
44
+ <TableTd text="Data 1.2"></TableTd>
45
+ <TableTd text="Data 1.3"></TableTd>
46
+ </TableRow>
47
+ <TableRow alt>
48
+ <TableTd text="2"></TableTd>
49
+ <TableTd text="Data 2.2 (alt)"></TableTd>
50
+ <TableTd text="Data 2.3"></TableTd>
51
+ </TableRow>
52
+ <TableRow>
53
+ <TableTd text="3"></TableTd>
54
+ <TableTd text="Data 3.2"></TableTd>
55
+ <TableTd text="Data 3.3"></TableTd>
56
+ </TableRow>
57
+ <TableGroupRow>
58
+ <TableTh text="Group row" colspan="3"></TableTh>
59
+ </TableGroupRow>
60
+ <TableRow>
61
+ <TableTd text="4"></TableTd>
62
+ <TableTd text="Data 4.2"></TableTd>
63
+ <TableTd text="Data 4.3"></TableTd>
64
+ </TableRow>
65
+ <TableRow alt>
66
+ <TableTd text="5"></TableTd>
67
+ <TableTd text="Data 5.2 (alt)"></TableTd>
68
+ <TableTd text="Data 5.3"></TableTd>
69
+ </TableRow>
70
+ <TableRow>
71
+ <TableTd text="6"></TableTd>
72
+ <TableTd text="Data 6.2"></TableTd>
73
+ <TableTd text="Data 6.3"></TableTd>
74
+ </TableRow>
75
+ </TableTbody>
76
+ <TableTfoot>
77
+ <TableRow>
78
+ <TableTd text="30 records in total" colspan="3"></TableTd>
79
+ </TableRow>
80
+ </TableTfoot>
81
+ </Table>
85
82
  </section>
86
83
 
87
84
  <section>
88
- <table className="k-table k-table-md">
85
+ <Table size="medium">
89
86
  <colgroup>
90
87
  <col style={{ width: '50px' }} />
91
88
  <col />
92
89
  <col />
93
90
  </colgroup>
94
- <thead className="k-table-thead">
95
- <tr className="k-table-row">
96
- <th className="k-table-th">ID</th>
97
- <th className="k-table-th">Name</th>
98
- <th className="k-table-th">Job Title</th>
99
- </tr>
100
- </thead>
101
- <tbody className="k-table-tbody">
102
- <tr className="k-table-group-row">
103
- <th colSpan={3} className="k-table-th">
104
- Group row
105
- </th>
106
- </tr>
107
- <tr className="k-table-row">
108
- <td className="k-table-td">1</td>
109
- <td className="k-table-td">Data 1.2</td>
110
- <td className="k-table-td">Data 1.3</td>
111
- </tr>
112
- <tr className="k-table-row k-table-alt-row">
113
- <td className="k-table-td">2</td>
114
- <td className="k-table-td">Data 2.2 (alt)</td>
115
- <td className="k-table-td">Data 2.3</td>
116
- </tr>
117
- <tr className="k-table-row">
118
- <td className="k-table-td">3</td>
119
- <td className="k-table-td">Data 3.2</td>
120
- <td className="k-table-td">Data 3.3</td>
121
- </tr>
122
- <tr className="k-table-group-row">
123
- <th colSpan={3} className="k-table-th">
124
- Group row
125
- </th>
126
- </tr>
127
- <tr className="k-table-row">
128
- <td className="k-table-td">4</td>
129
- <td className="k-table-td">Data 4.2</td>
130
- <td className="k-table-td">Data 4.3</td>
131
- </tr>
132
- <tr className="k-table-row k-table-alt-row">
133
- <td className="k-table-td">5</td>
134
- <td className="k-table-td">Data 5.2 (alt)</td>
135
- <td className="k-table-td">Data 5.3</td>
136
- </tr>
137
- <tr className="k-table-row">
138
- <td className="k-table-td">6</td>
139
- <td className="k-table-td">Data 6.2</td>
140
- <td className="k-table-td">Data 6.3</td>
141
- </tr>
142
- </tbody>
143
- <tfoot className="k-table-tfoot">
144
- <tr className="k-table-row">
145
- <td colSpan={3} className="k-table-td">30 records in total</td>
146
- </tr>
147
- </tfoot>
148
- </table>
91
+ <TableThead>
92
+ <TableRow>
93
+ <TableTh text="ID"></TableTh>
94
+ <TableTh text="Name"></TableTh>
95
+ <TableTh text="Job Title"></TableTh>
96
+ </TableRow>
97
+ </TableThead>
98
+ <TableTbody>
99
+ <TableGroupRow>
100
+ <TableTh text="Group row" colspan="3"></TableTh>
101
+ </TableGroupRow>
102
+ <TableRow>
103
+ <TableTd text="1"></TableTd>
104
+ <TableTd text="Data 1.2"></TableTd>
105
+ <TableTd text="Data 1.3"></TableTd>
106
+ </TableRow>
107
+ <TableRow alt>
108
+ <TableTd text="2"></TableTd>
109
+ <TableTd text="Data 2.2 (alt)"></TableTd>
110
+ <TableTd text="Data 2.3"></TableTd>
111
+ </TableRow>
112
+ <TableRow>
113
+ <TableTd text="3"></TableTd>
114
+ <TableTd text="Data 3.2"></TableTd>
115
+ <TableTd text="Data 3.3"></TableTd>
116
+ </TableRow>
117
+ <TableGroupRow>
118
+ <TableTh text="Group row" colspan="3"></TableTh>
119
+ </TableGroupRow>
120
+ <TableRow>
121
+ <TableTd text="4"></TableTd>
122
+ <TableTd text="Data 4.2"></TableTd>
123
+ <TableTd text="Data 4.3"></TableTd>
124
+ </TableRow>
125
+ <TableRow alt>
126
+ <TableTd text="5"></TableTd>
127
+ <TableTd text="Data 5.2 (alt)"></TableTd>
128
+ <TableTd text="Data 5.3"></TableTd>
129
+ </TableRow>
130
+ <TableRow>
131
+ <TableTd text="6"></TableTd>
132
+ <TableTd text="Data 6.2"></TableTd>
133
+ <TableTd text="Data 6.3"></TableTd>
134
+ </TableRow>
135
+ </TableTbody>
136
+ <TableTfoot>
137
+ <TableRow>
138
+ <TableTd text="30 records in total" colspan="3"></TableTd>
139
+ </TableRow>
140
+ </TableTfoot>
141
+ </Table>
149
142
  </section>
150
143
 
151
144
  <section>
152
- <table className="k-table k-table-lg">
145
+ <Table size="large">
153
146
  <colgroup>
154
147
  <col style={{ width: '50px' }} />
155
148
  <col />
156
149
  <col />
157
150
  </colgroup>
158
- <thead className="k-table-thead">
159
- <tr className="k-table-row">
160
- <th className="k-table-th">ID</th>
161
- <th className="k-table-th">Name</th>
162
- <th className="k-table-th">Job Title</th>
163
- </tr>
164
- </thead>
165
- <tbody className="k-table-tbody">
166
- <tr className="k-table-group-row">
167
- <th colSpan={3} className="k-table-th">
168
- Group row
169
- </th>
170
- </tr>
171
- <tr className="k-table-row">
172
- <td className="k-table-td">1</td>
173
- <td className="k-table-td">Data 1.2</td>
174
- <td className="k-table-td">Data 1.3</td>
175
- </tr>
176
- <tr className="k-table-row k-table-alt-row">
177
- <td className="k-table-td">2</td>
178
- <td className="k-table-td">Data 2.2 (alt)</td>
179
- <td className="k-table-td">Data 2.3</td>
180
- </tr>
181
- <tr className="k-table-row">
182
- <td className="k-table-td">3</td>
183
- <td className="k-table-td">Data 3.2</td>
184
- <td className="k-table-td">Data 3.3</td>
185
- </tr>
186
- <tr className="k-table-group-row">
187
- <th colSpan={3} className="k-table-th">
188
- Group row
189
- </th>
190
- </tr>
191
- <tr className="k-table-row">
192
- <td className="k-table-td">4</td>
193
- <td className="k-table-td">Data 4.2</td>
194
- <td className="k-table-td">Data 4.3</td>
195
- </tr>
196
- <tr className="k-table-row k-table-alt-row">
197
- <td className="k-table-td">5</td>
198
- <td className="k-table-td">Data 5.2 (alt)</td>
199
- <td className="k-table-td">Data 5.3</td>
200
- </tr>
201
- <tr className="k-table-row">
202
- <td className="k-table-td">6</td>
203
- <td className="k-table-td">Data 6.2</td>
204
- <td className="k-table-td">Data 6.3</td>
205
- </tr>
206
- </tbody>
207
- <tfoot className="k-table-tfoot">
208
- <tr className="k-table-row">
209
- <td colSpan={3} className="k-table-td">30 records in total</td>
210
- </tr>
211
- </tfoot>
212
- </table>
151
+ <TableThead>
152
+ <TableRow>
153
+ <TableTh text="ID"></TableTh>
154
+ <TableTh text="Name"></TableTh>
155
+ <TableTh text="Job Title"></TableTh>
156
+ </TableRow>
157
+ </TableThead>
158
+ <TableTbody>
159
+ <TableGroupRow>
160
+ <TableTh text="Group row" colspan="3"></TableTh>
161
+ </TableGroupRow>
162
+ <TableRow>
163
+ <TableTd text="1"></TableTd>
164
+ <TableTd text="Data 1.2"></TableTd>
165
+ <TableTd text="Data 1.3"></TableTd>
166
+ </TableRow>
167
+ <TableRow alt>
168
+ <TableTd text="2"></TableTd>
169
+ <TableTd text="Data 2.2 (alt)"></TableTd>
170
+ <TableTd text="Data 2.3"></TableTd>
171
+ </TableRow>
172
+ <TableRow>
173
+ <TableTd text="3"></TableTd>
174
+ <TableTd text="Data 3.2"></TableTd>
175
+ <TableTd text="Data 3.3"></TableTd>
176
+ </TableRow>
177
+ <TableGroupRow>
178
+ <TableTh text="Group row" colspan="3"></TableTh>
179
+ </TableGroupRow>
180
+ <TableRow>
181
+ <TableTd text="4"></TableTd>
182
+ <TableTd text="Data 4.2"></TableTd>
183
+ <TableTd text="Data 4.3"></TableTd>
184
+ </TableRow>
185
+ <TableRow alt>
186
+ <TableTd text="5"></TableTd>
187
+ <TableTd text="Data 5.2 (alt)"></TableTd>
188
+ <TableTd text="Data 5.3"></TableTd>
189
+ </TableRow>
190
+ <TableRow>
191
+ <TableTd text="6"></TableTd>
192
+ <TableTd text="Data 6.2"></TableTd>
193
+ <TableTd text="Data 6.3"></TableTd>
194
+ </TableRow>
195
+ </TableTbody>
196
+ <TableTfoot>
197
+ <TableRow>
198
+ <TableTd text="30 records in total" colspan="3"></TableTd>
199
+ </TableRow>
200
+ </TableTfoot>
201
+ </Table>
213
202
  </section>
214
203
 
215
204
  </div>
package/src/table/tests/table-native-states.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import ReactDOM from 'react-dom/client';
3
+ import { Table, TableRow, TableTbody, TableTd, TableTh, TableThead } from '../../table';
3
4
 
4
5
  const root = ReactDOM.createRoot(
5
6
  document.getElementById('app') as HTMLElement
@@ -13,72 +14,72 @@ root.render(
13
14
  <span></span>
14
15
 
15
16
  <section>
16
- <table className="k-table k-table-md">
17
+ <Table size="medium">
17
18
  <colgroup>
18
19
  <col style={{ width: '50px' }} />
19
20
  <col />
20
21
  <col />
21
22
  </colgroup>
22
- <thead className="k-table-thead">
23
- <tr className="k-table-row">
24
- <th className="k-table-th">ID</th>
25
- <th className="k-table-th">Name</th>
26
- <th className="k-table-th">Job Title</th>
27
- </tr>
28
- </thead>
29
- <tbody className="k-table-tbody">
30
- <tr className="k-table-row">
31
- <td className="k-table-td">1</td>
32
- <td className="k-table-td">Normal</td>
33
- <td className="k-table-td">Data 1.3</td>
34
- </tr>
35
- <tr className="k-table-row k-table-alt-row">
36
- <td className="k-table-td">2</td>
37
- <td className="k-table-td">Normal (alt)</td>
38
- <td className="k-table-td">Data 2.3</td>
39
- </tr>
40
- <tr className="k-table-row k-hover">
41
- <td className="k-table-td">3</td>
42
- <td className="k-table-td">Hover</td>
43
- <td className="k-table-td">Data 3.3</td>
44
- </tr>
45
- <tr className="k-table-row k-hover k-table-alt-row">
46
- <td className="k-table-td">4</td>
47
- <td className="k-table-td">Hover (alt)</td>
48
- <td className="k-table-td">Data 4.3</td>
49
- </tr>
50
- <tr className="k-table-row k-focus">
51
- <td className="k-table-td">5</td>
52
- <td className="k-table-td">Focus (alt)</td>
53
- <td className="k-table-td">Data 5.3</td>
54
- </tr>
55
- <tr className="k-table-row k-focus k-table-alt-row">
56
- <td className="k-table-td">6</td>
57
- <td className="k-table-td">Focus (even)</td>
58
- <td className="k-table-td">Data 6.3</td>
59
- </tr>
60
- <tr className="k-table-row k-selected">
61
- <td className="k-table-td">7</td>
62
- <td className="k-table-td">Selected</td>
63
- <td className="k-table-td">Data 7.3</td>
64
- </tr>
65
- <tr className="k-table-row k-selected k-table-alt-row">
66
- <td className="k-table-td">8</td>
67
- <td className="k-table-td">Selected (alt)</td>
68
- <td className="k-table-td">Data 8.3</td>
69
- </tr>
70
- <tr className="k-table-row k-focus k-selected">
71
- <td className="k-table-td">9</td>
72
- <td className="k-table-td">Focus selected</td>
73
- <td className="k-table-td">Data 9.3</td>
74
- </tr>
75
- <tr className="k-table-row k-focus k-selected k-table-alt-row">
76
- <td className="k-table-td">10</td>
77
- <td className="k-table-td">Focus selected (alt)</td>
78
- <td className="k-table-td">Data 10.3</td>
79
- </tr>
80
- </tbody>
81
- </table>
23
+ <TableThead>
24
+ <TableRow>
25
+ <TableTh text="ID"></TableTh>
26
+ <TableTh text="Name"></TableTh>
27
+ <TableTh text="Job Title"></TableTh>
28
+ </TableRow>
29
+ </TableThead>
30
+ <TableTbody>
31
+ <TableRow>
32
+ <TableTd text="1"></TableTd>
33
+ <TableTd text="Normal"></TableTd>
34
+ <TableTd text="Data 1.3"></TableTd>
35
+ </TableRow>
36
+ <TableRow alt>
37
+ <TableTd text="2"></TableTd>
38
+ <TableTd text="Normal (alt)"></TableTd>
39
+ <TableTd text="Data 2.3"></TableTd>
40
+ </TableRow>
41
+ <TableRow hover>
42
+ <TableTd text="3"></TableTd>
43
+ <TableTd text="Hover"></TableTd>
44
+ <TableTd text="Data 3.3"></TableTd>
45
+ </TableRow>
46
+ <TableRow alt hover>
47
+ <TableTd text="4"></TableTd>
48
+ <TableTd text="Hover (alt)"></TableTd>
49
+ <TableTd text="Data 4.3"></TableTd>
50
+ </TableRow>
51
+ <TableRow focus>
52
+ <TableTd text="5"></TableTd>
53
+ <TableTd text="Focus (alt)"></TableTd>
54
+ <TableTd text="Data 5.3"></TableTd>
55
+ </TableRow>
56
+ <TableRow alt focus>
57
+ <TableTd text="6"></TableTd>
58
+ <TableTd text="Focus (even)"></TableTd>
59
+ <TableTd text="Data 6.3"></TableTd>
60
+ </TableRow>
61
+ <TableRow selected>
62
+ <TableTd text="7"></TableTd>
63
+ <TableTd text="Selected"></TableTd>
64
+ <TableTd text="Data 7.3"></TableTd>
65
+ </TableRow>
66
+ <TableRow alt selected>
67
+ <TableTd text="8"></TableTd>
68
+ <TableTd text="Selected (alt)"></TableTd>
69
+ <TableTd text="Data 8.3"></TableTd>
70
+ </TableRow>
71
+ <TableRow focus selected>
72
+ <TableTd text="9"></TableTd>
73
+ <TableTd text="Focus selected"></TableTd>
74
+ <TableTd text="Data 9.3"></TableTd>
75
+ </TableRow>
76
+ <TableRow alt focus selected>
77
+ <TableTd text="10"></TableTd>
78
+ <TableTd text="Focus selected (alt)"></TableTd>
79
+ <TableTd text="Data 10.3"></TableTd>
80
+ </TableRow>
81
+ </TableTbody>
82
+ </Table>
82
83
  </section>
83
84
 
84
85
  </div>