Material-Table配置默认隐藏列触发应用崩溃的问题求助

需求说明 #

使用Material-Table开发时，3列存储非核心辅助数据，需满足以下规则：

• 页面首次加载时上述辅助列默认隐藏
• 已开启的columnsButton列选择功能正常生效，支持用户手动勾选展示隐藏的辅助列
• 其余非辅助列保持默认展示状态

错误配置的实际表现 #

测试不同属性组合的实际效果如下：

• 单独配置列属性hidden: true：列被强制隐藏，不会出现在columnsButton的可选列列表中，用户无法手动开启展示
• 单独配置列属性hiddenByColumnsButton: true：列不会默认隐藏，对columnsButton的列选择功能无任何生效效果
• 同一列同时配置hidden: true和hiddenByColumnsButton: true：应用直接崩溃，控制台抛出错误：Uncaught TypeError: Cannot read properties of undefined

问题复现代码 #

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

正确实现方式 #

使用列属性defaultHidden: true即可实现需求，无需配置hidden或hiddenByColumnsButton属性：

• defaultHidden属性的作用是标记列初始加载时为隐藏状态，且会自动出现在columnsButton的可选列列表中，支持用户手动切换展示状态
• hiddenByColumnsButton的实际作用是标记该列不展示在columnsButton的可选列表中，和默认隐藏需求无关，无需配置

修改后的正确代码如下：

const columns = [
    {
        title: <Typography className={classes.colHeader}>Intake ID</Typography>,
        field: "IntakeID",
        cellStyle: { minWidth: 118, maxWidth: 118 },
    },
    {
        title: <Typography className={classes.colHeader}>Title</Typography>,
        field: "Title",
        cellStyle: { minWidth: 280, maxWidth: 280 },
        defaultHidden: true,
    },
];

// 表格组件原有配置无需改动，保持columnsButton: 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,
    }}
/>

内容的提问来源于stack exchange，提问作者Ciaran Crowley