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.
Hi community!
I am running into two problems with using basic tables:
This really limits the funcitonality of my app.
You can try for the links the component of link or maybe the action text.
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.
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:
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:
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
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
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.
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.
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”?
Yes that would be great, the webview component is a bit akward.
Anything that I can do to change that?
When it still has enough space it still respects the justify-content rule.
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.
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.