@progress/kendo-themes-html 13.1.0-dev.1 → 13.1.0-dev.2

package/dist/types/grid/grid-pinned-container.spec.d.ts

@@ -0,0 +1,6 @@
+import { KendoComponent } from '../_types/component';
+export declare const GRID_PINNED_CONTAINER_CLASSNAME = "k-grid-pinned-container";
+export type GridPinnedContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    position?: 'top' | 'bottom';
+};
+export declare const GridPinnedContainer: KendoComponent<GridPinnedContainerProps>;

package/dist/types/grid/index.d.ts

@@ -1,6 +1,7 @@
 export * from './grid.spec';
 export * from './grid-header.spec';
 export * from './grid-grouping-header.spec';
+export * from './grid-pinned-container.spec';
 export * from './grid-sticky-container.spec';
 export * from './grid-header-table.spec';
 export * from './grid-header-cell.spec';

package/dist/types/grid/tests/grid-row-pinning-with-sticky-grouping.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "13.1.0-dev.1",
+  "version": "13.1.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -62,5 +62,5 @@
     "react-dom": "^19.0.0",
     "vitest": "^4.0.18"
   },
-  "gitHead": "10dd9982323564ddc37076c2402c40f4cf354ba1"
+  "gitHead": "feda774a2c88006abd77d1e709272d33792a49b3"
 }

package/src/grid/grid-pinned-container.spec.tsx

@@ -0,0 +1,38 @@
+import { classNames } from '../misc';
+
+import { KendoComponent } from '../_types/component';
+import { GRID_FOLDER_NAME, GRID_MODULE_NAME } from './constants';
+
+export const GRID_PINNED_CONTAINER_CLASSNAME = `k-grid-pinned-container`;
+
+export type GridPinnedContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    position?: 'top' | 'bottom';
+};
+
+export const GridPinnedContainer: KendoComponent<GridPinnedContainerProps> = (
+    props: GridPinnedContainerProps
+) => {
+    const {
+        position,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                GRID_PINNED_CONTAINER_CLASSNAME,
+                {
+                    'k-pos-bottom': position === 'bottom',
+                }
+            )}
+        >
+        {props.children}
+        </div>
+    );
+};
+
+GridPinnedContainer.className = GRID_PINNED_CONTAINER_CLASSNAME;
+GridPinnedContainer.moduleName = GRID_MODULE_NAME;
+GridPinnedContainer.folderName = GRID_FOLDER_NAME;

package/src/grid/grid-sticky-container.spec.tsx

@@ -9,27 +9,22 @@ export type GridStickyContainerProps = React.HTMLAttributes<HTMLDivElement> & {
     position?: 'top' | 'bottom';
 };
 
