I tried it in vaadin 24 and in the 25 beta. added my own css.
I can see in the browser inspector that the table has the css properties, but they just show no effect.
There is no way to add gaps between rows in the grid.
Has anybody an idea why this si not working? I mean, its just html, so should work. But it is not working.
It would be helpful if you showed what you tried
The grid uses a table internally, but because it’s rendered with display: flex, table-specific properties like border-spacing don’t apply.
Wow, thanks. It made me Crazy not to know why it was not working.
Spent several hours investigating it.
Does this mean that we cannot have a space between rows in vaadin?
I am trying to create something similar to the look of stories and tasks in the Jira backlog.
You need to apply margin/paddings depending on your exact requirements on parts like cell or rows.
Already tried it all. Padding is working, but I need something like margin, so that the background shines through. But margins are also not working.
The only thing that will do it is border-spaces.
I will test it tomorrow again, but pretty sure that margins are ignored inside of tables by most browsers.
P.s. thank you for answering. Really, really appreciate it!
I tested margin with standard html and as expected, it does not work inside at able.
Unfortunately I was not able to attach it. the forum does not allow html files attachments. So i added it as preformatted text to my answer.
But i added a picture of how it is suppose to look using html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Jira-like Grid Test</title>
<style>
body {
padding: 20px;
background-color: #f4f5f7;
width: 100%;
}
table {
border-spacing: 0 12px;
border-collapse: separate;
}
tr {
background: transparent;
box-shadow: 2px 2px 2px rgba(9, 30, 66, 0.2);
}
/* White background on cells to create the "card" effect */
td {
background: #ffffff;
padding: 12px 16px;
border: 0;
}
/* Rounded corners on first/last cells */
td:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
td:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
</style>
</head>
<body>
<h2>grid with vertical spaces that allow row shadows to show</h2>
<div class="grid-host">
<div id="scroller">
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john.doe@example.com</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>jane.smith@example.com</td>
</tr>
<tr>
<td>Bob</td>
<td>Johnson</td>
<td>bob.johnson@example.com</td>
</tr>
<tr>
<td>Alice</td>
<td>Williams</td>
<td>alice.williams@example.com</td>
</tr>
<tr>
<td>Charlie</td>
<td>Brown</td>
<td>charlie.brown@example.com</td>
</tr>
<tr>
<td>Diana</td>
<td>Davis</td>
<td>diana.davis@example.com</td>
</tr>
<tr>
<td>Eve</td>
<td>Miller</td>
<td>eve.miller@example.com</td>
</tr>
<tr>
<td>Frank</td>
<td>Wilson</td>
<td>frank.wilson@example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
I tried 3 times to reply and all got removed without error or message.
Tried margin inside table, but it has no effect.
This is what i am trying to do:
I can see your other comments. They are marked as potential spam because of the embedded html.
From looking at the provided example, my first guess would be that you tried to apply “normal” CSS… Vaadin components are encapsulated using shadow dom so that you can’t manipulate everything freely. You need to target specific parts of it using the part-selector
Take a look at the mentioned css selector within the docs How to style the Grid component | Vaadin components
For example vaadin-grid::part(row)
Thank you. I know about shadow dom. The example was just to demonstrate what i want to do.
The css for vaadin looks a bit different. I always check using the inspector in chrome to make sure my css is actually applied to the html elements in the shadow dom.
The issue is simply: The only solution css/html provides for this problem is border-spacing and vaadin does not allow this or ignores it because it is rendered using display: flex.
In other words: there is no solution to get vaadin to look like the provided image. I mean, sure, there are hacks like using images and ugly stuff. But not by normal css/html means.
yes, that is possible with with padding, but the background cannot shine through and you cannot have per row shadow or rounded corners.
For all that you need border-spacing.
@Jouni1 as CSS-wizard might know a good way.
Or you simple use the virtual list component
Here’s what I got, built on top of Lumo (Vaadin 25 version, though that shouldn’t matter, should work the same in Vaadin 24.9):
vaadin-grid {
background: transparent;
border: 0;
}
vaadin-grid::part(row) {
padding-inline: 5px;
background: transparent;
}
vaadin-grid::part(body-row) {
padding-block: 5px;
filter: drop-shadow(0px 2px 2px hsla(0deg, 0%, 0%, 0.2));
}
vaadin-grid::part(last-header-row) {
padding-bottom: 5px;
}
vaadin-grid::part(header-row) {
filter: drop-shadow(0px 2px 2px hsla(0deg, 0%, 0%, 0.2));
}
vaadin-grid::part(body-cell first-column-cell) {
border-start-start-radius: 10px;
border-end-start-radius: 10px;
}
vaadin-grid::part(body-cell last-column-cell) {
border-start-end-radius: 10px;
border-end-end-radius: 10px;
}
vaadin-grid::part(first-header-row-cell first-column-cell) {
border-start-start-radius: 10px;
}
vaadin-grid::part(last-header-row-cell first-column-cell) {
border-end-start-radius: 10px;
}
vaadin-grid::part(first-header-row-cell last-column-cell) {
border-start-end-radius: 10px;
}
vaadin-grid::part(last-header-row-cell last-column-cell) {
border-end-end-radius: 10px;
}
/* Focus outlines */
vaadin-grid::part(row)::before {
border-radius: 15px;
}
vaadin-grid::part(cell)::before {
border-radius: inherit;
}
Can’t use regular box-shadow, but I hope the drop-shadow() filter would be enough. Here’s what it looks like (and that’s the page background color showing through, the grid itself is transparent):
The drop shadow fill show from the sides of the header when you scroll:
Horizontal overflow/scroll won’t look very nice (the rows will just appear cut off):
The row focus outline is also going to look weird with horizontal scrolling:
This already looks very promising.
Although we will never get a border on the row.
Trying this out in my project now!
Although we will never get a border on the row.
Oh, missed that requirement. Let me give it a try.
There you go. Adjust color as you wish:
vaadin-grid::part(body-cell) {
border-block: 1px solid var(--lumo-contrast-50pct);
}
vaadin-grid::part(body-cell first-column-cell) {
border-inline-start: 1px solid var(--lumo-contrast-50pct);
}
vaadin-grid::part(body-cell last-column-cell) {
border-inline-end: 1px solid var(--lumo-contrast-50pct);
}
