@progress/kendo-themes-html 13.1.0-dev.1 → 13.1.0-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.
Files changed (86) hide show
  1. package/dist/cjs/filemanager/demos/filemanager.js +1 -1
  2. package/dist/cjs/filemanager/file-info.js +1 -1
  3. package/dist/cjs/filemanager/templates/filemanager-grid-preview.js +1 -1
  4. package/dist/cjs/filemanager/templates/filemanager-grid.js +1 -1
  5. package/dist/cjs/filemanager/templates/filemanager-normal.js +1 -1
  6. package/dist/cjs/filemanager/templates/filemanager-preview.js +1 -1
  7. package/dist/cjs/gantt/demos/gantt.js +1 -1
  8. package/dist/cjs/gantt/templates/gantt-normal.js +1 -1
  9. package/dist/cjs/gantt/templates/gantt-row-reordering.js +1 -1
  10. package/dist/cjs/grid/demos/grid.js +1 -1
  11. package/dist/cjs/grid/grid-pinned-container.spec.js +1 -0
  12. package/dist/cjs/grid/grid-sticky-container.spec.js +1 -1
  13. package/dist/cjs/grid/templates/grid-hierarchy.js +1 -1
  14. package/dist/cjs/grid/templates/grid-normal.js +1 -1
  15. package/dist/cjs/grid/templates/grid-with-column-menu.js +1 -1
  16. package/dist/cjs/grid/templates/grid-with-edit-row.js +1 -1
  17. package/dist/cjs/grid/templates/grid-with-filter-menu.js +1 -1
  18. package/dist/cjs/grid/templates/grid-with-filter-row.js +1 -1
  19. package/dist/cjs/grid/templates/grid-with-grouping.js +1 -1
  20. package/dist/cjs/grid/templates/grid-with-locked-columns.js +1 -1
  21. package/dist/cjs/grid/templates/grid-with-multicolumn-headers.js +1 -1
  22. package/dist/cjs/grid/templates/grid-with-row-reordering.js +1 -1
  23. package/dist/cjs/grid/templates/grid-with-selection-aggregates.js +1 -1
  24. package/dist/cjs/grid/templates/grid-with-sticky-columns.js +1 -1
  25. package/dist/cjs/index.js +8 -8
  26. package/dist/cjs/propertygrid/demos/propertygrid.js +1 -1
  27. package/dist/cjs/propertygrid/propertygrid.spec.js +1 -1
  28. package/dist/cjs/propertygrid/templates/propertygrid-normal.js +1 -1
  29. package/dist/cjs/propertygrid/templates/propertygrid-with-preview.js +1 -1
  30. package/dist/cjs/treelist/demos/treelist.js +1 -1
  31. package/dist/cjs/treelist/templates/treelist-aggregates.js +1 -1
  32. package/dist/cjs/treelist/templates/treelist-normal.js +1 -1
  33. package/dist/cjs/treelist/templates/treelist-row-reordering.js +1 -1
  34. package/dist/cjs/treelist/templates/treelist-with-column-menu.js +1 -1
  35. package/dist/cjs/treelist/templates/treelist-with-filter-menu.js +1 -1
  36. package/dist/cjs/treelist/treelist.spec.js +1 -1
  37. package/dist/esm/filemanager/demos/filemanager.mjs +1 -1
  38. package/dist/esm/filemanager/file-info.mjs +1 -1
  39. package/dist/esm/filemanager/templates/filemanager-grid-preview.mjs +1 -1
  40. package/dist/esm/filemanager/templates/filemanager-grid.mjs +1 -1
  41. package/dist/esm/filemanager/templates/filemanager-normal.mjs +1 -1
  42. package/dist/esm/filemanager/templates/filemanager-preview.mjs +1 -1
  43. package/dist/esm/gantt/demos/gantt.mjs +1 -1
  44. package/dist/esm/gantt/templates/gantt-normal.mjs +1 -1
  45. package/dist/esm/gantt/templates/gantt-row-reordering.mjs +1 -1
  46. package/dist/esm/grid/demos/grid.mjs +1 -1
  47. package/dist/esm/grid/grid-pinned-container.spec.mjs +1 -0
  48. package/dist/esm/grid/grid-sticky-container.spec.mjs +1 -1
  49. package/dist/esm/grid/templates/grid-hierarchy.mjs +1 -1
  50. package/dist/esm/grid/templates/grid-normal.mjs +1 -1
  51. package/dist/esm/grid/templates/grid-with-column-menu.mjs +1 -1
  52. package/dist/esm/grid/templates/grid-with-edit-row.mjs +1 -1
  53. package/dist/esm/grid/templates/grid-with-filter-menu.mjs +1 -1
  54. package/dist/esm/grid/templates/grid-with-filter-row.mjs +1 -1
  55. package/dist/esm/grid/templates/grid-with-grouping.mjs +1 -1
  56. package/dist/esm/grid/templates/grid-with-locked-columns.mjs +1 -1
  57. package/dist/esm/grid/templates/grid-with-multicolumn-headers.mjs +1 -1
  58. package/dist/esm/grid/templates/grid-with-row-reordering.mjs +1 -1
  59. package/dist/esm/grid/templates/grid-with-selection-aggregates.mjs +1 -1
  60. package/dist/esm/grid/templates/grid-with-sticky-columns.mjs +1 -1
  61. package/dist/esm/index.mjs +8 -8
  62. package/dist/esm/propertygrid/demos/propertygrid.mjs +1 -1
  63. package/dist/esm/propertygrid/propertygrid.spec.mjs +1 -1
  64. package/dist/esm/propertygrid/templates/propertygrid-normal.mjs +1 -1
  65. package/dist/esm/propertygrid/templates/propertygrid-with-preview.mjs +1 -1
  66. package/dist/esm/treelist/demos/treelist.mjs +1 -1
  67. package/dist/esm/treelist/templates/treelist-aggregates.mjs +1 -1
  68. package/dist/esm/treelist/templates/treelist-normal.mjs +1 -1
  69. package/dist/esm/treelist/templates/treelist-row-reordering.mjs +1 -1
  70. package/dist/esm/treelist/templates/treelist-with-column-menu.mjs +1 -1
  71. package/dist/esm/treelist/templates/treelist-with-filter-menu.mjs +1 -1
  72. package/dist/esm/treelist/treelist.spec.mjs +1 -1
  73. package/dist/types/grid/grid-pinned-container.spec.d.ts +6 -0
  74. package/dist/types/grid/index.d.ts +1 -0
  75. package/dist/types/grid/tests/grid-row-pinning-with-sticky-grouping.d.ts +2 -0
  76. package/package.json +2 -2
  77. package/src/grid/grid-pinned-container.spec.tsx +38 -0
  78. package/src/grid/grid-sticky-container.spec.tsx +4 -10
  79. package/src/grid/index.ts +2 -1
  80. package/src/grid/templates/grid-with-sticky-columns.tsx +22 -22
  81. package/src/grid/tests/grid-group-row-pinning-adaptive.tsx +24 -22
  82. package/src/grid/tests/grid-group-row-pinning.tsx +87 -79
  83. package/src/grid/tests/grid-row-pinning-adaptive.tsx +22 -19
  84. package/src/grid/tests/grid-row-pinning-with-sticky-grouping.tsx +177 -0
  85. package/src/grid/tests/grid-row-pinning.tsx +123 -111
  86. package/src/grid/tests/grid-sticky-grouping.tsx +43 -43
