MRT logoMantine 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 columns menu.

Relevant Table Options

#
Prop Name
Type
Default Value
More Info Links
1booleantrueMRT Column Hiding Docs
2OnChangeFn<ColumnVisibilityState>TanStack Table Column Visibility Docs

Relevant Column Options

#
Column Option
Type
Default Value
More Info Links
1boolean

Relevant State

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

Hide 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 = useMantineReactTable({
  columns,
  data,
  initialState: {
    columnVisibility: {
      firstName: false, //hide firstName column by default
      'mrt-row-expand': false, //hide row expand column by default
    },
  },
});

Disable Column Hiding

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

const table = useMantineReactTable({
  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 prop. This can also be useful for making the column hiding state persistent.

First Name
Last Name
City
State
DylanMurrayEast DaphneKentucky
RaquelKohlerColumbusOhio
ErvinReingerSouth LindaWest Virginia
BrittanyMcCulloughLincolnNebraska
BransonFramiCharlestonSouth Carolina

Rows per page

1-5 of 5

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
import { useMemo } from 'react';
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';

const Example = () => {
  const columns = useMemo(
    () =>
      [
        {
          accessorKey: 'firstName',
          enableHiding: false,
          header: 'First Name',
        },
        {
          accessorKey: 'lastName',
          enableHiding: false,
          header: 'Last Name',
        },
        {
          accessorKey: 'address',
          header: 'Address',
        },
        {
          accessorKey: 'city',
          header: 'City',
        },
        {
          accessorKey: 'state',
          header: 'State',
        },
      ] as MRT_ColumnDef<(typeof data)[0]>[],
    [],
  );

  const data = useMemo(
    () => [
      {
        firstName: 'Dylan',
        lastName: 'Murray',
        address: '261 Erdman Ford',
        city: 'East Daphne',
        state: 'Kentucky',
      },
      {
        firstName: 'Raquel',
        lastName: 'Kohler',
        address: '769 Dominic Grove',
        city: 'Columbus',
        state: 'Ohio',
      },
      {
        firstName: 'Ervin',
        lastName: 'Reinger',
        address: '566 Brakus Inlet',
        city: 'South Linda',
        state: 'West Virginia',
      },
      {
        firstName: 'Brittany',
        lastName: 'McCullough',
        address: '722 Emie Stream',
        city: 'Lincoln',
        state: 'Nebraska',
      },
      {
        firstName: 'Branson',
        lastName: 'Frami',
        address: '32188 Larkin Turnpike',
        city: 'Charleston',
        state: 'South Carolina',
      },
    ],
    [],
  );
  return (
    <MantineReactTable
      columns={columns}
      data={data}
      initialState={{ columnVisibility: { address: false } }}
    />
  );
};

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

const table = useMantineReactTable({
  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 prop.

View Extra Storybook Examples