fix: review fixes

src/components/__stories__/ColumnPinningDemo.scss

@@ -34,21 +34,21 @@ $block: '.#{variables.$ns}column-pinning-demo';
         }
 
         .gt-table__header-row {
-            .gt-table__header-cell:first-of-type {
+            .gt-table__header-cell:first-child {
                 border-inline-start: 0;
             }
 
-            .gt-table__header-cell:last-of-type {
+            .gt-table__header-cell:last-child {
                 border-inline-end: 0;
             }
         }
 
         .gt-table__row {
-            .gt-table__cell:first-of-type {
+            .gt-table__cell:first-child {
                 border-inline-start: 0;
             }
 
-            .gt-table__cell:last-of-type {
+            .gt-table__cell:last-child {
                 border-inline-end: 0;
             }
         }

src/components/__stories__/ColumnPinningDemo.tsx

@@ -1,87 +1,16 @@
 import React from 'react';
 
-import type {ColumnDef, ColumnPinningState, ExpandedState} from '@tanstack/react-table';
+import type {ColumnPinningState} from '@tanstack/react-table';
 
-import {defaultDragHandleColumn} from '../../constants';
-import {withTableReorder} from '../../hocs';
 import {useTable} from '../../hooks';
-import type {SortableListDragResult} from '../SortableList';
 import {Table} from '../Table';
 
 import {cnColumnPinningDemo} from './ColumnPinningDemo.classname';
-import {ColumnPinningHeaderCell} from './cells/ColumnPinningHeaderCell';
-import {TreeNameCell} from './cells/TreeNameCell';
-import {data as originalData} from './constants/data';
-import {data as treeData} from './constants/tree';
-import type {TreeItem} from './constants/tree';
-import type {Item} from './types';
+import {columns} from './constants/columnPinning';
+import {data} from './constants/data';
 
 import './ColumnPinningDemo.scss';
 
-const columns: ColumnDef<Item>[] = [
-    {
-        accessorKey: 'name',
-        header: (info) => (
-            <ColumnPinningHeaderCell
-                value="Name"
-                info={info}
-                className={cnColumnPinningDemo('header-cell')}
-            />
-        ),
-        minSize: 200,
-    },
-    {
-        accessorKey: 'age',
-        header: (info) => (
-            <ColumnPinningHeaderCell
-                value="Age"
-                info={info}
-                className={cnColumnPinningDemo('header-cell')}
-            />
-        ),
-        minSize: 200,
-    },
-    {
-        accessorKey: 'status',
-        header: (info) => (
-            <ColumnPinningHeaderCell
-                value="Status"
-                info={info}
-                className={cnColumnPinningDemo('header-cell')}
-            />
-        ),
-        minSize: 300,
-    },
-];
-
-const treeColumns: ColumnDef<TreeItem>[] = [
-    {
-        accessorKey: 'name',
-        header: (info) => (
-            <ColumnPinningHeaderCell
-                value="Name"
-                info={info}
-                className={cnColumnPinningDemo('header-cell')}
-            />
-        ),
-        cell: (info) => (
-            <TreeNameCell row={info.row} depth={info.row.depth} value={info.getValue<string>()} />
-        ),
-        minSize: 320,
-    },
-    {
-        accessorKey: 'age',
-        header: (info) => (
-            <ColumnPinningHeaderCell
-                value="Age"
-                info={info}
-                className={cnColumnPinningDemo('header-cell')}
-            />
-        ),
-        minSize: 320,
-    },
-];
-
 export const ColumnPinningDemo = () => {
     const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>({
         left: [],
@@ -90,104 +19,11 @@ export const ColumnPinningDemo = () => {
 
     const table = useTable({
         columns,
-        data: originalData,
-        enableColumnPinning: true,
-        onColumnPinningChange: setColumnPinning,
-        state: {
-            columnPinning,
-        },
-    });
-
-    return (
-        <div className={cnColumnPinningDemo()}>
-            <Table className={cnColumnPinningDemo('table')} table={table} />
-        </div>
-    );
-};
-
-const TableWithReordering = withTableReorder(Table);
-
-const columnsWithReordering: ColumnDef<Item>[] = [
-    {
-        ...(defaultDragHandleColumn as ColumnDef<Item>),
-        minSize: 16,
-    },
-    ...columns,
-];
-
-export const ColumnPinningWithReorderingDemo = () => {
-    const [data, setData] = React.useState(originalData);
-
-    const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>({
-        left: [defaultDragHandleColumn.id ?? ''],
-        right: [],
-    });
-
-    const table = useTable({
         data,
-        columns: columnsWithReordering,
-        getRowId: (item) => item.id,
-        enableColumnPinning: true,
-        onColumnPinningChange: setColumnPinning,
-        state: {
-            columnPinning,
-        },
-    });
-
-    const handleReorder = React.useCallback(
-        ({draggedItemKey, baseItemKey}: SortableListDragResult) => {
-            setData((prevData) => {
-                const dataClone = prevData.slice();
-
-                const index = dataClone.findIndex((item) => item.id === draggedItemKey);
-
-                if (index >= 0) {
-                    const dragged = dataClone.splice(index, 1)[0] as Item;
-                    const insertIndex = dataClone.findIndex((item) => item.id === baseItemKey);
-
-                    if (insertIndex >= 0) {
-                        dataClone.splice(insertIndex + 1, 0, dragged);
-                    } else {
-                        dataClone.unshift(dragged);
-                    }
-                }
-
-                return dataClone;
-            });
-        },
-        [],
-    );
-
-    return (
-        <div className={cnColumnPinningDemo()}>
-            <TableWithReordering
-                className={cnColumnPinningDemo('table')}
-                table={table}
-                onReorder={handleReorder}
-            />
-        </div>
-    );
-};
-
-export const ColumnPinningWithTreeDemo = () => {
-    const [expanded, setExpanded] = React.useState<ExpandedState>({});
-
-    const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>({
-        left: [defaultDragHandleColumn.id ?? ''],
-        right: [],
-    });
-
-    const table = useTable({
-        columns: treeColumns,
-        data: treeData,
-        getSubRows: (item) => item.children,
-        enableExpanding: true,
-        onExpandedChange: setExpanded,
         enableColumnPinning: true,
         onColumnPinningChange: setColumnPinning,
         state: {
             columnPinning,
-            expanded,
         },
     });
 

src/components/__stories__/ColumnPinningWithReorderingDemo.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import type {ColumnDef, ColumnPinningState} from '@tanstack/react-table';
+
+import {defaultDragHandleColumn} from '../../constants';
+import {withTableReorder} from '../../hocs';
+import {useTable} from '../../hooks';
+import type {SortableListDragResult} from '../SortableList';
+import {Table} from '../Table';
+
+import {cnColumnPinningDemo} from './ColumnPinningDemo.classname';
+import {columns} from './constants/columnPinning';
+import {data as originalData} from './constants/data';
+import type {Item} from './types';
+
+const TableWithReordering = withTableReorder(Table);
+
+const columnsWithReordering: ColumnDef<Item>[] = [
+    {
+        ...(defaultDragHandleColumn as ColumnDef<Item>),
+        minSize: 16,
+    },
+    ...columns,
+];
+
+export const ColumnPinningWithReorderingDemo = () => {
+    const [data, setData] = React.useState(originalData);
+
+    const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>({
+        left: [defaultDragHandleColumn.id ?? ''],
+        right: [],
+    });
+
+    const table = useTable({
+        data,
+        columns: columnsWithReordering,
+        getRowId: (item) => item.id,
+        enableColumnPinning: true,
+        onColumnPinningChange: setColumnPinning,
+        state: {
+            columnPinning,
+        },
+    });
+
+    const handleReorder = React.useCallback(
+        ({draggedItemKey, baseItemKey}: SortableListDragResult) => {
+            setData((prevData) => {
+                const dataClone = prevData.slice();
+
+                const index = dataClone.findIndex((item) => item.id === draggedItemKey);
+
+                if (index >= 0) {
+                    const dragged = dataClone.splice(index, 1)[0] as Item;
+                    const insertIndex = dataClone.findIndex((item) => item.id === baseItemKey);
+
+                    if (insertIndex >= 0) {
+                        dataClone.splice(insertIndex + 1, 0, dragged);
+                    } else {
+                        dataClone.unshift(dragged);
+                    }
+                }
+
+                return dataClone;
+            });
+        },
+        [],
+    );
+
+    return (
+        <div className={cnColumnPinningDemo()}>
+            <TableWithReordering
+                className={cnColumnPinningDemo('table')}
+                table={table}
+                onReorder={handleReorder}
+            />
+        </div>
+    );
+};

src/components/__stories__/ColumnPinningWithSelectionDemo.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import type {ColumnDef, ColumnPinningState, RowSelectionState} from '@tanstack/react-table';
+
+import {defaultSelectionColumn} from '../../constants';
+import {useTable} from '../../hooks';
+import {Table} from '../Table';
+
+import {cnColumnPinningDemo} from './ColumnPinningDemo.classname';
+import {columns} from './constants/columnPinning';
+import {data} from './constants/data';
+import type {Item} from './types';
+
+const columnsWithSelection: ColumnDef<Item>[] = [
+    {
+        ...(defaultSelectionColumn as ColumnDef<Item>),
+    },
+    ...columns,
+];
+
+export const ColumnPinningWithSelectionDemo = () => {
+    const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>({
+        left: [defaultSelectionColumn.id ?? ''],
+        right: [],
+    });
+
+    const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+
+    const table = useTable({
+        data,
+        columns: columnsWithSelection,
+        getRowId: (item) => item.id,
+        enableColumnPinning: true,
+        enableRowSelection: true,
+        enableMultiRowSelection: true,
+        onColumnPinningChange: setColumnPinning,
+        onRowSelectionChange: setRowSelection,
+        state: {
+            columnPinning,
+            rowSelection,
+        },
+    });
+
+    return (
+        <div className={cnColumnPinningDemo()}>
+            <Table className={cnColumnPinningDemo('table')} table={table} />
+        </div>
+    );
+};

src/components/__stories__/Table.stories.tsx

@@ -4,11 +4,9 @@ import type {Meta, StoryFn} from '@storybook/react';
 
 import {Table} from '../Table';
 
-import {
-    ColumnPinningDemo,
-    ColumnPinningWithReorderingDemo,
-    ColumnPinningWithTreeDemo,
-} from './ColumnPinningDemo';
+import {ColumnPinningDemo} from './ColumnPinningDemo';
+import {ColumnPinningWithReorderingDemo} from './ColumnPinningWithReorderingDemo';
+import {ColumnPinningWithSelectionDemo} from './ColumnPinningWithSelectionDemo';
 import {DefaultDemo} from './DefaultDemo';
 import {GroupingDemo} from './GroupingDemo';
 import {GroupingDemo2} from './GroupingDemo2';
@@ -85,5 +83,5 @@ export const ColumnPinning: StoryFn = ColumnPinningTemplate.bind({});
 const ColumnPinningWithReorderingTemplate: StoryFn = () => <ColumnPinningWithReorderingDemo />;
 export const ColumnPinningWithReordering: StoryFn = ColumnPinningWithReorderingTemplate.bind({});
 
-const ColumnPinningWithTreeTemplate: StoryFn = () => <ColumnPinningWithTreeDemo />;
-export const ColumnPinningWithTree: StoryFn = ColumnPinningWithTreeTemplate.bind({});
+const ColumnPinningWithSelectionTemplate: StoryFn = () => <ColumnPinningWithSelectionDemo />;
+export const ColumnPinningWithSelection: StoryFn = ColumnPinningWithSelectionTemplate.bind({});

src/components/__stories__/cells/ColumnPinningHeaderCell.tsx

@@ -17,6 +17,10 @@ export const ColumnPinningHeaderCell = <TData,>({
 }: ColumnPinningHeaderCellProps<TData>) => {
     const canPin = info.column.getCanPin();
 
+    const canPinLeft = canPin && info.column.getIsPinned() !== 'left';
+    const canPinRight = canPin && info.column.getIsPinned() !== 'right';
+    const canUnpin = canPin && info.column.getIsPinned();
+
     const handlePinLeft = () => {
         info.column.pin('left');
     };
@@ -34,9 +38,9 @@ export const ColumnPinningHeaderCell = <TData,>({
             <div>{value}</div>
             {canPin && (
                 <div>
-                    <button onClick={handlePinLeft}>{`<`}</button>
-                    <button onClick={handleUnpin}>{`x`}</button>
-                    <button onClick={handlePinRight}>{`>`}</button>
+                    {canPinLeft && <button onClick={handlePinLeft}>{`<`}</button>}
+                    {canUnpin && <button onClick={handleUnpin}>{`x`}</button>}
+                    {canPinRight && <button onClick={handlePinRight}>{`>`}</button>}
                 </div>
             )}
         </div>