Search code examples
javascriptcssdatagridvmware-clarity

In a Clarity DataGrid, how do I change the text-align property of the whole column?

The default text alignment for all cells in the datagrid is left justified. I want to change some columns to be right justified. I can do this for the cells in the main body of the grid by adding a class "rj" to the clr-dg-cell in the html, then adding a css style:

clr-dg-cell.rj {
  text-align: right;
}

However the text alignment in the column header cell is controlled by the text-align property on the datagrid-column-title element. I can't override this as it is inside a 'span' which is taking precedence? Is there an easier/better way to control the text alignment of the whole column?

Solution

  • @tony_h It can be done by adding the "rj" class to the clr-dg-column, and the following css style:

    ::ng-deep .datagrid .datagrid-column.rj .datagrid-column-title {
  text-align: right;
}