Web Components Grid Sorting Overview

    The Ignite UI for Web Components Data Table / Data Grid supports ascending and descending column sorting with a Single Column, Multi-Column and Tri-State Column Sorting configuration.

    Web Components Grid Sorting Example

    Code Snippet

    You can sort by a single or multiple column ascending or descending in the Web Components data grid by using the headerClickAction property. If TriState is enabled you can remove the sort applied to a column.

    import { HeaderClickAction } from 'igniteui-webcomponents-grids';
    
    <igc-data-grid
        id="grid"
        height="100%"
        width="100%"
        header-click-action="SortByMultipleColumns">
    </igc-data-grid>
    

    Sorting through API

    import { IgcColumnSortDescription } from 'igniteui-webcomponents-grids';
    import { ListSortDirection } from 'igniteui-webcomponents-core';
    
    let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
    grid1.dataSource = data;
    
    let colSortDesc = new IgcColumnSortDescription();
    colSortDesc.field = "UnitsInStock";
    colSortDesc.sortDirection = ListSortDirection.Descending;
    grid1.sortDescriptions.add(colSortDesc);
    

    API Members