Dynamically set column display title?

Queries and Resources
, ,
1

I have a table to display data containing an unknown number of columns, which get named 0-n by Retool based on the column position in the data returned.

Can I use dynamic table settings to map these names e.g. "0" to display titles e.g. "User ID"? If so, I can't see it in the docs.

Thanks.

2

It's not 100% clear to me what you're trying to do, but yes, you can dynamically set column names. In the attached screenshot, I put a JS snipped to name the column after the first result from a database query.

image
image1592×549 74.6 KB

It's not clear to me what exactly is the mapping between column positions and names, or why the columns can't be named correctly to begin with.

One thing I'm wondering is: will the source columns always have the same names in the target table? If so, just go ahead and rename them. Even if you reorder your source columns, the Retool table will remember what each column is supposed to be called. If you open the left panel and look at the table properties, you can see "columnHeaderNames" which stores your column assignments. They map a source column title to your newly defined title - so even if you rearrange them, delete and re-add them later, it will always translate the same source column title to the column title you've defined. Make sense?

3

Hi Mark,

Thanks. Let me elaborate.

I have a REST API source that returns some data with an unknown number of columns, without headers, as below:

image
image269×765 12.9 KB

I want to alter the display value of these column names, based on another set of data. I tried to do this, but it doesn't work:

image

I don't know if there is an attribute I can set (e.g. columnHeaderNames has no setValue() function).

Cheers,

Jack

1 Like
4

Hey Jack, it looks like you're on the right track, and it's just a problem with the javascript. What's showing in the Green is what the expression evaluates to. It looks like {{transformer1.value}}
returns an array of objects. Instead, I think what you'd want is {{transformer1[0].displayName}}. Does that give you what you're looking for?

5

Hey Mark - not quite. I want to change all of the names in one go, without editing the field - is there a way to set that field without manually doing so?

6

I understand better now!

Here's what I would do, personally. I'd take the query that returns the REST API result, and add a transformer down at the bottom of the query window. You can write a little snippet of JS code that converts your result into an object with named properties. What exactly that will look like depend on what form the API is returning data as (feel free to post a snippet). Let's say as an example your API is returning a 2d array, like so:

[["Manny", 24, "Tulsa"], ["Moe", 45, "Philly"], ["Mack", 51, "NYC"]]

In your earlier post, you referenced how you have your column indexes and names defined somewhere. If possible, maybe format them a little differently than what you showed in your snippet. Instead of using a string for column name (i.e. "0" surrounded by quotes, just have an integer index for column position. So something like:

columnDefs = [{position: 0, name: "columnA"}, {position: 1, name: "columnB"}]

So in your query transformer, take the data returned by the API, and do something like:

function transform() {
//define and run in transformer section of query


  let columnDefs = [{
    position: 0, // try to have this as an integer rather than a string
    name: "columnA" 
  }, {
    position: 1,
    name: "columnB"
  }];
  
  // Dependent on how your API returns data
  let apiData = [
    ["Manny", 24, "Tulsa"],
    ["Moe", 45, "Philly"],
    ["Mack", 51, "NYC"]
  ];
  
  let newData = apiData.map(function(x) {
    let row = {};
    // logging statements for easy debugging
    console.log(columnDefs[0].name);
    console.log(x[0]);
    // you can parameterize this in a for loop if you feel like it
    row[columnDefs[0].name] = x[0];
    row[columnDefs[1].name] = x[1];
    console.log(row); 
    return row;
  });
  return newData;
}
console.log(transform());

Here's a little fiddle where you can play around with it.
This should return:

[{
  columnA: "Manny",
  columnB: 24
}, {
  columnA: "Moe",
  columnB: 45
}, {
  columnA: "Mack",
  columnB: 51
}]

Once it's in this form, the Retool table will populate your column names automatically. Make sense?

7

Checking in, did this work?

8

Sorry Mark - I haven't had chance to test yet but you are totally right I should just use a transformer to do this. Got too fixated on trying to solve via table component!

I will try out your solution specifically and let you know.

Cheers,

Jack

1 Like