How do I access the filtered data of a table

I think I've figured it out - I knew I must be doing something wrong, it's a promise!

So if I console.log(table1.getDisplayedData()) it shows {} in the console
If I create a function that assigns a variable to table1.getDisplayedData() and console.log it, it's also {}.
Same problem if I'm running a function where I'm used getDisplayData as an argument, it fails because it's receiving a {}
If I await table1.getDisplayedData(), however, it works.

Perhaps the example works using the dummy data in the table because there's a small number of rows and the timing is not noticeable. Using 600 rows (as I am) means I have to await the response.

My solution is this:
let filtered_data = await table.getDisplayedData();

Thanks for the nudge @Tess I knew there must be something I was missing.

2 Likes

Ah ha! That explains it. It wasn't obvious it was a promise.

Ah, right! Thanks so much for posting this, @dcartlidge!

And thanks all for the feedback -- will see if we can get some tooltip or linting to make this more prevalent

1 Like

Genius, thank you!

I am trying to use this function to update a chart to reflect the filtered data set after letting the user filter by date range. I tried putting table1.getDisplayedData() into the data source, but it does not recognize the function. Any recommendations here?

Hi @ppperkins You'll want to use getDisplayedData in a Javascript query or event handler.

One way to solve this would be to have a variable as your chart's data source. The variable can be set to the table's data property by default. Then, that variable gets updated (using setValue()) with the displayedData after the user filters the data

Thank you for the help, Tess.

1 Like

Amazing feature! It works perfectly on my side, now I won't have to maintain a parallel filtering function anymore :slight_smile:
Many thanks

1 Like

table1.getDisplayedData() doesn't work in a transformer only in queries and scripts. Can we get that fixed?

Hi @Josh_Bullough I'll add your +1 to the internal request, but I'm not sure where this falls on our roadmap yet

For now, I'd recommend using a JS query so that you can fetch this data only when needed

Hey @Tess

Could you help clarify a few of these methods -- I'm not quite understanding the differences exactly.

  1. JS Query: return await yourTableName.getDisplayedData();
  2. Event Handler: Control component > Get displayed data
    • Can't seem to find any use for this?
    • Where would you access this data?
    • How is this any different from just directly doing #1 ?
  3. The download button of a table, which I believe just calls yourTableName.exportData() and is the same as using the utils.exportData()
    • seems to already export only the visible columns with the headers formatted nicely

Thanks in advance!

Hi @shawnhoffman the event handler & the JS query are the same. Every event handler action can also be triggered via a JS query. In this specific case, it's not really helpful to have the event handler since you can't access that data anywhere or do anything with it

For the exports, the download button (and any other control component-> table -> export data events) does the same thing as using yourTableName.exportData() in a JS query. utils.exportData() is a more generic option that can also be used with queries & other components. The table specific one has an includeHiddenColumns param, and it will automatically take into account any filters the user has set on the table.

Deciding between a JS query or event handler GUI usually comes down to personal preference, coding experience, and use case (whether you need to control the order of multiple events). I can't think of any other examples, besides control component > get displayed data, where I always recommend a JS query.

1 Like