Right align content in hierarchical grid when datatype is string

Hi,

I am using hierarchical grid and have a couple of numeric and a few string column in my object. When I am binding the numeric columns with data type as the number, it is also changing the alignment of the column header. I want the header as is and position of all the option like sort and filter icon should be consistent across the grid but just cell with numeric value get right align.

I tried ng-template and align the cell value but it’s not working.

Can you please help here.

Thanks,
Dev

Hello Dev,

 

Thank you for posting in our forum.

 

Just to be sure I understand your question: you want to change the text alignment of the columns with a dataType of string to be to the right, for the content only, but leave the headers as they are (aligned to the left), is that correct?

A certain class: 'igx-grid__td–number' gets added to the ‘number’ cells, and tells them to align to the right with those CSS rules:

    text-align: right;

    justify-content: flex-end

 

You could do either of those two things:

1. The igxGrid allows the user to set custom cell styling – when a given condition is “true” the given custom class would be added to the cell. More details you may find in this help topic.

 

2. The Columns configuration section of the igxGrid overview topic shows how to use the cell template (that is the template that would be applied to all cells in a given column) and add some custom styling.

 

If you use some combination of the both approaches, you may add the igx-grid__td—number style, along with “width: 100%” to the cell template and this would align the content cells’ text to the right. The template for such a column in the grid configuration would look like this:

 

        
                {{ cell.value }}
            

 

Please let me know if you need some further assistance or if I have misunderstood your question.

this is exactly what I am looking for. this worked for me.

Thanks…

Hello Dev,

 

I am glad that you find my answer helpful.

 

Feel free to contact me if you have any additional questions regarding this matter.

How would you apply the right-align to the headers as well?

I’m sorry, I meant to ask how you would apply a right-align to the headers without using the dataType property of the column?

If I were to apply a center-align rather than a right-align, I would use this class for the cellClasses input of the cell:

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

But how would I achieve the center alignment for the header as well?

I also upvoted myself on accident since it’s my first post here and was seeing what the buttons did

Hello Mason,

 

The Columns Configuration section in my first response shows snippet for this as well, the ng-template looks very similar, but is decorated with an igxHeader directive instead. If you have already added this ‘.center-align’ class to your component CSS file, this is what the column declaration would look like:

 

    
        
{{ column.field }}
    

 

Please note that if you want to style both the column cells and the headers, you would need to use the two snippets I have shown together, like this:

    
        
{{ column.field }}
    
    
            {{ cell.value }}
    

 

Feel free to contact me if you need any additional assistance.

i am unable to apply styles to header to right align as well content

I am unable to align the header and content of the grid using above answer. Could you please help me out. I want to align the header and content to left and filter icon to right as it is for datatype 'String'