# Creating beautiful and functional tables

**URL:** <https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022>\
**Category:** Ask for Help\
**Created:** [June 15, 2021, 8:50pm UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022 "2021-06-15T20:50:03Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![willemevers](https://avatars.discourse-cdn.com/v4/letter/w/278dde/32.png) [@willemevers](https://community.glideapps.com/u/willemevers)\
**Post date:** [June 15, 2021, 8:50pm UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/1 "2021-06-15T20:50:03Z")

</div>

Hi community!  
I am running into two problems with using basic tables:

1. There’s no form of text wrapping
2. I can’t seem to put a link to an external page in the table

This really limits the funcitonality of my app.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/2/c24275e7068bd8badc6f1d2ad998c38a162b1ed7.jpeg)

---

<div class="post-metadata">

**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\
**Post date:** [June 15, 2021, 10:00pm UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/2 "2021-06-15T22:00:56Z")

</div>

You can try for the links the component of link or maybe the action text.

- [https://docs.glideapps.com/all/reference/components/buttons/link](https://docs.glideapps.com/all/reference/components/buttons/link)
- [Action Text - Glide Library](https://docs.glideapps.com/all/reference/components/text/action-text)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 15, 2021, 11:09pm UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/3 "2021-06-15T23:09:27Z")

</div>

> [@willemevers](#):
>
> There’s no form of text wrapping

You can try this [code](https://www.notion.so/glidecommunity/33d5984960d04785b38eeae6c5121001?v=5662bb67cd994c53ae87737ab952ddb2&p=840f6c68c1d9409cad3de1a5d5dcd6f1).

> [@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.

---

<div class="post-metadata">

**Author:** ![willemevers](https://avatars.discourse-cdn.com/v4/letter/w/278dde/32.png) [@willemevers](https://community.glideapps.com/u/willemevers)\
**Post date:** [June 16, 2021, 8:31am UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/4 "2021-06-16T08:31:49Z")

</div>

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:

1. It doesnt work for all rows in the table yet
2. The text in the right column should be left aligned
3. 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)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/6/a62e564b83180f715cde12b88d959aadbffdef10.png)

Could you please point me to a good resource for that?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [June 16, 2021, 8:39am UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/5 "2021-06-16T08:39:06Z")

</div>

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:

> [@zap Rich Text \> Actions!](https://community.glideapps.com/t/rich-text-actions/27273/12):
>
> Sure! One thing that isn’t obvious from the screen shot is that two of those tables are collapsable: That’s done in the usual way, using HTML \<details\>\<summary\> tags. Although getting it to play nicely with the tables was a bit fiddly. Anyway… I used [HTML Table Styler ▦ CSS Generator | 𝗗𝗜𝗩𝗧𝗔𝗕𝗟𝗘.𝗖𝗢𝗠](https://divtable.com/table-styler/) to come up with the basic table structure and CSS, and then butchered the CSS until I got it looking how I wanted. My CSS-fu is not very strong, so I suspect there is a lot of bloat the…

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 16, 2021, 8:46am UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/6 "2021-06-16T08:46:57Z")

</div>

> [@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/](https://emptycharacter.com/)

---

<div class="post-metadata">

**Author:** ![willemevers](https://avatars.discourse-cdn.com/v4/letter/w/278dde/32.png) [@willemevers](https://community.glideapps.com/u/willemevers)\
**Post date:** [June 16, 2021, 9:01am UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/7 "2021-06-16T09:01:16Z")

</div>

@Darren_Murphy @ThinhDinh  
Thanks for the replies guys! This community is great so far 💯  
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 would really like to understand what you are doing @ThinhDinh [image|291x500](https://community.glideapps.com/uploads/short-url/po6gkMMBx1eY7NgoTs6TI1a3GLj.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 16, 2021, 11:48am UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/8 "2021-06-16T11:48:34Z")

</div>

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:

```auto
<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;
font-size: 0.9rem;
}

[data-test="app-simple-table"] .sts-value {
white-space: break-spaces;
text-align: right;
font-size: 0.9rem;
}

```

The sts-row part inserts some padding inside each row for it to have room to breathe, specifically for the top and bottom part. 0 means no padding for left and right. Height is set to auto to fit the requirement for multiple lines.

The second part let the label (left side) break to new lines (white-space), aligned left with font-size being 0.9 rem.

The third part is mostly same as the second part, albeit for the value (right side) and aligned right.

I haven’t found a way to divide the spaces between the two sides to make it look better. I believe it is controlled by the element “justify-content: space-between” of CSS.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/f/cfdd4f9d7d72eed71a9f2173d02a4ad92c3f3724.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 16, 2021, 11:50am UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/9 "2021-06-16T11:50:46Z")

</div>

Oh nevermind. It dawned on me that I can use width as a percentage on the left side to force this.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/a/daa30a832a108cde806812a085b6fb52809b5eeb.jpeg)

```auto
<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-size: 0.9rem;
}

[data-test="app-simple-table"] .sts-value {
white-space: break-spaces;
text-align: right;

font-size: 0.9rem;
}

```

Change the percentage as you wish.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 16, 2021, 12:24pm UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/10 "2021-06-16T12:24:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 16, 2021, 12:58pm UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/11 "2021-06-16T12:58:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![willemevers](https://avatars.discourse-cdn.com/v4/letter/w/278dde/32.png) [@willemevers](https://community.glideapps.com/u/willemevers)\
**Post date:** [June 16, 2021, 7:57pm UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/12 "2021-06-16T19:57:33Z")

</div>

Yes that would be great, the webview component is a bit akward.  
Anything that I can do to change that?

---

<div class="post-metadata">

**Author:** ![willemevers](https://avatars.discourse-cdn.com/v4/letter/w/278dde/32.png) [@willemevers](https://community.glideapps.com/u/willemevers)\
**Post date:** [June 16, 2021, 7:58pm UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/13 "2021-06-16T19:58:42Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/1/f16e48747cce6d824eec2550b31cf991a493a329.jpeg)  
Already looks much better! It somehow only seems to left-align content in the column on the right when the text is quite long.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 16, 2021, 11:04pm UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/14 "2021-06-16T23:04:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [June 17, 2021, 12:14am UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/15 "2021-06-17T00:14:44Z")

</div>

Hola @ThinhDinh

Would this work to wrap the title/description in an inline list Tile layout?

Thanks man!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 17, 2021, 12:44am UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/16 "2021-06-17T00:44:29Z")

</div>

You mean the white-space part? Yes it would work.

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [June 17, 2021, 1:42am UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/17 "2021-06-17T01:42:49Z")

</div>

Alright. I’ll test it out.

Thanks.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 17, 2021, 3:14am UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/18 "2021-06-17T03:14:11Z")

</div>

I believe it’s something like

```auto
[data-test="tile-item"] .tile-subtitle {
white-space: break-spaces;
}

```

Not sure if I remember the correct class names.

---

<div class="post-metadata">

**Author:** ![NoCodeAndy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeandy/32/62530_2.png) [@NoCodeAndy](https://community.glideapps.com/u/NoCodeAndy)\
**Post date:** [January 17, 2024, 4:51pm UTC](https://community.glideapps.com/t/creating-beautiful-and-functional-tables/28022/19 "2024-01-17T16:51:51Z")

</div>