react-table中多数据单元格的全局筛选实现问题

针对你遇到的全局筛选无法识别user对象内嵌套字段的问题，这里提供三个可行的解决思路：

思路1：自定义全局筛选函数 #

直接在useTable配置中覆盖默认的filterAll逻辑，手动检查user对象内的firstName、lastName、email字段：

import { useTable, useGlobalFilter } from 'react-table';

// ...

const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  rows,
  prepareRow,
  state: { globalFilter },
  setGlobalFilter,
} = useTable(
  {
    columns,
    data,
    // 自定义全局筛选逻辑
    filterAll: (rows, _, filterValue) => {
      if (!filterValue) return rows;
      const lowercasedFilter = filterValue.toLowerCase();
      return rows.filter(row => {
        const { user } = row.values;
        return (
          user.firstName.toLowerCase().includes(lowercasedFilter) ||
          user.lastName.toLowerCase().includes(lowercasedFilter) ||
          user.email.toLowerCase().includes(lowercasedFilter)
        );
      });
    },
  },
  useGlobalFilter
);

这个方法的优势是完全控制筛选范围，只针对需要的字段进行匹配，不会影响其他列的筛选逻辑。

思路2：给User列添加自定义筛选函数 #

在columns配置中，为User列单独指定filter函数，让全局筛选触发该列的自定义筛选逻辑：

const columns = useMemo(() => ([
  {
    Header: 'User',
    accessor: 'user',
    Cell: ({value}) => (
      <div className="user">
        <h3 className="user__fullname">{value.firstName} {value.lastName}</h3>
        <p className="user__email">{value.email}</p>
      </div>
    ),
    // 自定义该列的筛选规则
    filter: (rows, _, filterValue) => {
      if (!filterValue) return rows;
      const lowercasedFilter = filterValue.toLowerCase();
      return rows.filter(row => {
        const user = row.values.user;
        return (
          user.firstName.toLowerCase().includes(lowercasedFilter) ||
          user.lastName.toLowerCase().includes(lowercasedFilter) ||
          user.email.toLowerCase().includes(lowercasedFilter)
        );
      });
    }
  },
  {
    Header: 'Action',
    accessor: 'action',
    Cell: ({value}) => (
      <button onClick={value.onClick}>{value.name}</button>
    ),
    // 不需要筛选Action列，添加配置排除
    disableFilters: true
  },
]), []);

这种方式贴合react-table的列级筛选设计，同时可以给不需要筛选的列添加disableFilters: true来排除筛选范围。

思路3：预处理数据，扁平化嵌套字段 #

在传入useTable之前，把user对象的嵌套字段提取为顶层属性，让全局筛选默认能识别这些字段：

// 预处理数据，扁平化嵌套字段
const processedData = useMemo(() => {
  return data.map(item => ({
    ...item,
    // 提取user内的字段到顶层
    firstName: item.user.firstName,
    lastName: item.user.lastName,
    email: item.user.email
  }));
}, [data]);

// 在useTable中使用处理后的数据
const { ... } = useTable(
  {
    columns,
    data: processedData,
  },
  useGlobalFilter
);

这个方法无需修改筛选逻辑，利用react-table默认的全局筛选行为，但会增加数据冗余，适合嵌套字段较少的场景。

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