Merge pull request #749 from gfazioli/improve-auto-resize

Improve auto resize

Author: icflorescu

.github/copilot-instructions.md

@@ -0,0 +1,127 @@
+# Mantine DataTable - Copilot Instructions
+
+This is a dual-purpose repository containing both the **Mantine DataTable** component package and its documentation website. Understanding this hybrid architecture is crucial for effective development.
+
+## Project Architecture
+
+### Dual Repository Structure
+- **Package code**: `package/` - The actual DataTable component exported to npm
+- **Documentation site**: `app/`, `components/` - Next.js app with examples and docs
+- **Build outputs**: Package builds to `dist/`, docs build for GitHub Pages deployment
+
+### Package Development Flow
+```bash
+# Core development commands (use pnpm, not yarn despite legacy docs)
+pnpm dev              # Start Next.js dev server for docs/examples
+pnpm build:package    # Build package only (tsup + postcss)
+pnpm build:docs       # Build documentation site
+pnpm build            # Build both package and docs
+pnpm lint             # ESLint + TypeScript checks
+```
+
+### Component Architecture Pattern
+The DataTable follows a **composition-based architecture** with specialized sub-components:
+
+```typescript
+// Main component in package/DataTable.tsx
+DataTable -> {
+  DataTableHeader,
+  DataTableRow[],
+  DataTableFooter,
+  DataTablePagination,
+  DataTableLoader,
+  DataTableEmptyState
+}
+```
+
+Each sub-component has its own `.tsx`, `.css`, and sometimes `.module.css` files. Always maintain this parallel structure when adding features.
+
+## Development Conventions
+
+### Import Alias Pattern
+Examples use `import { DataTable } from '__PACKAGE__'` - this resolves to the local package during development. Never import from `mantine-datatable` in examples.
+
+### TypeScript Patterns
+- **Generic constraints**: `DataTable<T>` where T extends record type
+- **Prop composition**: Props inherit from base Mantine components (TableProps, etc.)
+- **Accessor pattern**: Use `idAccessor` prop for custom ID fields, defaults to `'id'`
+
+### CSS Architecture
+- **Layered imports**: `styles.css` imports all component styles
+- **CSS layers**: `@layer mantine, mantine-datatable` for proper specificity
+- **Utility classes**: Defined in `utilityClasses.css` for common patterns
+- **CSS variables**: Dynamic values injected via `cssVariables.ts`
+
+### Hook Patterns
+Custom hooks follow the pattern `useDataTable*` and are located in `package/hooks/`:
+- `useDataTableColumns` - Column management and persistence
+- `useRowExpansion` - Row expansion state
+- `useLastSelectionChangeIndex` - Selection behavior
+
+## Documentation Development
+
+### Example Structure
+Each example in `app/examples/` follows this pattern:
+```
+feature-name/
+├── page.tsx                    # Next.js page with controls
+├── FeatureExample.tsx          # Actual DataTable implementation
+└── FeaturePageContent.tsx      # Documentation content
+```
+
+### Code Block Convention
+Use the `CodeBlock` component for syntax highlighting. Example files should be minimal and focused on demonstrating a single feature clearly.
+
+## Data Patterns
+
+### Record Structure
+Examples use consistent data shapes:
+- `companies.json` - Basic company data with id, name, address
+- `employees.json` - Employee data with departments/relationships  
+- `async.ts` - Simulated API calls with delay/error simulation
+
+### Selection Patterns
+- **Gmail-style additive selection**: Shift+click for range selection
+- **Trigger modes**: `'checkbox'` | `'row'` | `'cell'`
+- **Custom selection logic**: Use `isRecordSelectable` for conditional selection
+
+## Build System
+
+### Package Build (tsup)
+- **ESM**: `tsup.esm.ts` - Modern module format
+- **CJS**: `tsup.cjs.ts` - CommonJS compatibility  
+- **Types**: `tsup.dts.ts` - TypeScript declarations
+- **CSS**: PostCSS processes styles to `dist/`
+
+### Documentation Deployment
+- **GitHub Pages**: `output: 'export'` in `next.config.js`
+- **Base path**: `/mantine-datatable` when `GITHUB_PAGES=true`
+- **Environment injection**: Package version, NPM downloads via build-time fetch
+
+## Common Patterns
+
+### Adding New Features
+1. Create component in `package/` with `.tsx` and `.css` files
+2. Add to main `DataTable.tsx` component composition
+3. Export new types from `package/types/index.ts`
+4. Create example in `app/examples/new-feature/`
+5. Update main navigation in `app/config.ts`
+
+### Styling New Components
+- Use CSS custom properties for theming
+- Follow existing naming: `.mantine-datatable-component-name`
+- Import CSS in `package/styles.css`
+- Add utility classes to `utilityClasses.css` if reusable
+
+### TypeScript Integration
+- Extend base Mantine props where possible
+- Use composition over inheritance for prop types
+- Export all public types from `package/types/index.ts`
+- Maintain strict null checks and proper generics
+
+## Performance Considerations
+
+- **Virtualization**: Not implemented - DataTable handles reasonable record counts (< 1000s)
+- **Memoization**: Use `useMemo` for expensive column calculations
+- **CSS-in-JS**: Avoided in favor of CSS modules for better performance
+- **Bundle size**: Keep dependencies minimal (only Mantine + React)

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 },
     ],

