如何为Material React Table的多选项列筛选添加全选功能？

你当前使用的是Material React Table的分面值多选项筛选，对应State列的配置如下：

{
  accessorKey: 'state',
  header: 'State',
  filterVariant: 'multi-select',
  //no need to specify filterSelectOptions if using faceted values
},

需求是在筛选选项列表顶部添加“全选”选项，方便用户一键勾选大量筛选项，以下是实现方案：

实现步骤 #

1. 自定义带全选的多选项筛选组件 #

创建自定义筛选组件，集成全选复选框并处理对应逻辑：

import { Checkbox, FormControlLabel, List, ListItem } from '@mui/material';
import { MultiSelectFilter } from 'material-react-table';

const MultiSelectWithAllFilter = ({ column, filter, onChange }) => {
  //获取当前列的所有分面值选项
  const selectOptions = column.getFacetedUniqueValues().map(value => ({
    label: value,
    value: value,
  }));

  //判断是否所有选项均已选中
  const isAllSelected = selectOptions.every(option => filter?.includes(option.value));

  //全选/取消全选逻辑
  const handleSelectAll = (e) => {
    onChange(e.target.checked ? selectOptions.map(opt => opt.value) : []);
  };

  return (
    <List>
      {/* 全选选项 */}
      <ListItem disablePadding>
        <FormControlLabel
          control={<Checkbox checked={isAllSelected} onChange={handleSelectAll} />}
          label="全选"
        />
      </ListItem>
      {/* 原多选项筛选组件 */}
      <MultiSelectFilter
        column={column}
        filter={filter}
        onChange={onChange}
      />
    </List>
  );
};

2. 修改列配置，使用自定义组件 #

将目标列的筛选类型改为自定义，并指定自定义组件：

{
  accessorKey: 'state',
  header: 'State',
  filterVariant: 'custom',
  FilterComponent: MultiSelectWithAllFilter,
  //保留分面值筛选特性，无需手动指定filterSelectOptions
},

逻辑说明 #

• 全选框状态会自动同步：当所有选项都被选中时自动勾选，只要有一个未选中则取消勾选；
• 点击全选框时，直接将筛选值设置为所有选项数组（全选）或空数组（取消全选），自动同步表格筛选状态。

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