Open
Description
TanStack Table version
v8.21.3
Framework/Library version
React 17.0.2
Describe the bug and the steps to reproduce it
- Define a table with header and body but override the display from table (or table-cell / table-row) to flex
- Define columns with
minSize
ormaxSize
- Enable the resize (
enableColumnResizing
) - On your header size slider element apply
onMouseDown
prop with the valueheader.getResizeHandler()
(where header is the tanstack's header) - Try to resize a column
Actual behavior:
Resize does not respect the minSize or maxSize according to the columnDef but resize the column according to the mouse end position
Expected behavior:
Resize SHOULD respect the columnDef minSize and maxSize.
Additional context:
-
You can reproduce it by visiting the columnSizing example from Tanstack official examples: column-sizing and see by yourself you can resizing the column below the minSize :/
-
tanstack's implementation - tableCore/src/features/columnSizing.ts L390-L395:
old.columnSizingStart.forEach(([columnId, headerSize]) => {
newColumnSizing[columnId] =
Math.round(
Math.max(headerSize + headerSize * deltaPercentage, 0) * 100
) / 100
})
IMHO should be:
const columnDef = header.column.columnDef;
const newSize = Math.round(
Math.max(headerSize + headerSize * deltaPercentage, 0) * 100
) / 100;
newColumnSizing[columnId] = Math.min(
columnDef?.maxSize ?? Infinity,
Math.max(columnDef?.minSize ?? 0, newSize)
);
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
https://stackblitz.com/github/tanstack/table/tree/main/examples/react/column-sizing
Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?
Yes, I think I know how to fix it and will discuss it in the comments of this issue
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Metadata
Metadata
Assignees
Labels
No labels