How do I Chart only the data currently visible in the table, including pagination, filters and sorting?

[ffaubert]

Hello,

I would like my Chart to reflect the data that is currently visible in the table underneath it. I have found how to do pagination with paginationOffset and pageSize. I have found how to handle filters with displayedData. I can see the sort order with sortedColumn and sortedDesc, but I have not found any way to apply that to the dataset taking into consideration filters and pagination. I have tried to manually sort with the JS .sort function but the resulting data does not always match the data in the table, I assume due to tie breaking.

Could you please point me in the right direction here? If what I am doing is better done with the upcoming new table component then I am happy to switch to that as my application is still under development, but I will need to be given access to it.

Thank you!
-Frank

[Kabirdas]

Hey @ffaubert!

Being able to easily access displayed data is something the dev team is working on but there currently isn't a timetable and they're considering a number of different implementations based on people's requests.

It may also be possible to build out a better workaround with the new table's API, especially as more features get added to it, but for the moment the best I know of is to use a manual JS sort. What discrepancies were you seeing when you tried to do so?

A similar question of being able to access sorted data in a filtered table came up here.

[MikeCB]

Hi @Kabirdas,

Did this ever get implemented? I've got a large table populated by SQL data and then sub-tables that summarize that data. It would be great to be able to set table2's data source to table1.visibleData, or access the visible data in a transformer for further processing.

[Paulo]

Hi @MikeCB, if we are using client-side pagination, we can use table.getDisplayData to populate the second table with just the visible data.

For example, given this query that populates a table with client-side pagination and an option to filter added to the toolbar:

We need two JS queries to build this functionality.

One to get the displayed data:

Note: The query on the Success event handler is on the next step.

Another one to only grab what's on the current page because getDisplayedData will include data from all pages:

Note: Add this one as a Success event handler to both of the previous queries as this will be the data source for the second table. We need to render results on page load, and slice every time there are changes in page.

Here is the JS:

  return getDisplayedData.data.slice((table1.pagination.currentPage * 10), ((table1.pagination.currentPage + 1) * 10))

Here is the final product:

PS: I tried using a single JS query to get the displayed data and slice it but getDisplayedData seems to return a promise, it was erroring out when chaining the .slice to it.

[MikeCB]

Thank you @Paulo, this is exactly what I needed. I never know if something is going to be stored in state, or is a method on the component. It would be great if there was a way to list all the methods somewhere (similar to state), I know they pop up in autocomplete, but they are mixed in with everything else hard to see all available options. Either way, thank you, this is great!

[Paulo]

You are welcome! Let me know if you run into any issues with the implementation, happy to help you debug it. Thank you for your feedback as well!

[Steven_W]

I don't get it. You use table.getDisplayedData(). I get this error when I want to reference it somewhere:

TypeError: table1.getDisplayedData is not a function

{{ 
  _.ceil( table1.getDisplayedData().length / 10 )
}}

But in the debug console table1.getDisplayedData() does return an array.

[Paulo]

Hi @Steven_W, getDisplayedData is an async function. If we wanted to check the length, we would need to do something like:

Since we need multiple lines, move this logic to a Transformer or a JS query and reference its value on this input.