Mui-datatables: Display the sum of a column

[Pinzauti]

Expected Behavior

Given a column with some values in it, is there a way to sum all the values in order to give a "total" of the column?
The total value should change accordingly to the filter and the consequently values displayed in the table.

Current Behavior

Not able to do it, even inside the table or outside.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 4.7.0 |
| MUI-datatables | 2.13.3 |
| React | 16.12.0 |
| browser | Chrome |
| etc | |

[gabrielliwerant]

Hey @Pinzauti. There's no built-in way to do this at the moment. This library is more table than spreadsheet. However, you can do this yourself with a bit of effort by updating your own data when there's a table change. onTableChange provides hooks for most of the table actions, so for example, after filtering, it will fire, and return you the displayed table state, which you can use to create summations for your data. See the docs for information about that callback if you're interested.

[Pinzauti]

I see, thanks for your answer

[karlasantos]

Do the solution works for you @Pinzauti? I'm having problems with the state of my total column, when I call setState in onTableChange filters are lost.

[gabrielliwerant]

@karlasantos Losing state when updating is a known issue. The work around for now is to manage all the state you want to keep yourself and then put it into the table:

psuedocode:

this.state = { myFilters: [] };

const columns = [
  { name: "Foo", options: { filterList: this.state.myFilters } }
];

<MUIDataTables columns={columns} data={data} />