@progress/kendo-themes-html 13.1.1-dev.1 → 13.1.1-dev.2
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.
|
@@ -1,790 +0,0 @@
|
|
|
1
|
-
import { Icon } from "../../icon";
|
|
2
|
-
import { Chip, ChipList, ChipAction } from "../../chip";
|
|
3
|
-
import { Grid, GridHeader, GridHeaderCell, GridHeaderTable, GridGroupingHeader, GridContainer, GridContent, GridTable, GridPinnedContainer } from "../../grid";
|
|
4
|
-
import { TableThead, TableRow, TableTd, TableTbody } from "../../table";
|
|
5
|
-
import { ContextMenu } from "../../context-menu";
|
|
6
|
-
import { MenuListItem } from "../../menu";
|
|
7
|
-
import { Popup } from "../../popup";
|
|
8
|
-
|
|
9
|
-
export default () => (
|
|
10
|
-
<>
|
|
11
|
-
<div id="test-area" className="k-d-grid k-grid-cols-3">
|
|
12
|
-
<span>Context Menu only</span>
|
|
13
|
-
<span>Group row pinned to top</span>
|
|
14
|
-
<span>Group row pinned to bottom</span>
|
|
15
|
-
|
|
16
|
-
<section>
|
|
17
|
-
<Grid
|
|
18
|
-
_renderAriaRoot
|
|
19
|
-
groupingHeader={
|
|
20
|
-
<GridGroupingHeader>
|
|
21
|
-
<ChipList>
|
|
22
|
-
<Chip
|
|
23
|
-
text="Rating"
|
|
24
|
-
actions={
|
|
25
|
-
<>
|
|
26
|
-
<ChipAction type="remove" />
|
|
27
|
-
</>
|
|
28
|
-
}
|
|
29
|
-
/>
|
|
30
|
-
</ChipList>
|
|
31
|
-
</GridGroupingHeader>
|
|
32
|
-
}
|
|
33
|
-
>
|
|
34
|
-
<GridHeader draggable>
|
|
35
|
-
<div className="k-grid-header-wrap">
|
|
36
|
-
<GridHeaderTable>
|
|
37
|
-
<colgroup>
|
|
38
|
-
<col className="k-group-col" />
|
|
39
|
-
<col />
|
|
40
|
-
<col />
|
|
41
|
-
<col />
|
|
42
|
-
</colgroup>
|
|
43
|
-
<TableThead>
|
|
44
|
-
<TableRow>
|
|
45
|
-
<GridHeaderCell colspan={1} rowspan={1} className="k-group-cell" accessibleLabel="Group"></GridHeaderCell>
|
|
46
|
-
<GridHeaderCell colspan={1} columnTitle="Contact Name"></GridHeaderCell>
|
|
47
|
-
<GridHeaderCell colspan={1} columnTitle="Job Title"></GridHeaderCell>
|
|
48
|
-
<GridHeaderCell colspan={1} columnTitle="Rating"></GridHeaderCell>
|
|
49
|
-
</TableRow>
|
|
50
|
-
</TableThead>
|
|
51
|
-
</GridHeaderTable>
|
|
52
|
-
</div>
|
|
53
|
-
</GridHeader>
|
|
54
|
-
<GridContainer>
|
|
55
|
-
<GridContent>
|
|
56
|
-
<GridTable>
|
|
57
|
-
<colgroup>
|
|
58
|
-
<col className="k-group-col" />
|
|
59
|
-
<col />
|
|
60
|
-
<col />
|
|
61
|
-
<col />
|
|
62
|
-
</colgroup>
|
|
63
|
-
<TableTbody>
|
|
64
|
-
<TableRow className="k-table-group-row k-grouping-row">
|
|
65
|
-
<TableTd colspan={4}>
|
|
66
|
-
<p className="k-reset">
|
|
67
|
-
<Icon icon="caret-alt-down" />
|
|
68
|
-
Rating 3/5
|
|
69
|
-
</p>
|
|
70
|
-
</TableTd>
|
|
71
|
-
</TableRow>
|
|
72
|
-
<TableRow className="k-master-row">
|
|
73
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
74
|
-
<TableTd colspan={1}>Sig Jeannel</TableTd>
|
|
75
|
-
<TableTd colspan={1}>Human Resources Assistant III</TableTd>
|
|
76
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
77
|
-
</TableRow>
|
|
78
|
-
<TableRow className="k-master-row" alt>
|
|
79
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
80
|
-
<TableTd colspan={1}>Isadora Plumtree</TableTd>
|
|
81
|
-
<TableTd colspan={1}>Graphic Designer</TableTd>
|
|
82
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
83
|
-
</TableRow>
|
|
84
|
-
<TableRow className="k-master-row">
|
|
85
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
86
|
-
<TableTd colspan={1}>Xerxes Borson</TableTd>
|
|
87
|
-
<TableTd colspan={1}>Content Writer</TableTd>
|
|
88
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
89
|
-
</TableRow>
|
|
90
|
-
<TableRow className="k-table-group-row k-grouping-row">
|
|
91
|
-
<TableTd colspan={4}>
|
|
92
|
-
<p className="k-reset">
|
|
93
|
-
<Icon icon="caret-alt-down" />
|
|
94
|
-
Rating 1/5
|
|
95
|
-
</p>
|
|
96
|
-
</TableTd>
|
|
97
|
-
</TableRow>
|
|
98
|
-
<TableRow className="k-master-row">
|
|
99
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
100
|
-
<TableTd colspan={1}>Ruthi Bldini</TableTd>
|
|
101
|
-
<TableTd colspan={1}>Coordinator</TableTd>
|
|
102
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
103
|
-
</TableRow>
|
|
104
|
-
<TableRow className="k-master-row" alt>
|
|
105
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
106
|
-
<TableTd colspan={1}>Marcelina Vee</TableTd>
|
|
107
|
-
<TableTd colspan={1}>Marketing Specialist</TableTd>
|
|
108
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
109
|
-
</TableRow>
|
|
110
|
-
<TableRow className="k-master-row">
|
|
111
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
112
|
-
<TableTd colspan={1}>Finnian Bramble</TableTd>
|
|
113
|
-
<TableTd colspan={1}>Business Analyst</TableTd>
|
|
114
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
115
|
-
</TableRow>
|
|
116
|
-
</TableTbody>
|
|
117
|
-
</GridTable>
|
|
118
|
-
</GridContent>
|
|
119
|
-
</GridContainer>
|
|
120
|
-
</Grid>
|
|
121
|
-
{/* Row Pinning Context Menu */}
|
|
122
|
-
<Popup className="k-menu-popup" offset={{ left: "145px", top: "395px" }}>
|
|
123
|
-
<ContextMenu>
|
|
124
|
-
<MenuListItem first text="Hide group" icon="eye-slash" />
|
|
125
|
-
<MenuListItem text="Set group sticky" icon="stick" />
|
|
126
|
-
<MenuListItem text="Pin group" icon="pin-outline" showArrow active />
|
|
127
|
-
</ContextMenu>
|
|
128
|
-
</Popup>
|
|
129
|
-
|
|
130
|
-
{/* Pin row submenu */}
|
|
131
|
-
<Popup className="k-menu-popup" offset={{ left: "306px", top: "451px" }}>
|
|
132
|
-
<ContextMenu>
|
|
133
|
-
<MenuListItem first text="Pin group to top" icon="pin-outline-top" selected />
|
|
134
|
-
<MenuListItem last text="Pin group to bottom" icon="pin-outline-bottom" />
|
|
135
|
-
</ContextMenu>
|
|
136
|
-
</Popup>
|
|
137
|
-
</section>
|
|
138
|
-
|
|
139
|
-
<section>
|
|
140
|
-
<Grid
|
|
141
|
-
_renderAriaRoot
|
|
142
|
-
groupingHeader={
|
|
143
|
-
<GridGroupingHeader>
|
|
144
|
-
<ChipList>
|
|
145
|
-
<Chip
|
|
146
|
-
text="Rating"
|
|
147
|
-
actions={
|
|
148
|
-
<>
|
|
149
|
-
<ChipAction type="remove" />
|
|
150
|
-
</>
|
|
151
|
-
}
|
|
152
|
-
/>
|
|
153
|
-
</ChipList>
|
|
154
|
-
</GridGroupingHeader>
|
|
155
|
-
}
|
|
156
|
-
>
|
|
157
|
-
<GridHeader draggable>
|
|
158
|
-
<div className="k-grid-header-wrap">
|
|
159
|
-
<GridHeaderTable>
|
|
160
|
-
<colgroup>
|
|
161
|
-
<col className="k-group-col" />
|
|
162
|
-
<col />
|
|
163
|
-
<col />
|
|
164
|
-
<col />
|
|
165
|
-
</colgroup>
|
|
166
|
-
<TableThead>
|
|
167
|
-
<TableRow>
|
|
168
|
-
<GridHeaderCell colspan={1} rowspan={1} className="k-group-cell" accessibleLabel="Group"></GridHeaderCell>
|
|
169
|
-
<GridHeaderCell colspan={1} columnTitle="Contact Name"></GridHeaderCell>
|
|
170
|
-
<GridHeaderCell colspan={1} columnTitle="Job Title"></GridHeaderCell>
|
|
171
|
-
<GridHeaderCell colspan={1} columnTitle="Rating"></GridHeaderCell>
|
|
172
|
-
</TableRow>
|
|
173
|
-
</TableThead>
|
|
174
|
-
</GridHeaderTable>
|
|
175
|
-
</div>
|
|
176
|
-
</GridHeader>
|
|
177
|
-
<GridPinnedContainer>
|
|
178
|
-
<div className="k-grid-pinned-wrap">
|
|
179
|
-
<GridTable>
|
|
180
|
-
<colgroup>
|
|
181
|
-
<col className="k-group-col" />
|
|
182
|
-
<col />
|
|
183
|
-
</colgroup>
|
|
184
|
-
<TableTbody>
|
|
185
|
-
<TableRow className="k-table-group-row k-grouping-row">
|
|
186
|
-
<TableTd colspan={9}>
|
|
187
|
-
<p className="k-reset">
|
|
188
|
-
<Icon icon="none" />
|
|
189
|
-
Rating 1/5
|
|
190
|
-
</p>
|
|
191
|
-
</TableTd>
|
|
192
|
-
</TableRow>
|
|
193
|
-
</TableTbody>
|
|
194
|
-
</GridTable>
|
|
195
|
-
</div>
|
|
196
|
-
</GridPinnedContainer>
|
|
197
|
-
<GridContainer>
|
|
198
|
-
<GridContent>
|
|
199
|
-
<GridTable>
|
|
200
|
-
<colgroup>
|
|
201
|
-
<col className="k-group-col" />
|
|
202
|
-
<col />
|
|
203
|
-
<col />
|
|
204
|
-
<col />
|
|
205
|
-
</colgroup>
|
|
206
|
-
<TableTbody>
|
|
207
|
-
<TableRow className="k-table-group-row k-grouping-row">
|
|
208
|
-
<TableTd colspan={4}>
|
|
209
|
-
<p className="k-reset">
|
|
210
|
-
<Icon icon="caret-alt-down" />
|
|
211
|
-
Rating 3/5
|
|
212
|
-
</p>
|
|
213
|
-
</TableTd>
|
|
214
|
-
</TableRow>
|
|
215
|
-
<TableRow className="k-master-row">
|
|
216
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
217
|
-
<TableTd colspan={1}>Sig Jeannel</TableTd>
|
|
218
|
-
<TableTd colspan={1}>Human Resources Assistant III</TableTd>
|
|
219
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
220
|
-
</TableRow>
|
|
221
|
-
<TableRow className="k-master-row" alt>
|
|
222
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
223
|
-
<TableTd colspan={1}>Isadora Plumtree</TableTd>
|
|
224
|
-
<TableTd colspan={1}>Graphic Designer</TableTd>
|
|
225
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
226
|
-
</TableRow>
|
|
227
|
-
<TableRow className="k-master-row">
|
|
228
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
229
|
-
<TableTd colspan={1}>Xerxes Borson</TableTd>
|
|
230
|
-
<TableTd colspan={1}>Content Writer</TableTd>
|
|
231
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
232
|
-
</TableRow>
|
|
233
|
-
<TableRow className="k-table-group-row k-grouping-row">
|
|
234
|
-
<TableTd colspan={4}>
|
|
235
|
-
<p className="k-reset">
|
|
236
|
-
<Icon icon="caret-alt-down" />
|
|
237
|
-
Rating 1/5
|
|
238
|
-
</p>
|
|
239
|
-
</TableTd>
|
|
240
|
-
</TableRow>
|
|
241
|
-
<TableRow className="k-master-row k-pinned-source">
|
|
242
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
243
|
-
<TableTd colspan={1}>Ruthi Bldini</TableTd>
|
|
244
|
-
<TableTd colspan={1}>Coordinator</TableTd>
|
|
245
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
246
|
-
</TableRow>
|
|
247
|
-
<TableRow className="k-master-row k-pinned-source" alt>
|
|
248
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
249
|
-
<TableTd colspan={1}>Marcelina Vee</TableTd>
|
|
250
|
-
<TableTd colspan={1}>Marketing Specialist</TableTd>
|
|
251
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
252
|
-
</TableRow>
|
|
253
|
-
<TableRow className="k-master-row k-pinned-source">
|
|
254
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
255
|
-
<TableTd colspan={1}>Finnian Bramble</TableTd>
|
|
256
|
-
<TableTd colspan={1}>Business Analyst</TableTd>
|
|
257
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
258
|
-
</TableRow>
|
|
259
|
-
</TableTbody>
|
|
260
|
-
</GridTable>
|
|
261
|
-
</GridContent>
|
|
262
|
-
</GridContainer>
|
|
263
|
-
</Grid>
|
|
264
|
-
</section>
|
|
265
|
-
|
|
266
|
-
<section>
|
|
267
|
-
<Grid
|
|
268
|
-
_renderAriaRoot
|
|
269
|
-
groupingHeader={
|
|
270
|
-
<GridGroupingHeader>
|
|
271
|
-
<ChipList>
|
|
272
|
-
<Chip
|
|
273
|
-
text="Rating"
|
|
274
|
-
actions={
|
|
275
|
-
<>
|
|
276
|
-
<ChipAction type="remove" />
|
|
277
|
-
</>
|
|
278
|
-
}
|
|
279
|
-
/>
|
|
280
|
-
</ChipList>
|
|
281
|
-
</GridGroupingHeader>
|
|
282
|
-
}
|
|
283
|
-
>
|
|
284
|
-
<GridHeader draggable>
|
|
285
|
-
<div className="k-grid-header-wrap">
|
|
286
|
-
<GridHeaderTable>
|
|
287
|
-
<colgroup>
|
|
288
|
-
<col className="k-group-col" />
|
|
289
|
-
<col />
|
|
290
|
-
<col />
|
|
291
|
-
<col />
|
|
292
|
-
</colgroup>
|
|
293
|
-
<TableThead>
|
|
294
|
-
<TableRow>
|
|
295
|
-
<GridHeaderCell colspan={1} rowspan={1} className="k-group-cell" accessibleLabel="Group"></GridHeaderCell>
|
|
296
|
-
<GridHeaderCell colspan={1} columnTitle="Contact Name"></GridHeaderCell>
|
|
297
|
-
<GridHeaderCell colspan={1} columnTitle="Job Title"></GridHeaderCell>
|
|
298
|
-
<GridHeaderCell colspan={1} columnTitle="Rating"></GridHeaderCell>
|
|
299
|
-
</TableRow>
|
|
300
|
-
</TableThead>
|
|
301
|
-
</GridHeaderTable>
|
|
302
|
-
</div>
|
|
303
|
-
</GridHeader>
|
|
304
|
-
<GridContainer>
|
|
305
|
-
<GridContent>
|
|
306
|
-
<GridTable>
|
|
307
|
-
<colgroup>
|
|
308
|
-
<col className="k-group-col" />
|
|
309
|
-
<col />
|
|
310
|
-
<col />
|
|
311
|
-
<col />
|
|
312
|
-
</colgroup>
|
|
313
|
-
<TableTbody>
|
|
314
|
-
<TableRow className="k-table-group-row k-grouping-row">
|
|
315
|
-
<TableTd colspan={4}>
|
|
316
|
-
<p className="k-reset">
|
|
317
|
-
<Icon icon="caret-alt-down" />
|
|
318
|
-
Rating 3/5
|
|
319
|
-
</p>
|
|
320
|
-
</TableTd>
|
|
321
|
-
</TableRow>
|
|
322
|
-
<TableRow className="k-master-row">
|
|
323
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
324
|
-
<TableTd colspan={1}>Sig Jeannel</TableTd>
|
|
325
|
-
<TableTd colspan={1}>Human Resources Assistant III</TableTd>
|
|
326
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
327
|
-
</TableRow>
|
|
328
|
-
<TableRow className="k-master-row" alt>
|
|
329
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
330
|
-
<TableTd colspan={1}>Isadora Plumtree</TableTd>
|
|
331
|
-
<TableTd colspan={1}>Graphic Designer</TableTd>
|
|
332
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
333
|
-
</TableRow>
|
|
334
|
-
<TableRow className="k-master-row">
|
|
335
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
336
|
-
<TableTd colspan={1}>Xerxes Borson</TableTd>
|
|
337
|
-
<TableTd colspan={1}>Content Writer</TableTd>
|
|
338
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
339
|
-
</TableRow>
|
|
340
|
-
<TableRow className="k-table-group-row k-grouping-row">
|
|
341
|
-
<TableTd colspan={4}>
|
|
342
|
-
<p className="k-reset">
|
|
343
|
-
<Icon icon="caret-alt-down" />
|
|
344
|
-
Rating 1/5
|
|
345
|
-
</p>
|
|
346
|
-
</TableTd>
|
|
347
|
-
</TableRow>
|
|
348
|
-
<TableRow className="k-master-row k-pinned-source">
|
|
349
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
350
|
-
<TableTd colspan={1}>Ruthi Bldini</TableTd>
|
|
351
|
-
<TableTd colspan={1}>Coordinator</TableTd>
|
|
352
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
353
|
-
</TableRow>
|
|
354
|
-
<TableRow className="k-master-row k-pinned-source" alt>
|
|
355
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
356
|
-
<TableTd colspan={1}>Marcelina Vee</TableTd>
|
|
357
|
-
<TableTd colspan={1}>Marketing Specialist</TableTd>
|
|
358
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
359
|
-
</TableRow>
|
|
360
|
-
<TableRow className="k-master-row k-pinned-source">
|
|
361
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
362
|
-
<TableTd colspan={1}>Finnian Bramble</TableTd>
|
|
363
|
-
<TableTd colspan={1}>Business Analyst</TableTd>
|
|
364
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
365
|
-
</TableRow>
|
|
366
|
-
</TableTbody>
|
|
367
|
-
</GridTable>
|
|
368
|
-
</GridContent>
|
|
369
|
-
</GridContainer>
|
|
370
|
-
<GridPinnedContainer position="bottom">
|
|
371
|
-
<div className="k-grid-pinned-wrap">
|
|
372
|
-
<GridTable>
|
|
373
|
-
<colgroup>
|
|
374
|
-
<col className="k-group-col" />
|
|
375
|
-
<col />
|
|
376
|
-
</colgroup>
|
|
377
|
-
<TableTbody>
|
|
378
|
-
<TableRow className="k-table-group-row k-grouping-row">
|
|
379
|
-
<TableTd colspan={4}>
|
|
380
|
-
<p className="k-reset">
|
|
381
|
-
<Icon icon="none" />
|
|
382
|
-
Rating 1/5
|
|
383
|
-
</p>
|
|
384
|
-
</TableTd>
|
|
385
|
-
</TableRow>
|
|
386
|
-
</TableTbody>
|
|
387
|
-
</GridTable>
|
|
388
|
-
</div>
|
|
389
|
-
</GridPinnedContainer>
|
|
390
|
-
</Grid>
|
|
391
|
-
</section>
|
|
392
|
-
|
|
393
|
-
<span>Pinning Icon</span>
|
|
394
|
-
<span>Group row pinned to top</span>
|
|
395
|
-
<span>Group row pinned to bottom</span>
|
|
396
|
-
|
|
397
|
-
<section>
|
|
398
|
-
<Grid
|
|
399
|
-
_renderAriaRoot
|
|
400
|
-
groupingHeader={
|
|
401
|
-
<GridGroupingHeader>
|
|
402
|
-
<ChipList>
|
|
403
|
-
<Chip
|
|
404
|
-
text="Rating"
|
|
405
|
-
actions={
|
|
406
|
-
<>
|
|
407
|
-
<ChipAction type="remove" />
|
|
408
|
-
</>
|
|
409
|
-
}
|
|
410
|
-
/>
|
|
411
|
-
</ChipList>
|
|
412
|
-
</GridGroupingHeader>
|
|
413
|
-
}
|
|
414
|
-
>
|
|
415
|
-
<GridHeader draggable>
|
|
416
|
-
<div className="k-grid-header-wrap">
|
|
417
|
-
<GridHeaderTable>
|
|
418
|
-
<colgroup>
|
|
419
|
-
<col className="k-group-col" />
|
|
420
|
-
<col />
|
|
421
|
-
<col />
|
|
422
|
-
<col />
|
|
423
|
-
</colgroup>
|
|
424
|
-
<TableThead>
|
|
425
|
-
<TableRow>
|
|
426
|
-
<GridHeaderCell colspan={1} rowspan={1} className="k-group-cell" accessibleLabel="Group"></GridHeaderCell>
|
|
427
|
-
<GridHeaderCell colspan={1} columnTitle="Contact Name"></GridHeaderCell>
|
|
428
|
-
<GridHeaderCell colspan={1} columnTitle="Job Title"></GridHeaderCell>
|
|
429
|
-
<GridHeaderCell colspan={1} columnTitle="Rating"></GridHeaderCell>
|
|
430
|
-
</TableRow>
|
|
431
|
-
</TableThead>
|
|
432
|
-
</GridHeaderTable>
|
|
433
|
-
</div>
|
|
434
|
-
</GridHeader>
|
|
435
|
-
<GridContainer>
|
|
436
|
-
<GridContent>
|
|
437
|
-
<GridTable>
|
|
438
|
-
<colgroup>
|
|
439
|
-
<col className="k-group-col" />
|
|
440
|
-
<col />
|
|
441
|
-
<col />
|
|
442
|
-
<col />
|
|
443
|
-
</colgroup>
|
|
444
|
-
<TableTbody>
|
|
445
|
-
<TableRow className="k-table-group-row k-grouping-row">
|
|
446
|
-
<TableTd colspan={4}>
|
|
447
|
-
<p className="k-reset">
|
|
448
|
-
<span className="k-pin-cell">
|
|
449
|
-
<Icon icon="pin-outline" />
|
|
450
|
-
</span>
|
|
451
|
-
<Icon icon="caret-alt-down" />
|
|
452
|
-
Rating 3/5
|
|
453
|
-
</p>
|
|
454
|
-
</TableTd>
|
|
455
|
-
</TableRow>
|
|
456
|
-
<TableRow className="k-master-row">
|
|
457
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
458
|
-
<TableTd colspan={1}>Sig Jeannel</TableTd>
|
|
459
|
-
<TableTd colspan={1}>Human Resources Assistant III</TableTd>
|
|
460
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
461
|
-
</TableRow>
|
|
462
|
-
<TableRow className="k-master-row" alt>
|
|
463
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
464
|
-
<TableTd colspan={1}>Isadora Plumtree</TableTd>
|
|
465
|
-
<TableTd colspan={1}>Graphic Designer</TableTd>
|
|
466
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
467
|
-
</TableRow>
|
|
468
|
-
<TableRow className="k-master-row">
|
|
469
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
470
|
-
<TableTd colspan={1}>Xerxes Borson</TableTd>
|
|
471
|
-
<TableTd colspan={1}>Content Writer</TableTd>
|
|
472
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
473
|
-
</TableRow>
|
|
474
|
-
<TableRow className="k-table-group-row k-grouping-row">
|
|
475
|
-
<TableTd colspan={4}>
|
|
476
|
-
<p className="k-reset">
|
|
477
|
-
<span className="k-pin-cell">
|
|
478
|
-
<Icon icon="pin-outline" />
|
|
479
|
-
</span>
|
|
480
|
-
<Icon icon="caret-alt-down" />
|
|
481
|
-
Rating 1/5
|
|
482
|
-
</p>
|
|
483
|
-
</TableTd>
|
|
484
|
-
</TableRow>
|
|
485
|
-
<TableRow className="k-master-row">
|
|
486
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
487
|
-
<TableTd colspan={1}>Ruthi Bldini</TableTd>
|
|
488
|
-
<TableTd colspan={1}>Coordinator</TableTd>
|
|
489
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
490
|
-
</TableRow>
|
|
491
|
-
<TableRow className="k-master-row" alt>
|
|
492
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
493
|
-
<TableTd colspan={1}>Marcelina Vee</TableTd>
|
|
494
|
-
<TableTd colspan={1}>Marketing Specialist</TableTd>
|
|
495
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
496
|
-
</TableRow>
|
|
497
|
-
<TableRow className="k-master-row">
|
|
498
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
499
|
-
<TableTd colspan={1}>Finnian Bramble</TableTd>
|
|
500
|
-
<TableTd colspan={1}>Business Analyst</TableTd>
|
|
501
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
502
|
-
</TableRow>
|
|
503
|
-
</TableTbody>
|
|
504
|
-
</GridTable>
|
|
505
|
-
</GridContent>
|
|
506
|
-
</GridContainer>
|
|
507
|
-
</Grid>
|
|
508
|
-
{/* Row Pinning Context Menu */}
|
|
509
|
-
<Popup className="k-menu-popup" offset={{ left: "45px", top: "1036px" }}>
|
|
510
|
-
<ContextMenu>
|
|
511
|
-
<MenuListItem first text="Pin group to top" icon="pin-outline-top" selected />
|
|
512
|
-
<MenuListItem last text="Pin group to bottom" icon="pin-outline-bottom" />
|
|
513
|
-
</ContextMenu>
|
|
514
|
-
</Popup>
|
|
515
|
-
</section>
|
|
516
|
-
|
|
517
|
-
<section>
|
|
518
|
-
<Grid
|
|
519
|
-
_renderAriaRoot
|
|
520
|
-
groupingHeader={
|
|
521
|
-
<GridGroupingHeader>
|
|
522
|
-
<ChipList>
|
|
523
|
-
<Chip
|
|
524
|
-
text="Rating"
|
|
525
|
-
actions={
|
|
526
|
-
<>
|
|
527
|
-
<ChipAction type="remove" />
|
|
528
|
-
</>
|
|
529
|
-
}
|
|
530
|
-
/>
|
|
531
|
-
</ChipList>
|
|
532
|
-
</GridGroupingHeader>
|
|
533
|
-
}
|
|
534
|
-
>
|
|
535
|
-
<GridHeader draggable>
|
|
536
|
-
<div className="k-grid-header-wrap">
|
|
537
|
-
<GridHeaderTable>
|
|
538
|
-
<colgroup>
|
|
539
|
-
<col className="k-group-col" />
|
|
540
|
-
<col />
|
|
541
|
-
<col />
|
|
542
|
-
<col />
|
|
543
|
-
</colgroup>
|
|
544
|
-
<TableThead>
|
|
545
|
-
<TableRow>
|
|
546
|
-
<GridHeaderCell colspan={1} rowspan={1} className="k-group-cell" accessibleLabel="Group"></GridHeaderCell>
|
|
547
|
-
<GridHeaderCell colspan={1} columnTitle="Contact Name"></GridHeaderCell>
|
|
548
|
-
<GridHeaderCell colspan={1} columnTitle="Job Title"></GridHeaderCell>
|
|
549
|
-
<GridHeaderCell colspan={1} columnTitle="Rating"></GridHeaderCell>
|
|
550
|
-
</TableRow>
|
|
551
|
-
</TableThead>
|
|
552
|
-
</GridHeaderTable>
|
|
553
|
-
</div>
|
|
554
|
-
</GridHeader>
|
|
555
|
-
<GridPinnedContainer>
|
|
556
|
-
<div className="k-grid-pinned-wrap">
|
|
557
|
-
<GridTable>
|
|
558
|
-
<colgroup>
|
|
559
|
-
<col className="k-group-col" />
|
|
560
|
-
<col />
|
|
561
|
-
</colgroup>
|
|
562
|
-
<TableTbody>
|
|
563
|
-
<TableRow className="k-table-group-row k-grouping-row">
|
|
564
|
-
<TableTd colspan={9}>
|
|
565
|
-
<p className="k-reset">
|
|
566
|
-
<span className="k-pin-cell">
|
|
567
|
-
<Icon icon="unpin-outline" />
|
|
568
|
-
</span>
|
|
569
|
-
<Icon icon="none" />
|
|
570
|
-
Rating 1/5
|
|
571
|
-
</p>
|
|
572
|
-
</TableTd>
|
|
573
|
-
</TableRow>
|
|
574
|
-
</TableTbody>
|
|
575
|
-
</GridTable>
|
|
576
|
-
</div>
|
|
577
|
-
</GridPinnedContainer>
|
|
578
|
-
<GridContainer>
|
|
579
|
-
<GridContent>
|
|
580
|
-
<GridTable>
|
|
581
|
-
<colgroup>
|
|
582
|
-
<col className="k-group-col" />
|
|
583
|
-
<col />
|
|
584
|
-
<col />
|
|
585
|
-
<col />
|
|
586
|
-
</colgroup>
|
|
587
|
-
<TableTbody>
|
|
588
|
-
<TableRow className="k-table-group-row k-grouping-row">
|
|
589
|
-
<TableTd colspan={4}>
|
|
590
|
-
<p className="k-reset">
|
|
591
|
-
<span className="k-pin-cell">
|
|
592
|
-
<Icon icon="pin-outline" />
|
|
593
|
-
</span>
|
|
594
|
-
<Icon icon="caret-alt-down" />
|
|
595
|
-
Rating 3/5
|
|
596
|
-
</p>
|
|
597
|
-
</TableTd>
|
|
598
|
-
</TableRow>
|
|
599
|
-
<TableRow className="k-master-row">
|
|
600
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
601
|
-
<TableTd colspan={1}>Sig Jeannel</TableTd>
|
|
602
|
-
<TableTd colspan={1}>Human Resources Assistant III</TableTd>
|
|
603
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
604
|
-
</TableRow>
|
|
605
|
-
<TableRow className="k-master-row" alt>
|
|
606
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
607
|
-
<TableTd colspan={1}>Isadora Plumtree</TableTd>
|
|
608
|
-
<TableTd colspan={1}>Graphic Designer</TableTd>
|
|
609
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
610
|
-
</TableRow>
|
|
611
|
-
<TableRow className="k-master-row">
|
|
612
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
613
|
-
<TableTd colspan={1}>Xerxes Borson</TableTd>
|
|
614
|
-
<TableTd colspan={1}>Content Writer</TableTd>
|
|
615
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
616
|
-
</TableRow>
|
|
617
|
-
<TableRow className="k-table-group-row k-grouping-row">
|
|
618
|
-
<TableTd colspan={4}>
|
|
619
|
-
<p className="k-reset">
|
|
620
|
-
<span className="k-pin-cell">
|
|
621
|
-
<Icon icon="unpin-outline" />
|
|
622
|
-
</span>
|
|
623
|
-
<Icon icon="caret-alt-down" />
|
|
624
|
-
Rating 1/5
|
|
625
|
-
</p>
|
|
626
|
-
</TableTd>
|
|
627
|
-
</TableRow>
|
|
628
|
-
<TableRow className="k-master-row k-pinned-source">
|
|
629
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
630
|
-
<TableTd colspan={1}>Ruthi Bldini</TableTd>
|
|
631
|
-
<TableTd colspan={1}>Coordinator</TableTd>
|
|
632
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
633
|
-
</TableRow>
|
|
634
|
-
<TableRow className="k-master-row k-pinned-source" alt>
|
|
635
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
636
|
-
<TableTd colspan={1}>Marcelina Vee</TableTd>
|
|
637
|
-
<TableTd colspan={1}>Marketing Specialist</TableTd>
|
|
638
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
639
|
-
</TableRow>
|
|
640
|
-
<TableRow className="k-master-row k-pinned-source">
|
|
641
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
642
|
-
<TableTd colspan={1}>Finnian Bramble</TableTd>
|
|
643
|
-
<TableTd colspan={1}>Business Analyst</TableTd>
|
|
644
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
645
|
-
</TableRow>
|
|
646
|
-
</TableTbody>
|
|
647
|
-
</GridTable>
|
|
648
|
-
</GridContent>
|
|
649
|
-
</GridContainer>
|
|
650
|
-
</Grid>
|
|
651
|
-
</section>
|
|
652
|
-
|
|
653
|
-
<section>
|
|
654
|
-
<Grid
|
|
655
|
-
_renderAriaRoot
|
|
656
|
-
groupingHeader={
|
|
657
|
-
<GridGroupingHeader>
|
|
658
|
-
<ChipList>
|
|
659
|
-
<Chip
|
|
660
|
-
text="Rating"
|
|
661
|
-
actions={
|
|
662
|
-
<>
|
|
663
|
-
<ChipAction type="remove" />
|
|
664
|
-
</>
|
|
665
|
-
}
|
|
666
|
-
/>
|
|
667
|
-
</ChipList>
|
|
668
|
-
</GridGroupingHeader>
|
|
669
|
-
}
|
|
670
|
-
>
|
|
671
|
-
<GridHeader draggable>
|
|
672
|
-
<div className="k-grid-header-wrap">
|
|
673
|
-
<GridHeaderTable>
|
|
674
|
-
<colgroup>
|
|
675
|
-
<col className="k-group-col" />
|
|
676
|
-
<col />
|
|
677
|
-
<col />
|
|
678
|
-
<col />
|
|
679
|
-
</colgroup>
|
|
680
|
-
<TableThead>
|
|
681
|
-
<TableRow>
|
|
682
|
-
<GridHeaderCell colspan={1} rowspan={1} className="k-group-cell" accessibleLabel="Group"></GridHeaderCell>
|
|
683
|
-
<GridHeaderCell colspan={1} columnTitle="Contact Name"></GridHeaderCell>
|
|
684
|
-
<GridHeaderCell colspan={1} columnTitle="Job Title"></GridHeaderCell>
|
|
685
|
-
<GridHeaderCell colspan={1} columnTitle="Rating"></GridHeaderCell>
|
|
686
|
-
</TableRow>
|
|
687
|
-
</TableThead>
|
|
688
|
-
</GridHeaderTable>
|
|
689
|
-
</div>
|
|
690
|
-
</GridHeader>
|
|
691
|
-
<GridContainer>
|
|
692
|
-
<GridContent>
|
|
693
|
-
<GridTable>
|
|
694
|
-
<colgroup>
|
|
695
|
-
<col className="k-group-col" />
|
|
696
|
-
<col />
|
|
697
|
-
<col />
|
|
698
|
-
<col />
|
|
699
|
-
</colgroup>
|
|
700
|
-
<TableTbody>
|
|
701
|
-
<TableRow className="k-table-group-row k-grouping-row">
|
|
702
|
-
<TableTd colspan={4}>
|
|
703
|
-
<p className="k-reset">
|
|
704
|
-
<span className="k-pin-cell">
|
|
705
|
-
<Icon icon="pin-outline" />
|
|
706
|
-
</span>
|
|
707
|
-
<Icon icon="caret-alt-down" />
|
|
708
|
-
Rating 3/5
|
|
709
|
-
</p>
|
|
710
|
-
</TableTd>
|
|
711
|
-
</TableRow>
|
|
712
|
-
<TableRow className="k-master-row">
|
|
713
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
714
|
-
<TableTd colspan={1}>Sig Jeannel</TableTd>
|
|
715
|
-
<TableTd colspan={1}>Human Resources Assistant III</TableTd>
|
|
716
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
717
|
-
</TableRow>
|
|
718
|
-
<TableRow className="k-master-row" alt>
|
|
719
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
720
|
-
<TableTd colspan={1}>Isadora Plumtree</TableTd>
|
|
721
|
-
<TableTd colspan={1}>Graphic Designer</TableTd>
|
|
722
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
723
|
-
</TableRow>
|
|
724
|
-
<TableRow className="k-master-row">
|
|
725
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
726
|
-
<TableTd colspan={1}>Xerxes Borson</TableTd>
|
|
727
|
-
<TableTd colspan={1}>Content Writer</TableTd>
|
|
728
|
-
<TableTd colspan={1}>3/5</TableTd>
|
|
729
|
-
</TableRow>
|
|
730
|
-
<TableRow className="k-table-group-row k-grouping-row">
|
|
731
|
-
<TableTd colspan={4}>
|
|
732
|
-
<p className="k-reset">
|
|
733
|
-
<span className="k-pin-cell">
|
|
734
|
-
<Icon icon="unpin-outline" />
|
|
735
|
-
</span>
|
|
736
|
-
<Icon icon="caret-alt-down" />
|
|
737
|
-
Rating 1/5
|
|
738
|
-
</p>
|
|
739
|
-
</TableTd>
|
|
740
|
-
</TableRow>
|
|
741
|
-
<TableRow className="k-master-row k-pinned-source">
|
|
742
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
743
|
-
<TableTd colspan={1}>Ruthi Bldini</TableTd>
|
|
744
|
-
<TableTd colspan={1}>Coordinator</TableTd>
|
|
745
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
746
|
-
</TableRow>
|
|
747
|
-
<TableRow className="k-master-row k-pinned-source" alt>
|
|
748
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
749
|
-
<TableTd colspan={1}>Marcelina Vee</TableTd>
|
|
750
|
-
<TableTd colspan={1}>Marketing Specialist</TableTd>
|
|
751
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
752
|
-
</TableRow>
|
|
753
|
-
<TableRow className="k-master-row k-pinned-source">
|
|
754
|
-
<TableTd className="k-table-group-td k-group-cell"></TableTd>
|
|
755
|
-
<TableTd colspan={1}>Finnian Bramble</TableTd>
|
|
756
|
-
<TableTd colspan={1}>Business Analyst</TableTd>
|
|
757
|
-
<TableTd colspan={1}>1/5</TableTd>
|
|
758
|
-
</TableRow>
|
|
759
|
-
</TableTbody>
|
|
760
|
-
</GridTable>
|
|
761
|
-
</GridContent>
|
|
762
|
-
</GridContainer>
|
|
763
|
-
<GridPinnedContainer position="bottom">
|
|
764
|
-
<div className="k-grid-pinned-wrap">
|
|
765
|
-
<GridTable>
|
|
766
|
-
<colgroup>
|
|
767
|
-
<col className="k-group-col" />
|
|
768
|
-
<col />
|
|
769
|
-
</colgroup>
|
|
770
|
-
<TableTbody>
|
|
771
|
-
<TableRow className="k-table-group-row k-grouping-row">
|
|
772
|
-
<TableTd colspan={4}>
|
|
773
|
-
<p className="k-reset">
|
|
774
|
-
<span className="k-pin-cell">
|
|
775
|
-
<Icon icon="unpin-outline" />
|
|
776
|
-
</span>
|
|
777
|
-
<Icon icon="none" />
|
|
778
|
-
Rating 1/5
|
|
779
|
-
</p>
|
|
780
|
-
</TableTd>
|
|
781
|
-
</TableRow>
|
|
782
|
-
</TableTbody>
|
|
783
|
-
</GridTable>
|
|
784
|
-
</div>
|
|
785
|
-
</GridPinnedContainer>
|
|
786
|
-
</Grid>
|
|
787
|
-
</section>
|
|
788
|
-
</div>
|
|
789
|
-
</>
|
|
790
|
-
);
|