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

package/README.md

@@ -115,6 +115,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | copyPinnedRows | `boolean` | - | Параметр отвечает за сохранение закрепленных строк в теле таблицы |
 | enableSelectPinned | `boolean` | - | Параметр отвечает за чекбокс выбора закрепленных строк |
 | sorting | `{ initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; }` | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br> <strong>initialState</strong>: Начальное состояние сортировки <br> <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br> <strong>onChange</strong>: Колбэк на изменение сортировки |
+| enableColumnsOrderSortByDrag | `boolean` | - | Включение сортировки порядка столбцов вручную перетаскиванием |
 | expanding | `{ getSubRows: (element: TData) => TData[]; expandingColumnDefinition: TreeColumnDefinitionProps<TData>; }` | - | Параметр отвечает за общие настройки раскрывающихся строк |
 | rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
 | search | `{ initialState?: string; state?: string; placeholder?: string; loading?: boolean; onChange?(value: string): void; }` | 'Search'<br> <strong>loading</strong>: Состояние загрузки в строке поиска <br> <strong>onChange</strong>: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице <br> <strong>initialState</strong>: Начальное состояние строки поиска <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>placeholder</strong>: Placeholder строки поиска |
@@ -180,6 +181,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | copyPinnedRows | `boolean` | false | Параметр отвечает за сохранение закрепленных строк в теле таблицы |
 | enableSelectPinned | `boolean` | - | Параметр отвечает за чекбокс выбора закрепленных строк |
 | sorting | `{ initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; }` | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br> <strong>initialState</strong>: Начальное состояние сортировки <br> <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br> <strong>onChange</strong>: Колбэк на изменение сортировки |
+| enableColumnsOrderSortByDrag | `boolean` | - | Включение сортировки порядка столбцов вручную перетаскиванием |
 | expanding | `{ getSubRows: (element: TData) => TData[]; expandingColumnDefinition: TreeColumnDefinitionProps<TData>; }` | - | Параметр отвечает за общие настройки раскрывающихся строк |
 | rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
 | enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |

package/dist/cjs/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/cjs/components/Table/Table.js

@@ -18,6 +18,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Table = Table;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@dnd-kit/core");
+const modifiers_1 = require("@dnd-kit/modifiers");
 const react_table_1 = require("@tanstack/react-table");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
@@ -80,9 +82,10 @@ function Table(_a) {
       enableFuzzySearch,
       savedState,
       expanding,
-      bulkActions: bulkActionsProp
+      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"]);
+    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
@@ -114,6 +117,13 @@ function Table(_a) {
     }
     return cols;
   }, [columnDefinitions, enableSelection, enableSelectPinned, expanding]);
