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值作为道具传递。

在这里我创建了具有完整解决方案的沙箱。