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

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/Rows/styles.module.scss

@@ -42,8 +42,8 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
     content: '';
 
     position: absolute;
-    top: calc(0px - styles-tokens-table.$border-width-table);
-    bottom: calc(0px - styles-tokens-table.$border-width-table);
+    top: calc(0px - #{styles-tokens-table.$border-width-table});
+    bottom: calc(0px - #{styles-tokens-table.$border-width-table});
 
     box-sizing: border-box;
     width: styles-tokens-table.$border-width-table;

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,