如何在react-table中实现嵌套HTML元素单元格的搜索功能

问题根源在于你当前的Details列对应的accessor是details，但原始数据中并没有这个字段——该列的内容是渲染时动态生成的，而React Table的全局过滤默认只会检查列配置中accessor指向的原始数据字段，所以无法搜到这部分内容。

下面提供两种可行的解决方案：

方案一：将渲染内容存入原始数据（推荐） #

把Details列要展示的文本内容提前加到数据对象中，让全局过滤能直接读取到：

1. 修改原始数据，添加存储Details文本的字段：

const data = [
  { 
    name: "Sam", 
    age: 25,
    detailsContent: "Some nested content for Sam"
  },
  { 
    name: "Emily", 
    age: 21,
    detailsContent: "Some nested content for Emily"
  }
];

2. 更新列配置的accessor指向新增字段：

const columns = [
  { Header: "Name", accessor: "name" },
  { Header: "Age", accessor: "age" },
  { Header: "Details", accessor: "detailsContent" }
];

3. 保持渲染逻辑不变（或简化）：

// 在单元格渲染处
{cell.column.id === "detailsContent" ? (
  <div>
    <p>{cell.value}</p>
  </div>
) : cell.render("Cell")}

这样全局过滤会自动包含detailsContent字段的内容，无需额外修改过滤逻辑。

方案二：自定义全局过滤函数 #

如果不想修改原始数据，可以通过自定义globalFilterFn来手动检查Details列的渲染内容：

在useTable的配置中添加自定义过滤函数：

const {
  // ... 其他hooks返回值
} = useTable(
  {
    columns,
    data,
    // 自定义全局过滤逻辑
    globalFilterFn: (rows, _, filterValue) => {
      const lowerFilter = filterValue.toLowerCase().trim();
      if (!lowerFilter) return rows;

      return rows.filter(row => {
        // 检查Name列
        const nameMatch = row.values.name.toLowerCase().includes(lowerFilter);
        // 检查Age列
        const ageMatch = row.values.age.toString().includes(lowerFilter);
        // 检查Details列的渲染内容
        const detailsText = `Some nested content for ${row.original.name}`.toLowerCase();
        const detailsMatch = detailsText.includes(lowerFilter);

        return nameMatch || ageMatch || detailsMatch;
      });
    }
  },
  useGlobalFilter
);

这个函数会手动判断每一行的Name、Age以及动态生成的Details内容是否匹配搜索关键词，实现包含嵌套HTML内容的搜索。

内容的提问来源于stack exchange，提问作者Md Mobinur Rahaman