如何在shadcn-ui的DataTable中无需分页展示全部数据？

我正在使用shadcn-ui库中的datatable组件（基于tanstack table构建），当前默认仅展示10行数据，只有开启分页组件才能查看全部数据。请问是否存在无需分页即可展示所有数据的方法？

解决方案 #

方法一：利用现有withPagination属性动态控制 #

你的DataTable组件已经定义了withPagination属性，可以通过它切换分页逻辑，同时设置每页行数为数据总长度：

1. 修改DataTable组件中useReactTable的配置：

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  // 仅在开启分页时加载分页模型
  ...(withPagination ? { getPaginationRowModel: getPaginationRowModel() } : {}),
  initialState: {
    pagination: {
      // 关闭分页时，每页行数设为数据总长度
      pageSize: withPagination ? 10 : data.length,
    },
  },
});

2. 调整DataTablePagination组件的默认分页设置，避免覆盖全量展示的配置：

// 修改DataTablePagination中的useEffect
useEffect(() => {
  // 仅在开启分页时设置初始每页5行
  if (table.options.getPaginationRowModel) {
    table.setPageSize(5);
  }
}, [table]);

方法二：新增showAll属性单独控制全量展示 #

如果不想影响现有分页逻辑，可以新增一个属性专门控制是否展示所有数据：

1. 扩展DataTableProps接口：

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
  withPagination: boolean;
  showAll?: boolean; // 新增全量展示控制属性
}

2. 更新useReactTable配置：

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  initialState: {
    pagination: {
      // showAll为true时展示所有数据，否则沿用原有分页逻辑
      pageSize: showAll ? data.length : (withPagination ? 5 : 10),
    },
  },
});

3. 在DataTable中控制分页组件的渲染：

// 修改分页组件的渲染条件，showAll为true时隐藏
{withPagination && !showAll && <DataTablePagination table={table} />}

方法三：直接移除分页模型（固定无分页场景） #

如果该表格永远不需要分页，直接删除getPaginationRowModel的配置即可：

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  // 移除getPaginationRowModel配置，表格将默认展示所有数据
});

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