How to align text in a clarity datagrid

Question

I have a angular app and i use clarity instead of bootstrap,

i have a datagrid and would like to know how you can align the header text of the datagrid to the center i have tried inline styling an css but doesn't seem to work.

code example html file


    User ID
    Name
    Creation date
    Favorite color

    
        data
        data
        data
        data
    
        
        data
        data
        data
        data
    
        
        data
        data
        data
        data

css file

.align-content {
text-align: center;
}

thanks in advance

user_6760868 · Answer

You can target datagrid-column-title class and can give it style like:

.datagrid-column-title{
  display: flex;
  justify-content: center;
}

Also if you want the data rows to be centered as well at the same time, try this:

.datagrid-table .datagrid-cell{
  display: flex;
  justify-content: center;
}

Make sure you do these changes in style.scss of your application.

Here's a working demo:https://stackblitz.com/edit/angular-tt3md6

user_588759 · Answer

Use

or

:host ::ng-deep {
  .datagrid-table .datagrid-column {
    justify-content: center;
  }
}

https://github.com/vmware/clarity/blob/3281f777e84b7efce3e7697e82f6c85df802b3b5/apps/website/data/angular-api.json#L1802

How to align text in a clarity datagrid

2 Answers