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

Question

我有这个 Material-UI DataGrid，我如何对总金额列的所有值求和，一旦触发过滤器，该列也将更新？

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

代码：

  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>
  );
}

Answer 1

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

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