Material-UI DataGrid，显示列总和并根据过滤器更新总和答案

【问题标题】：Material-UI DataGrid, display sum of column and sum updates according to filter as wellMaterial-UI DataGrid，显示列总和并根据过滤器更新总和
【发布时间】：2022-08-16 17:16:49
【问题描述】：

我有这个 Material-UI DataGrid，我怎样才能对列 Total Amount 的所有值求和，一旦触发过滤器，这也将被更新？

我真的不确定如何对整列的总金额求和。任何帮助，将不胜感激。谢谢

代码：

  const [filterModel, setFilterModel] = React.useState({
    items: [
      {
        columnField: \"totalAmount\",
        operatorValue: \">\",
        value: \"200\"
      }
    ]
  });

  return (
    <div style={{ height: 400, width: \"100%\" }}>
      <DataGrid
        // rows={rows}
        columns={columns}
        rows={data}
        components={{
          Toolbar: GridToolbar
        }}
        filterModel={filterModel}
        onFilterModelChange={(newFilterModel) => setFilterModel(newFilterModel)}
      />
    </div>
  );
}

标签： javascript reactjs material-ui datagrid

【解决方案1】：

您可以创建自定义页脚组件，然后将 total 值作为道具传递。

Here 我用完整的解决方案创建了沙箱。

【讨论】：

谢谢你。但是，总金额的总和又是如何基于过滤器显示的呢？
你好@Nemanja你也知道Mui-datatable，它有类似的功能，它显示整个列的总和？ - stackoverflow.com/questions/71448488/…
@PennieCorhon 不客气。在 MUI 数据表 (mui.com/api/data-grid/data-grid) API 的文档中，我没有看到有一个内置选项来汇总列。您需要手动编写该逻辑。

【解决方案2】：

请问您如何为每列添加总数？

我知道现在有聚合功能，但它只适用于高级套餐。

【讨论】：