🐛 Fix #789: rewrite column resize to honor declarative widths

[gfazioli]

Summary

Closes #789.

Likely also closes:

• Resizable columns render with equal width instead of auto-fitting content #736 — Resizable columns render with equal width instead of auto-fitting content. The previous code forced table-layout: fixed as soon as any column had resizable: true, which gave every column an equal share of the table width. This PR keeps auto layout until the first resize, so resizable columns render at their natural content width by default.
• Column cannot be resized after being dynamically added #694 — Column cannot be resized after being dynamically added. The old default for new columns was the empty string '', which broke later resize attempts. The new realign effect always seeds new columns with column.width ?? 'auto', and 'auto' is treated as "no override" so the column gets a normal initial render.

Possibly also closes (worth a re-test from the original reporters):

• Resizing fixed-width columns within scrollable pane causes columns to disappear #797 — Resizing fixed-width columns within scrollable pane causes columns to disappear. The double-click reset path now puts the column back to 'auto' and isLocked is derived from the current state, so a mixed (some pixel / some auto) snapshot drops the table back to auto layout instead of leaving columns at 0 px.
• useDataTableColumns causing unnecessary updates (Maximum update depth exceeded) #727 — useDataTableColumns causing unnecessary updates. The setState-during-render in useDataTableColumnReorder (one of the classic causes of "Maximum update depth exceeded") has been moved into a useEffect.

Background

The previous implementation forced table-layout: fixed on every render whenever any column was resizable. That broke the documented width: '0%' recipe on actions columns: the cell rendered at 0 px and the title was clipped by overflow: hidden. The bug was introduced in #711.

This PR adopts the lazy-snapshot pattern from mantine-list-view-table:

• Default to table-layout: auto so declarative widths (including 0%) work as intended.
• On the first mousedown on a resize handle, snapshot every header cell width into pixels and switch to table-layout: fixed so pixel widths are honored strictly during the drag and afterwards.
• Drive resize updates through React state on every mousemove (instead of bypassing React with direct DOM mutation), so widths actually flow through effectiveColumns and persist correctly across renders.
• Persist to localStorage in a dedicated useEffect gated by a dirtyRef flag and !isResizing, so the write happens once at the end of a drag rather than on every frame.
• isLocked and the locked tableWidth are derived from the visibility-aware effectiveColumns; the lock engages only when every visible column has a pixel width, and the total recomputes when a column is hidden/shown.

Side fixes picked up along the way

• Latent bug in useDataTableColumns.effectiveColumns: column widths are now applied even when no storeColumnsKey is provided. Previously, without a key, columnsOrder was undefined and the width-application path was skipped, so resize state never reached cells via React.
• DataTable now consumes dragToggle.effectiveColumns directly. Before this PR it used its own local effectiveColumns (raw user columns) and the resize widths only reached cells via direct DOM mutation in the handle.
• useDataTableColumnReorder: column-order alignment moved out of render into a useEffect to drop the setState-during-render warning.
• Honors getInitialValueInEffect: the resize hook used to hardcode the synchronous-hydration mode on the underlying useLocalStorage while bailing out of the hydration effect when callers passed getInitialValueInEffect={false} at the API level. Both paths now apply persisted widths.
• Realigns on columns change: a dedicated effect drops orphan width entries for removed accessors and seeds defaults for newly introduced columns.

Files touched

• package/DataTable.tsx — drop fixedLayoutEnabled state; consume enriched columns from the hook; apply tableLayout: 'fixed' and width: tableWidth only when locked.
• package/DataTable.css — remove the unconditional table-layout: fixed rule and obsolete compensation rules.
• package/DataTableResizableHeaderHandle.tsx — call beginResize() / endResize(), drive resize via state on every mousemove.
• package/DataTableColumns.context.ts + DataTableDragToggleProvider.tsx — expose beginResize / endResize through context.
• package/hooks/useDataTableColumnResize.ts — rewrite around lazy snapshot + state-driven updates; honors getInitialValueInEffect; realigns on columns change; persistence skipped while a drag is in flight.
• package/hooks/useDataTableColumns.ts — apply widths regardless of order; derive isLocked and tableWidth from effectiveColumns.
• package/hooks/useDataTableColumnReorder.ts — move side-effect into useEffect.

Test plan

• pnpm lint clean (typecheck + eslint)
• pnpm build:package clean
• pnpm build:docs clean
• /examples/row-actions-cell (with resizable: true added on the other columns to reproduce Actions column width: 0% is causing wrong initial column width when any column is resizable #789): the actions column with width: '0%' shows its title and renders at content width before any resize.
• /examples/column-resizing (basic and complex): drag is smooth and precise; trade between adjacent columns is exact; double-click resets a column to auto.
• Persistence: resize → reload → pixel widths are still applied (uses storeColumnsKey); the table re-locks at the correct total width.
• /examples/column-dragging-and-toggling: reorder + visibility toggle still work; no React warnings in the console.
• /examples/pinning-the-first-column (with resizable columns added temporarily): pinned column stays sticky during/after resize, ::after shadow not clipped.
• Drag traffic: 20 simulated mousemove events during a drag produce 0 localStorage.setItem calls; mouseup produces exactly 1.
• No Cannot update a component while rendering... warning anywhere.

Notes for reviewers

• Public API of useDataTableColumnResize keeps measureAndSetColumnWidths as a no-op for backwards compatibility (measurement is now lazy and triggered from the handle).
• The useColumnResize standalone hook in package/hooks/useColumnResize.ts was not changed — it isn't used internally and its surface is preserved for any external consumers.

[Copilot]

Pull request overview

Reworks the package-side column resizing flow so Mantine DataTable starts in table-layout: auto, snapshots pixel widths lazily on first resize, and then drives subsequent width changes through React state instead of direct DOM mutation. This fits the core package/ component implementation and aims to fix the documented width: '0%' actions-column behavior while keeping resize persistence and drag/toggle integrations working.

Changes:

• Rewrites useDataTableColumnResize around lazy width snapshotting, locked fixed-layout mode, and effect-based persistence.
• Updates DataTable and the resize handle/context plumbing to consume hook-enriched columns and expose resize lifecycle actions.
• Simplifies CSS/layout handling by removing the unconditional fixed-layout rule and only locking layout after a resize starts.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
package/hooks/useDataTableColumns.ts	Applies width state unconditionally and returns new resize-lock metadata/actions.
package/hooks/useDataTableColumnResize.ts	Main resize rewrite: localStorage hydration, lock state, table width tracking, and resize lifecycle.
package/hooks/useDataTableColumnReorder.ts	Moves persisted order alignment out of render and into memo/effect flow.
package/DataTableResizableHeaderHandle.tsx	Switches drag behavior from direct DOM mutation to state-driven width updates.
package/DataTableDragToggleProvider.tsx	Threads beginResize/endResize through the shared columns provider.
package/DataTableColumns.context.ts	Extends the columns context contract with resize lifecycle methods.
package/DataTable.tsx	Uses hook-enriched columns for rendering and conditionally locks table layout/width.
package/DataTable.css	Removes unconditional fixed layout and keeps header overflow rules for resizable tables.