feat(Table): sticky header support added

src/components/Table/Table.scss

@@ -27,6 +27,12 @@ $block: '.#{variables.$ns}table';
 
     &__header {
         background: var(--g-color-base-background);
+
+        &_sticky {
+            position: sticky;
+            inset-block-start: 0;
+            z-index: 1;
+        }
     }
 
     &__header-row {
@@ -167,7 +173,6 @@ $block: '.#{variables.$ns}table';
         &__header {
             display: grid;
 
-            position: sticky;
             inset-block-start: 0;
 
             z-index: 1;

src/components/Table/Table.tsx

@@ -40,6 +40,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;
 }
@@ -65,6 +66,7 @@ export const Table = React.forwardRef(
             rowClassName,
             rowVirtualizer,
             sortIndicatorClassName,
+            stickyHeader = false,
             table,
             withHeader = true,
         }: TableProps<TData, TScrollElement>,
@@ -105,7 +107,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={true}
         />
     );
 };

src/components/__stories__/StickyHeaderDemo.classname.ts

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

src/components/__stories__/StickyHeaderDemo.scss

@@ -0,0 +1,34 @@
+@use '../variables';
+
+$block: '.#{variables.$ns}sticky-header-demo';
+
+#{$block} {
+    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-base-generic-medium);
+
+            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,26 @@
+import React from 'react';
+
+import {useTable} from '../../hooks';
+import {Table} from '../Table';
+
+import {cnStickyHeaderDemo} from './StickyHeaderDemo.classname';
+import {columns} from './constants/columns';
+import {data} from './constants/data';
+
+import './StickyHeaderDemo.scss';
+
+export const StickyHeaderDemo = () => {
+    const table = useTable({
+        columns,
+        data: Array(5)
+            .fill(data)
+            .flat()
+            .map((val, index) => ({...val, id: `${val.id}-${index}`})),
+    });
+
+    return (
+        <div className={cnStickyHeaderDemo()}>
+            <Table className={cnStickyHeaderDemo('table')} table={table} stickyHeader={true} />
+        </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

@@ -26,7 +26,7 @@ export const VirtualizationDemo = () => {
 
     return (
         <div ref={containerRef} style={{height: '90vh', overflow: 'auto'}}>
-            <Table table={table} rowVirtualizer={rowVirtualizer} />
+            <Table table={table} rowVirtualizer={rowVirtualizer} stickyHeader={true} />
         </div>
     );
 };

src/components/__stories__/WindowVirtualizationDemo.tsx

@@ -21,5 +21,5 @@ export const WindowVirtualizationDemo = () => {
         overscan: 5,
     });
 
-    return <Table table={table} rowVirtualizer={rowVirtualizer} />;
+    return <Table table={table} rowVirtualizer={rowVirtualizer} stickyHeader={true} />;
 };