MaterialTable添加hidden:true无效，如何实现列默认隐藏？

我使用MaterialTable构建了一个包含大量列的表格，希望将部分列设置为默认隐藏，仅在用户主动选择时才显示。尝试给列添加hide: true属性未生效；后续改用hidden: true属性（代码示例如下），但这3列仍会在表格中显示：

{
  title: 'Department', field: 'department', filtering: false, editable: 'never', hidden: true,
  cellStyle: {
    width: 250,
    minWidth: 250,
    border: '1px solid #CCC',
    padding: 0
  },
  headerStyle: {
    width: 250,
    minWidth: 250
  }
},
{ title: 'Owner', field: 'owner', filtering: false, editable: 'never', hidden: true},
{ title: 'Responsible', field: 'responsible', filtering: false, editable: 'never', hidden: true },

补充信息 #

• 应用仅使用JS和Atlassian SDK（Java），不使用TypeScript
• 不允许重写或重新设计应用

相关代码片段：

const [state, setState] = React.useState({
 columns: [
   { title: 'Module', field: 'module', lookup: dynamicLookupObject, editable: 'never' },
   { title: 'Key', field: 'key', filtering: false, editable: 'never', render: rowData => <a href={rowData.key}>{rowData.key}</a>},
   {
     title: 'Summary', field: 'summary', filtering: false, editable: 'never',
     cellStyle: {
       width: 250,
       minWidth: 250,
       border: '1px solid #CCC',
       padding: 0
     },
     headerStyle: {
       width: 250,
       minWidth: 250
     }
   },
   { title: 'Task', field: 'task', filtering: false, editable: 'never', render: rowData => <a href={'rowData.task'}>{rowData.task}</a> },
   { title: 'Team', field: 'team', lookup: { } }, // 原代码此处缺少闭合大括号
   {
     title: 'Department', field: 'department', filtering: false, editable: 'never',
     cellStyle: {
       width: 250,
       minWidth: 250,
       border: '1px solid #CCC',
       padding: 0
     },
     headerStyle: {
       width: 250,
       minWidth: 250
     }
   },
   { title: 'Owner', field: 'owner', filtering: false, editable: 'never' },
   { title: 'Responsible', field: 'responsible', filtering: false, editable: 'never' },
   { title: 'Status', field: 'status', filtering: false, editable: 'never' },
 ]
});

return (
<div>
  <MaterialTable
    // 统计"下月评估"总数逻辑
    components={{
      Body: props => <MTableBody {...props} onFilterChanged={(columnId, value) => {
        let totalOfTeamEval = 0;
        props.onFilterChanged(columnId, value);
        console.log(value);
        const filteredData = state.data.filter(item => item.module == value);
        setState(prevState => ({ ...prevState, totalOfTeamEval }));
      }} />
    }}
    title="IDEA report"
    columns={state.columns}
    data={state.data}
    icons={{ Edit: () => <EditIcon style={{ fontSize: 15, padding: 0 }} /> }}
    editable={{
      // 编辑配置...
    }}
  />
</div>
);

解决方法 #

1. 启用列选择按钮 #

MaterialTable默认不会显示列选择按钮，需要在options配置中开启columnsButton: true，用户才能手动切换列的显示/隐藏状态。

2. 修复列配置语法错误 #

检查列对象的语法完整性，比如原代码中Team列缺少闭合大括号，这类错误会导致后续列的配置失效。

3. 补充完整的options配置 #

修改后的MaterialTable组件配置示例：

<MaterialTable
  // 其他原有配置...
  options={{
    columnsButton: true, // 开启列选择按钮
    // 其他可选配置，如分页、过滤等
  }}
/>

修复后的目标列配置 #

{
  title: 'Department', 
  field: 'department', 
  filtering: false, 
  editable: 'never',
  hidden: true, // 默认隐藏
  cellStyle: {
    width: 250,
    minWidth: 250,
    border: '1px solid #CCC',
    padding: 0
  },
  headerStyle: {
    width: 250,
    minWidth: 250
  }
},
{ title: 'Owner', field: 'owner', filtering: false, editable: 'never', hidden: true},
{ title: 'Responsible', field: 'responsible', filtering: false, editable: 'never', hidden: true }

额外注意点 #

• 确保所有列对象的语法正确，无缺失括号或逗号
• 若列数据存储在state中，修改配置后需确保state正确更新，触发表格重新渲染

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