Material React Table

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.

boolean

true

OnChangeFn<ColumnVisibilityState>

boolean

Record<string, boolean>

{}

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} />;

If you need to control how the columns are hidden dynamically, you can use state instead of initialState along with the onColumnVisibilityChange table option. Or alternatively you can use the setColumnVisibility table instance api.

const [columnVisibility, setColumnVisibility] = useState({
  firstName: false,
});

useEffect(() => {
  setColumnVisibility({ firstName: true }); //programmatically show firstName column
}, [someDependency]);

const table = useMaterialReactTable({
  columns,
  data,
  state: { columnVisibility }, //manage columnVisibility state
  onColumnVisibilityChange: setColumnVisibility,
});

//NOTE: Instead of managing the columnVisibility state yourself, we could call a table instance api
table.setColumnVisibility({ firstName: true }); //programmatically show firstName column

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.

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7
8const 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  );
37
38  const data = useMemo(
39    () => [
40      //data definitions...
41      {
42        firstName: 'Dylan',
43        lastName: 'Murray',
44        address: '261 Erdman Ford',
45        city: 'East Daphne',
46        state: 'Kentucky',
47      },
48      {
49        firstName: 'Raquel',
50        lastName: 'Kohler',
51        address: '769 Dominic Grove',
52        city: 'Columbus',
53        state: 'Ohio',
54      },
55      {
56        firstName: 'Ervin',
57        lastName: 'Reinger',
58        address: '566 Brakus Inlet',
59        city: 'South Linda',
60        state: 'West Virginia',
61      },
62      {
63        firstName: 'Brittany',
64        lastName: 'McCullough',
65        address: '722 Emie Stream',
66        city: 'Lincoln',
67        state: 'Nebraska',
68      },
69      {
70        firstName: 'Branson',
71        lastName: 'Frami',
72        address: '32188 Larkin Turnpike',
73        city: 'Charleston',
74        state: 'South Carolina',
75      },
76      
77    ],
78    [],
79  );
80
81  const table = useMaterialReactTable({
82    columns,
83    data,
84    initialState: { columnVisibility: { address: false } },
85  });
86
87  return <MaterialReactTable table={table} />;
88};
89
90export default Example;
91

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