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

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.30.0 (2025-02-26)
+
+
+### Features
+
+* **PDS-1487:** freeze columns size on resize ([f5f5694](https://github.com/cloud-ru-tech/snack-uikit/commit/f5f56948a5e0ba42f071a66e2de225465f67e980))
+
+
+
+
+
 # 0.29.0 (2025-02-25)
 
 

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,
@@ -229,10 +241,17 @@ function Table(_a) {
   }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table, enableSelectPinned]);
   const columnSizeVarsRef = (0, react_1.useRef)();
   const headers = table.getFlatHeaders();
-  const columnSizeVars = (0, react_1.useMemo)(() => {
+  const columnSizes = (0, react_1.useMemo)(() => {
     var _a;
     const originalColumnDefs = table._getColumnDefs();
-    const colSizes = {};
+    const vars = {};
+    const realSizes = {};
+    const resizedColumnIndex = headers.findIndex(_ref => {
+      let {
+        column
+      } = _ref;
+      return column.getIsResizing();
+    });
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
       const {
@@ -241,8 +260,8 @@ function Table(_a) {
       } = (0, utils_3.getColumnStyleVars)(header.id);
       const originalColDef = originalColumnDefs.find(col => (0, helperComponents_1.getColumnId)(header) === col.id);
       if (header.id === 'snack_predefined_statusColumn' && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.header) && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.enableSorting)) {
-        colSizes[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
-        colSizes[flexKey] = '100%';
+        vars[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
+        vars[flexKey] = '100%';
       } else {
         const originalColumnDefSize = originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.size;
         let initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
@@ -261,12 +280,9 @@ function Table(_a) {
         if (header.column.getCanResize()) {
           const currentSize = header.getSize();
           const colDefSize = header.column.columnDef.size;
-          size = currentSize === colDefSize ? initSize : `${currentSize}px`;
-          if (prevSize === '100%' && currentSize !== colDefSize) {
-            const realSize = (0, utils_3.getCurrentlyConfiguredHeaderWidth)(header.id);
-            table.setColumnSizing(old => Object.assign(Object.assign({}, old), {
-              [header.id]: realSize
-            }));
+          if (currentSize !== colDefSize || i < resizedColumnIndex && prevSize === '100%') {
+            const realSize = prevSize === '100%' ? (0, utils_3.getCurrentlyConfiguredHeaderWidth)(header.id) : currentSize;
+            realSizes[header.id] = realSize;
             size = `${realSize}px`;
           }
         }
@@ -277,11 +293,14 @@ function Table(_a) {
             size
           });
         }
-        colSizes[sizeKey] = size;
-        colSizes[flexKey] = size === '100%' ? 'unset' : '0';
+        vars[sizeKey] = size;
+        vars[flexKey] = size === '100%' ? 'unset' : '0';
       }
     }
-    return colSizes;
+    return {
+      vars,
+      realSizes
+    };
     /*
       effect must be called only on columnSizingInfo.isResizingColumn changes
       to reduce unnecessary recalculations
@@ -291,8 +310,11 @@ function Table(_a) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
   (0, react_1.useEffect)(() => {
-    columnSizeVarsRef.current = columnSizeVars;
-  }, [columnSizeVars]);
+    if (Object.keys(columnSizes.realSizes).length) {
+      table.setColumnSizing(old => Object.assign(Object.assign({}, old), columnSizes.realSizes));
+    }
+    columnSizeVarsRef.current = columnSizes.vars;
+  }, [columnSizes, table]);
   const tableRows = table.getRowModel().rows;
   const tableCenterRows = table.getCenterRows();
   const tableFilteredRows = table.getFilteredRowModel().rows;
@@ -325,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: columnSizeVars,
-            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,
+                    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
-                  }, 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
-                })]
+                    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/Table/utils.js

@@ -12,12 +12,15 @@ function getCurrentlyConfiguredHeaderWidth(id) {
   if ((0, utils_1.isBrowser)()) {
     const cell = document.querySelector(`[data-header-id="${id}"]`);
     const resizeHandler = cell === null || cell === void 0 ? void 0 : cell.querySelector('[data-test-id="table__header-cell-resize-handle-moving-part"]');
-    if (cell && resizeHandler) {
+    if (cell) {
       const {
         width
       } = cell.getBoundingClientRect();
-      const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
-      return width + offset;
+      if (resizeHandler) {
+        const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
+        return width + offset;
+      }
+      return width;
     }
   }
   return 0;

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 {};