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
Result
Table Title
Surname
Bar
Fee