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

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/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

@@ -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);
+}

package/src/helperComponents/Rows/BodyRow.tsx

@@ -1,7 +1,9 @@
+import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
 import { Row as TableRow } from '@tanstack/react-table';
 import { MouseEvent, useState } from 'react';
 
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
+import { GroupedColumnOrderState } from '../../types';
 import { BodyCell } from '../Cells';
 import { RowContext } from '../contexts';
 import { useRowCells } from '../hooks';
@@ -21,10 +23,17 @@ export type RowClickHandler<TData> = (e: MouseEvent<HTMLDivElement>, row: RowInf
 export type BodyRowProps<TData> = {
   row: TableRow<TData>;
   onRowClick?: RowClickHandler<TData>;
+  groupedColumnOrderState: GroupedColumnOrderState;
+  enableColumnsOrderSortByDrag?: boolean;
 };
 
-export function BodyRow<TData>({ row, onRowClick }: BodyRowProps<TData>) {
-  const { pinnedLeft, pinnedRight, unpinned } = useRowCells(row);
+export function BodyRow<TData>({
+  row,
+  onRowClick,
+  groupedColumnOrderState,
+  enableColumnsOrderSortByDrag,
+}: BodyRowProps<TData>) {
+  const { leftPinned, rightPinned, unpinned } = useRowCells(row, groupedColumnOrderState);
 
   const [dropListOpened, setDropListOpen] = useState(false);
 
@@ -57,22 +66,40 @@ export function BodyRow<TData>({ row, onRowClick }: BodyRowProps<TData>) {
         data-row-id={row.id}
         className={styles.bodyRow}
       >
-        {pinnedLeft && (
+        {leftPinned && (
           <PinnedCells position={COLUMN_PIN_POSITION.Left}>
-            {pinnedLeft.map(cell => (
-              <BodyCell key={cell.id} cell={cell} />
+            {leftPinned.map(cell => (
+              <SortableContext
+                key={cell.id}
+                items={groupedColumnOrderState.leftPinned}
+                strategy={horizontalListSortingStrategy}
+              >
+                <BodyCell key={cell.id} cell={cell} isDraggable={enableColumnsOrderSortByDrag} />
+              </SortableContext>
             ))}
           </PinnedCells>
         )}
 
         {unpinned.map(cell => (
-          <BodyCell key={cell.id} cell={cell} />
+          <SortableContext
+            key={cell.id}
+            items={groupedColumnOrderState.unpinned}
+            strategy={horizontalListSortingStrategy}
+          >
+            <BodyCell key={cell.id} cell={cell} isDraggable={enableColumnsOrderSortByDrag} />
+          </SortableContext>
         ))}
 
-        {pinnedRight && (
+        {rightPinned && (
           <PinnedCells position={COLUMN_PIN_POSITION.Right}>
-            {pinnedRight.map(cell => (
-              <BodyCell key={cell.id} cell={cell} />
+            {rightPinned.map(cell => (
+              <SortableContext
+                key={cell.id}
+                items={groupedColumnOrderState.rightPinned}
+                strategy={horizontalListSortingStrategy}
+              >
+                <BodyCell key={cell.id} cell={cell} isDraggable={enableColumnsOrderSortByDrag} />
+              </SortableContext>
             ))}
           </PinnedCells>
         )}

package/src/helperComponents/Rows/HeaderRow.tsx

@@ -1,37 +1,70 @@
+import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
+
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
+import { GroupedColumnOrderState } from '../../types';
 import { HeaderCell } from '../Cells';
 import { useHeaderGroups } from '../hooks';
 import { PinnedCells } from './PinnedCells';
 import { Row } from './Row';
 import styles from './styles.module.scss';
 
-export function HeaderRow() {
-  const { leftPinned, unpinned, rightPinned } = useHeaderGroups();
+type Props = {
+  groupedColumnOrderState: GroupedColumnOrderState;
+  enableColumnsOrderSortByDrag?: boolean;
+};
+
+export function HeaderRow({ groupedColumnOrderState, enableColumnsOrderSortByDrag }: Props) {
+  const { leftPinned, unpinned, rightPinned } = useHeaderGroups(groupedColumnOrderState);
 
   return (
     <Row className={styles.tableHeader} data-test-id={TEST_IDS.headerRow}>
       {leftPinned && (
-        <PinnedCells position={COLUMN_PIN_POSITION.Left}>
-          {leftPinned.map(headerGroup =>
-            headerGroup.headers.map(header =>
-              header.isPlaceholder ? null : <HeaderCell key={header.id} header={header} />,
-            ),
-          )}
-        </PinnedCells>
+        <SortableContext items={groupedColumnOrderState.leftPinned} strategy={horizontalListSortingStrategy}>
+          <PinnedCells position={COLUMN_PIN_POSITION.Left}>
+            {leftPinned.map(headerGroup =>
+              headerGroup.headers.map(header =>
+                header.isPlaceholder ? null : (
+                  <HeaderCell
+                    key={header.id}
+                    header={header}
+                    isDraggable={enableColumnsOrderSortByDrag && groupedColumnOrderState.leftPinned.length > 1}
+                  />
+                ),
+              ),
+            )}
+          </PinnedCells>
+        </SortableContext>
       )}
 
-      {unpinned.map(headerGroup => headerGroup.headers.map(header => <HeaderCell key={header.id} header={header} />))}
+      <SortableContext items={groupedColumnOrderState.unpinned} strategy={horizontalListSortingStrategy}>
+        {unpinned.map(headerGroup =>
+          headerGroup.headers.map(header => (
+            <HeaderCell
+              key={header.id}
+              header={header}
+              isDraggable={enableColumnsOrderSortByDrag && groupedColumnOrderState.unpinned.length > 1}
+            />
+          )),
+        )}
+      </SortableContext>
 
       {rightPinned && (
-        <PinnedCells position={COLUMN_PIN_POSITION.Right}>
-          {rightPinned.map(headerGroup =>
-            headerGroup.headers.map(header =>
-              header.isPlaceholder ? null : (
-                <HeaderCell key={header.id} header={header} pinPosition={COLUMN_PIN_POSITION.Right} />
+        <SortableContext items={groupedColumnOrderState.rightPinned} strategy={horizontalListSortingStrategy}>
+          <PinnedCells position={COLUMN_PIN_POSITION.Right}>
+            {rightPinned.map(headerGroup =>
+              headerGroup.headers.map(header =>
+                header.isPlaceholder ? null : (
+                  <HeaderCell
+                    key={header.id}
+                    header={header}
+                    pinPosition={COLUMN_PIN_POSITION.Right}
+                    isDraggable={enableColumnsOrderSortByDrag && groupedColumnOrderState.rightPinned.length > 1}
+                  />
+                ),
               ),
-            ),
-          )}
-        </PinnedCells>
+            )}
+          </PinnedCells>
+        </SortableContext>
       )}
     </Row>
   );

package/src/helperComponents/hooks.ts

@@ -1,17 +1,36 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { Cell, Header, HeaderGroup, Row } from '@tanstack/react-table';
-import { useMemo } from 'react';
+import { CSSProperties, useMemo } from 'react';
 
+import { GroupedColumnOrderState } from '../types';
 import { useTableContext } from './contexts';
 
 function hasHeaders<TData>(groups: HeaderGroup<TData>[]) {
   return groups.some(group => group.headers.length);
 }
 
-export function useHeaderGroups() {
+const sortHeaderGroup = (groups: HeaderGroup<unknown>[], groupOrder: string[]) =>
+  groups.map(group => ({
+    ...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: GroupedColumnOrderState) {
   const { table } = useTableContext();
 
   const columnDefs = table._getColumnDefs();
   const pinEnabled = table.getIsSomeColumnsPinned();
+  const { columnOrder } = table.getState();
 
   return useMemo(() => {
     if (!pinEnabled) {
@@ -24,20 +43,34 @@ export function useHeaderGroups() {
     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<TData>(groupOrder: string[]) {
+  return (a: Cell<TData, unknown>, b: Cell<TData, unknown>) => {
+    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<TData>(row: Row<TData>) {
+export function useRowCells<TData>(row: Row<TData>, groupedColumnOrderState: GroupedColumnOrderState) {
   const { table } = useTableContext();
 
   const pinEnabled = table.getIsSomeColumnsPinned();
   const columnDefs = table._getColumnDefs();
+  const { columnOrder } = table.getState();
 
   return useMemo(() => {
     if (!pinEnabled) {
@@ -50,30 +83,60 @@ export function useRowCells<TData>(row: Row<TData>) {
     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<TData>(element: Cell<TData, unknown> | Header<TData, unknown>) {
+type CellSizesOptions = {
+  isDraggable?: boolean;
+};
+
+export function useCellSizes<TData>(
+  element: Cell<TData, unknown> | Header<TData, unknown>,
+  options?: CellSizesOptions,
+) {
   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(
-    () => ({
+  const isHeaderCell = 'headerGroup' in element;
+
+  return useMemo(() => {
+    const styles: CSSProperties = {
       minWidth,
       width,
       maxWidth,
       flexShrink,
-    }),
-    [flexShrink, maxWidth, minWidth, width],
-  );
+    };
+
+    if (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?.isDraggable, flexShrink, isDragging, isHeaderCell, maxWidth, minWidth, transform, width]);
 }

package/src/types.ts

@@ -66,6 +66,12 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
 
 export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData>;
 
+export type GroupedColumnOrderState = {
+  leftPinned: string[];
+  rightPinned: string[];
+  unpinned: string[];
+};
+
 export type {
   RowActionsColumnDefProps,
   StatusColumnDefinitionProps,