I’m working on a Vaadin Grid, and I’ve already applied GridVariant.LUMO_COMPACT to make it more compact. However, I was wondering if there are any other methods or techniques I can use to further reduce the size of the grid or its elements.
Has anyone experimented with additional customizations or CSS styles that might help achieve a more compact look for the Grid?
Most sizes (e.g. of fonts, elements and whitespace) in the Grid (and other Vaadin components) is determined by Lumo style properties. By tweaking those (either globally, or just for a specific Grid) you can make things more compact.
As an example, applying these tweaks on a particular Grid that already has the COMPACT variant applied makes things a lot more compact:
--lumo-font-size-m: 12px;
--lumo-font-size-s: 10px;
--lumo-size-s: 20px;
--lumo-size-m: 30px;
--lumo-space-s: 5px;
This doesn’t affect much. Anything else that you know of?
We didn’t set any headers, that saved us a row.
Did you try just making the numbers even smaller?
You could use this addon or copy what they did to make the rows smaller.
In case you have buttons in your grid, they bring a lot of space around them. In my case I used theme variant ButtonVariant.LUMO_TERTIARY_INLINE to make them more compact.