修復 react material-table 的最后一行以顯示特定列的總和？

Question

我們有一個要求顯示 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問題#27

請注意，我不能隨意使用另一個表庫。

我試圖定位最后一行並將其位置設置為絕對位置，如下所示

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

雖然這將最后一行固定在其位置，但我找不到根據其他行對齊列的動態方法。

Answer 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

Answer 2

對如何呈現實際總值的里卡多答案的擴展

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