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

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.30.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": "afb93f86dbab6039f4c267a9d0e85350b59053c5"
+  "gitHead": "a7e76287bbbbb376afb7bc895cfa1e125751608f"
 }

package/src/components/Table/Table.tsx

@@ -1,3 +1,5 @@
+import { closestCenter, DndContext } from '@dnd-kit/core';
+import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
 import {
   CellContext,
   ColumnPinningState,
@@ -43,7 +45,7 @@ import { getTreeColumnDef } from '../../helperComponents/Cells/TreeCell';
 import { ColumnDefinition } from '../../types';
 import { fuzzyFilter } from '../../utils';
 import { TableProps } from '../types';
-import { useLoadingTable, useStateControl } from './hooks';
+import { useColumnOrderByDrag, useLoadingTable, useStateControl } from './hooks';
 import { usePageReset } from './hooks/usePageReset';
 import styles from './styles.module.scss';
 import {
@@ -97,6 +99,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   savedState,
   expanding,
   bulkActions: bulkActionsProp,
+  enableColumnsOrderSortByDrag,
   ...rest
 }: TableProps<TData, TFilters>) {
   const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl<string>(search, '');
@@ -130,6 +133,9 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     return cols;
   }, [columnDefinitions, enableSelection, enableSelectPinned, expanding]);
 
