I want a container with a number that is the number of rows of a table. This number should be reactive to the table if it experiences any changes. For example, if I use a search bar for searching for anything on the table.
I already have a working prototype. I have a table called my_table and a query that returns my_table.getDisplayedData(). I also have an event handler on the table such that when "Change Page", it triggers the query and thus the container with the number references the data inside the query. This works so far.
However, there are two issues. I tried setting the query to load at the start because at first I can't see the numbers of the query and when I inspect it at page load, it hasn't been executed. Just to be clear, I've already checked the box to execute the query on page startup with no milliseconds and it still doesn't render the numbers. Secondly, when using the search bar to search for stuff in the table, the numbers update continuously (because of the table event handler for "Change Page") but sometimes it breaks: for example if type something like "Pizza" and then add a single space like this "Pizza ", the query is not triggered even though the table changes.
I'm new to Retool, so in general I'm looking for advice on how to do this if there's a better way.
Hi @ScottR, yes, sorry for the convoluted explanation. Here's what I have.
I have a custom HTML component that looks like this:
The actual component is something like this:
where I get the data from my JS query getFilteredData_summary.
The JS query getFilteredData_summary is simply: return table.getDisplayedData(). Now the issue is that I need to "rerun" this query everytime the data changes to be able to update the HTML component.
To do this, I set up an event handler on the table like this: .
To a certain extent, this works. However, it does not at the beginning of the page load because I need to run the query at page load.
but the query still has the data slot empty when loading from scratch, so I can't get the actual summary:
See? No number.
If I type something on the search bar, the query gets triggered successfully and I start seeing the numbers.
My other issue is related to the query not being run every time the table changes. For example if I type "London", the table successfully filters rows containing London and the numbers update as expected:
However, if I add a single space "London ", the table updates, only keeping ONE row, yet the numbers I've shown still continue to be present, showing the previous state of the table with 1000+ rows. What's more, if I REMOVE the space to "London", I now get the actually numbers for when the table contains 1 row, when in fact the table went to the standard 1000+ row based on the search.
I've actually did the test that if I add a space (the table filters down to one row and the total summary continues to show the total of the 1000+ row table) and go to the JS Query and manually run it, the total is updated to have the total of one single row, as expected. This seems to be an issue where the query is simply not being triggered if I have a space, even though the table changes, which as the event handler suggests, it should trigger the query.
.
