Manipulating Columns in Table (New)

App Building
1

I want to build an app that allows users to choose from a list of queries, and run the chosen query, and display the result in a Table (New). I'm stuck at the problem that the columns in a Table (New) must be defined, and I cannot find a way to either (a) generate a new set of columns for the chosen query or (b) even hide, rename, reformat, or otherwise manipulate columns.

Is there a way to do this? Thank you

2

When you say choose from a list of queries, are the queries predefined? For example, when selecting an option named query1, that will run query1 and then the table should be populated with query1.data?

3

Yes. I've created a Select that has the SQL query names as the value of each option. Then, I have a JS Query that uses a case block to execute the correct JS for the selected SQL query.

With the prior (old) table component, I could have used dynamic columns perhaps, but that feature doesn't exist in the new table component.

I suppose that what I would like is for the table component by default to display all the columns returned by the SQL query and then have a means to hide one or more columns in JS code.

Thanks.

4

Will you need to hide specific columns based on which query is run? There should be a way to do that.
Are you only using one table component for all of the queries to populate?
If so there are ways to hide the column(s) if they are null if need be....
Any more examples or screenshots?

5

Thank you, Scott. So, here is what I figured out.

  • I created state variable columnsToShow
  • In my JS Query, I setValue the columnsToShow state variables to an array of the columns that I want to show
  • In the hidden property of each column, I inserted this snippet:
{{ !columnsToShow.value.includes( `uniqueID` ) }}

Shortcomings to this approach:

  • I must enter the column names as strings in the snippet above because column names are not accessible (AFAICT) in the new Table component
  • The state variable array also is hard-coded for each different query I will run
  • To fill the Table component with all the column names I might need, I need to run each query while editing the App and then add the snipped above to the Hidden property of each column

To answer your questions:

  • I want to use only one table component for all queries to reduce the number of table components in the App which could grow quite large
  • I found this post, which helped me come up with my variation

At this point, I think the problem simply is that the new Table component does not expose columns for any purpose (naming, hiding, resizing, etc.), and I can find no way to dynamically erase the existing columns in a table and reset them based on the columns returned by a SQL query.

6

OK this would then be considered a feature that the Retool team may be working on....@tess
?

7

Out of curiosity, would using a dynamic data source that points to a JS query that handles the query logic (which query's data to return) work for you?

Or maybe even dynamic column settings?

https://docs.retool.com/private/data-in-tables#dynamic-column-settings

8

The link at the end of your reply is to the legacy Table component. I am using the new Table component. Thanks.

9

Ah, my apologies.

The new dynamic column settings can be found under the settings toggle in the "Content" section of the table. Check out @Tess's update here on our new and improved dynamic column settings!

But generally speaking, I would recommend leaning more into JS than these settings for now! Let me know if I can help get you started there.