MRT logoMaterial React Table

Column Resizing Feature Guide

Material React Table lets you easily change the default widths (sizes) of columns and has a built-in column resizing draggable handle feature.

Relevant Props

1
'onEnd' | 'onChange'
'onEnd'
MRT Column Resizing Docs
2
Partial<MRT_ColumnDef<TData>>
TanStack Table Core Table Docs
3
boolean
MRT Column Resizing Docs
4
OnChangeFn<ColumnSizingState>
TanStack Table Column Sizing Docs
5
OnChangeFn<ColumnSizingInfoState>
TanStack Table Column Sizing Docs

Relevant Column Options

1
boolean
2
number
1000
3
number
40
4
number
180

Relevant State

1
Record<string, number>
{}
TanStack Table Column Sizing Docs
2
See TanStack Docs
{}
TanStack Table Column Sizing Docs

Change Default Column Widths

Column Size

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 size option on the column definition. minSize and maxSize are also available to enforce limits during resizing.

const columns = [
{
accessorKey: 'id',
header: 'ID',
size: 50, //small column
},
{
accessorKey: 'username',
header: 'Username',
minSize: 100, //min size enforced during resizing
maxSize: 200, //max size enforced during resizing
size: 180, //medium column
},
{
accessorKey: 'email',
header: 'Email',
size: 300, //large column
},
];

You may notice, however, that the column sizes might not change as much as you would expect. This is because the browser treats <th> and <td> elements differently with in a <table> element by default.

You can improve this slightly by changing the table layout to fixed instead of the default auto in the muiTableProps.

<MaterialReactTable
muiTableProps={{
sx: {
tableLayout: 'fixed',
},
}}
/>

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 fixed vs auto works, we recommend reading this blog post by CSS-Tricks.

Default Column

By default, columns will have the following size properties defined:

defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }; //units are in px

You can modify the default column widths by setting the defaultColumn prop on the table.

<MaterialReactTable
columns={columns}
data={data}
defaultColumn={{
minSize: 20, //allow columns to get smaller than default
maxSize: 9001, //allow columns to get larger than default
size: 260, //make columns wider by default
}}
/>

Enable Column Resizing Feature

enableColumnResizing is the boolean prop that enables the column resizing feature.

<MaterialReactTable columns={columns} data={data} enableColumnResizing />

You can disable specific columns from being resizable by setting the enableResizing column option to false in their respective column definition.

When Column Resizing is enabled, a CSS table-layout: fixed style is automatically added to the <table> element in order to make the browser respect the widths of the columns more.

Column Resize Mode

The default columnResizeMode is onEnd, which means that the column resizing will only occur after the user has finished dragging the column resize handle and released their mouse. You can change the columnResizeMode to onChange to make the column resizing occur immediately as the user drags the column resize handle.

<MaterialReactTable
columns={columns}
data={data}
enableColumnResizing
columnResizeMode="onChange"
/>

Column Resizing Example






DylanMurraydmurray@yopmail.comEast DaphneUSA
RaquelKohlerrkholer33@yopmail.comColumbusUSA
ErvinReingerereinger@mailinator.comTorontoCanada
BrittanyMcCulloughbmccullough44@mailinator.comLincolnUSA
BransonFramibframi@yopmain.comNew YorkUSA

Rows per page

1-5 of 5

Source Code

1import React, { useMemo } from 'react';
2import MaterialReactTable from 'material-react-table';
3import { data } from './makeData';
4
5const Example = () => {
6 const columns = useMemo(
7 () => [
8 {
9 accessorKey: 'firstName',
10 header: 'First Name', //uses the default width from defaultColumn prop
11 },
12 {
13 accessorKey: 'lastName',
14 header: 'Last Name',
15 enableResizing: false, //disable resizing for this column
16 },
17 {
18 accessorKey: 'email',
19 header: 'Email Address',
20 size: 200, //increase the width of this column
21 },
22 {
23 accessorKey: 'city',
24 header: 'City',
25 size: 120, //decrease the width of this column
26 },
27 {
28 accessorKey: 'country',
29 header: 'Country',
30 size: 100, //decrease the width of this column
31 },
32 ],
33 [],
34 );
35
36 return (
37 <MaterialReactTable
38 columns={columns}
39 data={data}
40 //optionally override the default column widths
41 defaultColumn={{
42 maxSize: 400,
43 minSize: 80,
44 size: 150, //default size is usually 180
45 }}
46 enableColumnResizing
47 columnResizeMode="onChange" //default is "onEnd"
48 />
49 );
50};
51
52export default Example;
53