⚡️ Refactor column resize logic to align the width and reset

Author: gfazioli

app/examples/column-resizing/ResizingComplexExample.tsx

@@ -34,8 +34,8 @@ export default function ResizingComplexExample() {
   const { effectiveColumns, resetColumnsWidth, resetColumnsOrder, resetColumnsToggle } = useDataTableColumns<Company>({
     key,
     columns: [
-      { accessor: 'name', ...props },
-      { accessor: 'streetAddress', ...props },
+      { accessor: 'name', ellipsis: true, ...props },
+      { accessor: 'streetAddress', ellipsis: true, ...props },
       { accessor: 'city', ellipsis: true, ...props },
       { accessor: 'state', textAlign: 'right', ...props },
     ],

package/DataTable.css

@@ -39,7 +39,7 @@
 
   --mantine-datatable-header-height: 0;
   --mantine-datatable-footer-height: 0;
-  --mantine-datatable-selection-column-width: 0;
+  --mantine-datatable-selection-column-width: 44px;
   --mantine-datatable-top-shadow-opacity: 0;
   --mantine-datatable-left-shadow-opacity: 0;
   --mantine-datatable-bottom-shadow-opacity: 0;
@@ -70,6 +70,31 @@
   white-space: nowrap;
 }
 
+/* Selection column should always have fixed width */
+.mantine-datatable th[data-accessor="__selection__"],
+.mantine-datatable td[data-accessor="__selection__"] {
+  width: 44px !important;
+  min-width: 44px !important;
+  max-width: 44px !important;
+}
+
+/* When not using fixed layout, allow natural table sizing */
+.mantine-datatable:not(.mantine-datatable-resizable-columns) th {
+  white-space: nowrap;
+  /* Allow natural width calculation */
+  width: auto;
+  min-width: auto;
+  max-width: none;
+}
+
+/* But selection column should still be fixed even in auto layout */
+.mantine-datatable:not(.mantine-datatable-resizable-columns) th[data-accessor="__selection__"],
+.mantine-datatable:not(.mantine-datatable-resizable-columns) td[data-accessor="__selection__"] {
+  width: 44px !important;
+  min-width: 44px !important;
+  max-width: 44px !important;
+}
+
 .mantine-datatable-table {
   border-collapse: separate;
   border-spacing: 0;

package/DataTable.tsx

@@ -1,7 +1,7 @@
 import { Box, Table, type MantineSize } from '@mantine/core';
 import { useMergedRef } from '@mantine/hooks';
 import clsx from 'clsx';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { DataTableColumnsProvider } from './DataTableDragToggleProvider';
 import { DataTableEmptyRow } from './DataTableEmptyRow';
 import { DataTableEmptyState } from './DataTableEmptyState';
@@ -134,19 +134,9 @@ export function DataTable<T>({
     return groups?.flatMap((group) => group.columns) ?? columns!;
   }, [columns, groups]);
 
-  const hasResizableColumns = useMemo(() => {
-    return effectiveColumns.some((col) => col.resizable);
-  }, [effectiveColumns]);
-
   // When columns are resizable, start with auto layout to let the browser
   // compute natural widths, then capture them and switch to fixed layout.
   const [fixedLayoutEnabled, setFixedLayoutEnabled] = useState(false);
-  const prevHasResizableRef = useRef<boolean | null>(null);
-
-  const dragToggle = useDataTableColumns({
-    key: storeColumnsKey,
-    columns: effectiveColumns,
-  });
 
   const { refs, onScroll: handleScrollPositionChange } = useDataTableInjectCssVariables({
     scrollCallbacks: {
@@ -159,124 +149,19 @@ export function DataTable<T>({
     withRowBorders: otherProps.withRowBorders,
   });
 
+  const dragToggle = useDataTableColumns({
+    key: storeColumnsKey,
+    columns: effectiveColumns,
+    headerRef: refs.header as any,
+    scrollViewportRef: refs.scrollViewport as any,
+    onFixedLayoutChange: setFixedLayoutEnabled,
+  });
+
   const mergedTableRef = useMergedRef(refs.table, tableRef);
   const mergedViewportRef = useMergedRef(refs.scrollViewport, scrollViewportRef);
 
   const rowExpansionInfo = useRowExpansion<T>({ rowExpansion, records, idAccessor });
 
-  // Initialize content-based widths when resizable columns are present.
-  useEffect(() => {
-    // If resizable just became disabled, revert to auto layout
-    if (!hasResizableColumns) {
-      prevHasResizableRef.current = false;
-      setFixedLayoutEnabled(false);
-      return;
-    }
-
-    // Only run when switching from non-resizable -> resizable
-    if (prevHasResizableRef.current === true) return;
-    prevHasResizableRef.current = true;
-
-    let raf = requestAnimationFrame(() => {
-      const thead = refs.header.current;
-      if (!thead) {
-        setFixedLayoutEnabled(true);
-        return;
-      }
-
-      const headerCells = Array.from(thead.querySelectorAll<HTMLTableCellElement>('th[data-accessor]'));
-
-      if (headerCells.length === 0) {
-        setFixedLayoutEnabled(true);
-        return;
-      }
-
-      let measured = headerCells
-        .map((cell) => {
-          const accessor = cell.getAttribute('data-accessor');
-          if (!accessor || accessor === '__selection__') return null;
-          const width = Math.round(cell.getBoundingClientRect().width);
-          return { accessor, width } as const;
-        })
-        .filter(Boolean) as Array<{ accessor: string; width: number }>;
-
-      const viewport = refs.scrollViewport.current;
-      const viewportWidth = viewport?.clientWidth ?? 0;
-      if (viewportWidth && measured.length) {
-        const total = measured.reduce((acc, u) => acc + u.width, 0);
-        const overflow = total - viewportWidth;
-        if (overflow > 0) {
-          const last = measured[measured.length - 1];
-          last.width = Math.max(50, last.width - overflow);
-        }
-      }
-
-      const updates = measured.map((m) => ({ accessor: m.accessor, width: `${m.width}px` }));
-
-      setTimeout(() => {
-        if (updates.length) dragToggle.setMultipleColumnWidths(updates);
-        setFixedLayoutEnabled(true);
-      }, 0);
-    });
-
-    return () => cancelAnimationFrame(raf);
-  }, [hasResizableColumns]);
-
-  // If user resets widths to 'initial', recompute widths and re-enable fixed layout.
-  const allResizableWidthsInitial = useMemo(() => {
-    if (!hasResizableColumns) return false;
-    return effectiveColumns
-      .filter((c) => c.resizable && !c.hidden && c.accessor !== '__selection__')
-      .every((c) => c.width === undefined || c.width === '' || c.width === 'initial');
-  }, [effectiveColumns, hasResizableColumns]);
-
-  useEffect(() => {
-    if (!hasResizableColumns) return;
-    if (!allResizableWidthsInitial) return;
-
-    // Temporarily disable fixed layout so natural widths can be measured
-    setFixedLayoutEnabled(false);
-
-    let raf = requestAnimationFrame(() => {
-      const thead = refs.header.current;
-      if (!thead) {
-        setFixedLayoutEnabled(true);
-        return;
-      }
-
-      const headerCells = Array.from(thead.querySelectorAll<HTMLTableCellElement>('th[data-accessor]'));
-
-      let measured = headerCells
-        .map((cell) => {
-          const accessor = cell.getAttribute('data-accessor');
-          if (!accessor || accessor === '__selection__') return null;
-          const width = Math.round(cell.getBoundingClientRect().width);
-          return { accessor, width } as const;
-        })
-        .filter(Boolean) as Array<{ accessor: string; width: number }>;
-
-      const viewport = refs.scrollViewport.current;
-      const viewportWidth = viewport?.clientWidth ?? 0;
-      if (viewportWidth && measured.length) {
-        const total = measured.reduce((acc, u) => acc + u.width, 0);
-        const overflow = total - viewportWidth;
-        if (overflow > 0) {
-          const last = measured[measured.length - 1];
-          last.width = Math.max(50, last.width - overflow);
-        }
-      }
-
-      const updates = measured.map((m) => ({ accessor: m.accessor, width: `${m.width}px` }));
-
-      setTimeout(() => {
-        if (updates.length) dragToggle.setMultipleColumnWidths(updates);
-        setFixedLayoutEnabled(true);
-      }, 0);
-    });
-
-    return () => cancelAnimationFrame(raf);
-  }, [hasResizableColumns, allResizableWidthsInitial, refs.header, dragToggle]);
-
   const handlePageChange = useCallback(
     (page: number) => {
       refs.scrollViewport.current?.scrollTo({ top: 0, left: 0 });
@@ -385,7 +270,7 @@ export function DataTable<T>({
                   'mantine-datatable-pin-last-column': pinLastColumn,
                   'mantine-datatable-selection-column-visible': selectionColumnVisible,
                   'mantine-datatable-pin-first-column': pinFirstColumn,
-                  'mantine-datatable-resizable-columns': fixedLayoutEnabled,
+                  'mantine-datatable-resizable-columns': dragToggle.hasResizableColumns && fixedLayoutEnabled,
                 },
                 classNames?.table
               )}

package/DataTableHeaderCell.tsx

@@ -137,7 +137,7 @@ export function DataTableHeaderCell<T>({
       style={[
         {
           width,
-          ...(!resizable ? { minWidth: width, maxWidth: width } : { minWidth: '1px' }),
+          ...(!resizable ? { minWidth: width, maxWidth: width } : {}),
         },
         style,
       ]}

package/DataTableResizableHeaderHandle.tsx

@@ -87,7 +87,7 @@ export const DataTableResizableHeaderHandle = (props: DataTableResizableHeaderHa
         currentCol.style.width = `${finalCurrentWidth}px`;
         nextCol.style.width = `${finalNextWidth}px`;
 
-        // Force the table layout to recalculate
+        // Ensure the table maintains fixed layout during resize
         currentCol.style.minWidth = `${finalCurrentWidth}px`;
         currentCol.style.maxWidth = `${finalCurrentWidth}px`;
         nextCol.style.minWidth = `${finalNextWidth}px`;
@@ -141,7 +141,7 @@ export const DataTableResizableHeaderHandle = (props: DataTableResizableHeaderHa
       document.addEventListener('mousemove', handleMouseMove);
       document.addEventListener('mouseup', handleMouseUp);
     },
-    [accessor, setMultipleColumnWidths]
+    [accessor, columnRef, setMultipleColumnWidths]
   );
 
   const handleDoubleClick = useCallback(() => {
@@ -150,30 +150,29 @@ export const DataTableResizableHeaderHandle = (props: DataTableResizableHeaderHa
     const currentColumn = columnRef.current;
     const nextColumn = currentColumn.nextElementSibling as HTMLTableCellElement | null;
 
-    // Reset styles immediately
+    // Clear any inline styles that might interfere with natural sizing
     currentColumn.style.width = '';
     currentColumn.style.minWidth = '';
     currentColumn.style.maxWidth = '';
 
-    const updates = [{ accessor, width: 'initial' }];
+    // Reset current column to auto width
+    const updates = [{ accessor, width: 'auto' }];
 
     if (nextColumn) {
       nextColumn.style.width = '';
       nextColumn.style.minWidth = '';
       nextColumn.style.maxWidth = '';
 
       const nextAccessor = nextColumn.getAttribute('data-accessor');
-      // Only add to updates if it's not the selection column
+      // Only reset next column if it's not the selection column
       if (nextAccessor && nextAccessor !== '__selection__') {
-        updates.push({ accessor: nextAccessor, width: 'initial' });
+        updates.push({ accessor: nextAccessor, width: 'auto' });
       }
     }
 
-    // Use setTimeout to ensure DOM changes are applied before context update
-    setTimeout(() => {
-      setMultipleColumnWidths(updates);
-    }, 0);
-  }, [accessor, setMultipleColumnWidths]);
+    // Update context - this will trigger re-measurement of natural widths
+    setMultipleColumnWidths(updates);
+  }, [accessor, columnRef, setMultipleColumnWidths]);
 
   return (
     <div

package/hooks/index.ts

@@ -1,5 +1,8 @@
 export * from './useColumnResize';
+export * from './useDataTableColumnReorder';
+export * from './useDataTableColumnResize';
 export * from './useDataTableColumns';
+export * from './useDataTableColumnToggle';
 export * from './useDataTableInjectCssVariables';
 export * from './useIsomorphicLayoutEffect';
 export * from './useLastSelectionChangeIndex';

package/hooks/useDataTableColumnReorder.ts

@@ -0,0 +1,89 @@
+import { useLocalStorage } from '@mantine/hooks';
+import type { DataTableColumn } from '../types/DataTableColumn';
+
+/**
+ * Hook to handle column reordering with localStorage persistence.
+ * @see https://icflorescu.github.io/mantine-datatable/examples/column-dragging-and-toggling/
+ */
+export function useDataTableColumnReorder<T>({
+  key,
+  columns = [],
+  getInitialValueInEffect = true,
+}: {
+  /**
+   * The key to use in localStorage to store the columns order.
+   */
+  key: string | undefined;
+  /**
+   * Columns definitions.
+   */
+  columns: DataTableColumn<T>[];
+  /**
+   * If set to true, value will be updated in useEffect after mount.
+   * @default true
+   */
+  getInitialValueInEffect?: boolean;
+}) {
+  // Align order with current columns definition
+  function alignColumnsOrder<T>(columnsOrder: string[], columns: DataTableColumn<T>[]) {
+    const updatedColumnsOrder: string[] = [];
+
+    // Keep existing order for columns that still exist
+    columnsOrder.forEach((col) => {
+      if (columns.find((c) => c.accessor === col)) {
+        updatedColumnsOrder.push(col);
+      }
+    });
+
+    // Add new columns to the end
+    columns.forEach((col) => {
+      if (!updatedColumnsOrder.includes(col.accessor as string)) {
+        updatedColumnsOrder.push(col.accessor as string);
+      }
+    });
+
+    return updatedColumnsOrder;
+  }
+
+  // Default columns order is the order of the columns in the array
+  const defaultColumnsOrder = (columns && columns.map((column) => column.accessor)) || [];
+
+  const [columnsOrder, _setColumnsOrder] = useLocalStorage<string[]>({
+    key: key ? `${key}-columns-order` : '',
+    defaultValue: key ? (defaultColumnsOrder as string[]) : undefined,
+    getInitialValueInEffect,
+  });
+
+  function setColumnsOrder(order: string[] | ((prev: string[]) => string[])) {
+    if (key) {
+      _setColumnsOrder(order);
+    }
+  }
+
+  const resetColumnsOrder = () => {
+    setColumnsOrder(defaultColumnsOrder as string[]);
+  };
+
+  // If no key is provided, return unmanaged state
+  if (!key) {
+    return {
+      columnsOrder: columnsOrder as string[],
+      setColumnsOrder,
+      resetColumnsOrder,
+    } as const;
+  }
+
+  // Align order with current columns
+  const alignedColumnsOrder = alignColumnsOrder(columnsOrder, columns);
+  const prevColumnsOrder = JSON.stringify(columnsOrder);
+
+  if (JSON.stringify(alignedColumnsOrder) !== prevColumnsOrder) {
+    setColumnsOrder(alignedColumnsOrder);
+  }
+
+  return {
+    columnsOrder: alignedColumnsOrder,
+    setColumnsOrder,
+    resetColumnsOrder,
+  } as const;
+}