Fix the last row of react material-table to display the sum of a particular column?

Question

We have a requirement display the total sum for 2 columns

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

I have a function to calculate the total and display the total; however on sorting the column, the row that displays the total moves around as well. Is there a way to fix the last row in material-table itself? Or are there any style hacks that can be done to achieve this?

Based on below issue report, there isn't any way as of now to achieve this using material table's properties

Github Issue#27

Note that I am not at liberty to use another table library.

I have tried to target the last row and set it's position as absolute as shown below

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

while this fixes the last row in its position, I can't find a dynamic way to align the columns in accordance to the other rows.

Measured

Answer 1

You can use the TableFooter element to stick your totals to the bottom of the table.

An example of overriding the body component to add a footer:

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

Working example here: https://codesandbox.io/s/long-tree-fqkno

Tinder

We are using the mrbn/MaterialTable library .. Not sure if I can use this. – Measured

@stackMan10, added a code example to help illustrate. As the component supports overriding components, we can use that to append a footer to our table body. – Tinder

why text of footer row is bit light than other rows? – Cachinnate

this answer was useful but could have been better if way of rendering actual total value would have described instead of dummy value – Cachinnate

Hi @MuhammadAwais . I intentionally left that out as it depends a lot on the current implementation and data structure. For some cases, the value will be at hand from a server-side call, while for others it would have to be computed before to be displayed somewhere else. – Tinder

Answer 2

Extension to Ricardo answer of how to render actual total value

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

Cachinnate