Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Shobhana Suara
1415
Right aligning the header and content irrespective of any data type used
posted

I am using Data grid and have a combination of numeric and 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 i.e. Header text on left and filter icon (Excel filter) on right side as it is aligned when we used data type as String. Need CSS

Parents
No Data
Reply
  • 60
    Offline posted

    Hello Shobhana Suara
    Thank you for posting in our forum.

    You can apply style to header row using "headerClasses".
    https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcolumncomponent.html#headerclasses

    <igx-grid #grid1 [data]="data" width="700px"
  height="300px" displayDensity="compact">
  <igx-column field="Id" header="ID"></igx-column>
  <igx-column field="Name" header="Product Name"
    headerClasses="name-column-header"></igx-column>
  <igx-column field="Price" header="Price"></igx-column>
  <igx-column field="RegisteredDate" header="Registered Date">
    <ng-template igxCell let-val>
      {{val | date:'yyyy/MM/dd'}}
    </ng-template>
  </igx-column>
  <igx-column field="IsActive" header="Is Active"></igx-column>
</igx-grid>

    ::ng-deep {
  .name-column-header .igx-grid__th-title {
    color: red;
    text-decoration: underline;
  }
}

    Here is a sample application which uses the above codes.
    7888.igx-grid-column-styling.zip

Children