We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Sort Indicator - how to place close to header name


I have a requirement to ensure that the sorting indicator is always placed close to the column name, regardless of the width of the column.

How can this be achieved?


1 Reply

RS Rajapandiyan Settu Syncfusion Team December 15, 2022 02:03 PM UTC

Hi Cosmin,

Thanks for contacting Syncfusion support.

Based on the theme specification, the default margin and padding are set to the filter icon and sort icon. So, there is some space available between the header text and the sort icon. This is the behavior of Grid structure.

In your requirement, you want to move the sort icon near to the HeaderText. We achieved your requirement in the dataBound event of Grid.

dataBound: https://ej2.syncfusion.com/angular/documentation/api/grid/#databound

In that event, we dynamically changed the margin of the sort icon based on the headerText width and headerCellDiv width. Refer to the below code example and sample for more information.



  dataBound(args) {

    var headercells = this.grid.element.querySelectorAll('.e-headercell');

    for (var i = 0; i < headercells.length; i++) {

      var headertextwidth = headercells[i].querySelector('.e-headertext').getBoundingClientRect().width;

      var headercelldivwidth = headercells[i].querySelector('.e-headercelldiv').getBoundingClientRect().width;

      var calx = parseInt((headercelldivwidth / headertextwidth + (headercelldivwidth - headertextwidth - 25)) as any);


      // margin calculation

      var sortMargin = '-16px ' + calx + 'px';

      var sortRightMargin = '-16px ' + (calx - 5) + 'px';

      var sortCenterMargin = '-16px ' + (calx + 5) + 'px';

      // change the sorticon margin

      if (headercells[i].classList.contains('e-rightalign')) {

        headercells[i].querySelector('.e-sortfilterdiv.e-icons').style.margin = sortRightMargin;

      } else if (headercells[i].classList.contains('e-centeralign')) {

        headercells[i].querySelector('.e-sortfilterdiv.e-icons').style.margin = sortCenterMargin;

      } else {

        headercells[i].querySelector('.e-sortfilterdiv.e-icons').style.margin = sortMargin;





Sample: https://stackblitz.com/edit/angular-s61o7p-wzbkf1?file=app.component.ts


Rajapandiyan S

Live Chat Icon For mobile
Up arrow icon