How can I calculate the entire column where it will also change according to the filter?

[forjen127]

Sum and display the entire column value of the total amount and will also change according to the filter

Expected Behavior

It will initially show the sum of the entire column and it will also update when filter is triggered

Current Behavior

For now, I am really unsure on how I can do this, I've only managed with the console.log("handleTableChange: ", JSON.stringify(tableState.data));

  function handleTableChange(action, tableState) {
    console.log("handleTableChange:... ", tableState.data);
  }

  const options = {
    filter: true,
    selectableRows: "none",
    responsive: "scrollMaxHeight",
    expandableRows: true,
    onTableChange: handleTableChange,
    onFilterChange: (columnChanged, filterList) => {
      console.log(filterList, "filter");
    },
    renderExpandableRow: (rowData, rowMeta) => {
      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>
      );
    }
  };

The Codesandbox Link

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

Your Environment

Tech	Version
Material-UI	5.5.0
MUI-datatables	4.1.2
React	17.0.2
browser	Google Chrome