What dynamic table settings are possible?

How do I use dynamic table settings? It doesn't really seem to do anything and the tooltips have some typos and I can't manage to decipher what they mean :blush:

Hi @nimster!

It's definitely a feature we need to document better :sweat_smile::

"Use dynamic column settings" is evaluated as a Boolean, if true then the "Column settings" input will be used, otherwise it will not. Any setting that has an "fx" is an option to define a setting which would normally be toggled on/off based on some {{ }} value instead.

"Column settings" takes an array of objects [{},{},{}]. The key/values in that object can define a small number of setting dynamically. If any setting is used here, it should overwrite the options in the column setting popover.:

name: if a column's name is included in the array, it will be displayed. If there is no object that includes the column name, it will be hidden.

type: the column type to display the cell values in this column as. This can be any of the types which are available inside of this dropdown-

Their correct identifiers are:

  • default
  • modal
  • button
  • checkbox
  • datepicker
  • textinput
  • dropdown
  • string
  • date
  • datetime
  • datetime_tz
  • link
  • object
  • integer
  • percent
  • float
  • usd_dollars
  • usd_cents
  • boolean

mapper: you can dynamically define the mapper to be used in each column as a string, but you will need to escape the {{ }} tag here for it to work. This also only resets when the data updates or the page reloads I believe.

Here's an example using these keys:


Because "name" and "sales" aren't included in the array, they are hidden. 'id' is set to a datepicker, and email is mapped as self+1. Since email is a string, this just concats a 1 to the end.

colorMapper: you can also dynamically define the colorMapper using the same stipulations as the mapper key.


I'll work on this post a little more as I dig into the feature, and create an updated docs page to help with the topic!

2 Likes

This works great @alex-w, thanks for the clear instructions!

1 Like

Is it possible to change the Column Title using the Column settings input?

1 Like

Hi, you can definitely do this! I have attached a screenshot. Select your table, and go to inspect, then under 'Actions' add the action buttons to your table and select the query you wrote (I have query2 here) to pull in the row information you want. Here I pulled in the first name. So when you click each action button, it will pull in the first name in that row.

Hope this helps!


Hey, Alex
As you have mentioned that “Column settings” takes an array of objects [{},{},{}], Do we have any key for specify when to hide/show that columns ? As we can not use column dynamic setting for hide/show while we are using dynamic column setting.

Thank you.

I should have continued the conversation here, however this is a related question:

Thanks!

@Vinkal - You control hide/show with dynamic column setting by either including the column name in the dynamic column setting array or not. If it is present Retool will display the column, otherwise it will hide the column.

1 Like

@teamrappid Okay, Thanks

Is it possible to set column width?

2 Likes

Hi Matus, currently you would click on the table and drag the column to resize it.

We are always working on improving our table component, so hopefully there will be other ways you can resize it in the future!

Is it possible to show or hide columns based on a status state?
I've 5 status and i want a different action button column for each of'em. Is it possible to do that using one table component?

1 Like

Is it possible to change the Column Title using the Column settings input?

Is it possible to set column width?

Hello, any solution about this question? thanks.

Hello, what would be the type we have to set to have a Multiline text cell?

Thanks!

edit: TextMultiDataCell is the answer