Are transformers the only way to make custom columns?

Queries and Resources
1

Hello! I am running into an issue with using transformers on columns in tables and was hoping to receive some advice.

Here is a very basic transformer example:

var row_data = []

{{ table.data }}.forEach(row => {
  row_data.push(row['id'])
});

console.log("Running transformer")

return row_data;

and here is how it is being attached to the column I would like to update:

{{ testing_transformer.value[i] }}

We’re encountering an issue where the transformer processes every row in the table, pushing data into a list. When we attach this transformer to a column, it executes for every individual row, as evidenced by the console log—printing “Running transformer” three times for a table with three rows, fifty times for fifty rows, and so on. Essentially, for each row, the transformer loops through all the rows in the table. This approach is highly inefficient, causing slow execution times, and in some cases, the table doesn't update because the process takes too long. While this was the only solution we found, following Joe Bumbaca’s response in this Retool forum post, we are looking for a more optimized alternative.

2

Hello @nspl and welcome!

I can fully agree that this is not an optimized or efficient way to add custom columns. Would you mind sharing how the id column would be populated in your use case?

On the table component, you should be able to just add a column using the + button near the top of the column/field list.

image
image299×534 14.7 KB

Within the the Value section of the column setup you should be able to provide the transformation you need. For example, if your table was populated with FirstName and LastName fields you would be able to create a new column called Full Name and set its Value to {{currentSourceRow.FirstName + " " + currentSourceRow.LastName}} or even just {{currentSourceRow.FirstName}} {{currentSourceRow.LastName}}}:

image
image889×426 30.3 KB

1 Like
3

Hey thank you for the response! The example I gave is a very simplified version of the data I am planning on setting the column to. The data I would like to add requires more complex processing that needs to be done in Javascript (as opposed to concatenating two strings in the example you provided). Right now my only other solution would be to process the data, store it in my database, then read directly from there. But I was wondering if retool offered solution that allowed the data processing to occur within a transformer/ another tool?

4

No problem!

How complex is the transformation? You can do a number of different things to get the custom column source in there. Probably the most recommended way is to make the transformer the data source for your table and create all of the rows from the original query via something like a mapping function. You pretty much have the transformer setup in your example except instead of the table data you want the source of the table data.

let newSourceData = {{ tableSourceQuery.data.map(row => {
return { 
    ...row,
    newTransformedProperty: (...put row transformation code here...) 
    }
} }}
return newSourceData;

The idea here is that the query to get your data is only going to trigger the transformation whenever it is refreshed instead of trying to calculate the whole table for every row when it tries to load.

1 Like