Hiding Columns

There are three ways in which a column can be hidden.

Hidden from being displayed in table
- using the column.hidden prop
Hidden from the Columns Button (per column setting)
- using the column.hiddenByColumnsButton prop
Hidden from the Columns Button ("global" setting for all columns)
- See more here

column.hidden and column.hiddenByColumnsButton are not coupled whatsoever.

Help! I want to...#

Hide from table and columns button#

Set column.hidden to true AND column.hiddenByColumnsButton to true (effects single column)

Set column.hidden to true AND override the MTableToolbar component, setting prop columnsHiddenInColumnsButton to true (which effects all columns)

Only hide from table, but show in columns button#

Just set column.hidden to true

Show in table, but not in columns button#

Just set column.hiddenByColumnsButton to true (for single column) OR override the MTableToolbar component, setting prop columnsHiddenInColumnsButton to true (which effects all columns)

Live Demo#

note

See here for more on the GLOBAL_VARS we use in our demos

Live Editor

function HideColFrmTbleNotFrmColsBtn() {
  return (
    <MaterialTable
      options={{
        // Allow user to hide/show
        // columns from Columns Button
        columnsButton: true,
      }}
      data={[
        {
          name: "Foo",
          surname: "Bar",
        },
        {
          name: "Baz",
          surname: "Fee",
        },
      ]}
      columns={[
        {
          title: "Name",
          field: "name",
          // `name` field is hidden in table
          // but not in Columns Button
          hidden: true,
        },
        {
          title: "Surname",
          field: "surname",
        },
      ]}
    />
  );
}

function HideColFrmTbleNotFrmColsBtn() {
  return (
    <MaterialTable
      options={{
        // Allow user to hide/show
        // columns from Columns Button
        columnsButton: true,
      }}
      data={[
        {
          name: "Foo",
          surname: "Bar",
        },
        {
          name: "Baz",
          surname: "Fee",
        },
      ]}
      columns={[
        {
          title: "Name",
          field: "name",
          // `name` field is hidden in table
          // but not in Columns Button
          hidden: true,
        },
        {
          title: "Surname",
          field: "surname",
        },
      ]}
    />
  );
}

Result