Right aligning a column does not work as expected

Question

Aligning items to the left work as expected. The column header text and the data row values are both left aligned and they line up horizontally on the screen.

We are trying to align numerical values to the right using the grid.

When we do this for some reason the sort icon moves from the right of the column header to the left of the column header and the filter icon stays to the right of the column header. See the last column header in the first example below.

Why does the sort icon move? If the sort icon moves why does the filter icon not move? I understand that perhaps on right aligned columns all the icons may need to move to the left, but it should either move all columns to the left or no columns to the left.

When you align a column to the right the column header and the column data are not aligned like they are with columns aligned to the left. How can I have the text of the column header align to the right with the text in the data rows?

Example of how it works:
Image_6494_1707244808851

Vikram Sundararajan · Answer

Hi eric,Greetings from Syncfusion support,We understand that you've observed a change in the sort
icon's position when aligning a column to the right in the Syncfusion EJ2 Grid
component. We would like to inform you that, this is the default behavior of
the EJ2 Grid. When you set the textAlign property of a column to the left, the
sort icon is positioned on the left side. Conversely, when you align a column
to the right, the sort icon is automatically moved to the right.Regards.Vikram S

eric · Answer

Hi Vikram,Is there no way to right align a column, and then have the column label right aligned and the data right aligned?If the sort icon flipping sides is intentional, how do I raise this as something that should be changed in the design?Eric

Joseph Christ Nithin Issack · Answer

Hi Eric,  Based on our current architecture, the filter icon
will be fixed to the right side of the column irrespective of the change of the
alignment of the column. The sort icon will be changing position based on the
alignment of the column. When the textAlign property is set to ‘Right’, the
sort icon will be shifted to the left side and the sort icon will be remain to
the right side of the header text for the alignments ‘Center’, ‘Justify’ and
‘Left’. This is the behavior of Grid layout structure. When the textAlign is set to ‘Right’ if the sort icon is
shown in the right, the filter and sort icons will be overlapped due to the
minimum space in the right side of the header cell. If the filter icon is move
to the left side, if the previous column alignment is left, then the two filter
icons will be placed adjacent to each other, this may cause the grid to be less
appealing to view. This is the reason; we have designed the grid in such a way.We have achieved your requirement by moving both the filter
and the sort icons to the left using the css style in the ‘headerCellInfo’
event of the EJ2 grid.Please refer the below code example:

headerQueryCellInfo(args) {
      if (args.node.classList.contains('e-rightalign')) {
        args.node.querySelector('.e-headercelldiv').style.margin =
          '-7px -7px -7px 15px';
        args.node.querySelector('.e-filtermenudiv').style.float = 'Left';
        args.node.querySelector('.e-sortfilterdiv').style.margin = '-16px 24px';
      }
    }

Sample: https://stackblitz.com/edit/angular-itpnaj?file=src%2Fapp.component.ts,src%2Fapp.component.htmlWe have also added the gridLines in the above to avoid the
confusion of which column the icons belong. For
more details on the gridlines, please refer the below documentation. GridLines: https://ej2.syncfusion.com/angular/documentation/grid/cell/#grid-lines  Regards,Joseph I.