app/examples/column-resizing/ResizingExample.tsx

@@ -8,16 +8,18 @@ import { companies, type Company } from '~/data';
 export default function ResizingExample() {
   const key = 'resize-example';
 
+  const [resizable, setResizable] = useState<boolean>(true);
   const [withTableBorder, setWithTableBorder] = useState<boolean>(true);
   const [withColumnBorders, setWithColumnBorders] = useState<boolean>(true);
 
   const { effectiveColumns, resetColumnsWidth } = useDataTableColumns<Company>({
     key,
     columns: [
-      { accessor: 'name', width: 200, resizable: true },
-      { accessor: 'streetAddress', resizable: true },
-      { accessor: 'city', ellipsis: true, resizable: true },
-      { accessor: 'state', textAlign: 'right' },
+      { accessor: 'name', resizable },
+      { accessor: 'streetAddress', resizable, ellipsis: true },
+      { accessor: 'city', resizable, ellipsis: true },
+      { accessor: 'state', resizable },
+      { accessor: 'missionStatement', resizable, ellipsis: true },
     ],
   });
 
@@ -32,6 +34,12 @@ export default function ResizingExample() {
       />
       <Group grow justify="space-between">
         <Group justify="flex-start">
+          <Switch
+            checked={resizable}
+            onChange={(event) => setResizable(event.currentTarget.checked)}
+            labelPosition="left"
+            label="Resizable"
+          />
           <Switch
             checked={withTableBorder}
             onChange={(event) => setWithTableBorder(event.currentTarget.checked)}

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, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { DataTableColumnsProvider } from './DataTableDragToggleProvider';
 import { DataTableEmptyRow } from './DataTableEmptyRow';
 import { DataTableEmptyState } from './DataTableEmptyState';
@@ -134,14 +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]);
-
-  const dragToggle = useDataTableColumns({
-    key: storeColumnsKey,
-    columns: 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 { refs, onScroll: handleScrollPositionChange } = useDataTableInjectCssVariables({
     scrollCallbacks: {
@@ -154,6 +149,14 @@ 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);
 
@@ -267,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': hasResizableColumns,
+                  '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/useColumnResize.ts

@@ -24,10 +24,14 @@ export const useColumnResize = ({ onColumnResize, minColumnWidth = 50 }: UseColu
       event.stopPropagation();
 
       const nextColumn = currentColumn.nextElementSibling as HTMLTableCellElement | null;
-      if (!nextColumn) return false; // Can't resize without next column
+      if (!nextColumn) {
+        return false;
+      }
 
       const nextAccessor = nextColumn.getAttribute('data-accessor');
-      if (!nextAccessor) return false; // Need accessor for next column
+      if (!nextAccessor) {
+        return false;
+      }
 
       const currentWidth = currentColumn.getBoundingClientRect().width;
       const nextWidth = nextColumn.getBoundingClientRect().width;
@@ -58,11 +62,6 @@ export const useColumnResize = ({ onColumnResize, minColumnWidth = 50 }: UseColu
 
       const deltaX = clientX - resizeState.startX;
 
-      // Calculate new widths with constraints
-      const newCurrentWidth = Math.max(minColumnWidth, resizeState.originalWidths.current + deltaX);
-
-      const newNextWidth = Math.max(minColumnWidth, resizeState.originalWidths.next - deltaX);
-
       // Calculate the actual delta we can apply based on constraints
       const actualDelta = Math.min(
         deltaX,