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,
                />