Table Columns - Change Dynamically

App Building
1

Hi,

I've a scenario where I'm connecting to a SaaS app which contains different worksheets of data (like spreadsheets). Each worksheet might have different numbers of columns and different column types, but ultimately I simply want to represent them in a Retool table component.

The SaaS app has an API and I have returned the worksheet data and distilled down to a simple JSON object (where the columns are defined along with the rows) - example of a worksheet that contains company details:

{
  "columns": [
    "RefCode",
    "Name",
    "Address Country"
  ],
  "rows": [
    {
      "RefCode": "123456",
      "Name": "ABC Inc.",
      "Address Country": "GB"
    },
    {
      "RefCode": "789456",
      "Name": "DEF Corp.",
      "Address Country": "GB"
    }]
}

The new table component has no problems in displaying this, however the challenge is that it likes you to define the structure during design, and I don't know what the structure will be as it will depend on which worksheet is selected.

Is there a way of the table component effectively regenerating columns dynamically as you trigger query updates (as I move between selecting different worksheets)?

Appreciate any help or advice you can give.

Thanks :slight_smile:

Dave

2

Hi @dcsearle Thanks for reaching out!

One option is to create a different table for each possible sheet & then show/hide the tables dynamically. This allows you to configure the tables for each possible scenario. To place multiple components in the same spot on the cavas, make sure all but one are "hidden" at any given time.

Another option is to use dynamic column settings. You enable this under Content->Advanced. Then, delete all columns from the Content->Columns section since they'll instead be created dynamically

1 Like
3

Thanks Tess! I'd just lost sight of that option ... all sorted now :pray:

1 Like