Column Hiding Feature Guide
The column hiding feature is enabled by default and allows the user to hide data columns from either the column actions menu or the columns menu.
Relevant Table Options
# | Prop Name | Type | Default Value | More Info Links | |
---|---|---|---|---|---|
1 |
|
| MRT Column Hiding Docs | ||
2 |
| TanStack Table Column Visibility Docs | |||
Relevant Column Options
Relevant State
# | State Option | Type | Default Value | More Info Links | |
---|---|---|---|---|---|
1 |
|
| TanStack Table Column Visibility Docs | ||
Hide Some Columns by Default
You can easily hide columns by default by setting the columnVisibility
state
or initialState
to hide the desired columns by id.
const table = useMaterialReactTable({columns,data,initialState: { columnVisibility: { firstName: false } }, //hide firstName column by default});return <MaterialReactTable table={table} />;
Disable Column Hiding
If you do not want this feature to be enabled at all, you can disable it by setting the enableHiding
table option to false
.
const table = useMaterialReactTable({columns,data,enableHiding: false,});
Alternatively, you can disable hiding specific columns by setting the enableHiding
column option to false
per column.
If you want to hide certain columns by default, you can specify an column visibility in the initialState.columnVisibility
table option. This can also be useful for making the column hiding state persistent.
First Name | Last Name | City | State |
---|---|---|---|
Dylan | Murray | East Daphne | Kentucky |
Raquel | Kohler | Columbus | Ohio |
Ervin | Reinger | South Linda | West Virginia |
Brittany | McCullough | Lincoln | Nebraska |
Branson | Frami | Charleston | South Carolina |
1import { useMemo } from 'react';2import {3 MaterialReactTable,4 useMaterialReactTable,5 type MRT_ColumnDef,6} from 'material-react-table';78const Example = () => {9 const columns = useMemo(10 () =>11 [12 {13 accessorKey: 'firstName',14 enableHiding: false,15 header: 'First Name',16 },17 {18 accessorKey: 'lastName',19 enableHiding: false,20 header: 'Last Name',21 },22 {23 accessorKey: 'address',24 header: 'Address',25 },26 {27 accessorKey: 'city',28 header: 'City',29 },30 {31 accessorKey: 'state',32 header: 'State',33 },34 ] as MRT_ColumnDef<(typeof data)[0]>[],35 [],36 );3738 const data = useMemo(39 () => [40 //data definitions...77 ],78 [],79 );8081 const table = useMaterialReactTable({82 columns,83 data,84 initialState: { columnVisibility: { address: false } },85 });8687 return <MaterialReactTable table={table} />;88};8990export default Example;91
Enable Column Hiding on Display Columns
By default, column hiding is only enabled on data columns. Display columns, such as mrt-row-numbers
, mrt-row-select
, etc., do not have column hiding enabled, and their toggle will be disabled. You can turn that back on by setting the enableHiding
option to true
in the displayColumnsOptions
table option.
const table = useMaterialReactTable({columns,data,displayColumnDefOptions: {'mrt-row-numbers': {enableHiding: true, //now row numbers are hidable too},},});
See the Display Columns Feature Guide for a more in depth explanation of the displayColumnsOptions
table option.
View Extra Storybook Examples