feat(Table): drag column added

README.md

@@ -188,10 +188,10 @@ const GroupingExample = () => {
 
 ```tsx
 import type {ReorderingProviderProps} from '@gravity-ui/table';
-import {defaultDragHandleColumn, ReorderingProvider} from '@gravity-ui/table';
+import {baseDragHandleColumn, ReorderingProvider} from '@gravity-ui/table';
 
 const columns: ColumnDef<Person>[] = [
-  defaultDragHandleColumn,
+  baseDragHandleColumn,
   // ...other columns
 ];
 

package.json

@@ -52,6 +52,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@gravity-ui/eslint-config": "^3.2.0",
+    "@gravity-ui/icons": "^2.11.0",
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
@@ -98,6 +99,7 @@
   "peerDependencies": {
     "@dnd-kit/core": "^6.0.0",
     "@dnd-kit/sortable": "^8.0.0",
+    "@gravity-ui/icons": "^2.0.0",
     "@gravity-ui/uikit": "^6.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"

src/components/BaseTable/BaseTable.scss

@@ -4,7 +4,6 @@ $block: '.#{variables.$ns}table';
 
 #{$block} {
     --gc-tree-view-padding: 0px;
-    --gc-draggable-row-marker-offset: 20px;
 
     border-spacing: 0;
     border-collapse: separate;

src/components/BaseTable/__stories__/stories/ReorderingStory.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type {ColumnDef} from '@tanstack/react-table';
 
-import {defaultDragHandleColumn} from '../../../../constants';
+import {dragHandleColumn} from '../../../../constants';
 import {useTable} from '../../../../hooks';
 import {BaseTable} from '../../../BaseTable';
 import {ReorderingProvider} from '../../../ReorderingProvider';
@@ -11,7 +11,7 @@ import {columns as originalColumns} from '../constants/columns';
 import {data as originalData} from '../constants/data';
 import type {Item} from '../types';
 
-const columns: ColumnDef<Item>[] = [defaultDragHandleColumn as ColumnDef<Item>, ...originalColumns];
+const columns: ColumnDef<Item>[] = [dragHandleColumn as ColumnDef<Item>, ...originalColumns];
 
 export const ReorderingStory = () => {
     const [data, setData] = React.useState(originalData);

src/components/BaseTable/__stories__/stories/ReorderingTreeStory.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type {ColumnDef, ExpandedState} from '@tanstack/react-table';
 
-import {defaultDragHandleColumn} from '../../../../constants';
+import {dragHandleColumn} from '../../../../constants';
 import {useTable} from '../../../../hooks';
 import {ReorderingProvider} from '../../../ReorderingProvider';
 import {BaseTable} from '../../BaseTable';
@@ -11,7 +11,7 @@ import {draggableTreeColumns, data as originalData} from '../constants/tree';
 import {useTreeDataReordering} from '../hooks/useTreeDataReordering';
 
 const columns: ColumnDef<TreeItem>[] = [
-    defaultDragHandleColumn as ColumnDef<TreeItem>,
+    dragHandleColumn as ColumnDef<TreeItem>,
     ...draggableTreeColumns,
 ];
 

src/components/BaseTable/__stories__/stories/ReorderingWithVirtualizationStory.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type {ColumnDef} from '@tanstack/react-table';
 
-import {defaultDragHandleColumn} from '../../../../constants';
+import {dragHandleColumn} from '../../../../constants';
 import {useTable, useWindowRowVirtualizer} from '../../../../hooks';
 import {getVirtualRowRangeExtractor} from '../../../../utils';
 import {BaseTable} from '../../../BaseTable';
@@ -16,7 +16,7 @@ import {cnVirtualizationStory} from './VirtualizationStory.classname';
 
 import './VirtualizationStory.scss';
 
-const columns: ColumnDef<Item>[] = [defaultDragHandleColumn as ColumnDef<Item>, ...originalColumns];
+const columns: ColumnDef<Item>[] = [dragHandleColumn as ColumnDef<Item>, ...originalColumns];
 
 export const ReorderingWithVirtualizationStory = () => {
     const tableRef = React.useRef<HTMLTableElement>(null);

src/components/BaseDragHandle/BaseDragHandle.scss → src/components/DragHandle/DragHandle.scss

@@ -5,6 +5,8 @@ $block: '.#{variables.$ns}drag-handle';
 #{$block} {
     cursor: grab;
 
+    color: var(--g-color-text-secondary);
+
     &[aria-pressed] {
         cursor: grabbing;
     }

src/components/DragHandle/DragHandle.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {useSortable} from '@dnd-kit/sortable';
+import {Grip as GripIcon} from '@gravity-ui/icons';
+import {Icon} from '@gravity-ui/uikit';
+import type {Row} from '@tanstack/react-table';
+
+import {b} from './DragHandle.classname';
+
+import './DragHandle.scss';
+
+export interface DragHandleProps<TData> {
+    row: Row<TData>;
+}
+
+export const DragHandle = <TData,>({row}: DragHandleProps<TData>) => {
+    const {attributes, listeners} = useSortable({
+        id: row.id,
+    });
+
+    return (
+        <span {...attributes} {...listeners} className={b()} data-role="drag-handle">
+            <Icon data={GripIcon} size={16} />
+        </span>
+    );
+};
+
+DragHandle.displayName = 'DragHandle';

src/components/DragHandle/index.ts

@@ -0,0 +1 @@
+export * from './DragHandle';

src/components/Table/__stories__/Table.stories.tsx

@@ -3,6 +3,8 @@ import type {Meta, StoryObj} from '@storybook/react';
 import {Table} from '../index';
 
 import {DefaultStory} from './stories/DefaultStory';
+import {ReorderingStory} from './stories/ReorderingStory';
+import {ReorderingWithVirtualizationStory} from './stories/ReorderingWithVirtualizationStory';
 import {StickyHeaderStory} from './stories/StickyHeaderStory';
 import {VirtualizationStory} from './stories/VirtualizationStory';
 import {WindowVirtualizationStory} from './stories/WindowVirtualizationStory';
@@ -23,6 +25,10 @@ export const WithSelection: StoryObj<typeof WithSelectionStory> = {
     render: WithSelectionStory,
 };
 
+export const Reordering: StoryObj<typeof ReorderingStory> = {
+    render: ReorderingStory,
+};
+
 export const Virtualization: StoryObj<typeof VirtualizationStory> = {
     render: VirtualizationStory,
 };
@@ -31,6 +37,10 @@ export const WindowVirtualization: StoryObj<typeof WindowVirtualizationStory> =
     render: WindowVirtualizationStory,
 };
 
+export const ReorderingWithVirtualization: StoryObj<typeof ReorderingWithVirtualizationStory> = {
+    render: ReorderingWithVirtualizationStory,
+};
+
 export const StickyHeader: StoryObj<typeof StickyHeaderStory> = {
     render: StickyHeaderStory,
 };

src/components/Table/__stories__/stories/ReorderingStory.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import type {ColumnDef} from '@tanstack/react-table';
+
+import {dragHandleColumn} from '../../../../constants';
+import {useTable} from '../../../../hooks';
+import {columns as originalColumns} from '../../../BaseTable/__stories__/constants/columns';
+import {data as originalData} from '../../../BaseTable/__stories__/constants/data';
+import type {Item} from '../../../BaseTable/__stories__/types';
+import type {ReorderingProviderProps} from '../../../ReorderingProvider';
+import {ReorderingProvider} from '../../../ReorderingProvider';
+import {Table} from '../../Table';
+
+const columns: ColumnDef<Item>[] = [dragHandleColumn as ColumnDef<Item>, ...originalColumns];
+
+export const ReorderingStory = () => {
+    const [data, setData] = React.useState(originalData);
+
+    const table = useTable({
+        columns,
+        data,
+        getRowId: (item) => item.id,
+    });
+
+    const handleReorder = React.useCallback<
+        NonNullable<ReorderingProviderProps<Item>['onReorder']>
+    >(({draggedItemKey, baseItemKey}) => {
+        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 (
+        <ReorderingProvider table={table} onReorder={handleReorder}>
+            <Table table={table} />
+        </ReorderingProvider>
+    );
+};

src/components/Table/__stories__/stories/ReorderingWithVirtualizationStory.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import type {ColumnDef} from '@tanstack/react-table';
+
+import {dragHandleColumn} from '../../../../constants';
+import {useTable, useWindowRowVirtualizer} from '../../../../hooks';
+import {getVirtualRowRangeExtractor} from '../../../../utils';
+import {columns as originalColumns} from '../../../BaseTable/__stories__/constants/columns';
+import type {Item} from '../../../BaseTable/__stories__/types';
+import {generateData} from '../../../BaseTable/__stories__/utils';
+import type {ReorderingProviderProps} from '../../../ReorderingProvider';
+import {ReorderingProvider} from '../../../ReorderingProvider';
+import {Table} from '../../Table';
+
+const columns: ColumnDef<Item>[] = [dragHandleColumn as ColumnDef<Item>, ...originalColumns];
+
+export const ReorderingWithVirtualizationStory = () => {
+    const tableRef = React.useRef<HTMLTableElement>(null);
+    const [data, setData] = React.useState(() => generateData(300));
+
+    const table = useTable({
+        columns,
+        data,
+        getRowId: (item) => item.id,
+    });
+
+    const rowVirtualizer = useWindowRowVirtualizer({
+        count: table.getRowModel().rows.length,
+        estimateSize: () => 20,
+        overscan: 5,
+        rangeExtractor: getVirtualRowRangeExtractor(tableRef.current),
+    });
+
+    const handleReorder = React.useCallback<
+        NonNullable<ReorderingProviderProps<Item>['onReorder']>
+    >(({draggedItemKey, baseItemKey}) => {
+        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 (
+        <ReorderingProvider table={table} onReorder={handleReorder}>
+            <Table ref={tableRef} table={table} rowVirtualizer={rowVirtualizer} stickyHeader />
+        </ReorderingProvider>
+    );
+};