How to dynamically change the table data source

💬 Queries and Resources
1

I have a table named usersTable. Its Data attribute is set to {{ customers.data }} I need to change this Data attribute to different query if the search text field contains some string (its for search by phone number when I need to run a different query and show the result in the usersTable).

How can I do that?

1 Like
2

Hey @ckissi! You can definitely do this using plain Javascript. Use the Ternary Operator to evaluate a boolean condition related to your search text field. So let’s say we have a textinput (textinput1) two queries – query1 and query2 – and we want our table (table1) to show query1.data if textinput1 contains the “555-555-5555”. We’d use this JS in the “data” attribute of our table:

{{ textinput1.value.includes("555-555-5555") ? query1.data : query2.data }}

Based on how detailed you want to get, you can use other JS functions to pattern match for your string or phone number. BTW, moving this into the “How Do I” category.

1 Like
3

Hi,
I'm trying to implement this with table data source depending on temporary state boolean value:
{{ temporaryStateBoolean ? query1.data : query2.data }}
but the table's contents stay the same regardless of temporary state's value.
Can you advise me on what could be the problem here?
Best,
Jacek

4

ok, this is a bit embarrassing, but I will leave it for others - temporaryStateBoolean.value does the job... :man_facepalming:

1 Like
5

@jacek I've been building Retool apps for 2 years and still make this mistake all the time :slight_smile:

6

@justin - This is super helpful and I'm using it quite a bit. Do you have a recommendation on how to handle this when there could be around 15 possible tables?
Basically depending on the user input in a dropdown, then a different query needs to execute and show the output in the table.
I worry that if I do it the following way then it'll make the app slow and heavy (only showing 3 tables for the example):
{{ select1.value.includes("us") ? settl_us.data :
select1.value.includes("ca") ? settl_ca.data : settl_uk.data
}}

Thank you for your guidance!

7

Hey @Tanguy,

You probably want to use a transformer or JS query here and apply a switch-case control and return the table you want. You can then use {{jsSwitchQuery.data}} or {{transformerSwitch.data}} as your table's data source.

8

Hi @jocen Thanks for the tip. I've been trying to wrap my head around this but it's still a bit too cryptic for me.

Right now I've ended up with the following:

{{ select1.value.includes("US") ? referral_fees_us.data :  
select1.value.includes("CA") ? referral_fees_ca.data :  
select1.value.includes("MX") ? referral_fees_mx.data : 
select1.value.includes("UK") ? referral_fees_uk.data :  
select1.value.includes("DE") ? referral_fees_de.data : 
select1.value.includes("FR") ? referral_fees_fr.data :  
select1.value.includes("ES") ? referral_fees_es.data :  
select1.value.includes("IT") ? referral_fees_it.data :  
select1.value.includes("NL") ? referral_fees_nl.data : 
select1.value.includes("SE") ? referral_fees_se.data :  
select1.value.includes("PL") ? referral_fees_pl.data :  
select1.value.includes("AU") ? referral_fees_au.data :  
select1.value.includes("SG") ? referral_fees_sg.data : 
select1.value.includes("AE") ? referral_fees_ae.data :  
select1.value.includes("IN") ? referral_fees_in.data : 
select1.value.includes("BE") ? referral_fees_be.data : 
0
}}

But it's super heavy and keeps crashing as it loads too much data.

I then tried doing this in a Js query:

{{ select1.value.includes("US") ? referral_fees_us.trigger() :  
select1.value.includes("CA") ? referral_fees_ca.trigger() :  
select1.value.includes("MX") ? referral_fees_mx.trigger() : 
select1.value.includes("UK") ? referral_fees_uk.trigger() :  
select1.value.includes("DE") ? referral_fees_de.trigger() : 
select1.value.includes("FR") ? referral_fees_fr.trigger() :  
select1.value.includes("ES") ? referral_fees_es.trigger() :  
select1.value.includes("IT") ? referral_fees_it.trigger() :  
select1.value.includes("NL") ? referral_fees_nl.trigger() : 
select1.value.includes("SE") ? referral_fees_se.trigger() :  
select1.value.includes("PL") ? referral_fees_pl.trigger() :  
select1.value.includes("AU") ? referral_fees_au.trigger() :  
select1.value.includes("SG") ? referral_fees_sg.trigger() : 
select1.value.includes("AE") ? referral_fees_ae.trigger() :  
select1.value.includes("IN") ? referral_fees_in.trigger() : 
select1.value.includes("BE") ? referral_fees_be.trigger() : 
0
}}

The idea is to trigger just the query that I need based on the selection in the dropdown menu select1.

Any further help you could provide please?! Thank you in advance

9

Hi @Tanguy, another option I can think of is using switch in your JS Query resource:

const country = select1.value
switch(country) {
  case "US":
    referral_fees_us.trigger();
    break;
  case "CA":
    referral_fees_us.trigger();
    break;
...
  default:
  break;
}

And use another JS Query that has the same format as above but instead of trigger, you are returning the data of those country specific query, say for example dataToShowJSQuery:

const country = select1.value
switch(country) {
  case "US":
    return referral_fees_us.data;
  case "CA":
    return referral_fees_us.data;
...
  default:
    return []
}

What you use in the data source section of the table would be dataToShowJSQuery.data.

10

This is amazing and so smart! Thank you so much @jocen !