+  const { columnOrder, setColumnOrder, groupedColumnOrderState, sensors, handleDragEnd } =
+    useColumnOrderByDrag(tableColumns);
+
   const columnPinning = useMemo(() => {
     const pinningState: Required<ColumnPinningState> = { left: [], right: [] };
     for (const col of tableColumns) {
@@ -160,6 +166,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     columns: tableColumns,
     state: {
       columnPinning,
+      columnOrder,
       globalFilter,
       rowSelection,
       sorting,
@@ -173,6 +180,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
       minSize: 40,
       cell: (cell: CellContext<TData, unknown>) => <TruncateString text={String(cell.getValue())} maxLines={1} />,
     },
+    onColumnOrderChange: setColumnOrder,
 
     manualSorting,
     manualPagination,
@@ -362,110 +370,133 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const showToolbar = !suppressToolbar;
 
   return (
-    <CellAutoResizeContext.Provider value={{ updateCellMap }}>
-      <div
-        style={{
-          '--page-size': cssPageSize,
-        }}
-        className={cn(styles.wrapper, className)}
-        {...extractSupportProps(rest)}
-      >
-        {showToolbar && (
-          <div className={styles.header}>
-            <Toolbar
-              search={
-                suppressSearch
-                  ? undefined
-                  : {
-                      value: globalFilter,
-                      onChange: onGlobalFilterChange,
-                      loading: search?.loading,
-                      placeholder: search?.placeholder || t('searchPlaceholder'),
-                    }
-              }
-              className={styles.toolbar}
-              onRefresh={onRefresh ? handleOnRefresh : undefined}
-              bulkActions={bulkActions}
-              selectionMode={rowSelectionProp?.multiRow ? 'multiple' : 'single'}
-              checked={table.getIsAllPageRowsSelected()}
-              indeterminate={table.getIsSomePageRowsSelected()}
-              onCheck={enableSelection ? handleOnToolbarCheck : undefined}
-              outline={outline}
-              after={
-                toolbarAfter || exportSettings ? (
-                  <>
-                    {toolbarAfter}
-                    {exportSettings && (
-                      <ExportButton
-                        settings={exportSettings}
-                        columnDefinitions={columnDefinitions}
-                        data={data}
-                        topRows={filteredTopRows}
-                        centerRows={centerRows}
+    <DndContext
+      collisionDetection={closestCenter}
+      modifiers={[restrictToHorizontalAxis]}
+      onDragEnd={handleDragEnd}
+      sensors={sensors}
+    >
+      <CellAutoResizeContext.Provider value={{ updateCellMap }}>
+        <div
+          style={{
+            '--page-size': cssPageSize,
+          }}
+          className={cn(styles.wrapper, className)}
+          {...extractSupportProps(rest)}
+        >
+          {showToolbar && (
+            <div className={styles.header}>
+              <Toolbar
+                search={
+                  suppressSearch
+                    ? undefined
+                    : {
+                        value: globalFilter,
+                        onChange: onGlobalFilterChange,
+                        loading: search?.loading,
+                        placeholder: search?.placeholder || t('searchPlaceholder'),
+                      }
+                }
+                className={styles.toolbar}
+                onRefresh={onRefresh ? handleOnRefresh : undefined}
+                bulkActions={bulkActions}
+                selectionMode={rowSelectionProp?.multiRow ? 'multiple' : 'single'}
+                checked={table.getIsAllPageRowsSelected()}
+                indeterminate={table.getIsSomePageRowsSelected()}
+                onCheck={enableSelection ? handleOnToolbarCheck : undefined}
+                outline={outline}
+                after={
+                  toolbarAfter || exportSettings ? (
+                    <>
+                      {toolbarAfter}
+                      {exportSettings && (
+                        <ExportButton
+                          settings={exportSettings}
+                          columnDefinitions={columnDefinitions}
+                          data={data}
+                          topRows={filteredTopRows}
+                          centerRows={centerRows}
+                        />
+                      )}
+                    </>
+                  ) : undefined
+                }
+                moreActions={moreActions}
+                filterRow={columnFilters}
+                data-test-id={TEST_IDS.toolbar}
+              />
+            </div>
+          )}
+
+          <div className={styles.scrollWrapper} data-outline={outline || undefined}>
+            <Scroll size='s' className={styles.table} ref={scrollContainerRef}>
+              <div className={styles.tableContent} style={columnSizes.vars}>
+                <TableContext.Provider value={{ table }}>
+                  {loading ? (
+                    <SkeletonContextProvider loading>
+                      <HeaderRow groupedColumnOrderState={groupedColumnOrderState} />
+                      {loadingTableRows.map(row => (
+                        <BodyRow key={row.id} row={row} groupedColumnOrderState={groupedColumnOrderState} />
+                      ))}
+                    </SkeletonContextProvider>
+                  ) : (
+                    <>
+                      {centerRows.length || filteredTopRows.length ? (
+                        <HeaderRow
+                          groupedColumnOrderState={groupedColumnOrderState}
+                          enableColumnsOrderSortByDrag={enableColumnsOrderSortByDrag}
+                        />
+                      ) : null}
+
+                      {filteredTopRows.length ? (
+                        <div className={styles.topRowWrapper}>
+                          {filteredTopRows.map(row => (
+                            <BodyRow
+                              key={row.id}
+                              row={row}
+                              onRowClick={onRowClick}
+                              groupedColumnOrderState={groupedColumnOrderState}
+                            />
+                          ))}
+                        </div>
+                      ) : null}
+
+                      {centerRows.map(row => (
+                        <BodyRow
+                          key={row.id}
+                          row={row}
+                          onRowClick={onRowClick}
+                          groupedColumnOrderState={groupedColumnOrderState}
+                          enableColumnsOrderSortByDrag={enableColumnsOrderSortByDrag}
+                        />
+                      ))}
+
+                      <TableEmptyState
+                        emptyStates={emptyStates}
+                        dataError={dataError}
+                        dataFiltered={dataFiltered || Boolean(table.getState().globalFilter)}
+                        tableRowsLength={tableRows.length + filteredTopRows.length}
                       />
-                    )}
-                  </>
-                ) : undefined
-              }
-              moreActions={moreActions}
-              filterRow={columnFilters}
-              data-test-id={TEST_IDS.toolbar}
-            />
+                    </>
+                  )}
+                </TableContext.Provider>
+              </div>
+              <div className={styles.scrollStub} ref={scrollRef as RefObject<HTMLDivElement>} />
+            </Scroll>
           </div>
-        )}
-
-        <div className={styles.scrollWrapper} data-outline={outline || undefined}>
-          <Scroll size='s' className={styles.table} ref={scrollContainerRef}>
-            <div className={styles.tableContent} style={columnSizes.vars}>
-              <TableContext.Provider value={{ table }}>
-                {loading ? (
-                  <SkeletonContextProvider loading>
-                    <HeaderRow />
-                    {loadingTableRows.map(row => (
-                      <BodyRow key={row.id} row={row} />
-                    ))}
-                  </SkeletonContextProvider>
-                ) : (
-                  <>
-                    {centerRows.length || filteredTopRows.length ? <HeaderRow /> : null}
-
-                    {filteredTopRows.length ? (
-                      <div className={styles.topRowWrapper}>
-                        {filteredTopRows.map(row => (
-                          <BodyRow key={row.id} row={row} onRowClick={onRowClick} />
-                        ))}
-                      </div>
-                    ) : null}
-
-                    {centerRows.map(row => (
-                      <BodyRow key={row.id} row={row} onRowClick={onRowClick} />
-                    ))}
-
-                    <TableEmptyState
-                      emptyStates={emptyStates}
-                      dataError={dataError}
-                      dataFiltered={dataFiltered || Boolean(table.getState().globalFilter)}
-                      tableRowsLength={tableRows.length + filteredTopRows.length}
-                    />
-                  </>
-                )}
-              </TableContext.Provider>
-            </div>
-            <div className={styles.scrollStub} ref={scrollRef as RefObject<HTMLDivElement>} />
-          </Scroll>
-        </div>
 
-        {!suppressPagination && (
-          <TablePagination
-            table={table}
-            options={paginationProp?.options}
-            optionsLabel={paginationProp?.optionsLabel}
-            pageCount={pageCount}
-            optionsRender={paginationProp?.optionsRender}
-          />
-        )}
-      </div>
-    </CellAutoResizeContext.Provider>
+          {!suppressPagination && (
+            <TablePagination
+              table={table}
+              options={paginationProp?.options}
+              optionsLabel={paginationProp?.optionsLabel}
+              pageCount={pageCount}
+              optionsRender={paginationProp?.optionsRender}
+            />
+          )}
+        </div>
+      </CellAutoResizeContext.Provider>
+    </DndContext>
   );
 }
 

package/src/components/Table/hooks/index.ts

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