Tengo tres columnas en mi Material-Table que brindan datos útiles pero no son esenciales. Quiero que estas columnas estén ocultas de forma predeterminada cuando se carga la página, pero le doy al usuario la opción de mostrarlas. Tengo el conjunto de opciones de columnsButton que me permite seleccionar manualmente qué columnas quiero ocultar. De forma predeterminada, no se oculta ninguna columna.

He intentado usar hidden: true y hiddenByColumnsButton: true . hidden simplemente oculta la columna y la opción para mostrarla no aparece en la lista de columnsButton de columnas. hiddenbyColumnsButton no oculta la columna y no afecta la funcionalidad de la lista. El uso de ambos al mismo tiempo en la misma columna hace que la aplicación se bloquee: Uncaught TypeError: Cannot read properties of undefined

Esta es mi tabla y dos de mis columnas. Para el propósito de esta pregunta, quiero tener Title oculto por defecto con la opción de mostrarlo en la lista de columnsButton de columnas.

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