Hi community! I am running into two problems with using basic tables: There’s no form of text wrapping I can’t seem to put a link to an external page in the table This really limits the funcitonality of my app. [image]

When it still has enough space it still respects the justify-content rule.

You can try for the links the component of link or maybe the action text. https://docs.glideapps.com/all/reference/components/buttons/link Action Text - Glide Library

[image] willemevers: There’s no form of text wrapping You can try this code . [image] willemevers: I can’t seem to put a link to an external page in the table Do you mean putting a link on the right side? You can do that when you point it to a link column.

Thanks for the reply! That CSS trick is pretty neat, can I find more documentation on this somewhere? It is a big improvement but there are some points I still want to tackle, and I need to understand this CSS better before I can do so. These are the problems I am still having: It doesnt work fo…

[image] willemevers: There needs to be a space between the icon and text on the left side (I do give this in my input, but the CSS coe overrides it) Probably you can use an empty character instead of a normal space: https://emptycharacter.com/

@Darren_Murphy @ThinhDinh Thanks for the replies guys! This community is great so far :100: The CSS generator is great, but I really want to understand what @ThinhDinh 's code does: What are the changes I can make to get the text fit between the pink lines? Maybe I am being stubborn here, but I w…

Thank you for making me review the code. This was written some months ago so I did not have a chance to update it. The code should now be: <pre><span><style> .sts-row { height: auto !important; padding: 10px 0; } [data-test="app-simple-table"] .sts-label { white-space: break-spaces; text-…

Oh nevermind. It dawned on me that I can use width as a percentage on the left side to force this. [image] <pre><span><style> .sts-row { height: auto !important; padding: 10px 0; } [data-test="app-simple-table"] .sts-label { white-space: break-spaces; text-align: left; width: 50%; font-…

Also make sure your links do not use a protocol of http://. It needs to be https:// or leave it off altogether.

Hm…also noticed that links in a basic table attempt to open in a webview component??? I assume this action should instead be “open link”? @jason @mark

Creating beautiful and functional tables

Ask for Help

Darren_Murphy June 16, 2021, 8:39am 5

For anything other than basic table functionality, you might want to consider creating tables using Markdown/HTML/CSS and render in a rich text component. Here’s an example of the sort of thing you can do:

Topic		Replies	Views
Wrap Text in Basic Table Component Ask for Help	5	1749	August 11, 2022
CSS - how to know name of attributes Ask for Help	27	950	December 3, 2021
And Basic css Table tricks? Ask for Help	30	1942	January 17, 2024
Another line in table component Ask for Help	1	399	October 5, 2021
Wrap Text in Basic Tables Ask for Help	3	359	December 20, 2021

Creating beautiful and functional tables

Related topics