Style Grid Rows

Flow
1

I have a grid where I managed to make all text inside small by using

addClassName(LumoUtility.FontSize.XXSMALL);

works great, however, I was not able to remove Margins, Padding between these rows, or cells.

I tried setting these on the grid, as well as the componentCellRendereres.

 addClassName(LumoUtility.Padding.NONE);
    addClassName(LumoUtility.Margin.NONE);
2

There are some paddings in the cell of the vaadin-grid. You have an example of a dense grid here: How do I show a Vaadin Grid with compact row styling - Vaadin Cookbook

3 Likes
3

There is also the compact theme variant, which might be useful as a starting point: Grid | Components | Vaadin Docs

Of course it might not be compact enough for your needs, but probably worth a look, anyway.

2 Likes
4

Do you mean the cell padding? You should be able to set that using --vaadin-grid-cell-padding. For example in styles.css:

html {
  --vaadin-grid-cell-padding: 0;
}