[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Web Components Descripción general de las opciones de columna de cuadrícula
La cuadrícula de datos de Ignite UI for Web Components admite la capacidad de agrupar, ocultar, ordenar, mover, anclar, filtrar y ordenar columnas directamente desde una interfaz de usuario expuesta en cada encabezado de columna.
To enable the column options ui you can set the grid's isColumnOptionsEnabled property to true.
Web Components Grid Column Options Example
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
El siguiente código demuestra cómo habilitar mediante programación las opciones de columna de la interfaz de usuario y ajustar el filtrado y la clasificación en las opciones de columna de la interfaz de usuario ajustando la cuadrícula y la columna.
import { HeaderClickAction } from 'igniteui-webcomponents-data-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 field="ID" is-filtering-enabled="false"></igc-text-column>
</igc-data-grid>