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

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

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

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

@@ -3,10 +3,13 @@ export function getCurrentlyConfiguredHeaderWidth(id) {
     if (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/esm/components/types.d.ts

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

package/dist/esm/constants.d.ts

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

package/dist/esm/constants.js

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSortable } from '@dnd-kit/sortable';
 import { flexRender } from '@tanstack/react-table';
 import cn from 'classnames';
 import { useRef } from 'react';
 import { TruncateString } from '@snack-uikit/truncate-string';
-import { TEST_IDS } from '../../../constants';
+import { TEST_IDS, UNDRAGGABLE_COLUMNS } from '../../../constants';
 import { useCellSizes } from '../../hooks';
 import { Cell } from '../Cell';
+import { DragHandle } from './DragHandle';
 import { getSortingIcon } from './helpers';
 import { ResizeHandle } from './ResizeHandle';
 import styles from './styles.module.css';
-export function HeaderCell({ header, pinPosition, className }) {
+export function HeaderCell({ header, pinPosition, isDraggable, className }) {
     const cellRef = useRef(null);
     const isSortable = header.column.getCanSort();
     const isResizable = header.column.getCanResize();
@@ -19,12 +21,19 @@ export function HeaderCell({ header, pinPosition, className }) {
     const columnSizingInfo = header.getContext().table.getState().columnSizingInfo;
     const isSomeColumnResizing = columnSizingInfo.isResizingColumn;
     const columnDef = header.column.columnDef;
-    const style = useCellSizes(header);
+    const style = useCellSizes(header, { isDraggable });
+    const { attributes, listeners, setNodeRef } = 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);
     };
-    return (_jsxs(Cell, { style: style, onClick: sortingHandler, "data-sortable": isSortable || undefined, "data-no-padding": columnDef.noHeaderCellPadding || undefined, "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined, "data-test-id": TEST_IDS.headerCell, "data-align": columnDef.headerAlign || undefined, "data-header-id": header.id, "data-resizing": isResizing || undefined, "data-pin-position": pinPosition || undefined, role: 'columnheader', className: cn(styles.tableHeaderCell, className, columnDef.headerClassName), ref: cellRef, children: [_jsxs("div", { className: styles.tableHeaderCellMain, children: [columnDef.header && (_jsx("div", { className: styles.tableHeaderCellName, children: _jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) }) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }), Boolean(isResizable) && _jsx(ResizeHandle, { header: header, cellRef: cellRef })] }));
+    const isAvailableForDrag = !UNDRAGGABLE_COLUMNS.includes(header.column.id);
+    return (_jsxs(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": TEST_IDS.headerCell, "data-align": columnDef.headerAlign || undefined, "data-header-id": header.id, "data-resizing": isResizing || undefined, "data-pin-position": pinPosition || undefined, role: 'columnheader', className: cn(styles.tableHeaderCell, className, columnDef.headerClassName), ref: element => {
+            setNodeRef(element);
+            return cellRef;
+        }, children: [_jsxs("div", { className: styles.tableHeaderCellMain, children: [columnDef.header && (_jsx("div", { className: styles.tableHeaderCellName, children: _jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) }) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }), isAvailableForDrag && Boolean(isDraggable) && _jsx(DragHandle, { attributes: attributes, listeners: listeners }), Boolean(isResizable) && _jsx(ResizeHandle, { header: header, cellRef: cellRef })] }));
 }

package/dist/esm/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/esm/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/esm/helperComponents/Rows/BodyRow.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
 import { useState } from 'react';
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
 import { BodyCell } from '../Cells';
@@ -7,8 +8,8 @@ import { useRowCells } from '../hooks';
 import { PinnedCells } from './PinnedCells';
 import { Row } from './Row';
 import styles from './styles.module.css';
-export function BodyRow({ row, onRowClick }) {
-    const { pinnedLeft, pinnedRight, unpinned } = useRowCells(row);
+export function BodyRow({ row, onRowClick, groupedColumnOrderState, enableColumnsOrderSortByDrag, }) {
+    const { leftPinned, rightPinned, unpinned } = useRowCells(row, groupedColumnOrderState);
     const [dropListOpened, setDropListOpen] = useState(false);
     const disabled = !row.getCanSelect();
     const handleRowClick = (e) => {
@@ -23,5 +24,5 @@ export function BodyRow({ row, onRowClick }) {
     };
     return (_jsx(RowContext.Provider, { value: { dropListOpened, setDropListOpen }, children: _jsxs(Row, { onClick: handleRowClick, "data-clickable": Boolean(onRowClick) || undefined, "data-disabled": disabled || undefined, "data-selected": row.getIsSelected() ||
                 (row.getIsSomeSelected() && !row.getCanMultiSelect() && !row.getIsExpanded()) ||
-                undefined, "data-actions-opened": dropListOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, className: styles.bodyRow, children: [pinnedLeft && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: pinnedLeft.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) })), unpinned.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))), pinnedRight && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: pinnedRight.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) }))] }) }));
+                undefined, "data-actions-opened": dropListOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, className: styles.bodyRow, children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(cell => (_jsx(SortableContext, { items: groupedColumnOrderState.leftPinned, strategy: horizontalListSortingStrategy, children: _jsx(BodyCell, { cell: cell, isDraggable: enableColumnsOrderSortByDrag }, cell.id) }, cell.id))) })), unpinned.map(cell => (_jsx(SortableContext, { items: groupedColumnOrderState.unpinned, strategy: horizontalListSortingStrategy, children: _jsx(BodyCell, { cell: cell, isDraggable: enableColumnsOrderSortByDrag }, cell.id) }, cell.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(cell => (_jsx(SortableContext, { items: groupedColumnOrderState.rightPinned, strategy: horizontalListSortingStrategy, children: _jsx(BodyCell, { cell: cell, isDraggable: enableColumnsOrderSortByDrag }, cell.id) }, cell.id))) }))] }) }));
 }

