Final row in table for calculating totals (based on a table that can be filtered)

[krynv]

I have some data in a table component I would like to sum up, and other data I would like to make an 'average' calculation on.

It seems there is no way for me to have an additional row, or anything in the Table component to create a 'total' row at the bottom of my data, to sum up the values in each row, or do any form of calculation.

So I followed this thread on how to implement this:

How do I count or sum the content of multiple table rows?

So I have a table: Item Name (Col1), Amount (Col2) x 5 rows How Can I get the total sum of 'amount' from the 5 rows? thx, Toby

I created some labels right under my table component to act like the total values.

{{_.sum(table1.data.map(d=>_.parseInt(d.numberOfWords)))}}
£{{_.sum(table1.data.map(d=>_.parseInt(d.monthlyCost)))}}
And
£{{_.mean(table1.data.map(d=>_.parseInt(d.costPerWord))).toFixed(2)}}

This gives me the totals across all of the data. Great.

But now I would like these values to be calculated dynamically based on what is visible in my table component, so that when a user uses the built in 'Filter' feature of the table component, they only see the totals for the things they can actually 'see'.

How can I do this? Is it even possible?

[Kabirdas]

Hey @krynv!

Have you tried using the displayedData property on your table? e.g.

£{{_.mean(table1.displayedData.map(d=>_.parseInt(d.costPerWord))).toFixed(2)}}

[krynv]

Looks like that's what I was after. For some reason it didn't autocomplete this suggestion for me.

Works, thanks.

[yiga2]

@Kabirdas I was too looking for a simple textbox container showing the sum of a column in a filtered (new) Table, but displayedData does not exist.
Hope this is not yet another feature not migrated to the New Table as that's a pretty big one. If it is, do you have a workaround ? I couldn't figure one.

Same issue if I wanted to export the filtered data to csv. How ?

[krynv]

I think this has something to do with the new table component.

I checked and also get the same result:

I'm not even able to have a 'toolbar' for my tables anymore. When I copy & paste an existing table (old style component), it comes with an 'add-on' for toolbar, which I can customise to include filters, download button, refresh button, pagination etc.

This option is not available to me when I create a new style component; I am not able to add an 'add-on' called Toolbar (although pagination appears to be a separate 'add-on' now). So this suggests that it's more than likely the new table component to blame.

My suggestion is, if you have an old-style table somewhere in your apps, just use that.
OR
Here's a thread about using the API directly, although this would mean greater development time for you:

New Table Toolbar

@BurkeWise we're actively working on the new toolbar! We're hoping to launch it around the end of the month, but until then you can export data from Table by using the exportData API: [CleanShot 2023-05-04 at 17.19.56@2x] Table also exposes some APIs for filtering! I've attached this example app for you to explore: [CleanShot 2023-05-04 at 17.45.46] Filtering Example.json (77.8 KB) We will be adding more ergonomic and accessible options for filtering Table soon, but it is possible to imple…

[yiga2]

Thanks @krynv for chiming in but having the toolbar or not will not help with the fact the New Table misses a critical property, namely Array of filtered and/or displayed (on current page?) data. Legacy has displayedData at least for all filtered data.

I am also upset the component was released without disclaimer on all that's missing. The migration page is just the tip of the iceberg, and I have spent too much time on this forum posting on its issues.

Extremely frustrating as I enjoyed 21K rows on the client-side but considering all the bugs and missing features, I have decided to refactor and migrate to Legacy table with, unfortunately a buggy/slow Server-Side pagination. Or look elsewhere.

[Kabirdas]

Hey folks! Unfortunately, I don't have a solution for you yet with the new table

Better performance for the .displayedData property of the legacy table is something that was highly requested but there isn't a clear design path forward on it at the moment and for now, it's not available in the new table as @yiga2 mentioned.

Adding the option for a built-in summary row to the new table is something the dev team is looking do to though! There isn't a set timeline at the moment but I'll pass it along here when it's included.

[Jason_Maki]

Has this been solved for yet?

[bradlymathews]

I solved this my creating a transformer that took the query results, looped through them, added/averaged as needed and then created a new array that included the totals row.

Then used the transformer as my tabled Data source. Works for old and new tables.

Only problem is I also wanted to change the background color of the totals row, but that feature has not yet been added back to the new table.

[Kabirdas]

Hey folks! Just want to mention the (relatively) new table summary row here. It doesn't solve all of the issues in this thread but, hopefully, is a helpful addition for some of your use cases!