MRT logoMaterial React Table

On This Page

    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 show/hide columns menu.

    Relevant Table Options

    MRT Column Hiding Docs
    TanStack Table Column Visibility Docs

    Relevant Column Options

    MRT Column Hiding Docs

    Relevant State

    Record<string, boolean>
    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({
    initialState: { columnVisibility: { firstName: false } }, //hide firstName column by default
    return <MaterialReactTable table={table} />;

    Dynamically Hide Columns

    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({
    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

    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({
    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 column visibility in the initialState.columnVisibility table option.


    Open StackblitzOpen Code SandboxOpen on GitHub
    DylanMurrayEast DaphneKentucky
    ErvinReingerSouth LindaWest Virginia
    BransonFramiCharlestonSouth Carolina
    1-5 of 5

    Source Code

    1import { useMemo } from 'react';
    2import {
    3 MaterialReactTable,
    4 useMaterialReactTable,
    5 type MRT_ColumnDef,
    6} from 'material-react-table';
    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 );
    38 const data = useMemo(
    39 () => [
    40 //data definitions...
    77 ],
    78 [],
    79 );
    81 const table = useMaterialReactTable({
    82 columns,
    83 data,
    84 initialState: { columnVisibility: { address: false } },
    85 });
    87 return <MaterialReactTable table={table} />;
    90export default Example;

    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({
    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.

    Hide Column From Show Hide Menu

    New in v2.3.0

    By default, all columns are visible in the column show hide menu that is opened from the columns button in the toolbar internal actions button. You can hide a column from this menu by setting the visibleInShowHideMenu column option to false.

    const columns = [
    accessorKey: 'uuid',
    header: 'UUID',
    visibleInShowHideMenu: false, //hide this column from the show hide menu, but still show the column in the table
    const table = useMaterialReactTable({
    displayColumnDefOptions: {
    'mrt-row-actions': {
    visibleInShowHideMenu: false, //hide the built-in row actions column from the show hide menu

    Custom Columns Menu

    The MRT_ShowHideColumnsMenu component is one of the few MRT components that is pretty opinionated and not easily customizable. Instead of trying to customize the menu with overrides, it might be easier for you to just build your own new button and menu from scratch using the Table and Column Instance APIs.

    Adding your own Toolbar Buttons is covered in the Toolbar Guide

    If all you want to do is customize the buttons above the columns menu, you can import and use the MRT_ShowHideColumnsMenuItems component from material react table, which is a component that renders the columns in the list with the toggle switches, but then render your own buttons in the top or bottom of the menu itself.

    View Extra Storybook Examples