package/src/grid/tests/grid-row-pinning-with-sticky-grouping.tsx ADDED
@@ -0,0 +1,177 @@
1
+ import { Icon } from "../../icon";
2
+ import { Chip, ChipList, ChipAction } from "../../chip";
3
+ import { Grid, GridHeader, GridHeaderCell, GridHeaderTable, GridGroupingHeader, GridContainer, GridContent, GridTable, GridPinnedContainer, GridStickyContainer } from "../../grid";
4
+ import { TableThead, TableRow, TableTd, TableTbody } from "../../table";
5
+
6
+ export default () => (
7
+ <>
8
+ <div id="test-area" className="k-d-grid k-grid-cols-1">
9
+ <span>Row pinned to top with sticky grouping on top</span>
10
+
11
+ <section>
12
+ <Grid
13
+ _renderAriaRoot
14
+ groupingHeader={
15
+ <GridGroupingHeader>
16
+ <ChipList>
17
+ <Chip
18
+ text="Rating"
19
+ actions={
20
+ <>
21
+ <ChipAction type="remove" />
22
+ </>
23
+ }
24
+ />
25
+ </ChipList>
26
+ </GridGroupingHeader>
27
+ }
28
+ >
29
+ <GridHeader draggable>
30
+ <div className="k-grid-header-wrap">
31
+ <GridHeaderTable>
32
+ <colgroup>
33
+ <col className="k-group-col" />
34
+ <col />
35
+ <col />
36
+ <col />
37
+ <col />
38
+ <col />
39
+ <col />
40
+ </colgroup>
41
+ <TableThead>
42
+ <TableRow>
43
+ <GridHeaderCell colspan={1} rowspan={1} className="k-group-cell"></GridHeaderCell>
44
+ <GridHeaderCell colspan={1} columnTitle="Contact Name"></GridHeaderCell>
45
+ <GridHeaderCell colspan={1} columnTitle="Job Title"></GridHeaderCell>
46
+ <GridHeaderCell colspan={1} columnTitle="Country"></GridHeaderCell>
47
+ <GridHeaderCell colspan={1} columnTitle="Rating"></GridHeaderCell>
48
+ <GridHeaderCell colspan={1} columnTitle="Engagement"></GridHeaderCell>
49
+ <GridHeaderCell colspan={1} columnTitle="Budget"></GridHeaderCell>
50
+ </TableRow>
51
+ </TableThead>
52
+ </GridHeaderTable>
53
+ </div>
54
+ </GridHeader>
55
+ {/* Pinned row on top */}
56
+ <GridPinnedContainer>
57
+ <div className="k-grid-pinned-wrap">
58
+ <GridTable>
59
+ <colgroup>
60
+ <col className="k-group-col" />
61
+ <col />
62
+ </colgroup>
63
+ <TableTbody>
64
+ <TableRow className="k-table-group-row k-grouping-row">
65
+ <TableTd colspan={7}>
66
+ <p className="k-reset">
67
+ <Icon icon="unpin-outline" />
68
+ Rating 1/5
69
+ </p>
70
+ </TableTd>
71
+ </TableRow>
72
+ </TableTbody>
73
+ </GridTable>
74
+ </div>
75
+ </GridPinnedContainer>
76
+ {/* Sticky group header on top */}
77
+ <GridContainer>
78
+ <GridStickyContainer>
79
+ <GridTable>
80
+ <colgroup>
81
+ <col className="k-group-col" />
82
+ <col />
83
+ </colgroup>
84
+ <TableTbody>
85
+ <TableRow className="k-table-group-row k-grouping-row">
86
+ <TableTd colspan={7}>
87
+ <p className="k-reset">
88
+ <Icon icon="caret-alt-right" />
89
+ Rating 3/5
90
+ </p>
91
+ </TableTd>
92
+ </TableRow>
93
+ </TableTbody>
94
+ </GridTable>
95
+ </GridStickyContainer>
96
+ <GridContent>
97
+ <GridTable>
98
+ <colgroup>
99
+ <col className="k-group-col" />
100
+ <col />
101
+ <col />
102
+ <col />
103
+ <col />
104
+ <col />
105
+ <col />
106
+ </colgroup>
107
+ <TableTbody>
108
+ <TableRow className="k-master-row">
109
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
110
+ <TableTd colspan={1}>Sig Jeannel</TableTd>
111
+ <TableTd colspan={1}>Human Resources Assistant III</TableTd>
112
+ <TableTd colspan={1}>USA</TableTd>
113
+ <TableTd colspan={1}>3/5</TableTd>
114
+ <TableTd colspan={1}>100%</TableTd>
115
+ <TableTd colspan={1}>$100,000</TableTd>
116
+ </TableRow>
117
+ <TableRow className="k-master-row" alt>
118
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
119
+ <TableTd colspan={1}>Isadora Plumtree</TableTd>
120
+ <TableTd colspan={1}>Graphic Designer</TableTd>
121
+ <TableTd colspan={1}>Brazil</TableTd>
122
+ <TableTd colspan={1}>3/5</TableTd>
123
+ <TableTd colspan={1}>72%</TableTd>
124
+ <TableTd colspan={1}>$110,000</TableTd>
125
+ </TableRow>
126
+ <TableRow className="k-master-row">
127
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
128
+ <TableTd colspan={1}>Xerxes Borson</TableTd>
129
+ <TableTd colspan={1}>Content Writer</TableTd>
130
+ <TableTd colspan={1}>Netherlands</TableTd>
131
+ <TableTd colspan={1}>3/5</TableTd>
132
+ <TableTd colspan={1}>56%</TableTd>
133
+ <TableTd colspan={1}>$45,000</TableTd>
134
+ </TableRow>
135
+ <TableRow className="k-master-row" alt>
136
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
137
+ <TableTd colspan={1}>Flowen Maelis</TableTd>
138
+ <TableTd colspan={1}>Research Scientist</TableTd>
139
+ <TableTd colspan={1}>Singapore</TableTd>
140
+ <TableTd colspan={1}>3/5</TableTd>
141
+ <TableTd colspan={1}>77%</TableTd>
142
+ <TableTd colspan={1}>$65,000</TableTd>
143
+ </TableRow>
144
+ </TableTbody>
145
+ </GridTable>
146
+ </GridContent>
147
+ {/* Sticky group footer on bottom */}
148
+ <GridStickyContainer position="bottom">
149
+ <GridTable>
150
+ <colgroup>
151
+ <col className="k-group-col" />
152
+ <col />
153
+ <col />
154
+ <col />
155
+ <col />
156
+ <col />
157
+ <col />
158
+ </colgroup>
159
+ <TableTbody>
160
+ <TableRow className="k-group-footer">
161
+ <TableTd className="k-table-group-td k-group-cell"></TableTd>
162
+ <TableTd colspan={1}></TableTd>
163
+ <TableTd colspan={1}></TableTd>
164
+ <TableTd colspan={1}></TableTd>
165
+ <TableTd colspan={1}>Average: 3/5</TableTd>
166
+ <TableTd colspan={1}>Average: 76%</TableTd>
167
+ <TableTd colspan={1}>Sum: $320,000</TableTd>
168
+ </TableRow>
169
+ </TableTbody>
170
+ </GridTable>
171
+ </GridStickyContainer>
172
+ </GridContainer>
173
+ </Grid>
174
+ </section>
175
+ </div>
176
+ </>
177
+ );
package/src/grid/tests/grid-row-pinning.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { MenuListItem, MenuSeparator } from "../../menu";
2
2
  import { Popup } from "../../popup";
