我正在为我的桌子使用 ag-grid。我需要在表格末尾显示每列的总和

Question

这是我的 React 组件。

<AgGridReact
                        rowData={details}
                        columnDefs={columnDefs}
                        defaultColDef={defaultColDef}
                        autoGroupColumnDef={autoGroupColumnDef}
                        aggFuncs={aggFuncs}
                        groupIncludeFooter={groupIncludeFooter}
                        groupIncludeTotalFooter={groupIncludeTotalFooter}
                    ></AgGridReact>

这是我的功能。

const [columnDefs, setColumnDefs] = useState([
        {
            headerName: 'Details',
            children: [
                {
                    field: 'uniqId',
                    width: 90,
                    filter: 'agTextColumnFilter',
                },
                {
                    field: 'name',
                    width: 180,
                    filter: 'agNumberColumnFilter',
                },
            ],
        },
        {
            headerName: 'Other Details',
            children: [
                { field: 'gender', width: 100 },
                {
                    field: 'salary',
                    aggFunc: "sum",
                    width:100,
                },
                {
                    field: 'country',
                    width: 100,
                    filter: 'agNumberColumnFilter',
                },
                {
                    field: 'birthdate',
                    width: 100,
                    filter: 'agNumberColumnFilter',
                },
                {
                    field: 'vegetarian',
                    width: 100,
                    filter: 'agNumberColumnFilter',
                },
                {
                    field: "Edit",
                    colId: "view",
                    width: 100,
                    cellRendererFramework: function (params) {
                        return <button className="btn btn-secondary gridButton" onClick={() => getUserDetails(params.data._id)}> Edit </button>
                    }
                },
                {
                    field: "Delete",
                    colId: "view",
                    width: 100,
                    cellRendererFramework: function (params) {
                        return <button className="btn btn-danger gridButtonDelete" onClick={() => handleDelete(params.data._id)}> Delete </button>
                    }
                },
            ],
        },
    ]);

我需要在表格末尾显示价格列的总和。我需要显示在表格的底部。如果有人在单元格中添加新数据，总和需要反映出来。

我正在为我的桌子使用 ag-grid。我需要在表格末尾显示每列的总和。编辑单元格后，应更新总和值

请帮我解决这个问题

Answer 1

一种方法是使用“总计”行。您将为每个必需的列执行求和计算，然后将该数据返回到

pinnedBottomRowData

内

gridOptions

.

总计行数据的格式类似于您的行数据，其中有一个键/值对包含要在网格上显示的数据。正如 colDefs 访问 rowData 中的特定数据一样，colDefs 也将访问总计行数据中的求和值。

pinnedBottomRowData

属性是将总计行数据固定到网格底部的原因。

如果您在网格的 UI 中编辑单元格数据，网格应自动更新以反映该更改。查看网格文档的更新数据部分，如果它不能自动为您工作。如果没有，您可能需要使用其他辅助函数，例如

setRowData

或

onRowDataUpdated

.

例如：

const sumData = (data) => {
  // perform summation on your salary data:
  const totalSalary = data.reduce((accumulator, currentData) => accumulator + currentData.salary, 0);

  // perform calculations on other columns requiring this aggregation
  const otherData = // perform other calculations as needed

  return { totalSalary, otherData }; 
};

const { totalSalary, otherData} = sumData(data);

const totalsRowData = {
  id: 'totalsRow',
  salary: totalSalary,
  otherData: otherData, 
};

const gridOptions = {
  pinnedBottomRowData={totalsRowData}
};

<AgGridReact
  rowData={details}
  columnDefs={columnDefs}
  defaultColDef={defaultColDef}
  autoGroupColumnDef={autoGroupColumnDef}
  aggFuncs={aggFuncs}
  groupIncludeFooter={groupIncludeFooter}
  groupIncludeTotalFooter={groupIncludeTotalFooter}
  gridOptions={gridOptions} // add grid options to your grid's props
/>

编辑：这是关于总计行的另一个相关主题，以防它为您提供额外的有用信息：How to enable or show total row in footer of ag-grid table