+  const {
+    columnOrder,
+    setColumnOrder,
+    groupedColumnOrderState,
+    sensors,
+    handleDragEnd
+  } = (0, hooks_1.useColumnOrderByDrag)(tableColumns);
   const columnPinning = (0, react_1.useMemo)(() => {
     var _a;
     const pinningState = {
@@ -142,6 +152,7 @@ function Table(_a) {
     columns: tableColumns,
     state: {
       columnPinning,
+      columnOrder,
       globalFilter,
       rowSelection,
       sorting,
@@ -160,6 +171,7 @@ function Table(_a) {
         maxLines: 1
       })
     },
+    onColumnOrderChange: setColumnOrder,
     manualSorting,
     manualPagination,
     manualFiltering,
@@ -335,96 +347,111 @@ function Table(_a) {
     updateCellMap
   } = (0, contexts_1.useCellAutoResizeController)(table);
   const showToolbar = !suppressToolbar;
-  return (0, jsx_runtime_1.jsx)(contexts_1.CellAutoResizeContext.Provider, {
-    value: {
-      updateCellMap
-    },
-    children: (0, jsx_runtime_1.jsxs)("div", Object.assign({
-      style: {
-        '--page-size': cssPageSize
+  return (0, jsx_runtime_1.jsx)(core_1.DndContext, {
+    collisionDetection: core_1.closestCenter,
+    modifiers: [modifiers_1.restrictToHorizontalAxis],
+    onDragEnd: handleDragEnd,
+    sensors: sensors,
+    children: (0, jsx_runtime_1.jsx)(contexts_1.CellAutoResizeContext.Provider, {
+      value: {
+        updateCellMap
       },
-      className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className)
-    }, (0, utils_1.extractSupportProps)(rest), {
-      children: [showToolbar && (0, jsx_runtime_1.jsx)("div", {
-        className: styles_module_scss_1.default.header,
-        children: (0, jsx_runtime_1.jsx)(toolbar_1.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_module_scss_1.default.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 ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-            children: [toolbarAfter, exportSettings && (0, jsx_runtime_1.jsx)(helperComponents_1.ExportButton, {
-              settings: exportSettings,
-              columnDefinitions: columnDefinitions,
-              data: data,
-              topRows: filteredTopRows,
-              centerRows: centerRows
-            })]
-          }) : undefined,
-          moreActions: moreActions,
-          filterRow: columnFilters,
-          "data-test-id": constants_1.TEST_IDS.toolbar
-        })
-      }), (0, jsx_runtime_1.jsx)("div", {
-        className: styles_module_scss_1.default.scrollWrapper,
-        "data-outline": outline || undefined,
-        children: (0, jsx_runtime_1.jsxs)(scroll_1.Scroll, {
-          size: 's',
-          className: styles_module_scss_1.default.table,
-          ref: scrollContainerRef,
-          children: [(0, jsx_runtime_1.jsx)("div", {
-            className: styles_module_scss_1.default.tableContent,
-            style: columnSizes.vars,
-            children: (0, jsx_runtime_1.jsx)(helperComponents_1.TableContext.Provider, {
-              value: {
-                table
-              },
-              children: loading ? (0, jsx_runtime_1.jsxs)(skeleton_1.SkeletonContextProvider, {
-                loading: true,
-                children: [(0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {}), loadingTableRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
-                  row: row
-                }, row.id))]
-              }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-                children: [centerRows.length || filteredTopRows.length ? (0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {}) : null, filteredTopRows.length ? (0, jsx_runtime_1.jsx)("div", {
-                  className: styles_module_scss_1.default.topRowWrapper,
-                  children: filteredTopRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+      children: (0, jsx_runtime_1.jsxs)("div", Object.assign({
+        style: {
+          '--page-size': cssPageSize
+        },
+        className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className)
+      }, (0, utils_1.extractSupportProps)(rest), {
+        children: [showToolbar && (0, jsx_runtime_1.jsx)("div", {
+          className: styles_module_scss_1.default.header,
+          children: (0, jsx_runtime_1.jsx)(toolbar_1.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_module_scss_1.default.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 ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+              children: [toolbarAfter, exportSettings && (0, jsx_runtime_1.jsx)(helperComponents_1.ExportButton, {
+                settings: exportSettings,
+                columnDefinitions: columnDefinitions,
+                data: data,
+                topRows: filteredTopRows,
+                centerRows: centerRows
+              })]
+            }) : undefined,
+            moreActions: moreActions,
+            filterRow: columnFilters,
+            "data-test-id": constants_1.TEST_IDS.toolbar
+          })
+        }), (0, jsx_runtime_1.jsx)("div", {
+          className: styles_module_scss_1.default.scrollWrapper,
+          "data-outline": outline || undefined,
+          children: (0, jsx_runtime_1.jsxs)(scroll_1.Scroll, {
+            size: 's',
+            className: styles_module_scss_1.default.table,
+            ref: scrollContainerRef,
+            children: [(0, jsx_runtime_1.jsx)("div", {
+              className: styles_module_scss_1.default.tableContent,
+              style: columnSizes.vars,
+              children: (0, jsx_runtime_1.jsx)(helperComponents_1.TableContext.Provider, {
+                value: {
+                  table
+                },
+                children: loading ? (0, jsx_runtime_1.jsxs)(skeleton_1.SkeletonContextProvider, {
+                  loading: true,
+                  children: [(0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {
+                    groupedColumnOrderState: groupedColumnOrderState
+                  }), loadingTableRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
                     row: row,
-                    onRowClick: onRowClick
-                  }, row.id))
-                }) : null, centerRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
-                  row: row,
-                  onRowClick: onRowClick
-                }, row.id)), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, {
-                  emptyStates: emptyStates,
-                  dataError: dataError,
-                  dataFiltered: dataFiltered || Boolean(table.getState().globalFilter),
-                  tableRowsLength: tableRows.length + filteredTopRows.length
-                })]
+                    groupedColumnOrderState: groupedColumnOrderState
+                  }, row.id))]
+                }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+                  children: [centerRows.length || filteredTopRows.length ? (0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {
+                    groupedColumnOrderState: groupedColumnOrderState,
+                    enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag
+                  }) : null, filteredTopRows.length ? (0, jsx_runtime_1.jsx)("div", {
+                    className: styles_module_scss_1.default.topRowWrapper,
+                    children: filteredTopRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                      row: row,
+                      onRowClick: onRowClick,
+                      groupedColumnOrderState: groupedColumnOrderState
+                    }, row.id))
+                  }) : null, centerRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                    row: row,
+                    onRowClick: onRowClick,
+                    groupedColumnOrderState: groupedColumnOrderState,
+                    enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag
+                  }, row.id)), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, {
+                    emptyStates: emptyStates,
+                    dataError: dataError,
+                    dataFiltered: dataFiltered || Boolean(table.getState().globalFilter),
+                    tableRowsLength: tableRows.length + filteredTopRows.length
+                  })]
+                })
               })
-            })
-          }), (0, jsx_runtime_1.jsx)("div", {
-            className: styles_module_scss_1.default.scrollStub,
-            ref: scrollRef
-          })]
-        })
-      }), !suppressPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.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
-      })]
-    }))
+            }), (0, jsx_runtime_1.jsx)("div", {
+              className: styles_module_scss_1.default.scrollStub,
+              ref: scrollRef
+            })]
+          })
+        }), !suppressPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.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 = helperComponents_1.getStatusColumnDef;

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

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

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

