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 (!!) .
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.
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:
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
