Descripción general de las opciones de columnas de React Grid
La Ignite UI for React Data Grid 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.
Para activar la interfaz de opciones de columnas puedes poner la propiedad deisColumnOptionsEnabled la cuadrícula en true.
React Grid Column Options Example
Column Options Configurations
El filtrado puede activarse por columna estableciendo la propiedad deisFilteringEnabled la columna. Configurar verdadero o falso mostrará o ocultará la sección de filtrado en la interfaz de opciones de la columna.
La ordenación puede activarse para toda la cuadrícula si se aplica laheaderClickAction propiedad. Configurar estoNone para, por ejemplo, eliminará completamente la ordenación de la cuadrícula y se reflejará en la interfaz de opciones para cada columna. Y poner,SortByOneColumnOnly por ejemplo, seguirá permitiendo ordenar una columna a la vez.
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.
<IgrDataGrid
height="1-00%"
width="100%"
headerClickAction="SortByOneColumnOnly"
isColumnOptionsEnabled="true">
<IgrTextColumn field="ID" isFilteringEnabled="false"/>
</IgrDataGrid>
import { HeaderClickAction } from 'igniteui-react-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;