Merge pull request #711 from gfazioli/improve-column-resizer

✨Enhance column resizing behavior for closed columns

Author: icflorescu

app/examples/column-resizing/ResizingExample.tsx

@@ -14,7 +14,7 @@ export default function ResizingExample() {
   const { effectiveColumns, resetColumnsWidth } = useDataTableColumns<Company>({
     key,
     columns: [
-      { accessor: 'name', width: 100, resizable: true },
+      { accessor: 'name', width: 200, resizable: true },
       { accessor: 'streetAddress', resizable: true },
       { accessor: 'city', ellipsis: true, resizable: true },
       { accessor: 'state', textAlign: 'right' },

package/DataTable.css

@@ -48,6 +48,16 @@
   border: rem(1px) solid var(--mantine-datatable-border-color);
 }
 
+.mantine-datatable-resizable-columns {
+  table-layout: fixed;
+}
+
+.mantine-datatable-resizable-columns th {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .mantine-datatable-table {
   border-collapse: separate;
   border-spacing: 0;

package/DataTable.tsx

@@ -141,6 +141,10 @@ export function DataTable<T>({
     return groups?.flatMap((group) => group.columns) ?? columns!;
   }, [columns, groups]);
 
+  const hasResizableColumns = useMemo(() => {
+    return effectiveColumns.some((col) => col.resizable);
+  }, [effectiveColumns]);
+
   const dragToggle = useDataTableColumns({
     key: storeColumnsKey,
     columns: effectiveColumns,
@@ -335,6 +339,7 @@ export function DataTable<T>({
                   'mantine-datatable-selection-column-visible': selectionColumnVisible,
                   'mantine-datatable-pin-first-column': pinFirstColumn,
                   'mantine-datatable-pin-first-column-scrolled': !scrolledToLeft && pinFirstColumn,
+                  'mantine-datatable-resizable-columns': hasResizableColumns,
                 },
                 classNames?.table
               )}

package/DataTableColumns.context.ts

@@ -22,6 +22,7 @@ interface DataTableColumnsContext {
   resetColumnsToggle: () => void;
 
   setColumnWidth: (accessor: string, width: string | number) => void;
+  setMultipleColumnWidths: (updates: Array<{ accessor: string; width: string | number }>) => void;
   resetColumnsWidth: () => void;
 }
 

package/DataTableDragToggleProvider.tsx

@@ -14,6 +14,7 @@ type DataTableColumnsProviderProps = PropsWithChildren<{
   resetColumnsToggle: () => void;
 
   setColumnWidth: (accessor: string, width: string | number) => void;
+  setMultipleColumnWidths: (updates: Array<{ accessor: string; width: string | number }>) => void;
   resetColumnsWidth: () => void;
 }>;
 
@@ -29,6 +30,7 @@ export const DataTableColumnsProvider = (props: DataTableColumnsProviderProps) =
     resetColumnsToggle,
 
     setColumnWidth,
+    setMultipleColumnWidths,
     resetColumnsWidth,
   } = props;
 
@@ -66,6 +68,7 @@ export const DataTableColumnsProvider = (props: DataTableColumnsProviderProps) =
         resetColumnsToggle,
 
         setColumnWidth,
+        setMultipleColumnWidths,
         resetColumnsWidth,
       }}
     >

package/DataTableHeaderCell.css

@@ -46,33 +46,63 @@
 
 .mantine-datatable-header-resizable-handle {
   position: absolute;
-  cursor: 'col-resize';
+  cursor: col-resize;
   top: 0;
   bottom: 0;
-  width: rem(8px);
-  background: inherit;
-  cursor: col-resize;
-  z-index: 1;
-  transform: translateX(50%);
+  right: -6px; /* Extend further to the right */
+  width: 12px; /* Wider for easier clicking */
+  background: transparent;
+  z-index: 100; /* Higher z-index to ensure it's above other elements */
   opacity: 0;
   transition: opacity 0.2s;
+  
   &::after {
     position: absolute;
     content: '';
-    top: rem(1px);
-    bottom: rem(1px);
-    left: rem(2px);
-    border-right: rem(4px) dotted light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+    top: 2px;
+    bottom: 2px;
+    left: 5px; /* Centered in the wider handle */
+    width: 2px;
+    background: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4));
+    border-radius: 1px;
+    transition: background-color 0.2s;
   }
-  &:hover::after {
-    border-color: var(--mantine-primary-color-6);
+  
+  &:hover {
+    opacity: 1;
+    &::after {
+      background: var(--mantine-primary-color-6);
+    }
+  }
+  
+  &:active {
+    opacity: 1 !important;
+    &::after {
+      background: var(--mantine-primary-color-7);
+    }
   }
 }
 
 tr:hover .mantine-datatable-header-resizable-handle {
   opacity: 1;
 }
 
+/* Ensure resize handle is always visible and accessible for columns with toggleable buttons */
+.mantine-datatable-header-cell-toggleable.mantine-datatable-header-cell-resizable:hover .mantine-datatable-header-resizable-handle {
+  opacity: 1;
+}
+
+/* Enhanced visual feedback during resizing */
+.mantine-datatable-header-cell-resizable:has(.mantine-datatable-header-resizable-handle:active) {
+  background: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-7));
+  transition: background 0.1s;
+}
+
+.mantine-datatable-header-cell-resizable:has(.mantine-datatable-header-resizable-handle:active) + th {
+  background: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-7));
+  transition: background 0.1s;
+}
+
 .mantine-datatable-header-cell-sortable-group {
   gap: 0.25em;
 }

package/DataTableHeaderCell.tsx

@@ -125,6 +125,7 @@ export function DataTableHeaderCell<T>({
 
   return (
     <TableTh
+      data-accessor={accessor}
       className={clsx(
         {
           'mantine-datatable-header-cell-sortable': sortable,
@@ -231,7 +232,9 @@ export function DataTableHeaderCell<T>({
           </DataTableHeaderCellFilter>
         ) : null}
       </Group>
-      {resizable ? <DataTableResizableHeaderHandle accessor={accessor as string} columnRef={columnRef} /> : null}
+      {resizable && accessor !== '__selection__' ? (
+        <DataTableResizableHeaderHandle accessor={accessor as string} columnRef={columnRef} />
+      ) : null}
     </TableTh>
   );
 }

package/DataTableHeaderSelectorCell.css

@@ -1,8 +1,12 @@
 .mantine-datatable-header-selector-cell {
   position: sticky;
   z-index: 1;
-  width: 0;
+  width: 44px;
+  min-width: 44px;
+  max-width: 44px;
   left: 0;
+  text-align: center;
+  padding: var(--mantine-spacing-xs);
   &::after {
     content: '';
     position: absolute;

package/DataTableHeaderSelectorCell.tsx

@@ -42,6 +42,7 @@ export function DataTableHeaderSelectorCell({
       style={style}
       rowSpan={rowSpan}
       data-shadow-visible={shadowVisible || undefined}
+      data-accessor="__selection__"
       onClick={trigger === 'cell' && enabled ? onChange : undefined}
     >
       <Checkbox