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

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,
@@ -256,9 +264,11 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const columnSizeVarsRef = useRef<Record<string, string>>();
   const headers = table.getFlatHeaders();
 
-  const columnSizeVars = useMemo(() => {
+  const columnSizes = useMemo(() => {
     const originalColumnDefs = table._getColumnDefs();
-    const colSizes: Record<string, string> = {};
+    const vars: Record<string, string> = {};
+    const realSizes: Record<string, number> = {};
+    const resizedColumnIndex = headers.findIndex(({ column }) => column.getIsResizing());
 
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
@@ -267,8 +277,8 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
       const originalColDef = originalColumnDefs.find(col => getColumnId(header) === col.id);
 
       if (header.id === 'snack_predefined_statusColumn' && !originalColDef?.header && !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?.size;
         let initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
@@ -289,12 +299,9 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
           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 => ({ ...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`;
           }
         }
@@ -303,12 +310,12 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
           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
@@ -321,8 +328,12 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
 
   useEffect(() => {
-    columnSizeVarsRef.current = columnSizeVars;
-  }, [columnSizeVars]);
+    if (Object.keys(columnSizes.realSizes).length) {
+      table.setColumnSizing(old => ({ ...old, ...columnSizes.realSizes }));
+    }
+
+    columnSizeVarsRef.current = columnSizes.vars;
+  }, [columnSizes, table]);
 
   const tableRows = table.getRowModel().rows;
   const tableCenterRows = table.getCenterRows();
@@ -359,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={columnSizeVars}>
-              <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';

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

@@ -0,0 +1,100 @@
+import { DragEndEvent, 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';
+import { ColumnDefinition, GroupedColumnOrderState } from '../../../types';
+
+type PinnedColumnsMap = Record<string, keyof GroupedColumnOrderState>;
+
+function preparePinnedColumnsMap<TData extends object>(tableColumns: ColumnDefinition<TData>[]): PinnedColumnsMap {
+  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;
+  }, {} as PinnedColumnsMap);
+}
+
+function prepareInitialState<TData extends object>(tableColumns: ColumnDefinition<TData>[]) {
+  return tableColumns.map(c => c.id as string).filter(id => !UNDRAGGABLE_COLUMNS.includes(id));
+}
+
+function prepareGroupedColumnOrderState(
+  columnOrder: string[],
+  pinnedColumnsMap: PinnedColumnsMap,
+): GroupedColumnOrderState {
+  return columnOrder.reduce(
+    (accState: GroupedColumnOrderState, columnId) => {
+      if (UNDRAGGABLE_COLUMNS.includes(columnId)) {
+        return accState;
+      }
+
+      const groupName = pinnedColumnsMap[columnId] ?? 'unpinned';
+
+      accState[groupName].push(columnId);
+
+      return accState;
+    },
+    {
+      leftPinned: [],
+      unpinned: [],
+      rightPinned: [],
+    },
+  );
+}
+
+export function useColumnOrderByDrag<TData extends object>(tableColumns: ColumnDefinition<TData>[]) {
+  const [columnOrder, setColumnOrder] = useState<string[]>(() => prepareInitialState(tableColumns));
+
+  const pinnedColumnsMap = useMemo(() => preparePinnedColumnsMap(tableColumns), [tableColumns]);
+
+  const groupedColumnOrderState = useMemo(
+    () => prepareGroupedColumnOrderState(columnOrder, pinnedColumnsMap),
+    [columnOrder, pinnedColumnsMap],
+  );
+
+  const handleDragEnd = useCallback(
+    ({ active, over }: DragEndEvent) => {
+      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/src/components/Table/utils.ts

@@ -7,10 +7,15 @@ export function getCurrentlyConfiguredHeaderWidth(id: string): number {
       '[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;
     }
   }
 

package/src/components/types.ts

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

package/src/constants.tsx

@@ -39,3 +39,5 @@ export const SORT_FN = {
 } as const;
 
 export const DEFAULT_PAGE_SIZE = 10;
+
+export const UNDRAGGABLE_COLUMNS = ['snack_predefined_statusColumn', 'selectionCell', 'rowActions'];

package/src/helperComponents/Cells/BodyCell/BodyCell.tsx

@@ -1,3 +1,4 @@
+import { useSortable } from '@dnd-kit/sortable';
 import { Cell as TableCell, flexRender } from '@tanstack/react-table';
 import cn from 'classnames';
 
@@ -9,16 +10,22 @@ import styles from './styles.module.scss';
 
 type BodyCellProps<TData> = Omit<CellProps, 'style' | 'children'> & {
   cell: TableCell<TData, unknown>;
+  isDraggable?: boolean;
 };
 
-export function BodyCell<TData>({ cell, className, ...props }: BodyCellProps<TData>) {
+export function BodyCell<TData>({ cell, className, isDraggable, ...props }: BodyCellProps<TData>) {
   const columnDef: ColumnDefinition<TData> = cell.column.columnDef;
 
-  const style = useCellSizes(cell);
+  const style = useCellSizes(cell, { isDraggable });
+
+  const { setNodeRef } = useSortable({
+    id: cell.column.id,
+  });
 
   return (
     <Cell
       {...props}
+      ref={setNodeRef}
       style={style}
       className={cn(styles.tableBodyCell, className, columnDef.cellClassName)}
       data-align={columnDef.align}

package/src/helperComponents/Cells/HeaderCell/DragHandle.tsx

@@ -0,0 +1,18 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSSProperties } from 'react';
+
+import { KebabSVG } from '@snack-uikit/icons';
+
+import styles from './styles.module.scss';
+
+export type DragHandleProps = Pick<ReturnType<typeof useSortable>, 'attributes' | 'listeners'> & {
+  style?: CSSProperties;
+};
+
+export function DragHandle({ attributes, listeners }: DragHandleProps) {
+  return (
+    <div className={styles.dragHandle} {...attributes} {...listeners}>
+      <KebabSVG className={styles.dragIcon} />
+    </div>
+  );
+}

package/src/helperComponents/Cells/HeaderCell/HeaderCell.tsx

@@ -1,13 +1,15 @@
+import { useSortable } from '@dnd-kit/sortable';
 import { flexRender, Header } from '@tanstack/react-table';
 import cn from 'classnames';
 import { MouseEvent, useRef } from 'react';
 
 import { TruncateString } from '@snack-uikit/truncate-string';
 
-import { TEST_IDS } from '../../../constants';
+import { TEST_IDS, UNDRAGGABLE_COLUMNS } from '../../../constants';
 import { ColumnDefinition, ColumnPinPosition } from '../../../types';
 import { useCellSizes } from '../../hooks';
 import { Cell, CellProps } from '../Cell';
+import { DragHandle } from './DragHandle';
 import { getSortingIcon } from './helpers';
 import { ResizeHandle } from './ResizeHandle';
 import styles from './styles.module.scss';
@@ -15,9 +17,10 @@ import styles from './styles.module.scss';
 type HeaderCellProps<TData> = Omit<CellProps, 'align' | 'children' | 'onClick' | 'style'> & {
   header: Header<TData, unknown>;
   pinPosition?: ColumnPinPosition;
+  isDraggable?: boolean;
 };
 
-export function HeaderCell<TData>({ header, pinPosition, className }: HeaderCellProps<TData>) {
+export function HeaderCell<TData>({ header, pinPosition, isDraggable, className }: HeaderCellProps<TData>) {
   const cellRef = useRef<HTMLDivElement>(null);
   const isSortable = header.column.getCanSort();
   const isResizable = header.column.getCanResize();
@@ -31,7 +34,11 @@ export function HeaderCell<TData>({ header, pinPosition, className }: HeaderCell
 
   const columnDef: ColumnDefinition<TData> = header.column.columnDef;
 
-  const style = useCellSizes(header);
+  const style = useCellSizes(header, { isDraggable });
+
+  const { attributes, listeners, setNodeRef } = useSortable({
+    id: header.column.id,
+  });
 
   const sortingHandler = (e: MouseEvent<HTMLDivElement>) => {
     if (isSomeColumnResizing) return;
@@ -39,11 +46,14 @@ export function HeaderCell<TData>({ header, pinPosition, className }: HeaderCell
     return header.column.getToggleSortingHandler()?.(e);
   };
 
+  const isAvailableForDrag = !UNDRAGGABLE_COLUMNS.includes(header.column.id);
+
   return (
     <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}
@@ -53,7 +63,10 @@ export function HeaderCell<TData>({ header, pinPosition, className }: HeaderCell
       data-pin-position={pinPosition || undefined}
       role='columnheader'
       className={cn(styles.tableHeaderCell, className, columnDef.headerClassName)}
-      ref={cellRef}
+      ref={element => {
+        setNodeRef(element);
+        return cellRef;
+      }}
     >
       <div className={styles.tableHeaderCellMain}>
         {columnDef.header && (
@@ -73,6 +86,8 @@ export function HeaderCell<TData>({ header, pinPosition, className }: HeaderCell
         )}
       </div>
 
+      {isAvailableForDrag && Boolean(isDraggable) && <DragHandle attributes={attributes} listeners={listeners} />}
+
       {Boolean(isResizable) && <ResizeHandle header={header} cellRef={cellRef} />}
     </Cell>
   );

package/src/helperComponents/Cells/HeaderCell/styles.module.scss

@@ -58,7 +58,7 @@
     left: 0;
     transform: translateX(-50%);
 
-    width: calc(100% + styles-tokens-table.$dimension-4m);
+    width: calc(100% + #{styles-tokens-table.$dimension-4m});
     height: 100%;
   }
 }
@@ -86,7 +86,7 @@
     left: 50%;
     transform: translateX(-50%);
 
-    width: calc(100% - styles-tokens-table.$space-table-head-separator-padding * 2);
+    width: calc(100% - #{styles-tokens-table.$space-table-head-separator-padding} * 2);
     height: styles-tokens-table.$border-width-table;
 
     background-color: styles-tokens-table.$sys-neutral-decor-default;
@@ -106,7 +106,7 @@
     &::after {
       left: 0;
       transform: none;
-      width: calc(100% - styles-tokens-table.$space-table-head-separator-padding);
+      width: calc(100% - #{styles-tokens-table.$space-table-head-separator-padding});
     }
   }
 
@@ -136,7 +136,7 @@
       }
 
       .tableHeaderResizeIndicator {
-        right: calc(styles-tokens-table.$dimension-1m / 2);
+        right: calc(#{styles-tokens-table.$dimension-1m} / 2);
       }
     }
   }
@@ -173,3 +173,14 @@
     height: styles-tokens-table.simple-var(styles-tokens-element.$icon-xs) !important; /* stylelint-disable-line declaration-no-important */
   }
 }
+
+.dragHandle {
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
+}
+
+.dragIcon {
+  color: styles-tokens-table.simple-var(styles-tokens-table.$sys-neutral-text-light);
+}