Aligning Dynamic Columns in a Table

App Building
1

Hi everyone,

I'm currently working on a project in Retool and have run into an issue that I hope someone here can help me with.

I have a table with dynamic columns, and I would like to align the text in these columns to the right. I've used HTML and applied text-align: right. but unfortunately, the text doesn't fully align to the right edge of the column. It seems that the built-in function to align a column is not available for dynamic columns.

image
image3214×746 189 KB

Has anyone found a workaround or solution for this? Any tips or suggestions would be greatly appreciated

Thanks!

1 Like
2

Hi @JetzeJanssens, welcome back to the forum! :wave:

I've included your use case in our internal Feature Request for enhancing customization options for dynamic columns. In the meantime, although there isn't a built-in setting for this, here is a workaround:

Using Chrome dev tools, find the element (column) where the alignment is set to flext-start:

1
11767×807 245 KB

Test it's the correct one by changing the alignment to flex-end

2
21615×796 235 KB

Copy the rule by right clicking the box where we made the change:
3

Add this rule to the Custom CSS of your App:

4
41652×943 120 KB

The tradeoff is that all of the columns and headers will be aligned to the right.

2 Likes