chore: align tailwind tables with ui design #4371
Conversation
i know , tried some stuff , but did not work or side effect , hoping @davidruvolo51 may have a solution maybe some kind a css mask can work , but wanted to focus on the general page layout and components first |
| @click="handleSortRequest(column.id)" | ||
|
|
||
| <div class="overflow-auto rounded-b-50px"> | ||
| <div class="overflow-x-auto overscroll-x-contain bg-table rounded-t-3px"> |
There was a problem hiding this comment.
To have enough spacing at the bottom, it's possible to add pb-* here. In this design, I noticed that the text hugs the left side of the table. We could consider adding a little bit of space in the first cell in each row.
There was a problem hiding this comment.
a yes , pb-* 'solves' it , not 100% on the best value here, the adding space in the first cell may not really work as the tables scrolls horizontally ( but maybe col 1 needs to be stick or the left edge needs a fade styling when scolling)
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody class="mb-3"> |
There was a problem hiding this comment.
To remove the border from the last row, you can structure the class like this -
<tbody class="mb-3 [&_tr:last-child_td]:border-none">
I found that the text feels compressed. We could also add a little bit of space on the bottom:
<tbody class="mb-3 [&_tr:last-child_td]:border-none [&_tr:last-child_td]:mb-5">
|
@davidruvolo51 i made small tweaks , feel free to add / edit , for now i think this will do , once we have more themes and table features implemented we can improve on style details |
…/molgenis-emx2 into chore/style-tailwind-tables-app
|
What are the main changes you did:
how to test:
todo: