How to change the styling of the DataGrid component?

Support
#1

Hi,
I need to create a more compact view of the DataGrid component by decreasing the height of the header columns as well as the height of the rows. Additionally, I’d like to change the font size for both areas as well as the margins.
I have created a new custom theme but I am not quite sure about the variables that need to be changed. Is there available any kind of documentation that describes the available css variables per component? Otherwise, can you tell me which variables should be modified in this particular case for the DataGrid?

Thank you
George

#5

Hello!

Unfortunately, there is no documentation about SCSS variables for themes. The only way is to exploring sources of Jmix and Vaadin themes. Also, name of the variable can say what it does.

You can start with the following variables and styles:

$v-grid-row-height: $v-unit-size--small; // or in pixels

$v-grid-header-row-height: $v-grid-row-height; 
$v-grid-header-font-size: $v-font-size--small; 

$v-grid-footer-row-height: $v-grid-row-height;
$v-grid-footer-font-size: $v-font-size--small;

$v-grid-cell-padding-horizontal: $v-grid-cell-padding-horizontal / 2;

.v-grid-cell {
  font-size: $v-font-size--small;
}
1 Like
#7

Thank you very much for your reply. This is what I was looking for.

Regards,
George