TanStack Table嵌套数据场景下全局筛选（Global Filter）失效求助

兄弟我太懂这种嵌套数据筛选卡壳的头疼了！之前用TanStack Table处理关联表数据时，也碰到过一模一样的问题——全局搜名字完全没反应，后来才搞明白，它默认的全局筛选逻辑只会扫顶层字段，根本不会深入到嵌套的关联对象里找内容。

给你说几个我亲测有效的解决办法：

• 自定义全局筛选函数是核心
  TanStack Table允许我们重写globalFilterFn，让它能递归遍历行数据里的所有嵌套属性。我给你贴个我当时用的代码示例，你可以直接改改用：

  const customGlobalFilterFn = (row, columnIds, filterValue) => {
    const searchTerm = filterValue.toLowerCase();
    // 写个递归函数遍历所有属性值
    const checkNestedValue = (value) => {
      if (typeof value === 'string') {
        return value.toLowerCase().includes(searchTerm);
      }
      // 如果是对象就继续递归检查它的所有值
      if (typeof value === 'object' && value !== null) {
        return Object.values(value).some(checkNestedValue);
      }
      return false;
    };
    // 检查当前行的所有原始数据
    return Object.values(row.original).some(checkNestedValue);
  };
  

  然后在创建Table的时候把这个函数传进去：

  const table = useReactTable({
    columns,
    data,
    globalFilterFn: customGlobalFilterFn,
    // 其他你的配置项...
  });
  

• 先确认关联数据真的加载到了
  你用Prisma查数据的时候，一定要确保include了关联的Authors表，不然row.original里根本没有作者数据，再怎么筛选也白搭。比如：

  const papers = await prisma.publishedPapers.findMany({
    include: {
      Authors: true, // 这步千万别漏！
    },
  });
  

  可以先console.log(row.original)看看，Authors对象里的first_name、last_name是不是都有值。

• 排查筛选关键词的传递
  要是还是不行，就在自定义的筛选函数里加几个console.log，看看searchTerm是不是你输入的关键词，row数据是不是正确的，说不定是关键词没传对或者数据结构和你想的不一样。

我当时就是这么折腾好的，你照着试试应该就能解决了！

备注：内容来源于stack exchange，提问作者Stykgwar