How do you permanently display an aggregated non-grouped row?
I feel I'm missing something obvious.
- It's to do with aggregation, attempting to use the internal aggregation logic associated with sum. max, min, etc.
- I basically want to know the most performant (and readable/tidiest) way to permanently display a 'totals' row with the aggregated totals (sum) for specific columns.
The only examples I can find are directly linked to Grouping of columns, which then provide the aggregated totals. But I don't need grouping in this instance. The other examples I see utilise the footer option. Here's an example of it in the brilliant material-react-table - thanks @KevinVandy and co. But I don't want this to appear in the footer.
https://www.material-react-table.com/docs/guides/aggregation-and-grouping#aggregation-grouping-example
So should I simply use the footer data (via
Here's a Codesandbox based off of the material-react-table example above (for tanstack-table, replace
https://codesandbox.io/s/purple-fire-ckriw3?file=/src/TS.tsx
Attached is a lovely picture I made to show what I'm looking for (ignore the 65 as the actual end figure, it could be a sum/max/min/anything that aggregation offers or a custom value).
Any help would be appreciated
- It's to do with aggregation, attempting to use the internal aggregation logic associated with sum. max, min, etc.
- I basically want to know the most performant (and readable/tidiest) way to permanently display a 'totals' row with the aggregated totals (sum) for specific columns.
The only examples I can find are directly linked to Grouping of columns, which then provide the aggregated totals. But I don't need grouping in this instance. The other examples I see utilise the footer option. Here's an example of it in the brilliant material-react-table - thanks @KevinVandy and co. But I don't want this to appear in the footer.
https://www.material-react-table.com/docs/guides/aggregation-and-grouping#aggregation-grouping-example
So should I simply use the footer data (via
getFooterGroups) here in order to accomplish this, moving it further up the dom? Or is there a cleaner way, like a custom Model getter that I'm simply not aware of, which also then can use the aggregate function to display the content and a custom meta value for instance?Here's a Codesandbox based off of the material-react-table example above (for tanstack-table, replace
Footer with footer on line 44. (This has nothing to do with material-react-table however - it's just a really good example.https://codesandbox.io/s/purple-fire-ckriw3?file=/src/TS.tsx
Attached is a lovely picture I made to show what I'm looking for (ignore the 65 as the actual end figure, it could be a sum/max/min/anything that aggregation offers or a custom value).
Any help would be appreciated
CodeSandboxaniallator8
purple-fire-ckriw3 by aniallator8 using @emotion/react, @emotion/styled, @mui/icons-material, @mui/material, material-react-table, react, react-dom
How to use and customize the aggregation and grouping features of Material React Table
