@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-jquery.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, TableGroupHeader, TableHeader, TableList, TableListRow, TableListTd, TableRow, TableTh, TableThead } from '../../table';
3
4
 
4
5
  const root = ReactDOM.createRoot(
5
6
  document.getElementById('app') as HTMLElement
@@ -27,216 +28,198 @@ 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
- <tr className="k-table-group-header">
46
- <td colSpan={3} className="k-table-th">
47
- Initial group
48
- </td>
49
- </tr>
50
- </thead>
51
- </table>
52
- </div>
53
- </div>
54
- <div className="k-table-scroller">
55
- <ul className="k-table k-table-list">
56
- <li className="k-table-row">
57
- <span style={{ width: '50px' }} className="k-table-td">1</span>
58
- <span style={{ width: "160px" }} className="k-table-td">Data 1.2</span>
59
- <span className="k-table-td">Data 1.3</span>
60
- <span className="k-table-td k-table-spacer-td"></span>
61
- </li>
62
- <li className="k-table-row k-table-alt-row">
63
- <span style={{ width: '50px' }} className="k-table-td">2</span>
64
- <span style={{ width: "160px" }} className="k-table-td">Data 2.2 (alt)</span>
65
- <span className="k-table-td">Data 2.3</span>
66
- <span className="k-table-td k-table-spacer-td"></span>
67
- </li>
68
- <li className="k-table-row k-first">
69
- <span style={{ width: '50px' }} className="k-table-td">3</span>
70
- <span style={{ width: "160px" }} className="k-table-td">Data 3.2</span>
71
- <span className="k-table-td">Data 3.3</span>
72
- <span className="k-table-td k-table-group-td"><span>Group</span></span>
73
- </li>
74
- <li className="k-table-row k-table-alt-row">
75
- <span style={{ width: '50px' }} className="k-table-td">4</span>
76
- <span style={{ width: "160px" }} className="k-table-td">Data 4.2 (alt)</span>
77
- <span className="k-table-td">Data 4.3</span>
78
- <span className="k-table-td k-table-spacer-td"></span>
79
- </li>
80
- <li className="k-table-row">
81
- <span style={{ width: '50px' }} className="k-table-td">5</span>
82
- <span style={{ width: "160px" }} className="k-table-td">Data 5.2</span>
83
- <span className="k-table-td">Data 5.3</span>
84
- <span className="k-table-td k-table-spacer-td"></span>
85
- </li>
86
- <li className="k-table-row k-table-alt-row">
87
- <span style={{ width: '50px' }} className="k-table-td">6</span>
88
- <span style={{ width: "160px" }} className="k-table-td">Data 6.2 (alt)</span>
89
- <span className="k-table-td">Data 6.3</span>
90
- <span className="k-table-td k-table-spacer-td"></span>
91
- </li>
92
- </ul>
93
- </div>
94
- <div className="k-table-footer">
95
- <span className="k-table-td">30 records in total</span>
96
- </div>
97
- </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
+ <TableGroupHeader>
45
+ <TableTh text="Initial group" colspan="3"></TableTh>
46
+ </TableGroupHeader>
47
+ </TableThead>
48
+ </TableHeader>
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
+ <TableListTd className="k-table-spacer-td"></TableListTd>
56
+ </TableListRow>
57
+ <TableListRow alt>
58
+ <TableListTd text="2" style={{ width: '50px' }}></TableListTd>
59
+ <TableListTd text="Data 2.2 (alt)" style={{ width: '160px' }}></TableListTd>
60
+ <TableListTd text="Data 2.3"></TableListTd>
61
+ <TableListTd className="k-table-spacer-td"></TableListTd>
62
+ </TableListRow>
63
+ <TableListRow className="k-first">
64
+ <TableListTd text="3" style={{ width: '50px' }}></TableListTd>
65
+ <TableListTd text="Data 3.2" style={{ width: '160px' }}></TableListTd>
66
+ <TableListTd text="Data 3.3"></TableListTd>
67
+ <TableListTd className="k-table-group-td"><span>Group</span></TableListTd>
68
+ </TableListRow>
69
+ <TableListRow alt>
70
+ <TableListTd text="4" style={{ width: '50px' }}></TableListTd>
71
+ <TableListTd text="Data 4.2 (alt)" style={{ width: '160px' }}></TableListTd>
72
+ <TableListTd text="Data 4.3"></TableListTd>
73
+ <TableListTd className="k-table-spacer-td"></TableListTd>
74
+ </TableListRow>
75
+ <TableListRow>
76
+ <TableListTd text="5" style={{ width: '50px' }}></TableListTd>
77
+ <TableListTd text="Data 5.2" style={{ width: '160px' }}></TableListTd>
78
+ <TableListTd text="Data 5.3"></TableListTd>
79
+ <TableListTd className="k-table-spacer-td"></TableListTd>
80
+ </TableListRow>
81
+ <TableListRow alt>
82
+ <TableListTd text="6" style={{ width: '50px' }}></TableListTd>
83
+ <TableListTd text="Data 6.2 (alt)" style={{ width: '160px' }}></TableListTd>
84
+ <TableListTd text="Data 6.3"></TableListTd>
85
+ <TableListTd className="k-table-spacer-td"></TableListTd>
86
+ </TableListRow>
87
+ </TableList>
88
+ </TableBody>
89
+ <TableFooter>
90
+ <TableListTd text="30 records in total"></TableListTd>
91
+ </TableFooter>
92
+ </DataTable>
98
93
  </section>
99
94
 
100
95
  <section>
101
- <div className="k-data-table k-table-md">
102
- <div className="k-table-header">
103
- <div className="k-table-header-wrap">
104
- <table className="k-table">
105
- <colgroup>
106
- <col style={{ width: '50px' }} />
107
- <col style={{ width: "160px" }} />
108
- <col />
109
- </colgroup>
110
- <thead className="k-table-thead">
111
- <tr className="k-table-row">
112
- <th className="k-table-th">ID</th>
113
- <th className="k-table-th">Name</th>
114
- <th className="k-table-th">Job Title</th>
115
- </tr>
116
- <tr className="k-table-group-header">
117
- <td colSpan={3} className="k-table-th">
118
- Initial group
119
- </td>
120
- </tr>
121
- </thead>
122
- </table>
123
- </div>
124
- </div>
125
- <div className="k-table-scroller">
126
- <ul className="k-table k-table-list">
127
- <li className="k-table-row">
128
- <span style={{ width: '50px' }} className="k-table-td">1</span>
129
- <span style={{ width: "160px" }} className="k-table-td">Data 1.2</span>
130
- <span className="k-table-td">Data 1.3</span>
131
- <span className="k-table-td k-table-spacer-td"></span>
132
- </li>
133
- <li className="k-table-row k-table-alt-row">
134
- <span style={{ width: '50px' }} className="k-table-td">2</span>
135
- <span style={{ width: "160px" }} className="k-table-td">Data 2.2 (alt)</span>
136
- <span className="k-table-td">Data 2.3</span>
137
- <span className="k-table-td k-table-spacer-td"></span>
138
- </li>
139
- <li className="k-table-row k-first">
140
- <span style={{ width: '50px' }} className="k-table-td">3</span>
141
- <span style={{ width: "160px" }} className="k-table-td">Data 3.2</span>
142
- <span className="k-table-td">Data 3.3</span>
143
- <span className="k-table-td k-table-group-td"><span>Group</span></span>
144
- </li>
145
- <li className="k-table-row k-table-alt-row">
146
- <span style={{ width: '50px' }} className="k-table-td">4</span>
147
- <span style={{ width: "160px" }} className="k-table-td">Data 4.2 (alt)</span>
148
- <span className="k-table-td">Data 4.3</span>
149
- <span className="k-table-td k-table-spacer-td"></span>
150
- </li>
151
- <li className="k-table-row">
152
- <span style={{ width: '50px' }} className="k-table-td">5</span>
153
- <span style={{ width: "160px" }} className="k-table-td">Data 5.2</span>
154
- <span className="k-table-td">Data 5.3</span>
155
- <span className="k-table-td k-table-spacer-td"></span>
156
- </li>
157
- <li className="k-table-row k-table-alt-row">
158
- <span style={{ width: '50px' }} className="k-table-td">6</span>
159
- <span style={{ width: "160px" }} className="k-table-td">Data 6.2 (alt)</span>
160
- <span className="k-table-td">Data 6.3</span>
161
- <span className="k-table-td k-table-spacer-td"></span>
162
- </li>
163
- </ul>
164
- </div>
165
- <div className="k-table-footer">
166
- <span className="k-table-td">30 records in total</span>
167
- </div>
168
- </div>
96
+ <DataTable size="medium">
97
+ <TableHeader>
98
+ <colgroup>
99
+ <col style={{ width: '50px' }} />
100
+ <col style={{ width: '160px' }} />
101
+ <col />
102
+ </colgroup>
103
+ <TableThead>
104
+ <TableRow>
105
+ <TableTh text="ID"></TableTh>
106
+ <TableTh text="Name"></TableTh>
107
+ <TableTh text="Job Title"></TableTh>
108
+ </TableRow>
109
+ <TableGroupHeader>
110
+ <TableTh text="Initial group" colspan="3"></TableTh>
111
+ </TableGroupHeader>
112
+ </TableThead>
113
+ </TableHeader>
114
+ <TableBody>
115
+ <TableList>
116
+ <TableListRow>
117
+ <TableListTd text="1" style={{ width: '50px' }}></TableListTd>
118
+ <TableListTd text="Data 1.2" style={{ width: '160px' }}></TableListTd>
119
+ <TableListTd text="Data 1.3"></TableListTd>
120
+ <TableListTd className="k-table-spacer-td"></TableListTd>
121
+ </TableListRow>
122
+ <TableListRow alt>
123
+ <TableListTd text="2" style={{ width: '50px' }}></TableListTd>
124
+ <TableListTd text="Data 2.2 (alt)" style={{ width: '160px' }}></TableListTd>
125
+ <TableListTd text="Data 2.3"></TableListTd>
126
+ <TableListTd className="k-table-spacer-td"></TableListTd>
127
+ </TableListRow>
128
+ <TableListRow className="k-first">
129
+ <TableListTd text="3" style={{ width: '50px' }}></TableListTd>
130
+ <TableListTd text="Data 3.2" style={{ width: '160px' }}></TableListTd>
131
+ <TableListTd text="Data 3.3"></TableListTd>
132
+ <TableListTd className="k-table-group-td"><span>Group</span></TableListTd>
133
+ </TableListRow>
134
+ <TableListRow alt>
135
+ <TableListTd text="4" style={{ width: '50px' }}></TableListTd>
136
+ <TableListTd text="Data 4.2 (alt)" style={{ width: '160px' }}></TableListTd>
137
+ <TableListTd text="Data 4.3"></TableListTd>
138
+ <TableListTd className="k-table-spacer-td"></TableListTd>
139
+ </TableListRow>
140
+ <TableListRow>
141
+ <TableListTd text="5" style={{ width: '50px' }}></TableListTd>
142
+ <TableListTd text="Data 5.2" style={{ width: '160px' }}></TableListTd>
143
+ <TableListTd text="Data 5.3"></TableListTd>
144
+ <TableListTd className="k-table-spacer-td"></TableListTd>
145
+ </TableListRow>
146
+ <TableListRow alt>
147
+ <TableListTd text="6" style={{ width: '50px' }}></TableListTd>
148
+ <TableListTd text="Data 6.2 (alt)" style={{ width: '160px' }}></TableListTd>
149
+ <TableListTd text="Data 6.3"></TableListTd>
150
+ <TableListTd className="k-table-spacer-td"></TableListTd>
151
+ </TableListRow>
152
+ </TableList>
153
+ </TableBody>
154
+ <TableFooter>
155
+ <TableListTd text="30 records in total"></TableListTd>
156
+ </TableFooter>
157
+ </DataTable>
169
158
  </section>
170
159
 
171
160
  <section>
172
- <div className="k-data-table k-table-lg">
173
- <div className="k-table-header">
174
- <div className="k-table-header-wrap">
175
- <table className="k-table">
176
- <colgroup>
177
- <col style={{ width: '50px' }} />
178
- <col style={{ width: "160px" }} />
179
- <col />
180
- </colgroup>
181
- <thead className="k-table-thead">
182
- <tr className="k-table-row">
183
- <th className="k-table-th">ID</th>
184
- <th className="k-table-th">Name</th>
185
- <th className="k-table-th">Job Title</th>
186
- </tr>
187
- <tr className="k-table-group-header">
188
- <td colSpan={3} className="k-table-th">
189
- Initial group
190
- </td>
191
- </tr>
192
- </thead>
193
- </table>
194
- </div>
195
- </div>
196
- <div className="k-table-scroller">
197
- <ul className="k-table k-table-list">
198
- <li className="k-table-row">
199
- <span style={{ width: '50px' }} className="k-table-td">1</span>
200
- <span style={{ width: "160px" }} className="k-table-td">Data 1.2</span>
201
- <span className="k-table-td">Data 1.3</span>
202
- <span className="k-table-td k-table-spacer-td"></span>
203
- </li>
204
- <li className="k-table-row k-table-alt-row">
205
- <span style={{ width: '50px' }} className="k-table-td">2</span>
206
- <span style={{ width: "160px" }} className="k-table-td">Data 2.2 (alt)</span>
207
- <span className="k-table-td">Data 2.3</span>
208
- <span className="k-table-td k-table-spacer-td"></span>
209
- </li>
210
- <li className="k-table-row k-first">
211
- <span style={{ width: '50px' }} className="k-table-td">3</span>
212
- <span style={{ width: "160px" }} className="k-table-td">Data 3.2</span>
213
- <span className="k-table-td">Data 3.3</span>
214
- <span className="k-table-td k-table-group-td"><span>Group</span></span>
215
- </li>
216
- <li className="k-table-row k-table-alt-row">
217
- <span style={{ width: '50px' }} className="k-table-td">4</span>
218
- <span style={{ width: "160px" }} className="k-table-td">Data 4.2 (alt)</span>
219
- <span className="k-table-td">Data 4.3</span>
220
- <span className="k-table-td k-table-spacer-td"></span>
221
- </li>
222
- <li className="k-table-row">
223
- <span style={{ width: '50px' }} className="k-table-td">5</span>
224
- <span style={{ width: "160px" }} className="k-table-td">Data 5.2</span>
225
- <span className="k-table-td">Data 5.3</span>
226
- <span className="k-table-td k-table-spacer-td"></span>
227
- </li>
228
- <li className="k-table-row k-table-alt-row">
229
- <span style={{ width: '50px' }} className="k-table-td">6</span>
230
- <span style={{ width: "160px" }} className="k-table-td">Data 6.2 (alt)</span>
231
- <span className="k-table-td">Data 6.3</span>
232
- <span className="k-table-td k-table-spacer-td"></span>
233
- </li>
234
- </ul>
235
- </div>
236
- <div className="k-table-footer">
237
- <span className="k-table-td">30 records in total</span>
238
- </div>
239
- </div>
161
+ <DataTable size="large">
162
+ <TableHeader>
163
+ <colgroup>
164
+ <col style={{ width: '50px' }} />
165
+ <col style={{ width: '160px' }} />
166
+ <col />
167
+ </colgroup>
168
+ <TableThead>
169
+ <TableRow>
170
+ <TableTh text="ID"></TableTh>
171
+ <TableTh text="Name"></TableTh>
172
+ <TableTh text="Job Title"></TableTh>
173
+ </TableRow>
174
+ <TableGroupHeader>
175
+ <TableTh text="Initial group" colspan="3"></TableTh>
176
+ </TableGroupHeader>
177
+ </TableThead>
178
+ </TableHeader>
179
+ <TableBody>
180
+ <TableList>
181
+ <TableListRow>
182
+ <TableListTd text="1" style={{ width: '50px' }}></TableListTd>
183
+ <TableListTd text="Data 1.2" style={{ width: '160px' }}></TableListTd>
184
+ <TableListTd text="Data 1.3"></TableListTd>
185
+ <TableListTd className="k-table-spacer-td"></TableListTd>
186
+ </TableListRow>
187
+ <TableListRow alt>
188
+ <TableListTd text="2" style={{ width: '50px' }}></TableListTd>
189
+ <TableListTd text="Data 2.2 (alt)" style={{ width: '160px' }}></TableListTd>
190
+ <TableListTd text="Data 2.3"></TableListTd>
191
+ <TableListTd className="k-table-spacer-td"></TableListTd>
192
+ </TableListRow>
193
+ <TableListRow className="k-first">
194
+ <TableListTd text="3" style={{ width: '50px' }}></TableListTd>
195
+ <TableListTd text="Data 3.2" style={{ width: '160px' }}></TableListTd>
196
+ <TableListTd text="Data 3.3"></TableListTd>
197
+ <TableListTd className="k-table-group-td"><span>Group</span></TableListTd>
198
+ </TableListRow>
199
+ <TableListRow alt>
200
+ <TableListTd text="4" style={{ width: '50px' }}></TableListTd>
201
+ <TableListTd text="Data 4.2 (alt)" style={{ width: '160px' }}></TableListTd>
202
+ <TableListTd text="Data 4.3"></TableListTd>
203
+ <TableListTd className="k-table-spacer-td"></TableListTd>
204
+ </TableListRow>
205
+ <TableListRow>
206
+ <TableListTd text="5" style={{ width: '50px' }}></TableListTd>
207
+ <TableListTd text="Data 5.2" style={{ width: '160px' }}></TableListTd>
208
+ <TableListTd text="Data 5.3"></TableListTd>
209
+ <TableListTd className="k-table-spacer-td"></TableListTd>
210
+ </TableListRow>
211
+ <TableListRow alt>
212
+ <TableListTd text="6" style={{ width: '50px' }}></TableListTd>
213
+ <TableListTd text="Data 6.2 (alt)" style={{ width: '160px' }}></TableListTd>
214
+ <TableListTd text="Data 6.3"></TableListTd>
215
+ <TableListTd className="k-table-spacer-td"></TableListTd>
216
+ </TableListRow>
217
+ </TableList>
218
+ </TableBody>
219
+ <TableFooter>
220
+ <TableListTd text="30 records in total"></TableListTd>
221
+ </TableFooter>
222
+ </DataTable>
240
223
  </section>
241
224
 
242
225
  </div>