Grid Column Options Overview

The Ignite UI for Web Components Data Grid supports the ability to group, hide, sort, move, pin, filter, and sort columns directly from a UI exposed on each column header.

To enable the column options ui you can set the grid's isColumnOptionsEnabled property to true.

Demo

Column Options Configurations

Filtering can be toggled per column by setting the column's isFilteringEnabled property. Setting true or false will show or hide the filtering section in the column's options ui.

Sorting can be toggled for the entire grid if the headerClickAction property is applied. Setting this to None for example will completely remove sorting from grid and reflect in the options ui for each column. And setting SortByOneColumnOnly for example will continue to allow one column to be sorted at a time.

Code Snippet

The following code demonstrates how to programmatically enable the column options ui adjust filtering and sorting in the column options ui by adjusting the grid and column.

import { HeaderClickAction } from 'igniteui-webcomponents-grids';

//enable column options
this.grid.isColumnOptionsEnabled="true";

//adjust filtering for column
let idColumn = this.grid.actualColumns.item(0);
idColumn.isFilteringEnabled="false";

//adjust sorting
this.grid.headerClickAction = HeaderClickAction.SortByOneColumnOnly;
<igc-data-grid
     id="grid"
     height="calc(100% - 40px)"
     width="100%"     
     header-click-action="SortByOneColumnOnly"
     is-column-options-enabled="true">
    <igc-text-column property-path="ID" is-filtering-enabled="false"></igc-text-column>
</igc-data-grid>