feat(Table): sticky header support added

src/components/Table/Table.scss

@@ -17,6 +17,14 @@ $block: '.#{variables.$ns}table';
         }
     }
 
+    &__header {
+        &_sticky {
+            position: sticky;
+            inset-block-start: 0;
+            z-index: 1;
+        }
+    }
+
     &__cell,
     &__header-cell {
         height: inherit;
@@ -124,7 +132,6 @@ $block: '.#{variables.$ns}table';
         &__header {
             display: grid;
 
-            position: sticky;
             inset-block-start: 0;
 
             z-index: 1;

src/components/Table/Table.tsx

@@ -38,6 +38,7 @@ export interface TableProps<TData, TScrollElement extends Element | Window = HTM
     rowClassName?: string;
     rowVirtualizer?: Virtualizer<TScrollElement, HTMLTableRowElement>;
     sortIndicatorClassName?: HeaderRowProps<TData, unknown>['sortIndicatorClassName'];
+    stickyHeader?: boolean;
     table: TableType<TData>;
     withHeader?: boolean;
 }
@@ -61,6 +62,7 @@ export const Table = React.forwardRef(
             rowClassName,
             rowVirtualizer,
             sortIndicatorClassName,
+            stickyHeader = false,
             table,
             withHeader = true,
         }: TableProps<TData, TScrollElement>,
@@ -95,7 +97,7 @@ export const Table = React.forwardRef(
                     data-dragging-row-index={draggingRowIndex > -1 ? draggingRowIndex : undefined}
                 >
                     {withHeader && (
-                        <thead className={b('header', headerClassName)}>
+                        <thead className={b('header', {sticky: stickyHeader}, headerClassName)}>
                             {headerGroups.map((headerGroup, index) => (
                                 <HeaderRow
                                     key={headerGroup.id}

src/components/__stories__/ReorderingWithVirtualizationDemo.tsx

@@ -64,6 +64,7 @@ export const ReorderingWithVirtualizationDemo = () => {
             table={table}
             rowVirtualizer={rowVirtualizer}
             onReorder={handleReorder}
+            stickyHeader
         />
     );
 };

src/components/__stories__/StickyHeaderDemo.classname.ts

@@ -0,0 +1,3 @@
+import {cn} from '../../utils';
+
+export const cnStickyHeaderDemo = cn('sticky-header-demo');

src/components/__stories__/StickyHeaderDemo.scss

@@ -0,0 +1,30 @@
+.sticky-header-demo {
+    width: fit-content;
+    max-height: 400px;
+
+    overflow: auto;
+
+    &__table {
+        th,
+        td {
+            box-sizing: border-box;
+
+            padding: var(--g-spacing-1);
+
+            border-collapse: collapse;
+            border: 1px solid var(--g-color-line-generic);
+        }
+
+        th {
+            background: var(--g-color-line-generic-solid);
+
+            border-block-end: 0;
+
+            box-shadow: var(--g-color-line-generic) 0 -1px 0 inset;
+        }
+
+        .gt-table__row:first-child td {
+            border-block-start: 0;
+        }
+    }
+}

src/components/__stories__/StickyHeaderDemo.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {useTable} from '../../hooks';
+import {Table} from '../Table';
+
+import {cnStickyHeaderDemo} from './StickyHeaderDemo.classname';
+import {columns} from './constants/columns';
+import {generateData} from './utils';
+
+import './StickyHeaderDemo.scss';
+
+const data = generateData(30);
+
+export const StickyHeaderDemo = () => {
+    const table = useTable({
+        columns,
+        data,
+    });
+
+    return (
+        <div className={cnStickyHeaderDemo()}>
+            <Table className={cnStickyHeaderDemo('table')} table={table} stickyHeader />
+        </div>
+    );
+};

src/components/__stories__/Table.stories.tsx

@@ -17,6 +17,7 @@ import {ReorderingTreeDemo} from './ReorderingTreeDemo';
 import {ReorderingWithVirtualizationDemo} from './ReorderingWithVirtualizationDemo';
 import {ResizingDemo} from './ResizingDemo';
 import {SortingDemo} from './SortingDemo';
+import {StickyHeaderDemo} from './StickyHeaderDemo';
 import {TreeDemo} from './TreeDemo';
 import {TreeWithGroupsDemo} from './TreeWithGroupsDemo';
 import {VirtualizationDemo} from './VirtualizationDemo';
@@ -85,3 +86,6 @@ export const ColumnPinningWithReordering: StoryFn = ColumnPinningWithReorderingT
 
 const ColumnPinningWithSelectionTemplate: StoryFn = () => <ColumnPinningWithSelectionDemo />;
 export const ColumnPinningWithSelection: StoryFn = ColumnPinningWithSelectionTemplate.bind({});
+
+const StickyHeaderTamplate: StoryFn = () => <StickyHeaderDemo />;
+export const StickyHeader: StoryFn = StickyHeaderTamplate.bind({});

src/components/__stories__/VirtualizationDemo.tsx

@@ -34,6 +34,7 @@ export const VirtualizationDemo = () => {
                 rowVirtualizer={rowVirtualizer}
                 className={cnVirtualizationDemo()}
                 headerClassName={cnVirtualizationDemo('header')}
+                stickyHeader
             />
         </div>
     );

src/components/__stories__/WindowVirtualizationDemo.tsx

@@ -30,6 +30,7 @@ export const WindowVirtualizationDemo = () => {
             rowVirtualizer={rowVirtualizer}
             className={cnVirtualizationDemo()}
             headerClassName={cnVirtualizationDemo('header')}
+            stickyHeader
         />
     );
 };