3
3
  import { ContextMenu } from "../../context-menu";
4
- import { Grid, GridHeader, GridContainer, GridContent, GridHeaderTable, GridHeaderCell, GridTable, GridStickyContainer } from "../../grid";
4
+ import { Grid, GridHeader, GridContainer, GridContent, GridHeaderTable, GridHeaderCell, GridTable, GridPinnedContainer } from "../../grid";
5
5
  import { TableThead, TableTbody, TableRow, TableTd } from "../../table";
6
6
  import { Icon } from "../../icon";
7
7
 
@@ -104,25 +104,27 @@ export default () => (
104
104
  </GridHeaderTable>
105
105
  </div>
106
106
  </GridHeader>
107
+ {/* Pinned Content - Row pinned to top */}
108
+ <GridPinnedContainer>
109
+ <div className="k-grid-pinned-wrap">
110
+ <GridTable>
111
+ <colgroup>
112
+ <col />
113
+ <col />
114
+ <col />
115
+ </colgroup>
116
+ <TableTbody>
117
+ <TableRow className="k-master-row">
118
+ <TableTd>Shelden Greyes</TableTd>
119
+ <TableTd>Operator</TableTd>
120
+ <TableTd>UK</TableTd>
121
+ </TableRow>
122
+ </TableTbody>
123
+ </GridTable>
124
+ </div>
125
+ </GridPinnedContainer>
107
126
  <GridContainer>
108
127
  <GridContent>
109
- {/* Pinned Content - Row pinned to top */}
110
- <GridStickyContainer>
111
- <GridTable>
112
- <colgroup>
113
- <col />
114
- <col />
115
- <col />
116
- </colgroup>
117
- <TableTbody>
118
- <TableRow className="k-master-row">
119
- <TableTd>Shelden Greyes</TableTd>
120
- <TableTd>Operator</TableTd>
121
- <TableTd>UK</TableTd>
122
- </TableRow>
123
- </TableTbody>
124
- </GridTable>
125
- </GridStickyContainer>
126
128
  <GridTable>
127
129
  <colgroup>
128
130
  <col />
@@ -198,25 +200,27 @@ export default () => (
198
200
  </TableRow>
199
201
  </TableTbody>
200
202
  </GridTable>
201
- {/* Pinned Content - Row pinned to bottom */}
202
- <GridStickyContainer position="bottom" style={{ insetBlockEnd: 0 }}>
203
- <GridTable>
204
- <colgroup>
205
- <col />
206
- <col />
207
- <col />
208
- </colgroup>
209
- <TableTbody>
210
- <TableRow className="k-master-row">
211
- <TableTd>Shelden Greyes</TableTd>
212
- <TableTd>Operator</TableTd>
213
- <TableTd>UK</TableTd>
214
- </TableRow>
215
- </TableTbody>
216
- </GridTable>
217
- </GridStickyContainer>
218
203
  </GridContent>
219
204
  </GridContainer>
205
+ {/* Pinned Content - Row pinned to bottom */}
206
+ <GridPinnedContainer position="bottom">
207
+ <div className="k-grid-pinned-wrap">
208
+ <GridTable>
209
+ <colgroup>
210
+ <col />
211
+ <col />
212
+ <col />
213
+ </colgroup>
214
+ <TableTbody>
215
+ <TableRow className="k-master-row">
216
+ <TableTd>Shelden Greyes</TableTd>
217
+ <TableTd>Operator</TableTd>
218
+ <TableTd>UK</TableTd>
219
+ </TableRow>
220
+ </TableTbody>
221
+ </GridTable>
222
+ </div>
223
+ </GridPinnedContainer>
220
224
  </Grid>
221
225
  </section>
222
226
 
@@ -311,27 +315,29 @@ export default () => (
311
315
  </GridHeaderTable>
312
316
  </div>
313
317
  </GridHeader>
318
+ {/* Pinned Content - Row pinned to top */}
319
+ <GridPinnedContainer>
320
+ <div className="k-grid-pinned-wrap">
321
+ <GridTable>
322
+ <colgroup>
323
+ <col style={{ width: "48px" }} />
324
+ <col />
325
+ <col />
326
+ <col />
327
+ </colgroup>
328
+ <TableTbody>
329
+ <TableRow className="k-master-row">
330
+ <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" /></span></TableTd>
331
+ <TableTd>Shelden Greyes</TableTd>
332
+ <TableTd>Operator</TableTd>
333
+ <TableTd>UK</TableTd>
334
+ </TableRow>
335
+ </TableTbody>
336
+ </GridTable>
337
+ </div>
338
+ </GridPinnedContainer>
314
339
  <GridContainer>
315
340
  <GridContent>
316
- {/* Pinned Content - Row pinned to top */}
317
- <GridStickyContainer>
318
- <GridTable>
319
- <colgroup>
320
- <col style={{ width: "48px" }} />
321
- <col />
322
- <col />
323
- <col />
324
- </colgroup>
325
- <TableTbody>
326
- <TableRow className="k-master-row">
327
- <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" /></span></TableTd>
328
- <TableTd>Shelden Greyes</TableTd>
329
- <TableTd>Operator</TableTd>
330
- <TableTd>UK</TableTd>
331
- </TableRow>
332
- </TableTbody>
333
- </GridTable>
334
- </GridStickyContainer>
335
341
  <GridTable>
336
342
  <colgroup>
337
343
  <col style={{ width: "48px" }} />
@@ -417,27 +423,29 @@ export default () => (
417
423
  </TableRow>
418
424
  </TableTbody>
419
425
  </GridTable>
420
- {/* Pinned Content - Row pinned to bottom */}
421
- <GridStickyContainer position="bottom" style={{ insetBlockEnd: 0 }}>
422
- <GridTable>
423
- <colgroup>
424
- <col style={{ width: "48px" }} />
425
- <col />
426
- <col />
427
- <col />
428
- </colgroup>
429
- <TableTbody>
430
- <TableRow className="k-master-row">
431
- <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" /></span></TableTd>
432
- <TableTd>Shelden Greyes</TableTd>
433
- <TableTd>Operator</TableTd>
434
- <TableTd>UK</TableTd>
435
- </TableRow>
436
- </TableTbody>
437
- </GridTable>
438
- </GridStickyContainer>
439
426
  </GridContent>
440
427
  </GridContainer>
428
+ {/* Pinned Content - Row pinned to bottom */}
429
+ <GridPinnedContainer position="bottom">
430
+ <div className="k-grid-pinned-wrap">
431
+ <GridTable>
432
+ <colgroup>
433
+ <col style={{ width: "48px" }} />
434
+ <col />
435
+ <col />
436
+ <col />
437
+ </colgroup>
438
+ <TableTbody>
439
+ <TableRow className="k-master-row">
440
+ <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" /></span></TableTd>
441
+ <TableTd>Shelden Greyes</TableTd>
442
+ <TableTd>Operator</TableTd>
443
+ <TableTd>UK</TableTd>
444
+ </TableRow>
445
+ </TableTbody>
446
+ </GridTable>
447
+ </div>
448
+ </GridPinnedContainer>
441
449
  </Grid>
442
450
  </section>
443
451
 
@@ -524,27 +532,29 @@ export default () => (
524
532
  </GridHeaderTable>
525
533
  </div>
526
534
  </GridHeader>
535
+ {/* Pinned Content - Row pinned to top */}
536
+ <GridPinnedContainer>
537
+ <div className="k-grid-pinned-wrap">
538
+ <GridTable>
539
+ <colgroup>
540
+ <col style={{ width: "72px" }} />
541
+ <col />
542
+ <col />
543
+ <col />
544
+ </colgroup>
545
+ <TableTbody>
546
+ <TableRow className="k-master-row">
547
+ <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" /><Icon icon="pin-outline-bottom" /></span></TableTd>
548
+ <TableTd>Shelden Greyes</TableTd>
549
+ <TableTd>Operator</TableTd>
550
+ <TableTd>UK</TableTd>
551
+ </TableRow>
552
+ </TableTbody>
553
+ </GridTable>
554
+ </div>
555
+ </GridPinnedContainer>
527
556
  <GridContainer>
528
557
  <GridContent>
529
- {/* Pinned Content - Row pinned to top */}
530
- <GridStickyContainer>
531
- <GridTable>
532
- <colgroup>
533
- <col style={{ width: "72px" }} />
534
- <col />
535
- <col />
536
- <col />
537
- </colgroup>
538
- <TableTbody>
539
- <TableRow className="k-master-row">
540
- <TableTd><span className="k-pin-cell"><Icon icon="unpin-outline" /><Icon icon="pin-outline-bottom" /></span></TableTd>
541
- <TableTd>Shelden Greyes</TableTd>
542
- <TableTd>Operator</TableTd>
543
- <TableTd>UK</TableTd>
544
- </TableRow>
545
- </TableTbody>
546
- </GridTable>
547
- </GridStickyContainer>
548
558
  <GridTable>
549
559
  <colgroup>
550
560
  <col style={{ width: "72px" }} />
@@ -630,27 +640,29 @@ export default () => (
630
640
  </TableRow>
631
641
  </TableTbody>
632
642
  </GridTable>
633
- {/* Pinned Content - Row pinned to bottom */}
634
- <GridStickyContainer position="bottom" style={{ insetBlockEnd: 0 }}>
635
- <GridTable>
636
- <colgroup>
637
- <col style={{ width: "72px" }} />
638
- <col />
639
- <col />
640
- <col />
641
- </colgroup>
642
- <TableTbody>
643
- <TableRow className="k-master-row">
644
- <TableTd><span className="k-pin-cell"><Icon icon="pin-outline-top" /><Icon icon="unpin-outline" /></span></TableTd>
645
- <TableTd>Shelden Greyes</TableTd>
646
- <TableTd>Operator</TableTd>
647
- <TableTd>UK</TableTd>
648
- </TableRow>
649
- </TableTbody>
650
- </GridTable>
651
- </GridStickyContainer>
652
643
  </GridContent>
653
644
  </GridContainer>
645
+ {/* Pinned Content - Row pinned to bottom */}
646
+ <GridPinnedContainer position="bottom">
647
+ <div className="k-grid-pinned-wrap">
648
+ <GridTable>
649
+ <colgroup>
650
+ <col style={{ width: "72px" }} />
651
+ <col />
652
+ <col />
653
+ <col />
654
+ </colgroup>
655
+ <TableTbody>
656
+ <TableRow className="k-master-row">
657
+ <TableTd><span className="k-pin-cell"><Icon icon="pin-outline-top" /><Icon icon="unpin-outline" /></span></TableTd>
658
+ <TableTd>Shelden Greyes</TableTd>
659
+ <TableTd>Operator</TableTd>
660
+ <TableTd>UK</TableTd>
661
+ </TableRow>
662
+ </TableTbody>
663
+ </GridTable>
664
+ </div>
665
+ </GridPinnedContainer>
654
666
  </Grid>
655
667
  </section>
656
668
  </div>
package/src/grid/tests/grid-sticky-grouping.tsx CHANGED
@@ -55,31 +55,31 @@ export default () => (
55
55
  </div>
56
56
  </GridHeader>
57
57
  <GridContainer>
58
+ <GridStickyContainer>
59
+ <GridTable className="k-grid-group-sticky-header-table">
60
+ <colgroup>
61
+ <col />
62
+ <col />
63
+ <col />
64
+ <col />
65
+ <col />
66
+ <col />
67
+ <col />
68
+ <col />
69
+ </colgroup>
70
+ <TableTbody>
71
+ <TableRow className="k-table-group-row k-grouping-row">
72
+ <TableTd colspan={9}>
73
+ <p className="k-reset">
74
+ <Icon icon="caret-alt-right" />
75
+ Rating 3/5
76
+ </p>
77
+ </TableTd>
78
+ </TableRow>
79
+ </TableTbody>
80
+ </GridTable>
81
+ </GridStickyContainer>
58
82
  <GridContent>
59
- <GridStickyContainer>
60
- <GridTable className="k-grid-group-sticky-header-table">
61
- <colgroup>
62
- <col />
63
- <col />
64
- <col />
65
- <col />
66
- <col />
67
- <col />
68
- <col />
69
- <col />
70
- </colgroup>
71
- <TableTbody>
72
- <TableRow className="k-table-group-row k-grouping-row">
73
- <TableTd colspan={9}>
74
- <p className="k-reset">
75
- <Icon icon="caret-alt-right" />
76
- Rating 3/5
77
- </p>
78
- </TableTd>
79
- </TableRow>
80
- </TableTbody>
81
- </GridTable>
82
- </GridStickyContainer>
83
83
  <GridTable>
84
84
  <colgroup>
85
85
  <col className="k-group-col" />
@@ -316,26 +316,26 @@ export default () => (
316
316
  </TableRow>
317
317
  </TableTbody>
318
318
  </GridTable>
319
- <GridStickyContainer position="bottom" style={{ insetBlockEnd: 0 }}>
320
- <GridTable className="k-grid-group-sticky-footer-table">
321
- <colgroup>
322
- <col />
323
- <col />
324
- <col />
325
- <col />
326
- <col />
327
- <col />
328
- <col />
329
- <col />
330
- </colgroup>
331
- <TableTbody>
332
- <TableRow className="k-group-footer">
333
- <TableTd colspan={9}>Total items: 0</TableTd>
334
- </TableRow>
335
- </TableTbody>
336
- </GridTable>
337
- </GridStickyContainer>
338
319
  </GridContent>
320
+ <GridStickyContainer position="bottom">
321
+ <GridTable className="k-grid-group-sticky-footer-table">
322
+ <colgroup>
323
+ <col />
324
+ <col />
325
+ <col />
326
+ <col />
327
+ <col />
328
+ <col />
329
+ <col />
330
+ <col />
331
+ </colgroup>
332
+ <TableTbody>
333
+ <TableRow className="k-group-footer">
334
+ <TableTd colspan={9}>Total items: 0</TableTd>
335
+ </TableRow>
336
+ </TableTbody>
337
+ </GridTable>
338
+ </GridStickyContainer>
339
339
  </GridContainer>
340
340
  </Grid>
341
341
  </div>