Causing a specific table to refresh

[tomm]

Hopefully I can explain what I am looking to do in a way that makes sense.

I have a stack container that contains five tables. Each table shows data from one week in the month. There is also a form that can be used to add data to the database for any of those weeks. Is there any way, once new data has been entered through the form, to make just the table that is affected by the new data refresh automatically? In other words, if the date of the new data being entered is in week two of the month, then I only want the table containing week two data to refresh automatically to show the data that was just added.

Thank you.

[WidleStudioLLP]

Hey @tomm ,

I understand your question, and I went ahead and created the same mock structure of your data based on your explanation.

First, I prepared a transformer with mock data:

return [
  { id: 1, employee: "Alice", task: "Report preparation", date: "2025-08-03", weekNumber: 1 },
  { id: 2, employee: "Bob", task: "Client call", date: "2025-08-05", weekNumber: 1 },
  { id: 3, employee: "Charlie", task: "Code review", date: "2025-08-09", weekNumber: 2 },
  { id: 4, employee: "David", task: "Database update", date: "2025-08-12", weekNumber: 2 },
  { id: 5, employee: "Ella", task: "Testing", date: "2025-08-17", weekNumber: 3 },
  { id: 6, employee: "Frank", task: "UI design", date: "2025-08-20", weekNumber: 3 },
  { id: 7, employee: "Grace", task: "Deployment", date: "2025-08-23", weekNumber: 4 },
  { id: 8, employee: "Hannah", task: "Documentation", date: "2025-08-26", weekNumber: 4 },
  { id: 9, employee: "Ian", task: "Meeting notes", date: "2025-08-30", weekNumber: 5 }
];

Then I stored these values inside a variable so I can reference them easily with:

{{ mockData.value }}

Next, I created a JS query for inserting new records dynamically. This query automatically calculates the week number, finds the last ID in the dataset, and appends a new record with lastId + 1:

const newDate = new Date("2025-08-27");
const day = newDate.getDate();
const weekNumber = Math.ceil(day / 7);

// current dataset from state
const currentData = monthlyDataState.value || [];

// find the last id (if no data, start from 0)
const lastId = currentData.length > 0 
  ? Math.max(...currentData.map(r => r.id)) 
  : 0;

// new record with lastId + 1
const newRecord = {
  id: lastId + 1,
  employee: "Eliza",
  task: "Testing",
  date: "2025-08-27",
  weekNumber
};

// update state
monthlyDataState.setValue([...currentData, newRecord]);

return newRecord;

With this setup, I can add data statically into the array to simulate records, and it updates my state variable automatically.

For the tables, I set the data source to filter records by week number. Example for Week 1 table:

{{ monthlyDataState.value.filter(r => r.weekNumber === 1) }}

I repeated the same setup for Week 2 through Week 5, so each table only shows tasks belonging to its respective week. Whenever I run the insert JS query, the new record is added to the state and automatically reflected in the correct weekly table based on its week number.

This way, I can easily simulate adding new data while keeping the weekly breakdown structured across multiple tables.

I’ve also attached some screenshots and a screen recording to demonstrate how it works in action:

And in a dynamic way, you can add an event handler on your get query and set the data response in a variable, then filter it into tables the same way I did. Also, on the insert query, add a success event handler to trigger the get query — this way, the new data will automatically store into the variable and update the tables without refreshing any table manually.

[tomm]

You'll have to forgive me because this is a bit outside of my wheelhouse. I don't understand the need for the JS query for inserting records dynamically when the data is being entered through a form.

[WidleStudioLLP]

@tomm,

You don’t actually need to use a JS query to insert the data dynamically like I did in my demo — I only showed it that way so you could understand the workflow better.

What I was suggesting is this:

• In a dynamic way, you can simply add an event handler on your get query and set its response into a variable.
• From there, filter that variable into your tables just like I demonstrated.
• For the insert query, configure a success event handler that automatically triggers the get query once the insert completes successfully.

By following this approach, every time you insert new data, it will automatically be stored in the variable and the tables will update accordingly — no need to manually refresh any table. This makes the flow much smoother and ensures your data stays in sync across components.

If you still run into issues after setting this up, share a screenshot of your event handler configuration, and I can help pinpoint what might be missing.

[AJVancattenburch]

Hey @tomm! I've had to find a similar solution to overcome the same issue you are facing now.

What I ended up doing was placing each table inside of it's own view in a tabbed container. If you have that, it's fairly easy to scope which table is being updated via a very small js query that you pass as an event handler on success of whatever query you are using to update the data within your tables.

Create a small js query called 'refreshTable' that looks like this (make sure to change table names to the actual names of your tables if not 'table1', 'table2', 'table3', etc.):

// The following tableMap object is set up so that table1 should be in your first tabbled container view, table2 in your second tabbed container view, and so on...
const tableMap = {
  1: table1,
  2: table2,
  3: table3,
  4: table4,
  5: table5,
};

const viewIndex = tabbledContainer1.currentViewIndex + 1;

const table = tableMap[viewIndex];

if (table) table.refresh();

Now plug in your js query as an event handler that triggers on success from your update query like so:

That's it. After setting that up you should be good and donezo!
Hope this helps!

[AJVancattenburch]

@tomm if you don't like that option and you're using a different update query for each table, you can achieve similar results using Retool's triggeredById method.

[tomm]

Right now I have each table in it's own container, but not a tabbed container. If I am understanding correctly, I will place a tabbed container with five views (tabs) inside the stack container and then place a table in each view. Is that right?

[AJVancattenburch]

Yes, exactly!

Then each view key/value in 'tableMap' (let's take '1: table1' from the tableMap for example) would work like this on when triggered on success of an update:

Your app would say:
"I'm gonna update this data, then on success -- OH? I see that view '1' in the tabbed container has a table called 'table1'. Hey -- the view we are on is view 1 also! That must mean table1 is the table in scope right now. Hmm...this js query is saying if I see that table -- table.refresh()"

If that makes sense

[WidleStudioLLP]

Hey @AJVancattenburch,

So just to clarify — in @tomm’s case he was using a Stack container with 5 tables, and each one was filtered by week number. I showed him how to set the data and refresh the tables so the weekly data updates correctly.

In your setup, you’re working with a Tabbed container, which behaves a bit differently. Since only one tab is visible at a time, the refresh logic won’t be exactly the same as Tomm’s case. You might need to trigger a refresh when switching tabs or tie the data update to the query success handler so each table always shows the latest data when its tab is opened.

Basically, both approaches work — just slightly different ways of handling the refresh depending on whether you’re stacking tables or tabbing between them.

[tomm]

@WidleStudioLLP , @AJVancattenburch

You are right @WidleStudioLLP. Using a tabbed container is not going to work for me since it only shows one table at a time. Also, to be perfectly honest, I still have not gotten your way to work, nor can I get the scrollbars to work on the stack containers.