You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何配置MaterialDatatable一次性展示全部行而非默认10行

MaterialDatatable 全量展示表格行配置方法

组件默认分页每页10行的规则可以通过options参数自定义,直接传固定数值的rowsPerPage只能匹配固定数据量的场景,要实现自动适配全量数据展示,按以下方式配置即可:

  • 将rowsPerPage的值绑定为传入表格的数据源总长度data.length,不需要硬编码固定数字,不管数据总量是多少都会默认一次性加载全部行
  • 同步配置rowsPerPageOptions参数,把数据总长度加入分页可选条目列表,避免组件内部的分页规则校验报错,同时也保留手动切换分页大小的能力

可直接参考以下可用代码:

<MaterialDatatable
  title="My Team"
  data={data}
  columns={columns}
  options={{
    rowsPerPage: data.length,
    rowsPerPageOptions: [10, 25, 50, data.length]
  }}
/>

注意:如果表格数据是接口异步获取的,需要等接口返回完整data数组后再渲染MaterialDatatable组件,避免初始化阶段data为空数组时rowsPerPage被设为0,导致表格内容展示异常。

内容的提问来源于stack exchange,提问作者Rohit Verma

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.29 14:36:30