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

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:

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


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?

Hey @krynv!

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


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

Works, thanks.

@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 ?

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.
Here's a thread about using the API directly, although this would mean greater development time for you:

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.

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

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.

Has this been solved for yet?

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.

1 Like

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!

1 Like