package/dist/esm/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/esm/helperComponents/Rows/HeaderRow.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
 import { HeaderCell } from '../Cells';
 import { useHeaderGroups } from '../hooks';
 import { PinnedCells } from './PinnedCells';
 import { Row } from './Row';
 import styles from './styles.module.css';
-export function HeaderRow() {
-    const { leftPinned, unpinned, rightPinned } = useHeaderGroups();
-    return (_jsxs(Row, { className: styles.tableHeader, "data-test-id": TEST_IDS.headerRow, children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : _jsx(HeaderCell, { header: header }, header.id))) })), unpinned.map(headerGroup => headerGroup.headers.map(header => _jsx(HeaderCell, { header: header }, header.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (_jsx(HeaderCell, { header: header, pinPosition: COLUMN_PIN_POSITION.Right }, header.id)))) }))] }));
+export function HeaderRow({ groupedColumnOrderState, enableColumnsOrderSortByDrag }) {
+    const { leftPinned, unpinned, rightPinned } = useHeaderGroups(groupedColumnOrderState);
+    return (_jsxs(Row, { className: styles.tableHeader, "data-test-id": TEST_IDS.headerRow, children: [leftPinned && (_jsx(SortableContext, { items: groupedColumnOrderState.leftPinned, strategy: horizontalListSortingStrategy, children: _jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (_jsx(HeaderCell, { header: header, isDraggable: enableColumnsOrderSortByDrag && groupedColumnOrderState.leftPinned.length > 1 }, header.id)))) }) })), _jsx(SortableContext, { items: groupedColumnOrderState.unpinned, strategy: horizontalListSortingStrategy, children: unpinned.map(headerGroup => headerGroup.headers.map(header => (_jsx(HeaderCell, { header: header, isDraggable: enableColumnsOrderSortByDrag && groupedColumnOrderState.unpinned.length > 1 }, header.id)))) }), rightPinned && (_jsx(SortableContext, { items: groupedColumnOrderState.rightPinned, strategy: horizontalListSortingStrategy, children: _jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (_jsx(HeaderCell, { header: header, pinPosition: COLUMN_PIN_POSITION.Right, isDraggable: enableColumnsOrderSortByDrag && groupedColumnOrderState.rightPinned.length > 1 }, header.id)))) }) }))] }));
 }

package/dist/esm/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/esm/helperComponents/hooks.js

@@ -1,12 +1,23 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { useMemo } from 'react';
 import { useTableContext } from './contexts';
 function hasHeaders(groups) {
     return groups.some(group => group.headers.length);
 }
-export 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;
+    }) })));
+export function useHeaderGroups(groupedColumnOrderState) {
     const { table } = useTableContext();
     const columnDefs = table._getColumnDefs();
     const pinEnabled = table.getIsSomeColumnsPinned();
+    const { columnOrder } = table.getState();
     return useMemo(() => {
         if (!pinEnabled) {
             return {
@@ -16,18 +27,29 @@ export 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 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;
+    };
 }
-export function useRowCells(row) {
+export function useRowCells(row, groupedColumnOrderState) {
     const { table } = useTableContext();
     const pinEnabled = table.getIsSomeColumnsPinned();
     const columnDefs = table._getColumnDefs();
+    const { columnOrder } = table.getState();
     return useMemo(() => {
         if (!pinEnabled) {
             return {
@@ -37,24 +59,45 @@ export 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]);
 }
-export function useCellSizes(element) {
+export function useCellSizes(element, options) {
     const column = element.column;
+    const { isDragging, transform } = 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 useMemo(() => ({
-        minWidth,
-        width,
-        maxWidth,
-        flexShrink,
-    }), [flexShrink, maxWidth, minWidth, width]);
+    const isHeaderCell = 'headerGroup' in element;
+    return 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 = 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/esm/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/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.29.0",
+  "version": "0.30.1-preview-9a03a1c9.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,6 +36,10 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/modifiers": "9.0.0",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
     "@snack-uikit/button": "0.19.7",
     "@snack-uikit/chips": "0.25.3",
     "@snack-uikit/icon-predefined": "0.7.3",
@@ -61,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "59426d0dd21ec9b22909d8350ca1d988665b4215"
+  "gitHead": "a7e76287bbbbb376afb7bc895cfa1e125751608f"
 }