@@ -23,4 +23,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 __exportStar(require("./useLoadingTable"), exports);
-__exportStar(require("./useStateControl"), exports);
+__exportStar(require("./useStateControl"), exports);
+__exportStar(require("./useColumnOrderByDrag"), exports);

package/dist/cjs/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/cjs/components/Table/hooks/useColumnOrderByDrag.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColumnOrderByDrag = useColumnOrderByDrag;
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const react_1 = require("react");
+const constants_1 = require("../../../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 => !constants_1.UNDRAGGABLE_COLUMNS.includes(id));
+}
+function prepareGroupedColumnOrderState(columnOrder, pinnedColumnsMap) {
+  return columnOrder.reduce((accState, columnId) => {
+    var _a;
+    if (constants_1.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: []
+  });
+}
+function useColumnOrderByDrag(tableColumns) {
+  const [columnOrder, setColumnOrder] = (0, react_1.useState)(() => prepareInitialState(tableColumns));
+  const pinnedColumnsMap = (0, react_1.useMemo)(() => preparePinnedColumnsMap(tableColumns), [tableColumns]);
+  const groupedColumnOrderState = (0, react_1.useMemo)(() => prepareGroupedColumnOrderState(columnOrder, pinnedColumnsMap), [columnOrder, pinnedColumnsMap]);
+  const handleDragEnd = (0, react_1.useCallback)(_ref => {
+    let {
+      active,
+      over
+    } = _ref;
+    if (active && over && active.id !== over.id) {
+      if (constants_1.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 (0, sortable_1.arrayMove)(columnOrder, oldIndex, newIndex);
+      });
+    }
+  }, [pinnedColumnsMap]);
+  const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.MouseSensor, {}), (0, core_1.useSensor)(core_1.TouchSensor, {}), (0, core_1.useSensor)(core_1.KeyboardSensor, {}));
+  return {
+    columnOrder,
+    setColumnOrder,
+    groupedColumnOrderState,
+    handleDragEnd,
+    sensors
+  };
+}

