DataGrid cell text alignment

Support
#1

Hi

How to define cell text alignment to e.g right in datagrid columns ? For Table we used to define ColumnAlignment, for TextField it was setStyleName(“align-right”) but for Grid none works.

This could use documentation.

Mike

#3

Hi,

DataGrid doesn’t have predefined styles, so you need to define your own. You can either define a style for a DataGrid if you want all cells to have a certain alignment or define a style for a cell and apply it to certain cells using CellStyleProvider, for example:

dataGrid.addCellStyleProvider((entity, property) -> {
    return "name".equals(property)
            ? "right-aligment"
            : null;
});

Regards,
Gleb

1 Like
#4

Great, thanks Gleb. And how would be the CSS for the right-alignment style ?

#5

All cells in the DataGrid:

.my-grid .v-grid-cell {
  text-align: right;
}

In this case set styleName = "my-grid" to the DataGrid.

Certain cells using CellStyleProvider:

.v-grid-cell.align-right {
  text-align: right;
}

In this case define the align-right for a certain cell using CellStyleProvider, see the demo.

Regards,
Gleb