修复 react material-table 的最后一行以显示特定列的总和？答案

【问题标题】：Fix the last row of react material-table to display the sum of a particular column?修复 react material-table 的最后一行以显示特定列的总和？
【发布时间】：2021-06-16 13:07:47
【问题描述】：

我们有一个要求显示 2 列的总和

import MaterialTable, {MTableToolbar, MTableAction} from "material-table";
.
.
.
<MaterialTable
            actions={transformActions()}
            data={data}
            editable={props.allowRowEditing ? {
                onRowAdd: newData => onRowAdd(newData),
                onRowDelete: oldData => onRowDelete(oldData),
                onRowUpdate: (newData, oldData) => onRowUpdate(newData, oldData)
            } : {}}
            icons={tableIcons}
.
.
./>

我有一个计算总数并显示总数的函数；但是在对列进行排序时，显示总数的行也会移动。有没有办法修复材料表本身的最后一行？或者是否有任何样式技巧可以实现这一目标？

根据以下问题报告，目前还没有任何方法可以使用材料表的属性来实现这一目标

Github Issue#27

请注意，我不能随意使用其他表库。

我试图定位最后一行并将其位置设置为绝对位置，如下所示

    position: absolute;
    height: 55px;
    width: calc(100% - 1px);
    bottom: 0;

虽然这会将最后一行固定在其位置，但我找不到动态方法来根据其他行对齐列。

【问题讨论】：

标签： css reactjs material-table

【解决方案1】：

您可以使用TableFooter 元素将您的总数粘贴到表格的底部。

一个覆盖body组件添加页脚的例子：

import { TableCell, TableFooter, TableRow } from "@material-ui/core";
// ...

    <MaterialTable
        // ...
        components={{
          Body: (props) => (
            <>
              <MTableBody {...props}/>
              <TableFooter>
                <TableRow>
                  <TableCell colSpan={2}/>
                  <TableCell colSpan={2}>Total: 12345</TableCell>
                </TableRow>
              </TableFooter>
            </>
          )
        }}
    />

这里的工作示例：https://codesandbox.io/s/long-tree-fqkno

【讨论】：

我们正在使用 mrbn/MaterialTable 库.. 不确定我是否可以使用它。
@stackMan10，添加了一个代码示例来帮助说明。由于该组件支持覆盖组件，我们可以使用它来为我们的表格主体添加页脚。
为什么页脚行的文字比其他行略浅？
这个答案很有用，但如果描述实际总值而不是虚拟值的方式可能会更好

【解决方案2】：

扩展至Ricardo回答如何呈现实际总值

                  Body: (props) => {
                      let totalObj = {
                        actualSum: 0
                      }
                      props.renderData.forEach((rowData: any) => {
                        totalObj.actualSum += rowData.act_svc_lvl;
                      });
                      return (
                        <>
                          <MTableBody {...props}/>
                          <TableFooter>
                            <TableRow>
                              <TableCell colSpan={1}/>
                              <TableCell colSpan={1}/>
                              <TableCell colSpan={1}>{totalObj.actualSum}</TableCell>
                            </TableRow>
                          </TableFooter>
                        </>
                    )}

【讨论】：