T
TanStack•3y ago
rival-black

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 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 🙂
aniallator8
CodeSandbox
purple-fire-ckriw3 - CodeSandbox
purple-fire-ckriw3 by aniallator8 using @emotion/react, @emotion/styled, @mui/icons-material, @mui/material, material-react-table, react, react-dom
Aggregation and Grouping Feature Guide - Material React Table Docs
How to use and customize the aggregation and grouping features of Material React Table
No description
1 Reply
deep-jade
deep-jade•3y ago
hello, how did u solved it?

Did you find this page helpful?