@snack-uikit/table 0.30.0 → 0.30.1-preview-9a03a1c9.0

package/dist/cjs/helperComponents/Rows/BodyRow.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BodyRow = BodyRow;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const sortable_1 = require("@dnd-kit/sortable");
 const react_1 = require("react");
 const constants_1 = require("../../constants");
 const Cells_1 = require("../Cells");
@@ -21,13 +22,15 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function BodyRow(_ref) {
   let {
     row,
-    onRowClick
+    onRowClick,
+    groupedColumnOrderState,
+    enableColumnsOrderSortByDrag
   } = _ref;
   const {
-    pinnedLeft,
-    pinnedRight,
+    leftPinned,
+    rightPinned,
     unpinned
-  } = (0, hooks_1.useRowCells)(row);
+  } = (0, hooks_1.useRowCells)(row, groupedColumnOrderState);
   const [dropListOpened, setDropListOpen] = (0, react_1.useState)(false);
   const disabled = !row.getCanSelect();
   const handleRowClick = e => {
@@ -53,17 +56,32 @@ function BodyRow(_ref) {
       "data-test-id": constants_1.TEST_IDS.bodyRow,
       "data-row-id": row.id,
       className: styles_module_scss_1.default.bodyRow,
-      children: [pinnedLeft && (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
+      children: [leftPinned && (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
         position: constants_1.COLUMN_PIN_POSITION.Left,
-        children: pinnedLeft.map(cell => (0, jsx_runtime_1.jsx)(Cells_1.BodyCell, {
-          cell: cell
+        children: leftPinned.map(cell => (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, {
+          items: groupedColumnOrderState.leftPinned,
+          strategy: sortable_1.horizontalListSortingStrategy,
+          children: (0, jsx_runtime_1.jsx)(Cells_1.BodyCell, {
+            cell: cell,
+            isDraggable: enableColumnsOrderSortByDrag
+          }, cell.id)
         }, cell.id))
-      }), unpinned.map(cell => (0, jsx_runtime_1.jsx)(Cells_1.BodyCell, {
-        cell: cell
-      }, cell.id)), pinnedRight && (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
+      }), unpinned.map(cell => (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, {
+        items: groupedColumnOrderState.unpinned,
+        strategy: sortable_1.horizontalListSortingStrategy,
+        children: (0, jsx_runtime_1.jsx)(Cells_1.BodyCell, {
+          cell: cell,
+          isDraggable: enableColumnsOrderSortByDrag
+        }, cell.id)
+      }, cell.id)), rightPinned && (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
         position: constants_1.COLUMN_PIN_POSITION.Right,
-        children: pinnedRight.map(cell => (0, jsx_runtime_1.jsx)(Cells_1.BodyCell, {
-          cell: cell
+        children: rightPinned.map(cell => (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, {
+          items: groupedColumnOrderState.rightPinned,
+          strategy: sortable_1.horizontalListSortingStrategy,
+          children: (0, jsx_runtime_1.jsx)(Cells_1.BodyCell, {
+            cell: cell,
+            isDraggable: enableColumnsOrderSortByDrag
+          }, cell.id)
         }, cell.id))
       })]
     })

package/dist/cjs/helperComponents/Rows/HeaderRow.d.ts

@@ -1 +1,7 @@
-export declare function HeaderRow(): import("react/jsx-runtime").JSX.Element;
+import { GroupedColumnOrderState } from '../../types';
+type Props = {
+    groupedColumnOrderState: GroupedColumnOrderState;
+    enableColumnsOrderSortByDrag?: boolean;
+};
+export declare function HeaderRow({ groupedColumnOrderState, enableColumnsOrderSortByDrag }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/helperComponents/Rows/HeaderRow.js

@@ -10,34 +10,54 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.HeaderRow = HeaderRow;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const sortable_1 = require("@dnd-kit/sortable");
 const constants_1 = require("../../constants");
 const Cells_1 = require("../Cells");
 const hooks_1 = require("../hooks");
 const PinnedCells_1 = require("./PinnedCells");
 const Row_1 = require("./Row");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function HeaderRow() {
+function HeaderRow(_ref) {
+  let {
+    groupedColumnOrderState,
+    enableColumnsOrderSortByDrag
+  } = _ref;
   const {
     leftPinned,
     unpinned,
     rightPinned
-  } = (0, hooks_1.useHeaderGroups)();
+  } = (0, hooks_1.useHeaderGroups)(groupedColumnOrderState);
   return (0, jsx_runtime_1.jsxs)(Row_1.Row, {
     className: styles_module_scss_1.default.tableHeader,
     "data-test-id": constants_1.TEST_IDS.headerRow,
-    children: [leftPinned && (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
-      position: constants_1.COLUMN_PIN_POSITION.Left,
-      children: leftPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (0, jsx_runtime_1.jsx)(Cells_1.HeaderCell, {
-        header: header
-      }, header.id)))
-    }), unpinned.map(headerGroup => headerGroup.headers.map(header => (0, jsx_runtime_1.jsx)(Cells_1.HeaderCell, {
-      header: header
-    }, header.id))), rightPinned && (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
-      position: constants_1.COLUMN_PIN_POSITION.Right,
-      children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (0, jsx_runtime_1.jsx)(Cells_1.HeaderCell, {
+    children: [leftPinned && (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, {
+      items: groupedColumnOrderState.leftPinned,
+      strategy: sortable_1.horizontalListSortingStrategy,
+      children: (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
+        position: constants_1.COLUMN_PIN_POSITION.Left,
+        children: leftPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (0, jsx_runtime_1.jsx)(Cells_1.HeaderCell, {
+          header: header,
+          isDraggable: enableColumnsOrderSortByDrag && groupedColumnOrderState.leftPinned.length > 1
+        }, header.id)))
+      })
+    }), (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, {
+      items: groupedColumnOrderState.unpinned,
+      strategy: sortable_1.horizontalListSortingStrategy,
+      children: unpinned.map(headerGroup => headerGroup.headers.map(header => (0, jsx_runtime_1.jsx)(Cells_1.HeaderCell, {
         header: header,
-        pinPosition: constants_1.COLUMN_PIN_POSITION.Right
+        isDraggable: enableColumnsOrderSortByDrag && groupedColumnOrderState.unpinned.length > 1
       }, header.id)))
+    }), rightPinned && (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, {
+      items: groupedColumnOrderState.rightPinned,
+      strategy: sortable_1.horizontalListSortingStrategy,
+      children: (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
+        position: constants_1.COLUMN_PIN_POSITION.Right,
+        children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (0, jsx_runtime_1.jsx)(Cells_1.HeaderCell, {
+          header: header,
+          pinPosition: constants_1.COLUMN_PIN_POSITION.Right,
+          isDraggable: enableColumnsOrderSortByDrag && groupedColumnOrderState.rightPinned.length > 1
+        }, header.id)))
+      })
     })]
   });
 }

package/dist/cjs/helperComponents/hooks.d.ts

@@ -1,25 +1,34 @@
 import { Cell, Header, HeaderGroup, Row } from '@tanstack/react-table';
-export declare function useHeaderGroups(): {
+import { CSSProperties } from 'react';
+import { GroupedColumnOrderState } from '../types';
+export declare function useHeaderGroups(groupedColumnOrderState: GroupedColumnOrderState): {
     unpinned: HeaderGroup<any>[];
     leftPinned?: undefined;
     rightPinned?: undefined;
 } | {
-    leftPinned: HeaderGroup<any>[] | undefined;
-    rightPinned: HeaderGroup<any>[] | undefined;
+    leftPinned: {
+        headers: Header<unknown, unknown>[];
+        depth: number;
+        id: string;
+    }[] | undefined;
+    rightPinned: {
+        headers: Header<unknown, unknown>[];
+        depth: number;
+        id: string;
+    }[] | undefined;
     unpinned: HeaderGroup<any>[];
 };
-export declare function useRowCells<TData>(row: Row<TData>): {
+export declare function useRowCells<TData>(row: Row<TData>, groupedColumnOrderState: GroupedColumnOrderState): {
     unpinned: Cell<TData, unknown>[];
-    pinnedLeft?: undefined;
-    pinnedRight?: undefined;
+    leftPinned?: undefined;
+    rightPinned?: undefined;
 } | {
-    pinnedLeft: Cell<TData, unknown>[] | undefined;
-    pinnedRight: Cell<TData, unknown>[] | undefined;
+    leftPinned: Cell<TData, unknown>[] | undefined;
+    rightPinned: Cell<TData, unknown>[] | undefined;
     unpinned: Cell<TData, unknown>[];
 };
-export declare function useCellSizes<TData>(element: Cell<TData, unknown> | Header<TData, unknown>): {
-    minWidth: number | undefined;
-    width: string;
-    maxWidth: number | undefined;
-    flexShrink: string;
+type CellSizesOptions = {
+    isDraggable?: boolean;
 };
+export declare function useCellSizes<TData>(element: Cell<TData, unknown> | Header<TData, unknown>, options?: CellSizesOptions): CSSProperties;
+export {};

package/dist/cjs/helperComponents/hooks.js

@@ -6,17 +6,32 @@ Object.defineProperty(exports, "__esModule", {
 exports.useHeaderGroups = useHeaderGroups;
 exports.useRowCells = useRowCells;
 exports.useCellSizes = useCellSizes;
+const sortable_1 = require("@dnd-kit/sortable");
+const utilities_1 = require("@dnd-kit/utilities");
 const react_1 = require("react");
 const contexts_1 = require("./contexts");
 function hasHeaders(groups) {
   return groups.some(group => group.headers.length);
 }
-function useHeaderGroups() {
+const sortHeaderGroup = (groups, groupOrder) => groups.map(group => Object.assign(Object.assign({}, group), {
+  headers: group.headers.sort((a, b) => {
+    const indexA = groupOrder.findIndex(columnId => columnId === a.id);
+    const indexB = groupOrder.findIndex(columnId => columnId === b.id);
+    if (indexA > -1 && indexB > -1) {
+      return indexA - indexB;
+    }
+    return 0;
+  })
+}));
+function useHeaderGroups(groupedColumnOrderState) {
   const {
     table
   } = (0, contexts_1.useTableContext)();
   const columnDefs = table._getColumnDefs();
   const pinEnabled = table.getIsSomeColumnsPinned();
+  const {
+    columnOrder
+  } = table.getState();
   return (0, react_1.useMemo)(() => {
     if (!pinEnabled) {
       return {
@@ -26,20 +41,33 @@ function useHeaderGroups() {
     const left = table.getLeftHeaderGroups();
     const right = table.getRightHeaderGroups();
     return {
-      leftPinned: hasHeaders(left) ? left : undefined,
-      rightPinned: hasHeaders(right) ? right : undefined,
+      leftPinned: hasHeaders(left) ? sortHeaderGroup(left, groupedColumnOrderState.leftPinned) : undefined,
+      rightPinned: hasHeaders(right) ? sortHeaderGroup(right, groupedColumnOrderState.rightPinned) : undefined,
       unpinned: table.getCenterHeaderGroups()
     };
     // need to rebuild if columnDefinitions has changed
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [table, pinEnabled, columnDefs]);
+  }, [table, pinEnabled, columnDefs, columnOrder, groupedColumnOrderState]);
 }
-function useRowCells(row) {
+function sortPinnedColumnsByOrderState(groupOrder) {
+  return (a, b) => {
+    const indexA = groupOrder.findIndex(columnId => columnId === a.column.id);
+    const indexB = groupOrder.findIndex(columnId => columnId === b.column.id);
+    if (indexA > -1 && indexB > -1) {
+      return indexA - indexB;
+    }
+    return 0;
+  };
+}
+function useRowCells(row, groupedColumnOrderState) {
   const {
     table
   } = (0, contexts_1.useTableContext)();
   const pinEnabled = table.getIsSomeColumnsPinned();
   const columnDefs = table._getColumnDefs();
+  const {
+    columnOrder
+  } = table.getState();
   return (0, react_1.useMemo)(() => {
     if (!pinEnabled) {
       return {
@@ -49,24 +77,44 @@ function useRowCells(row) {
     const left = row.getLeftVisibleCells();
     const right = row.getRightVisibleCells();
     return {
-      pinnedLeft: left.length ? left : undefined,
-      pinnedRight: right.length ? right : undefined,
+      leftPinned: left.length ? left.slice().sort(sortPinnedColumnsByOrderState(groupedColumnOrderState.leftPinned)) : undefined,
+      rightPinned: right.length ? right.slice().sort(sortPinnedColumnsByOrderState(groupedColumnOrderState.rightPinned)) : undefined,
       unpinned: row.getCenterVisibleCells()
     };
     // need to rebuild if columnDefinitions has changed
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [row, pinEnabled, columnDefs]);
+  }, [row, pinEnabled, columnDefs, columnOrder, groupedColumnOrderState]);
 }
-function useCellSizes(element) {
+function useCellSizes(element, options) {
   const column = element.column;
+  const {
+    isDragging,
+    transform
+  } = (0, sortable_1.useSortable)({
+    id: column.id
+  });
   const minWidth = column.columnDef.minSize;
   const maxWidth = column.columnDef.maxSize;
   const width = `var(--table-column-${column.id}-size)`;
   const flexShrink = `var(--table-column-${column.id}-flex)`;
-  return (0, react_1.useMemo)(() => ({
-    minWidth,
-    width,
-    maxWidth,
-    flexShrink
-  }), [flexShrink, maxWidth, minWidth, width]);
+  const isHeaderCell = 'headerGroup' in element;
+  return (0, react_1.useMemo)(() => {
+    const styles = {
+      minWidth,
+      width,
+      maxWidth,
+      flexShrink
+    };
+    if (options === null || options === void 0 ? void 0 : options.isDraggable) {
+      styles.opacity = isDragging ? 0.8 : 1;
+      styles.position = 'relative';
+      styles.transform = utilities_1.CSS.Translate.toString(transform);
+      styles.transition = 'width transform 0.2s ease-in-out';
+      styles.zIndex = isDragging ? 1 : 0;
+      if (isHeaderCell) {
+        styles.whiteSpace = 'nowrap';
+      }
+    }
+    return styles;
+  }, [options === null || options === void 0 ? void 0 : options.isDraggable, flexShrink, isDragging, isHeaderCell, maxWidth, minWidth, transform, width]);
 }

package/dist/cjs/types.d.ts

@@ -40,5 +40,10 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
     size: number;
 };
 export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData>;
+export type GroupedColumnOrderState = {
+    leftPinned: string[];
+    rightPinned: string[];
+    unpinned: string[];
+};
 export type { RowActionsColumnDefProps, StatusColumnDefinitionProps, RowInfo, RowClickHandler, ActionsGenerator, CopyCellProps, MapStatusToAppearanceFnType, } from './helperComponents';
 export type { ColumnPinPosition, PaginationState, SortingState, RowSelectionState, RowSelectionOptions, EmptyStateProps, ToolbarProps, HeaderContext, CellContext, };

package/dist/esm/components/Table/Table.d.ts

@@ -1,7 +1,7 @@
 import { FiltersState } from '@snack-uikit/chips';
 import { TableProps } from '../types';
 /** Компонент таблицы */
-export declare function Table<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, ...rest }: TableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, enableColumnsOrderSortByDrag, ...rest }: TableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
     var statusAppearances: Record<string, string>;

package/dist/esm/components/Table/Table.js

@@ -10,6 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { closestCenter, DndContext } from '@dnd-kit/core';
+import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
 import { getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
 import cn from 'classnames';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
@@ -24,7 +26,7 @@ import { CellAutoResizeContext, useCellAutoResizeController } from '../../contex
 import { BodyRow, ExportButton, getColumnId, getRowActionsColumnDef, getSelectionCellColumnDef, getStatusColumnDef, HeaderRow, STATUS_APPEARANCE, TableContext, TableEmptyState, TablePagination, useEmptyState, } from '../../helperComponents';
 import { getTreeColumnDef } from '../../helperComponents/Cells/TreeCell';
 import { fuzzyFilter } from '../../utils';
-import { useLoadingTable, useStateControl } from './hooks';
+import { useColumnOrderByDrag, useLoadingTable, useStateControl } from './hooks';
 import { usePageReset } from './hooks/usePageReset';
 import styles from './styles.module.css';
 import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, saveStateToLocalStorage, } from './utils';
@@ -32,7 +34,7 @@ import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSiz
 export function Table(_a) {
     var { data, rowPinning = {
         top: [],
-    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, suppressSearch = false, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions"]);
+    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, suppressSearch = false, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, enableColumnsOrderSortByDrag } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions", "enableColumnsOrderSortByDrag"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -52,6 +54,7 @@ export function Table(_a) {
         }
         return cols;
     }, [columnDefinitions, enableSelection, enableSelectPinned, expanding]);
+    const { columnOrder, setColumnOrder, groupedColumnOrderState, sensors, handleDragEnd } = useColumnOrderByDrag(tableColumns);
     const columnPinning = useMemo(() => {
         var _a;
         const pinningState = { left: [], right: [] };
@@ -78,6 +81,7 @@ export function Table(_a) {
         columns: tableColumns,
         state: {
             columnPinning,
+            columnOrder,
             globalFilter,
             rowSelection,
             sorting,
@@ -91,6 +95,7 @@ export function Table(_a) {
             minSize: 40,
             cell: (cell) => _jsx(TruncateString, { text: String(cell.getValue()), maxLines: 1 }),
         },
+        onColumnOrderChange: setColumnOrder,
         manualSorting,
         manualPagination,
         manualFiltering,
@@ -240,16 +245,16 @@ export function Table(_a) {
     });
     const { updateCellMap } = useCellAutoResizeController(table);
     const showToolbar = !suppressToolbar;
-    return (_jsx(CellAutoResizeContext.Provider, { value: { updateCellMap }, children: _jsxs("div", Object.assign({ style: {
-                '--page-size': cssPageSize,
-            }, className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [showToolbar && (_jsx("div", { className: styles.header, children: _jsx(Toolbar, { search: suppressSearch
-                            ? undefined
-                            : {
-                                value: globalFilter,
-                                onChange: onGlobalFilterChange,
-                                loading: search === null || search === void 0 ? void 0 : search.loading,
-                                placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder'),
-                            }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions, filterRow: columnFilters, "data-test-id": TEST_IDS.toolbar }) })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizes.vars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }));
+    return (_jsx(DndContext, { collisionDetection: closestCenter, modifiers: [restrictToHorizontalAxis], onDragEnd: handleDragEnd, sensors: sensors, children: _jsx(CellAutoResizeContext.Provider, { value: { updateCellMap }, children: _jsxs("div", Object.assign({ style: {
+                    '--page-size': cssPageSize,
+                }, className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [showToolbar && (_jsx("div", { className: styles.header, children: _jsx(Toolbar, { search: suppressSearch
+                                ? undefined
+                                : {
+                                    value: globalFilter,
+                                    onChange: onGlobalFilterChange,
+                                    loading: search === null || search === void 0 ? void 0 : search.loading,
+                                    placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder'),
+                                }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions, filterRow: columnFilters, "data-test-id": TEST_IDS.toolbar }) })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizes.vars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, { groupedColumnOrderState: groupedColumnOrderState }), loadingTableRows.map(row => (_jsx(BodyRow, { row: row, groupedColumnOrderState: groupedColumnOrderState }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? (_jsx(HeaderRow, { groupedColumnOrderState: groupedColumnOrderState, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag })) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, groupedColumnOrderState: groupedColumnOrderState }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, groupedColumnOrderState: groupedColumnOrderState, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, row.id))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }) }));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

package/dist/esm/components/Table/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useLoadingTable';
 export * from './useStateControl';
+export * from './useColumnOrderByDrag';

package/dist/esm/components/Table/hooks/index.js

@@ -1,2 +1,3 @@
 export * from './useLoadingTable';
 export * from './useStateControl';
+export * from './useColumnOrderByDrag';

package/dist/esm/components/Table/hooks/useColumnOrderByDrag.d.ts

@@ -0,0 +1,9 @@
+import { DragEndEvent } from '@dnd-kit/core';
+import { ColumnDefinition, GroupedColumnOrderState } from '../../../types';
+export declare function useColumnOrderByDrag<TData extends object>(tableColumns: ColumnDefinition<TData>[]): {
+    columnOrder: string[];
+    setColumnOrder: import("react").Dispatch<import("react").SetStateAction<string[]>>;
+    groupedColumnOrderState: GroupedColumnOrderState;
+    handleDragEnd: ({ active, over }: DragEndEvent) => void;
+    sensors: import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
+};

package/dist/esm/components/Table/hooks/useColumnOrderByDrag.js

@@ -0,0 +1,66 @@
+import { KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
+import { useCallback, useMemo, useState } from 'react';
+import { UNDRAGGABLE_COLUMNS } from '../../../constants';
+function preparePinnedColumnsMap(tableColumns) {
+    return tableColumns.reduce((accMap, columnDefinition) => {
+        switch (columnDefinition.pinned) {
+            case 'left':
+                accMap[columnDefinition.id] = 'leftPinned';
+                break;
+            case 'right':
+                accMap[columnDefinition.id] = 'rightPinned';
+                break;
+            default:
+        }
+        return accMap;
+    }, {});
+}
+function prepareInitialState(tableColumns) {
+    return tableColumns.map(c => c.id).filter(id => !UNDRAGGABLE_COLUMNS.includes(id));
+}
+function prepareGroupedColumnOrderState(columnOrder, pinnedColumnsMap) {
+    return columnOrder.reduce((accState, columnId) => {
+        var _a;
+        if (UNDRAGGABLE_COLUMNS.includes(columnId)) {
+            return accState;
+        }
+        const groupName = (_a = pinnedColumnsMap[columnId]) !== null && _a !== void 0 ? _a : 'unpinned';
+        accState[groupName].push(columnId);
+        return accState;
+    }, {
+        leftPinned: [],
+        unpinned: [],
+        rightPinned: [],
+    });
+}
+export function useColumnOrderByDrag(tableColumns) {
+    const [columnOrder, setColumnOrder] = useState(() => prepareInitialState(tableColumns));
+    const pinnedColumnsMap = useMemo(() => preparePinnedColumnsMap(tableColumns), [tableColumns]);
+    const groupedColumnOrderState = useMemo(() => prepareGroupedColumnOrderState(columnOrder, pinnedColumnsMap), [columnOrder, pinnedColumnsMap]);
+    const handleDragEnd = useCallback(({ active, over }) => {
+        if (active && over && active.id !== over.id) {
+            if (UNDRAGGABLE_COLUMNS.includes(over.id.toString())) {
+                return;
+            }
+            const activeGroup = pinnedColumnsMap[active.id.toString()];
+            const overGroup = pinnedColumnsMap[over.id.toString()];
+            if (activeGroup !== overGroup) {
+                return;
+            }
+            setColumnOrder(columnOrder => {
+                const oldIndex = columnOrder.indexOf(active.id.toString());
+                const newIndex = columnOrder.indexOf(over.id.toString());
+                return arrayMove(columnOrder, oldIndex, newIndex);
+            });
+        }
+    }, [pinnedColumnsMap]);
+    const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
+    return {
+        columnOrder,
+        setColumnOrder,
+        groupedColumnOrderState,
+        handleDragEnd,
+        sensors,
+    };
+}

package/dist/esm/components/types.d.ts

@@ -30,6 +30,8 @@ export type TableProps<TData extends object, TFilters extends FiltersState = Rec
         state?: SortingState;
         onChange?(state: SortingState): void;
     };
+    /** Включение сортировки порядка столбцов вручную перетаскиванием */
+    enableColumnsOrderSortByDrag?: boolean;
     /** Параметр отвечает за общие настройки раскрывающихся строк*/
     expanding?: {
         /** Метод отвечает за получение дочерних строк*/

package/dist/esm/constants.d.ts

@@ -35,3 +35,4 @@ export declare const SORT_FN: {
     readonly AlphaNumeric: "alphanumeric";
 };
 export declare const DEFAULT_PAGE_SIZE = 10;
+export declare const UNDRAGGABLE_COLUMNS: string[];

package/dist/esm/constants.js

@@ -35,3 +35,4 @@ export const SORT_FN = {
     AlphaNumeric: 'alphanumeric',
 };
 export const DEFAULT_PAGE_SIZE = 10;
+export const UNDRAGGABLE_COLUMNS = ['snack_predefined_statusColumn', 'selectionCell', 'rowActions'];

package/dist/esm/helperComponents/Cells/BodyCell/BodyCell.d.ts

@@ -2,6 +2,7 @@ import { Cell as TableCell } from '@tanstack/react-table';
 import { CellProps } from '../Cell';
 type BodyCellProps<TData> = Omit<CellProps, 'style' | 'children'> & {
     cell: TableCell<TData, unknown>;
+    isDraggable?: boolean;
 };
-export declare function BodyCell<TData>({ cell, className, ...props }: BodyCellProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function BodyCell<TData>({ cell, className, isDraggable, ...props }: BodyCellProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/helperComponents/Cells/BodyCell/BodyCell.js

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useSortable } from '@dnd-kit/sortable';
 import { flexRender } from '@tanstack/react-table';
 import cn from 'classnames';
 import { TEST_IDS } from '../../../constants';
@@ -17,8 +18,11 @@ import { useCellSizes } from '../../hooks';
 import { Cell } from '../Cell';
 import styles from './styles.module.css';
 export function BodyCell(_a) {
-    var { cell, className } = _a, props = __rest(_a, ["cell", "className"]);
+    var { cell, className, isDraggable } = _a, props = __rest(_a, ["cell", "className", "isDraggable"]);
     const columnDef = cell.column.columnDef;
-    const style = useCellSizes(cell);
-    return (_jsx(Cell, Object.assign({}, props, { style: style, className: cn(styles.tableBodyCell, className, columnDef.cellClassName), "data-align": columnDef.align, "data-no-padding": columnDef.noBodyCellPadding || undefined, "data-column-id": cell.column.id, "data-test-id": TEST_IDS.bodyCell, children: flexRender(columnDef.cell, cell.getContext()) })));
+    const style = useCellSizes(cell, { isDraggable });
+    const { setNodeRef } = useSortable({
+        id: cell.column.id,
+    });
+    return (_jsx(Cell, Object.assign({}, props, { ref: setNodeRef, style: style, className: cn(styles.tableBodyCell, className, columnDef.cellClassName), "data-align": columnDef.align, "data-no-padding": columnDef.noBodyCellPadding || undefined, "data-column-id": cell.column.id, "data-test-id": TEST_IDS.bodyCell, children: flexRender(columnDef.cell, cell.getContext()) })));
 }

package/dist/esm/helperComponents/Cells/HeaderCell/DragHandle.d.ts

@@ -0,0 +1,6 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSSProperties } from 'react';
+export type DragHandleProps = Pick<ReturnType<typeof useSortable>, 'attributes' | 'listeners'> & {
+    style?: CSSProperties;
+};
+export declare function DragHandle({ attributes, listeners }: DragHandleProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/Cells/HeaderCell/DragHandle.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { KebabSVG } from '@snack-uikit/icons';
+import styles from './styles.module.css';
+export function DragHandle({ attributes, listeners }) {
+    return (_jsx("div", Object.assign({ className: styles.dragHandle }, attributes, listeners, { children: _jsx(KebabSVG, { className: styles.dragIcon }) })));
+}

package/dist/esm/helperComponents/Cells/HeaderCell/HeaderCell.d.ts

@@ -4,6 +4,7 @@ import { CellProps } from '../Cell';
 type HeaderCellProps<TData> = Omit<CellProps, 'align' | 'children' | 'onClick' | 'style'> & {
     header: Header<TData, unknown>;
     pinPosition?: ColumnPinPosition;
+    isDraggable?: boolean;
 };
-export declare function HeaderCell<TData>({ header, pinPosition, className }: HeaderCellProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function HeaderCell<TData>({ header, pinPosition, isDraggable, className }: HeaderCellProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};