Material React Table是否有获取行数的属性？需在表格上方显示行数

Material React Table 提供了直接获取行数的方式，无需额外自定义逻辑，核心是通过useMaterialReactTable返回的table对象调用对应的方法：

• 获取当前页渲染的行数：使用table.getRowModel().rows.length，这个值会随分页、过滤等操作实时更新，对应表格当前显示的行数
• 获取过滤/排序后的总数据行数：使用table.getPrePaginationRowModel().rows.length，这个值是经过过滤、排序但未分页的所有数据行数
• 获取原始总数据行数：直接取传入的数据源数组长度，比如data.length，适合不需要考虑过滤/排序场景的情况

示例代码 #

import { useMaterialReactTable, MaterialReactTable } from 'material-react-table';

const MyTable = () => {
  const columns = [/* 你的列配置 */];
  const data = [/* 你的数据源 */];

  const table = useMaterialReactTable({
    columns,
    data,
  });

  return (
    <div>
      <div style={{ marginBottom: '1rem' }}>
        <span>当前页行数：{table.getRowModel().rows.length}</span>
        <span style={{ marginLeft: '1rem' }}>总数据行数（过滤后）：{table.getPrePaginationRowModel().rows.length}</span>
      </div>
      <MaterialReactTable table={table} />
    </div>
  );
};

export default MyTable;

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