React TanStack Table子行过滤失效问题排查求助

我在用TanStack React Table实现支持一对多关系的可展开表格时，遇到了全局过滤的问题：配置了globalFilter状态后，执行搜索只有根行会被过滤，子行完全不受影响。我已经设置了filterFromLeafRows: true，但这个配置没有生效。

表格实例代码 #

const tableInstance = useReactTable({
  columns: columnDef,
  data: data,
  filterFromLeafRows: true,
  getSubRows: (row) => row.subRows,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  onPaginationChange: setPagination,
  getExpandedRowModel: getExpandedRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  onExpandedChange: setExpanded,
  onGlobalFilterChange: setGlobalFilter,
  state: {
    //...
    pagination,
    expanded,
    columnVisibility,
    globalFilter,
  },
});

列定义 #

const columnDef = [
  {
    accessorKey: "Administracion",
    header: "Administración",
    cell: ({ row, getValue }) => (
      <div key={row.id}>
        <strong>{getValue()}</strong>
        {row.getCanExpand() && (
          <button
            key={row.id}
            className={"btn btn-outline-light ms-2"}
            style={{ border: "none" }}
            onClick={row.getToggleExpandedHandler()}
          >
            <FontAwesomeIcon
              icon={row.getIsExpanded() ? faChevronDown : faChevronRight}
            />
          </button>
        )}
      </div>
    ),
  },
  {
    accessorKey: "Edif_ID",
    header: "Edif_ID",
  },
  {
    accessorKey: "Nombre",
    header: "Nombre",
  },
  {
    accessorKey: "Direccion",
    header: "Dirección",
  },
  {
    header: "Acciones",
    cell: ({ row }) => (
      <>
        {!row.getCanExpand() && (
          <div className="d-flex flex-row">
            <OverlayTrigger
              placement="top"
              overlay={
                <Tooltip id="tooltip">
                  <strong>Administrar</strong>
                </Tooltip>
              }
            >
              <Button
                className="btn btn-warning me-2"
                onClick={() =>
                  navigate("administrar/" + row.original.Edif_ID + "/info")
                }
              >
                {" "}
                <FontAwesomeIcon icon={faGear} />
              </Button>
            </OverlayTrigger>
            <OverlayTrigger
              placement="top"
              overlay={
                <Tooltip id="tooltip">
                  <strong>Reservar</strong>
                </Tooltip>
              }
            >
              <Button
                className="btn btn-success ms-3"
                onClick={() =>
                  navigate(
                    "/dashboard/misedificios/reservar/" + row.original.Edif_ID
                  )
                }
              >
                {" "}
                <FontAwesomeIcon icon={faClock} />
              </Button>
            </OverlayTrigger>
          </div>
        )}
      </>
    ),
  },
];

数据样本 #

[
  {
    "Adm_ID": "2",
    "Administracion": "Waven Solutions",
    "subRows": [
      {
        "Edif_ID": "4",
        "Nombre": "Cooperativa Cololó",
        "Direccion": "Liber Arce 3222",
        "Adm_ID": "2"
      }
    ]
  },
  {
    "Adm_ID": "3",
    "Administracion": "CQSoft",
    "subRows": [
      {
        "Edif_ID": "5",
        "Nombre": "Edificio Requena",
        "Direccion": "Joaquin Requena 917",
        "Adm_ID": "3"
      }
    ]
  }
]

效果截图 #

• 未过滤状态：
  

• 搜索字符“a”后的状态（仅根行被过滤，不符合预期）：
  

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