Angular Slickgrid align header text

Question

I am using angular slickgrid and want to center or right-align the text in the column headers. Not all columns the same way.

I figured out, there is a headerCssClass property in the column definition, but all the way I tried, this style never seems to get applied.

For the column-definition:

{
                id: 'sourceNumber',
                name: 'SourceNumber',
                field: 'SourceNumber',
                sortable: true,
                width: 150,
                headerCssClass: 'text-right',
                cssClass: 'text-right'

            },

In the css-File:

.text-right {
    text-align: right;
}

It works fine for the cell contents. But the text in the header is still left align.

What am I doing wrong?

Answer 1

For aligning grid cell, I typically use the Formatters that I created for that purpose alignCenter and alignRight (see all Formatters in the Formatters - Wiki ), you could also use the extra CSS class like you did.

If you keep the extra CSS class, then there's an extra float: left on the .slick-column-name class that you will probably have to cancel out and that is probably what is blocking (or cancelling) your CSS. However I must say, it's on the left for a reason, it's not ideal to move it to a different position (especially on the right) because you might conflict with the header menu & sort icons (you will for sure if you align right)

.slick-column-name {
  float: none;
}

Also note that the column definition name property also accepts HTML code (it might not be documented though), but even then you will probably have to cancel the float first

this.columnDefinitions = [
  { id: 'firstName', field: 'firstName', name: '<span style="color: blue">First Name</span>' },
];

Lastly, you should also take a look at all the SASS variables (which also have CSS variable equivalent names), you can see all the variables in this _variables file, there's a lot of variables available but it doesn't seem to include any for the header alignment (we can add variables for that in the future), there's also this CSS Styling - Wiki that has info in that regard.

Please note that I'm the author of Angular-Slickgrid