Change DataGrid header columns

Support
#1

Hi,

I want to change my DataGrid header columns. So I’ve generated a new theme extension and I’ve added these lines:

.v-grid-column-header-content.datagrid-header {
font-weight: bold;
text-align: center;
color:red

}

Then, in my Controller, I have the following code:

myDatagrid.addCellStyleProvider((entity, property) -> {
        return "datagrid-header";
    });

But there is no effect. What I’m doing wrong?

Thank you!

#4

Hi,

CellStyleProvider adds style class names to body cells. In order to add styles to header/footer rows and cells, you need to obtain a certain row or cell, e.g.

ordersDataGrid.getDefaultHeaderRow().setStyleName("datagrid-header");

.v-grid-row.datagrid-header .v-grid-cell {
  font-weight: bold;
  text-align: center;
  color:red;
}

Regards,
Gleb

#5

Thank you!!