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

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 (




Name
Color

{rowData[3].map((row) => {
console.log(row);
return (


{row.name}

{row.color}

);
})}







);
}
};
```

## 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 |

Start by running the linked CodeSandbox and reading src/data.js, then trace the onTableChange and onFilterChange callbacks shown in the issue. Confirm how the table exposes filtered rows and define done as displaying the column total initially and updating it when a filter changes.

Written by the indexing model from the issue text.