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

技术咨询:MUI Data Grid X Pro组件是否支持可固定页脚行以展示总计?

MUI X Data Grid Pro 固定页脚行支持说明

MUI X Data Grid Pro 完全支持添加固定的页脚行来展示总计等聚合信息,主要可通过两种方式实现:

  • 内置聚合+默认页脚
    利用组件的aggregation配置为指定列设置聚合函数(如sum、avg),再开启showFooter属性,组件会自动生成固定在视图底部的总计行,不会随滚动条移动。
    示例代码:

    <DataGridPro
      rows={rows}
      columns={[
        { field: 'id', headerName: 'ID', width: 90 },
        { field: 'amount', headerName: '金额', type: 'number', width: 150, aggregation: { function: 'sum' } },
      ]}
      showFooter
    />
    
  • 自定义固定页脚
    若需更灵活的内容(比如多列合计、自定义样式),可通过footer插槽实现自定义固定页脚,插槽内容会固定在网格底部,不受滚动影响。
    示例代码:

    <DataGridPro
      rows={rows}
      columns={columns}
      slots={{
        footer: () => (
          <div style={{ padding: '10px', textAlign: 'right', fontWeight: 'bold' }}>
            总计金额:{calculateTotal(rows)}
          </div>
        ),
      }}
    />
    

注意:上述高级功能属于Pro版专属,需确保使用的是MUI X Data Grid Pro版本而非社区版。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.24 11:22:47