Creating beautiful and functional tables

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.

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

1 Like

You can try this code.

Do you mean putting a link on the right side? You can do that when you point it to a link column.

3 Likes

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)

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

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:

2 Likes

Probably you can use an empty character instead of a normal space: https://emptycharacter.com/

1 Like

@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 would really like to understand what you are doing @ThinhDinh image|291x500

2 Likes

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

3 Likes

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

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

4 Likes

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

1 Like

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

1 Like

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


Already looks much better! It somehow only seems to left-align content in the column on the right when the text is quite long.

1 Like

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

1 Like

Hola @ThinhDinh

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

Thanks man!

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

Alright. I’ll test it out.

Thanks.

1 Like

I believe it’s something like

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

Not sure if I remember the correct class names.

1 Like