如何在material-react-table中预设多选筛选器选项

要给state列的多选筛选器预设选中"series"和"unknown"，有两种简单的实现方式：

方式一：在列定义中直接配置 #

在state列的配置里添加initialFilterValue属性，值为要选中的选项value数组：

{
    accessorKey: 'state',
    header: 'State',
    editVariant: 'select',
    editSelectOptions: includeStates,
    filterVariant: 'multi-select',
    filterSelectOptions: includeStates,
    initialFilterValue: ["series", "unknown"], // 预设选中的value数组
}

这种方式直接绑定到列配置，适合固定默认值的场景。

方式二：通过表格的initialState全局配置 #

如果需要从用户设置等动态来源获取预设值，可在MRT_Table组件中通过initialState属性配置筛选器：

// 可替换为从用户设置/接口/localStorage获取的动态值
const presetSelectedStates = ["series", "unknown"];

<MRT_Table
  columns={columns}
  data={yourTableData}
  initialState={{
    filters: [
      {
        accessorKey: 'state', // 对应目标列的accessorKey
        operator: 'in', // 多选筛选器对应的操作符
        value: presetSelectedStates, // 预设选中的value数组
      },
    ],
  }}
/>

注意事项 #

• 确保includeStates数组中存在value为"series"和"unknown"的选项，否则预设选中不会生效。
• 如果后续需要修改选中值，可通过setTableState方法更新filters数组实现动态调整。

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