如何获取react table全局筛选后的数据长度并通过react-helmet设置页面标题

实现原理 #

React Table 中preGlobalFilteredRows是未经过全局筛选的原始数据行，而经过所有过滤器（包括globalFilter）、排序处理后的全量数据（未分页），可以通过useTable返回的rows属性获取，它的长度就是筛选后的总条数。

修改步骤 #

1. 调整Table组件中useTable的返回值解构，新增获取rows属性
2. 将筛选后的总条数rows.length作为参数传递给GlobalFilter组件
3. 在GlobalFilter组件中接收筛选后的计数，替换页面标题、搜索框占位符中原来的原始计数

代码修改示例 #

1. Table组件修改 #

// 解构useTable返回值时新增rows
const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  page,
  prepareRow,
  previousPage,
  nextPage,
  canPreviousPage,
  canNextPage,
  state,
  setPageSize,
  pageOptions,
  gotoPage,
  pageCount,
  setGlobalFilter,
  preGlobalFilteredRows,
  rows // 新增该行
} = useTable(
  {
    columns,
    data,
  },
  useGlobalFilter,
  useSortBy,
  usePagination
);

// 给GlobalFilter传递新增的filteredCount参数
<GlobalFilter
  preGlobalFilteredRows={preGlobalFilteredRows}
  globalFilter={state.globalFilter}
  setGlobalFilter={setGlobalFilter}
  filteredCount={rows.length} // 新增该行
/>

2. GlobalFilter组件修改 #

// 接收新增的filteredCount参数
const GlobalFilter = ({
  preGlobalFilteredRows,
  globalFilter,
  setGlobalFilter,
  filteredCount // 新增该行
}) => {
  const totalCount = preGlobalFilteredRows.length;
  const [value, setValue] = useState(globalFilter);
  const onChange = useAsyncDebounce((value) => {
    setGlobalFilter(value || undefined);
  }, 200);

  return (
    <>
      <Helmet>
        {/* 替换为筛选后的计数 */}
        <title>{`${filteredCount} 条记录找到`}</title>
      </Helmet>
      <label className="flex gap-x-2 items-baseline">
        <span className="text-primary-dark">搜索: </span>
        <input
          type="text"
          className="text-primary-dark rounded-md border-gray-300 shadow-sm outline-none p-2"
          value={value || ""}
          onChange={(e) => {
            setValue(e.target.value);
            onChange(e.target.value);
          }}
          {/* 可按需修改占位符展示逻辑 */}
          placeholder={`共${totalCount}条记录`}
        />
      </label>
    </>
  );
};

补充说明 #

如果你需要获取当前分页展示的条目数，直接使用page.length即可，不需要额外传递rows参数。

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