MUI-Datatable: How can I display the sum of the entire column?

Question

I have this column of Total Amount, how can I display the totalAmount?

From what I've researched, I can use the onTableChange. What it currently does right is display all of the data. This is the console.log("handleTableChange: ", JSON.stringify(tableState.data));

tableStateData = [
  {
    index: 0,
    data: [
      "0q0QY5j46rpd2Cqk3Tyo",
      "Anna",
      "US",
      [
        {
          color: "Black",
          size: "500",
          quantity: 2,
          id: "aRLMZkiSU7T0lcsPCSsV",
          cat: "ML",
          name: "Tumbler",
          price: 200
        }
      ],
      400
    ]
  },
  {
    index: 1,
    data: [
      "8NhUUD690QXCol41IVB1",
      "Anna",
      "US",
      [
        {
          size: "500",
          color: "Green",
          id: "aRLMZkiSU7T0lcsPCSsV",
          price: 200,
          name: "Tumbler",
          quantity: 2,
          cat: "ML"
        },
        {
          id: "aRLMZkiSU7T0lcsPCSsV",
          name: "Tumbler",
          color: "Black",
          cat: "ML",
          size: "500",
          quantity: 1,
          price: 200
        },
        {
          price: 200,
          color: "Pink",
          quantity: 1,
          id: "aRLMZkiSU7T0lcsPCSsV",
          size: "500",
          name: "Tumbler",
          cat: "ML"
        },
        {
          size: "XL",
          color: "Pink",
          id: "hdrezmDjPXcBVfYkusie",
          quantity: 1,
          name: "Shirt",
          price: 500,
          cat: "L-XXL"
        },
        {
          size: "XL",
          color: "Green",
          cat: "L-XXL",
          id: "hdrezmDjPXcBVfYkusie",
          name: "Shirt",
          quantity: 1,
          price: 500
        }
      ],
      1800
    ]
  },
  {
    index: 2,
    data: [
      "JHof5tGxvV3WXDCgcbxG",
      "Anna",
      "US",
      [
        {
          color: "Blue",
          price: 300,
          size: "L",
          quantity: 2,
          name: "Shirt",
          id: "uTHIR6OQFRuqP9Drft0e",
          cat: "S-L"
        },
        {
          size: "L",
          color: "Black",
          name: "Shirt",
          price: 300,
          cat: "S-L",
          quantity: 3,
          id: "uTHIR6OQFRuqP9Drft0e"
        }
      ],
      1500
    ]
  }
];

Though, I am unsure how I can display the sum of all of the totalAmount, and the totalAmount here in the data is the 400, 1800, and 1500.

Any help would be appreciated. Thank you.

codesandbox: https://codesandbox.io/s/xenodochial-fog-s984v0?file=/src/data.js

export default function App() {
  console.log(data);
  const columns = [
    {
      name: "totalAmount",
      label: "Total Amount",
      options: {
        filter: true,
        sort: true
      }
    }
  ];
  const options = {
    filter: true,
    selectableRows: "none",
    responsive: "scrollMaxHeight",
    expandableRows: true,
    renderExpandableRow: (rowData, rowMeta) => {
      console.log(rowData);
      return (
        <tr>
          <td colSpan={4}>
            <TableContainer>
              <Table style={{ margin: "0 auto" }}>
                <TableHead>
                  <TableCell align="right">Name</TableCell>
                  <TableCell align="right">Color</TableCell>
                </TableHead>
                <TableBody>
                  {rowData[3].map((row) => {
                    console.log(row);
                    return (
                      <TableRow key={row.id}>
                        <TableCell component="th" scope="row" align="right">
                          {row.name}
                        </TableCell>
                        <TableCell align="right">{row.color}</TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            </TableContainer>
          </td>
        </tr>
      );
    }
  };
  return (
    <div className="App">
      <ThemeProvider theme={createTheme()}>
        {" "}
        <MUIDataTable
          title={"Reports"}
          options={options}
          columns={columns}
          data={data}
        />
      </ThemeProvider>
    </div>
  );
}

Answer 1

You need to create custom footer, by setting customFooter in options object.

Then, you will need to store your total amount in state and update it every time table state changes (for that you can use onTableChange prop) and render that value inside table footer.

I created a complete solution here