-const defaultProps = {
-    position: 'top'
-};
-
 export const GridStickyContainer: KendoComponent<GridStickyContainerProps> = (
     props: GridStickyContainerProps
 ) => {
     const {
-        position = defaultProps.position,
-        ...others
+        position,
+        ...other
     } = props;
 
     return (
         <div
-            {...others}
+            {...other}
             className={classNames(
                 props.className,
                 GRID_STICKY_CONTAINER_CLASSNAME,
                 {
-                    'k-grid-sticky-top-container': position === 'top',
-                    'k-grid-sticky-bottom-container': position === 'bottom',
+                    'k-pos-bottom': position === 'bottom',
                 }
             )}
         >
@@ -39,6 +34,5 @@ export const GridStickyContainer: KendoComponent<GridStickyContainerProps> = (
 };
 
 GridStickyContainer.className = GRID_STICKY_CONTAINER_CLASSNAME;
-GridStickyContainer.defaultProps = defaultProps;
 GridStickyContainer.moduleName = GRID_MODULE_NAME;
 GridStickyContainer.folderName = GRID_FOLDER_NAME;

package/src/grid/index.ts

@@ -1,6 +1,7 @@
 export * from './grid.spec';
 export * from './grid-header.spec';
 export * from './grid-grouping-header.spec';
+export * from './grid-pinned-container.spec';
 export * from './grid-sticky-container.spec';
 export * from './grid-header-table.spec';
 export * from './grid-header-cell.spec';
@@ -26,4 +27,4 @@ export * from './templates/grid-with-locked-columns';
 export * from './templates/grid-with-sticky-columns';
 export * from './templates/grid-with-edit-row';
 export * from './templates/grid-stack';
-export * from './demos/grid';
+export * from './demos/grid';

package/src/grid/templates/grid-with-sticky-columns.tsx

@@ -17,10 +17,10 @@ export const GridWithStickyColumns = ({ contentClassName, ...other }: any) => (
                             </colgroup>
                             <TableThead>
                                 <TableRow>
-                                    <GridHeaderCell className="k-grid-header-sticky" rowspan={1} colspan={1} columnTitle="Product Name" style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}></GridHeaderCell>
+                                    <GridHeaderCell className="k-grid-header-sticky" rowspan={1} colspan={1} columnTitle="Product Name" style={{ left: '0px', borderRightWidth: "1px" }}></GridHeaderCell>
                                     <GridHeaderCell rowspan={1} colspan={1} columnTitle="Units In Stock"></GridHeaderCell>
                                     <GridHeaderCell rowspan={1} colspan={1} columnTitle="Price"></GridHeaderCell>
-                                    <GridHeaderCell className="k-grid-header-sticky" rowspan={1} colspan={1} columnTitle="Units on Order" style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}></GridHeaderCell>
+                                    <GridHeaderCell className="k-grid-header-sticky" rowspan={1} colspan={1} columnTitle="Units on Order" style={{ left: "250px", borderRightWidth: "1px" }}></GridHeaderCell>
                                     <GridHeaderCell rowspan={1} colspan={1} columnTitle="Reorder Level"></GridHeaderCell>
                                 </TableRow>
                             </TableThead>
@@ -40,73 +40,73 @@ export const GridWithStickyColumns = ({ contentClassName, ...other }: any) => (
                                 </colgroup>
                                 <TableTbody>
                                     <TableRow className="k-master-row">
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Chai</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', borderRightWidth: "1px" }}>Chai</TableTd>
                                         <TableTd colspan={1}>39</TableTd>
                                         <TableTd colspan={1}>$18.00</TableTd>
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", borderRightWidth: "1px" }}>0</TableTd>
                                         <TableTd colspan={1}>10</TableTd>
                                     </TableRow>
                                     <TableRow className="k-master-row" role="row" alt>
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Chang</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', borderRightWidth: "1px" }}>Chang</TableTd>
                                         <TableTd colspan={1}>17</TableTd>
                                         <TableTd colspan={1}>$19.00</TableTd>
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>40</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", borderRightWidth: "1px" }}>40</TableTd>
                                         <TableTd colspan={1}>25</TableTd>
                                     </TableRow>
                                     <TableRow className="k-master-row" role="row">
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Aniseed Syrup</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', borderRightWidth: "1px" }}>Aniseed Syrup</TableTd>
                                         <TableTd colspan={1}>13</TableTd>
                                         <TableTd colspan={1}>$10.00</TableTd>
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>70</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", borderRightWidth: "1px" }}>70</TableTd>
                                         <TableTd colspan={1}>25</TableTd>
                                     </TableRow>
                                     <TableRow className="k-master-row" role="row" alt>
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Chef Anton&apos;s Cajun Seasoning</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', borderRightWidth: "1px" }}>Chef Anton&apos;s Cajun Seasoning</TableTd>
                                         <TableTd colspan={1}>53</TableTd>
                                         <TableTd colspan={1}>$22.00</TableTd>
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", borderRightWidth: "1px" }}>0</TableTd>
                                         <TableTd colspan={1}>0</TableTd>
                                     </TableRow>
                                     <TableRow className="k-master-row" role="row" >
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Chef Anton&apos;s Gumbo Mix</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', borderRightWidth: "1px" }}>Chef Anton&apos;s Gumbo Mix</TableTd>
                                         <TableTd colspan={1}>0</TableTd>
                                         <TableTd colspan={1}>$21.35</TableTd>
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", borderRightWidth: "1px" }}>0</TableTd>
                                         <TableTd colspan={1}>0</TableTd>
                                     </TableRow>
                                     <TableRow className="k-master-row" role="row" alt >
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Grandma&apos;s Boysenberry Spread</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', borderRightWidth: "1px" }}>Grandma&apos;s Boysenberry Spread</TableTd>
                                         <TableTd colspan={1}>120</TableTd>
                                         <TableTd colspan={1}>$25.00</TableTd>
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", borderRightWidth: "1px" }}>0</TableTd>
                                         <TableTd colspan={1}>25</TableTd>
                                     </TableRow>
                                     <TableRow className="k-master-row" role="row">
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Uncle Bob&apos;s Organic Dried Pears</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', borderRightWidth: "1px" }}>Uncle Bob&apos;s Organic Dried Pears</TableTd>
                                         <TableTd colspan={1}>15</TableTd>
                                         <TableTd colspan={1}>$30.00</TableTd>
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", borderRightWidth: "1px" }}>0</TableTd>
                                         <TableTd colspan={1}>10</TableTd>
                                     </TableRow>
                                     <TableRow className="k-master-row" role="row" alt>
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Northwoods Cranberry Sauce</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', borderRightWidth: "1px" }}>Northwoods Cranberry Sauce</TableTd>
                                         <TableTd colspan={1}>6</TableTd>
                                         <TableTd colspan={1}>$40.00</TableTd>
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", borderRightWidth: "1px" }}>0</TableTd>
                                         <TableTd colspan={1}>0</TableTd>
                                     </TableRow>
                                     <TableRow className="k-master-row" role="row">
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Mishi Kobe Niku</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', borderRightWidth: "1px" }}>Mishi Kobe Niku</TableTd>
                                         <TableTd colspan={1}>29</TableTd>
                                         <TableTd colspan={1}>97</TableTd>
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", borderRightWidth: "1px" }}>0</TableTd>
                                         <TableTd colspan={1}>0</TableTd>
                                     </TableRow>
                                     <TableRow className="k-master-row" role="row" alt>
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', right: "250px", borderRightWidth: "1px" }}>Ikura</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: '0px', borderRightWidth: "1px" }}>Ikura</TableTd>
                                         <TableTd colspan={1}>31</TableTd>
                                         <TableTd colspan={1}>$31.00</TableTd>
-                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", right: '0px', borderRightWidth: "1px" }}>0</TableTd>
+                                        <TableTd className="k-grid-content-sticky" colspan={1} style={{ left: "250px", borderRightWidth: "1px" }}>0</TableTd>
                                         <TableTd colspan={1}>0</TableTd>
                                     </TableRow>
                                 </TableTbody>

package/src/grid/tests/grid-group-row-pinning-adaptive.tsx

@@ -10,7 +10,7 @@ import { GridGroupingHeader } from "../grid-grouping-header.spec";
 import GridHeaderCell from "../grid-header-cell.spec";
 import { GridHeaderTable } from "../grid-header-table.spec";
 import { GridHeader } from "../grid-header.spec";
-import { GridStickyContainer } from "../grid-sticky-container.spec";
+import { GridPinnedContainer } from "../grid-pinned-container.spec";
 import { GridTable } from "../grid-table.spec";
 import Grid from "../grid.spec";
 
@@ -283,7 +283,7 @@ export default () => (
             <ColumnMenuItemWrapper>
               <ColumnMenuItem text="Hide row" startIcon="eye-slash" />
               <ColumnMenuItem text="Set row sticky" startIcon="stick" />
-              <ColumnMenuExpander itemText="Pin group" itemStartIcon="pin" expanderIcon="chevron-right" />
+              <ColumnMenuExpander itemText="Pin group" itemStartIcon="pin-outline" expanderIcon="chevron-right" />
               <ColumnMenuExpander itemText="Copy" itemStartIcon="copy" expanderIcon="chevron-right" />
               <ColumnMenuItem text="Select all rows" startIcon="grid-layout" />
               <ColumnMenuExpander itemText="Export" itemStartIcon="export" expanderIcon="chevron-right" />
@@ -423,8 +423,8 @@ export default () => (
         >
           <ColumnMenuNormal size="large">
             <ColumnMenuItemWrapper>
-              <ColumnMenuItem text="Pin group to top" startIcon="pin" selected />
-              <ColumnMenuItem text="Pin group to bottom" startIcon="pin" />
+              <ColumnMenuItem text="Pin group to top" startIcon="pin-outline-top" selected />
+              <ColumnMenuItem text="Pin group to bottom" startIcon="pin-outline-bottom" />
             </ColumnMenuItemWrapper>
           </ColumnMenuNormal>
         </ActionSheetNormal>
@@ -470,26 +470,28 @@ export default () => (
               </GridHeaderTable>
             </div>
           </GridHeader>
+          <GridPinnedContainer>
+            <div className="k-grid-pinned-wrap">
+              <GridTable>
+                <colgroup>
+                  <col className="k-group-col" />
+                  <col />
+                </colgroup>
+                <TableTbody>
+                  <TableRow className="k-table-group-row k-grouping-row">
+                    <TableTd colspan={5}>
+                      <p className="k-reset">
+                        <Icon icon="none" />
+                        Rating 1/5
+                      </p>
+                    </TableTd>
+                  </TableRow>
+                </TableTbody>
+              </GridTable>
+            </div>
+          </GridPinnedContainer>
           <GridContainer>
             <GridContent>
-              <GridStickyContainer>
-                <GridTable>
-                  <colgroup>
-                    <col className="k-group-col" />
-                    <col />
-                  </colgroup>
-                  <TableTbody>
-                    <TableRow className="k-table-group-row k-grouping-row">
-                      <TableTd colspan={5}>
-                        <p className="k-reset">
-                          <Icon icon="none" />
-                          Rating 1/5
-                        </p>
-                      </TableTd>
-                    </TableRow>
-                  </TableTbody>
-                </GridTable>
-              </GridStickyContainer>
               <GridTable>
                 <colgroup>
                   <col className="k-group-col" />

package/src/grid/tests/grid-group-row-pinning.tsx

@@ -1,6 +1,6 @@
 import { Icon } from "../../icon";
 import { Chip, ChipList, ChipAction } from "../../chip";
-import { Grid, GridHeader, GridHeaderCell, GridHeaderTable, GridGroupingHeader, GridContainer, GridContent, GridTable, GridStickyContainer } from "../../grid";
+import { Grid, GridHeader, GridHeaderCell, GridHeaderTable, GridGroupingHeader, GridContainer, GridContent, GridTable, GridPinnedContainer } from "../../grid";
 import { TableThead, TableRow, TableTd, TableTbody } from "../../table";
 import { ContextMenu } from "../../context-menu";
 import { MenuListItem } from "../../menu";
@@ -174,26 +174,28 @@ export default () => (
               </GridHeaderTable>
             </div>
           </GridHeader>
+          <GridPinnedContainer>
+            <div className="k-grid-pinned-wrap">
+              <GridTable>
+                <colgroup>
+                  <col className="k-group-col" />
+                  <col />
+                </colgroup>
+                <TableTbody>
+                  <TableRow className="k-table-group-row k-grouping-row">
+                    <TableTd colspan={9}>
+                      <p className="k-reset">
+                        <Icon icon="none" />
+                        Rating 1/5
+                      </p>
+                    </TableTd>
+                  </TableRow>
+                </TableTbody>
+              </GridTable>
+            </div>
+          </GridPinnedContainer>
           <GridContainer>
             <GridContent>
-              <GridStickyContainer>
-                <GridTable>
-                  <colgroup>
-                    <col className="k-group-col" />
-                    <col />
-                  </colgroup>
-                  <TableTbody>
-                    <TableRow className="k-table-group-row k-grouping-row">
-                      <TableTd colspan={9}>
-                        <p className="k-reset">
-                          <Icon icon="none" />
-                          Rating 1/5
-                        </p>
-                      </TableTd>
-                    </TableRow>
-                  </TableTbody>
-                </GridTable>
-              </GridStickyContainer>
               <GridTable>
                 <colgroup>
                   <col className="k-group-col" />
@@ -363,26 +365,28 @@ export default () => (
                   </TableRow>
                 </TableTbody>
               </GridTable>
-              <GridStickyContainer position="bottom" style={{ insetBlockEnd: "0" }}>
-                <GridTable>
-                  <colgroup>
-                    <col className="k-group-col" />
-                    <col />
-                  </colgroup>
-                  <TableTbody>
-                    <TableRow className="k-table-group-row k-grouping-row">
-                      <TableTd colspan={4}>
-                        <p className="k-reset">
-                          <Icon icon="none" />
-                          Rating 1/5
-                        </p>
-                      </TableTd>
-                    </TableRow>
-                  </TableTbody>
-                </GridTable>
-              </GridStickyContainer>
             </GridContent>
           </GridContainer>
+          <GridPinnedContainer position="bottom">
+            <div className="k-grid-pinned-wrap">
+              <GridTable>
+                <colgroup>
+                  <col className="k-group-col" />
+                  <col />
+                </colgroup>
+                <TableTbody>
+                  <TableRow className="k-table-group-row k-grouping-row">
+                    <TableTd colspan={4}>
+                      <p className="k-reset">
+                        <Icon icon="none" />
+                        Rating 1/5
+                      </p>
+                    </TableTd>
+                  </TableRow>
+                </TableTbody>
+              </GridTable>
+            </div>
+          </GridPinnedContainer>
         </Grid>
       </section>
 
@@ -548,29 +552,31 @@ export default () => (
               </GridHeaderTable>
             </div>
           </GridHeader>
+          <GridPinnedContainer>
+            <div className="k-grid-pinned-wrap">
+              <GridTable>
+                <colgroup>
+                  <col className="k-group-col" />
+                  <col />
+                </colgroup>
+                <TableTbody>
+                  <TableRow className="k-table-group-row k-grouping-row">
+                    <TableTd colspan={9}>
+                      <p className="k-reset">
+                        <span className="k-pin-cell">
+                          <Icon icon="unpin-outline" />
+                        </span>
+                        <Icon icon="none" />
+                        Rating 1/5
+                      </p>
+                    </TableTd>
+                  </TableRow>
+                </TableTbody>
+              </GridTable>
+            </div>
+          </GridPinnedContainer>
           <GridContainer>
             <GridContent>
-              <GridStickyContainer>
-                <GridTable>
-                  <colgroup>
-                    <col className="k-group-col" />
-                    <col />
-                  </colgroup>
-                  <TableTbody>
-                    <TableRow className="k-table-group-row k-grouping-row">
-                      <TableTd colspan={9}>
-                        <p className="k-reset">
-                          <span className="k-pin-cell">
-                            <Icon icon="unpin-outline" />
-                          </span>
-                          <Icon icon="none" />
-                          Rating 1/5
-                        </p>
-                      </TableTd>
-                    </TableRow>
-                  </TableTbody>
-                </GridTable>
-              </GridStickyContainer>
               <GridTable>
                 <colgroup>
                   <col className="k-group-col" />
@@ -752,29 +758,31 @@ export default () => (
                   </TableRow>
                 </TableTbody>
               </GridTable>
-              <GridStickyContainer position="bottom" style={{ insetBlockEnd: "0" }}>
-                <GridTable>
-                  <colgroup>
-                    <col className="k-group-col" />
-                    <col />
-                  </colgroup>
-                  <TableTbody>
-                    <TableRow className="k-table-group-row k-grouping-row">
-                      <TableTd colspan={4}>
-                        <p className="k-reset">
-                          <span className="k-pin-cell">
-                            <Icon icon="unpin-outline" />
-                          </span>
-                          <Icon icon="none" />
-                          Rating 1/5
-                        </p>
-                      </TableTd>
-                    </TableRow>
-                  </TableTbody>
-                </GridTable>
-              </GridStickyContainer>
             </GridContent>
           </GridContainer>
+          <GridPinnedContainer position="bottom">
+            <div className="k-grid-pinned-wrap">
+              <GridTable>
+                <colgroup>
+                  <col className="k-group-col" />
+                  <col />
+                </colgroup>
+                <TableTbody>
+                  <TableRow className="k-table-group-row k-grouping-row">
+                    <TableTd colspan={4}>
+                      <p className="k-reset">
+                        <span className="k-pin-cell">
+                          <Icon icon="unpin-outline" />
+                        </span>
+                        <Icon icon="none" />
+                        Rating 1/5
+                      </p>
+                    </TableTd>
+                  </TableRow>
+                </TableTbody>
+              </GridTable>
+            </div>
+          </GridPinnedContainer>
         </Grid>
       </section>
     </div>

package/src/grid/tests/grid-row-pinning-adaptive.tsx

@@ -7,7 +7,7 @@ import { GridContent } from "../grid-content.spec";
 import GridHeaderCell from "../grid-header-cell.spec";
 import { GridHeaderTable } from "../grid-header-table.spec";
 import { GridHeader } from "../grid-header.spec";
-import { GridStickyContainer } from "../grid-sticky-container.spec";
+import { GridPinnedContainer } from "../grid-pinned-container.spec";
 import { GridTable } from "../grid-table.spec";
 import Grid from "../grid.spec";
 
@@ -287,26 +287,29 @@ export default () => (
               </GridHeaderTable>
             </div>
           </GridHeader>
+          {/* Pinned Content - Row pinned to top */}
+          <GridPinnedContainer>
+            <div className="k-grid-pinned-wrap">
+              <GridTable>
+                <colgroup>
+                  <col />
+                  <col />
+                  <col />
+                  <col />
+                </colgroup>
+                <TableTbody>
+                  <TableRow className="k-master-row">
+                    <TableTd>Shelden Greyes</TableTd>
+                    <TableTd>Operator</TableTd>
+                    <TableTd>UK</TableTd>
+                    <TableTd>5/5</TableTd>
+                  </TableRow>
+                </TableTbody>
+              </GridTable>
+            </div>
+          </GridPinnedContainer>
           <GridContainer>
             <GridContent>
-              <GridStickyContainer>
-                <GridTable>
-                  <colgroup>
-                    <col />
-                    <col />
-                    <col />
-                    <col />
-                  </colgroup>
-                  <TableTbody>
-                    <TableRow className="k-master-row">
-                      <TableTd>Shelden Greyes</TableTd>
-                      <TableTd>Operator</TableTd>
-                      <TableTd>UK</TableTd>
-                      <TableTd>5/5</TableTd>
-                    </TableRow>
-                  </TableTbody>
-                </GridTable>
-              </GridStickyContainer>
               <GridTable>
                 <colgroup>
                   <col />