如何配置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
相关产品推荐
相关产品推荐

