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
1415
Sort the igx data grid in ascending order
posted

I am using igx data grid to display data. My data is coming from API. I need to display grid in ascending order by default.

Please provide me sample how to achieve the same. ASAP.

  • 960
    Verified Answer
    Offline posted

    Hello Shobhana Suara,

    I'm not certain whether or not I correctly understand your scenario, but you might want to generate columns array dynamically when the data comes and to sort the data by IgxGridComponent's sort method in the code while, on the view side, you might want to set false to 'autoGenerate' and create igx-columns by *ngFor.

    // app.component.ts
    
    // Assuming DATA comes from a server in a certain timing.
    this.data = DATA;
    
    // Generate columns array from the data.
    Object.keys(this.data[0]).forEach((key, index) => {
      this.columns.push({ field: key, header: key, sortable: true });
    });
    
    // Sort the data by Country in ascending order.
    // https://es.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxgridcomponent.html#sort
    this.grid.sort({ fieldName: 'Country', dir: SortingDirection.Asc, ignoreCase: true });

    <!-- app.component.html -->
    <igx-grid #grid1 [data]="data" [autoGenerate]="false" [width]="'100%'" [height]="'400px'">
        <igx-column #col *ngFor="let c of columns" [field]="c.field" [header]="c.header" [sortable]='c.sortable'>
        </igx-column>
    </igx-grid>

    Could you give it a try?