Column resizing behavior differs between examples (single-column vs full-table resize)

[lindenes]

https://tanstack.com/table/latest/docs/framework/react/examples/column-resizing-performant
https://tanstack.com/table/latest/docs/framework/react/examples/full-width-resizable-table?panel=sandbox

In the "column-resizing-performant" example, resizing a column
only affects the active column and changes the total table width.

In the "full-width-resizable-table" example, resizing a column
redistributes width across all columns, keeping the table width fixed.

Is this difference intentional?
If so, could the docs clarify which options control:

• constrained vs unconstrained resizing
• fixed-width vs auto-width table behavior
• whether it is possible to use the "column-resizing-performant" behavior in a full-width table

If not, this might be an inconsistency between examples.

[chrisjcthomas]

The difference between those two examples is intentional and comes down to CSS layout rather than different table options.

TanStack Table is headless: the core engine only calculates numeric sizes (column.getSize(), table.getTotalSize()) and dispatches resize deltas. What happens to adjacent columns depends on how the HTML/CSS table layout is structured.

Why the examples behave differently

1. "column-resizing-performant" (Expanding width):

   • The container element sets its width explicitly from the table state: width: table.getTotalSize().
   • Individual cells have fixed widths: width: cell.column.getSize().
   • When you drag a column, only that column's numeric size changes, increasing table.getTotalSize(). The overall table widens and no other columns are squished.

2. "full-width-resizable-table" (Redistributed width):

   • The container is locked to width: 100%.
   • Columns are styled inside a fixed-width container (often using table-layout: fixed or flexbox).
   • Because the outer container cannot exceed 100%, expanding one column forces the browser's CSS layout engine to compress the remaining columns.

Using performant resizing with full-width tables

If you want a table that starts at full width but allows unconstrained column resizing without shrinking neighboring columns:

• Set the wrapper container to overflow-x: auto.
• Set the table element to min-width: 100% and width: table.getTotalSize() px.
• Keep individual columns styled with width: header.getSize() px.

This gives you full-width layout initially while letting resized columns push the table width out into horizontal scroll instead of stealing width from adjacent columns.