Run JS query after table load

  • Goal: Count rows in a table and display on dashboard.

  • Details:
    I want to count the rows in a table to display on the dashboard. I've created a "Run JS Code script" that uses getDisplayedData() to count the rows and it works fine. However, on the live dashboard, it runs before the table is loaded.

I've tried the "run on page load" setting and triggering a run after the SQL query underlying the data in the table, but it's still running before the table finishes loading.

Is there a way to trigger the JS script to run after the table is finished loading?

Why not just use the value from "tablename".data.length ?

Because that returns all the data provided to the table, not the data shown. I have several filters that I want the user to be able to update and have the total number dynamically update. I've already figured out how to recalculate on a filter change though.

Hi @Topps42, welcome to the forum! :wave:

table.getDisplayedData() returns a promise:

A success event handler like this one should do the trick:

Hey Paulo,

I figured that out after posting, and it sometimes works, but not always. There seems to be a race condition between the table loading and the JS reading the table data.

Order of operations here is:

  1. SQL query gets data
  2. In parallel, the SQL query starts JS script, while table reads SQL query response data.
  3. Sometimes the JS script finishes before the table loads, but sometimes after.

Seems like there needs to be a trigger that can be called after the table finishes loading from its source.

For now, I've just added a 500ms delay at the start of the JS script which is fine for this application.

The 500ms delay works, you can also set that as a Debounce on the event handler.

Hey @Topps42 ,
You can use this javascript for count number of rows present in current page.

// Get the total number of rows on the current page
const currentPage = table1.pagination.currentPage;
const pageSize = table1.pagination.pageSize;
const totalRows = table1.data.length;

let startRow = currentPage * pageSize;
let endRow = startRow + pageSize;

// Adjust endRow if it exceeds the total number of rows
if (endRow > totalRows) {
  endRow = totalRows;
}

// Calculate the number of rows on the current page
const currentPageCount = endRow - startRow;

return currentPageCount;