package/dist/cjs/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/cjs/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/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_PAGE_SIZE = exports.SORT_FN = exports.TEST_IDS = exports.COLUMN_ALIGN = exports.COLUMN_PIN_POSITION = void 0;
+exports.UNDRAGGABLE_COLUMNS = exports.DEFAULT_PAGE_SIZE = exports.SORT_FN = exports.TEST_IDS = exports.COLUMN_ALIGN = exports.COLUMN_PIN_POSITION = void 0;
 exports.COLUMN_PIN_POSITION = {
   Left: 'left',
   Right: 'right'
@@ -40,4 +40,5 @@ exports.SORT_FN = {
   DateTime: 'datetime',
   AlphaNumeric: 'alphanumeric'
 };
-exports.DEFAULT_PAGE_SIZE = 10;
+exports.DEFAULT_PAGE_SIZE = 10;
+exports.UNDRAGGABLE_COLUMNS = ['snack_predefined_statusColumn', 'selectionCell', 'rowActions'];

package/dist/cjs/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/cjs/helperComponents/Cells/BodyCell/BodyCell.js

@@ -18,6 +18,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BodyCell = BodyCell;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const sortable_1 = require("@dnd-kit/sortable");
 const react_table_1 = require("@tanstack/react-table");
 const classnames_1 = __importDefault(require("classnames"));
 const constants_1 = require("../../../constants");
@@ -27,12 +28,21 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function BodyCell(_a) {
   var {
       cell,
-      className
+      className,
+      isDraggable
     } = _a,
-    props = __rest(_a, ["cell", "className"]);
+    props = __rest(_a, ["cell", "className", "isDraggable"]);
   const columnDef = cell.column.columnDef;
-  const style = (0, hooks_1.useCellSizes)(cell);
+  const style = (0, hooks_1.useCellSizes)(cell, {
+    isDraggable
+  });
+  const {
+    setNodeRef
+  } = (0, sortable_1.useSortable)({
+    id: cell.column.id
+  });
   return (0, jsx_runtime_1.jsx)(Cell_1.Cell, Object.assign({}, props, {
+    ref: setNodeRef,
     style: style,
     className: (0, classnames_1.default)(styles_module_scss_1.default.tableBodyCell, className, columnDef.cellClassName),
     "data-align": columnDef.align,

package/dist/cjs/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/cjs/helperComponents/Cells/HeaderCell/DragHandle.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragHandle = DragHandle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@snack-uikit/icons");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function DragHandle(_ref) {
+  let {
+    attributes,
+    listeners
+  } = _ref;
+  return (0, jsx_runtime_1.jsx)("div", Object.assign({
+    className: styles_module_scss_1.default.dragHandle
+  }, attributes, listeners, {
+    children: (0, jsx_runtime_1.jsx)(icons_1.KebabSVG, {
+      className: styles_module_scss_1.default.dragIcon
+    })
+  }));
+}

package/dist/cjs/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 {};

package/dist/cjs/helperComponents/Cells/HeaderCell/HeaderCell.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.HeaderCell = HeaderCell;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const sortable_1 = require("@dnd-kit/sortable");
 const react_table_1 = require("@tanstack/react-table");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
@@ -17,6 +18,7 @@ const truncate_string_1 = require("@snack-uikit/truncate-string");
 const constants_1 = require("../../../constants");
 const hooks_1 = require("../../hooks");
 const Cell_1 = require("../Cell");
+const DragHandle_1 = require("./DragHandle");
 const helpers_1 = require("./helpers");
 const ResizeHandle_1 = require("./ResizeHandle");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
@@ -24,6 +26,7 @@ function HeaderCell(_ref) {
   let {
     header,
     pinPosition,
+    isDraggable,
     className
   } = _ref;
   const cellRef = (0, react_1.useRef)(null);
@@ -35,16 +38,27 @@ function HeaderCell(_ref) {
   const columnSizingInfo = header.getContext().table.getState().columnSizingInfo;
   const isSomeColumnResizing = columnSizingInfo.isResizingColumn;
   const columnDef = header.column.columnDef;
-  const style = (0, hooks_1.useCellSizes)(header);
+  const style = (0, hooks_1.useCellSizes)(header, {
+    isDraggable
+  });
+  const {
+    attributes,
+    listeners,
+    setNodeRef
+  } = (0, sortable_1.useSortable)({
+    id: header.column.id
+  });
   const sortingHandler = e => {
     var _a;
     if (isSomeColumnResizing) return;
     return (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
   };
+  const isAvailableForDrag = !constants_1.UNDRAGGABLE_COLUMNS.includes(header.column.id);
   return (0, jsx_runtime_1.jsxs)(Cell_1.Cell, {
     style: style,
     onClick: sortingHandler,
     "data-sortable": isSortable || undefined,
+    "data-draggable": isDraggable || undefined,
     "data-no-padding": columnDef.noHeaderCellPadding || undefined,
     "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined,
     "data-test-id": constants_1.TEST_IDS.headerCell,
@@ -54,7 +68,10 @@ function HeaderCell(_ref) {
     "data-pin-position": pinPosition || undefined,
     role: 'columnheader',
     className: (0, classnames_1.default)(styles_module_scss_1.default.tableHeaderCell, className, columnDef.headerClassName),
-    ref: cellRef,
+    ref: element => {
+      setNodeRef(element);
+      return cellRef;
+    },
     children: [(0, jsx_runtime_1.jsxs)("div", {
       className: styles_module_scss_1.default.tableHeaderCellMain,
       children: [columnDef.header && (0, jsx_runtime_1.jsx)("div", {
@@ -68,6 +85,9 @@ function HeaderCell(_ref) {
         "data-test-id": constants_1.TEST_IDS.headerSortIndicator,
         children: sortIcon
       })]
+    }), isAvailableForDrag && Boolean(isDraggable) && (0, jsx_runtime_1.jsx)(DragHandle_1.DragHandle, {
+      attributes: attributes,
+      listeners: listeners
     }), Boolean(isResizable) && (0, jsx_runtime_1.jsx)(ResizeHandle_1.ResizeHandle, {
       header: header,
       cellRef: cellRef

package/dist/cjs/helperComponents/Cells/HeaderCell/styles.module.css

@@ -129,4 +129,15 @@
 .tableHeaderIcon svg{
   width:var(--size-icon-container-xs, 16px) !important;
   height:var(--size-icon-container-xs, 16px) !important;
+}
+
+.dragHandle{
+  cursor:pointer;
+  display:flex;
+  flex-direction:row;
+  gap:2px;
+}
+
+.dragIcon{
+  color:var(--sys-neutral-text-light, #8b8e9b);
 }

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

@@ -1,5 +1,6 @@
 import { Row as TableRow } from '@tanstack/react-table';
 import { MouseEvent } from 'react';
+import { GroupedColumnOrderState } from '../../types';
 export type RowInfo<TData> = {
     id: string;
     data: TData;
@@ -10,5 +11,7 @@ export type RowClickHandler<TData> = (e: MouseEvent<HTMLDivElement>, row: RowInf
 export type BodyRowProps<TData> = {
     row: TableRow<TData>;
     onRowClick?: RowClickHandler<TData>;
+    groupedColumnOrderState: GroupedColumnOrderState;
+    enableColumnsOrderSortByDrag?: boolean;
 };
-export declare function BodyRow<TData>({ row, onRowClick }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function BodyRow<TData>({ row, onRowClick, groupedColumnOrderState, enableColumnsOrderSortByDrag, }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;