Column Resizing Feature Guide
Mantine React Table lets you easily change the default widths (sizes) of columns and has a built-in column resizing draggable handle feature.
Relevant Table Options
Relevant Column Options
Change Default Column Widths
This was also covered in the Data Columns Guide, but we'll cover it again here.
You can change the width of any column by setting its
sizeoption on the column definition.
maxSizeare also available to enforce limits during resizing.
You may notice, however, that the column sizes might not change as much as you would expect. This is because the browser treats
<td>elements differently with in a
<table>element by default.
You can improve this slightly by changing the table layout to
fixedinstead of the default
The columns will still try to increase their width to take up the full width of the table, but the columns that do have a defined size will have their width respected more.
For further reading on how table-layout
autoworks, we recommend reading this blog post by CSS-Tricks.
If you are using either virtualization features or have the layoutMode set to
"grid", another option is to turn off flex grow for both the table head and body cells. You can see this down below at the bottom of this page
By default, columns will have the following size properties defined:
You can modify the default column widths by setting the
Enable Column Resizing Feature
enableColumnResizingis the boolean table option that enables the column resizing feature.
You can disable specific columns from being resizable by setting the
enableResizingcolumn option to false in their respective column definition.
When Column Resizing is enabled, a CSS
table-layout: fixedstyle is automatically added to the
<table>element in order to make the browser respect the widths of the columns more. (Unless layoutMode is set to
Column Resize Mode
onChange, which means that column resizing will occur immediately as the user drags the column resize handle. If you are running into performance issues because of many other enabled features, you might want to set the
onEndinstead. This will make the column resizing only occur after the user has finished dragging the column resize handle and released their mouse.
1-5 of 5
Disable Column Growing
If you want to prevent the columns from growing to fill the width of the table, use this flexbox trick when the layoutMode is
1-5 of 5
View Extra Storybook Examples