Skip to main content

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)

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)

OR

  • 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",
        },
      ]}
    />
  );
}
Result
Loading...