Design: put retool's components in a table cell

Hey Awesome people of retool,

So retool has a great component library with some cool components. These make our life easy as a developer and meets our client's requirements perfectly. But unfortunately we can't use them inside a table, we have to somehow reinvent the wheel here. So just to show the data with a progress bar we need to change the type of column and write custom HTML (!!) .

This issue was already raised by many before me (Ex: Allow regular components in a table cell ) so do you guys have any plan to do this in near future ?


@victoria @retool-team @Kabirdas

Hi @mpmohi Thanks so much for this feedback! I shared it internally with our product team. The table is getting a fairly big overhaul so we should hopefully see some exciting improvements there, but as far as I know, a progress bar column isn't on the roadmap for the table yet. I will add a specific request for this.

As far as using our existing components, it almost sounds like a grid style component could be a helpful solution here. It could be similar to the listView, where you can add any Retool component, but it would have a horizontal layout more like the table. We have an internal request for a grid style component; I'll update this thread when we are able to ship something so that we can explore whether this would work for your use case.

1 Like

Hi @mpmohi

We have shipped the horizontal grid, which can be used for this use case, but as I was working on it, I realized I still prefer the regular vertical listView for table-like displays. I've put together an example below & attached the json.

One caveat here is that the listView is generally not as performant as the table with large datasets. Assuming you have under 100 records to display at a time (and not too many columns), I'd use the vertical listView with this configuration:

1) For the length of the listView, make it the length of your data + 1 (for the headers)

2) For each column, set the component value conditional based on whether i===0 (in that case show the header value), or if i not equal to 0, show the data item like this:

{{i==0?'##### Project Name' : formatDataAsObject([i-1]}}

3) For any columns that don't display text, such as the Progress bar, there's going to be an extra step of hiding the first item (when i===0) and showing a text component there. For example, in my progress component, I set the hidden property to {{i===0}}. Then, I drag a text component on to the same place as the progress component. This time, I'll hide all the text components that aren't the first one

In the end, this is what I have:

listtable.json (15.5 KB)

Again, we still have a feature request for a progress bar component, so I'll follow up when this is natively supported :sunglasses:

The new table has a progress column :slightly_smiling_face:

1 Like