I have three columns in my Material-Table which provide useful data but are not essential. I want these columns hidden by default when the page is loaded, but give the user the option to un-hide them. I have the columnsButton
option set which allows me to manually select which columns I want hidden. By default, no columns are hidden.
I have tried using hidden: true
and hiddenByColumnsButton: true
. hidden
just hides the column and the option to show it does not appear in the columnsButton
list. hiddenbyColumnsButton
does not hide the column and no effect the functionality of the list. Using both of them at the same time in the same column results in the app crashing: Uncaught TypeError: Cannot read properties of undefined
This is my table and a two of my columns. For the purpose of this question, I want to have Title
hidden by default with the option to display it in the columnsButton
list.
const columns = [
{
title: <Typography className={classes.colHeader}>Intake ID</Typography>,
field: "IntakeID",
cellStyle: { minWidth: 118, maxWidth: 118 },
// hidden: true,
},
{
title: <Typography className={classes.colHeader}>Title</Typography>,
field: "Title",
cellStyle: { minWidth: 280, maxWidth: 280 },
hidden: true,
hiddenByColumnsButton: true,
},
];
...
<MTable
title="Table"
data={intakes.intakes}
columns={columns}
options={{
columnsButton: true,
pageSize: 10,
pageSizeOptions: [10, 15, 25, 50, 100],
paginationType: "stepped",
padding: "small",
filtering: true,
/>