MRT logoMaterial React Table

    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 Props

    #
    Prop Name
    Type
    Default Value
    More Info Links
    1
    boolean
    true

    No Description Provided... Yet...

    2
    OnChangeFn<ColumnVisibilityState>
    TanStack Table Column Visibility Docs

    If provided, this function will be called with an updaterFn when state.columnVisibility changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.

    Relevant Column Options

    #
    Column Option
    Type
    Default Value
    More Info Links
    1
    boolean

    No Description Provided... Yet...

    Relevant State

    #
    State Option
    Type
    Default Value
    More Info Links
    1
    Record<string, boolean>
    {}
    TanStack Table Column Visibility Docs

    No Description Provided... Yet...

    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.

    <MaterialReactTable
    columns={columns}
    data={data}
    initialState={{ columnVisibility: { firstName: false } }} //hide firstName column by default
    />

    Disable Column Hiding

    If you don't want this feature to be enabled at all, you can disable it by setting the enableHiding prop to false.

    <MaterialReactTable columns={columns} data={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 prop. This can also be useful for making the column hiding state persistent.


    Demo

    Open Code SandboxOpen on GitHub
    First Name
    Last Name
    City
    State
    DylanMurrayEast DaphneKentucky
    RaquelKohlerColumbusOhio
    ErvinReingerSouth LindaWest Virginia
    BrittanyMcCulloughLincolnNebraska
    BransonFramiCharlestonSouth Carolina

    Rows per page

    1-5 of 5

    Source Code

    1import React, { FC, useMemo } from 'react';
    2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
    3
    4const Example: FC = () => {
    5 const columns = useMemo(
    6 () =>
    7 [
    8 {
    9 accessorKey: 'firstName',
    10 enableHiding: false,
    11 header: 'First Name',
    12 },
    13 {
    14 accessorKey: 'lastName',
    15 enableHiding: false,
    16 header: 'Last Name',
    17 },
    18 {
    19 accessorKey: 'address',
    20 header: 'Address',
    21 },
    22 {
    23 accessorKey: 'city',
    24 header: 'City',
    25 },
    26 {
    27 accessorKey: 'state',
    28 header: 'State',
    29 },
    30 ] as MRT_ColumnDef<typeof data[0]>[],
    31 [],
    32 );
    33
    34 const data = useMemo(
    35 () => [
    36 //data definitions...
    73 ],
    74 [],
    75 );
    76 return (
    77 <MaterialReactTable
    78 columns={columns}
    79 data={data}
    80 initialState={{ columnVisibility: { address: false } }}
    81 />
    82 );
    83};
    84
    85export default Example;
    86

    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 prop.

    <MaterialReactTable
    columns={columns}
    data={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 prop.

    View Extra Storybook Examples