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

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;

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,
@@ -155,17 +160,19 @@ export function Table(_a) {
     }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table, enableSelectPinned]);
     const columnSizeVarsRef = useRef();
     const headers = table.getFlatHeaders();
-    const columnSizeVars = useMemo(() => {
+    const columnSizes = useMemo(() => {
         var _a;
         const originalColumnDefs = table._getColumnDefs();
-        const colSizes = {};
+        const vars = {};
+        const realSizes = {};
+        const resizedColumnIndex = headers.findIndex(({ column }) => column.getIsResizing());
         for (let i = 0; i < headers.length; i++) {
             const header = headers[i];
             const { sizeKey, flexKey } = getColumnStyleVars(header.id);
             const originalColDef = originalColumnDefs.find(col => 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;
@@ -182,21 +189,20 @@ export 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 = 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%' ? getCurrentlyConfiguredHeaderWidth(header.id) : currentSize;
+                        realSizes[header.id] = realSize;
                         size = `${realSize}px`;
                     }
                 }
                 if (isResizeSavedToStore) {
                     saveStateToLocalStorage({ id: savedState.id, columnId: header.id, 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
@@ -208,8 +214,11 @@ export function Table(_a) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
     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;
@@ -236,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: columnSizeVars, 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>[];
+};