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 habilitar la interfaz de usuario de opciones de columna, puede establecer la propiedad isColumnOptionsEnabled de la cuadrícula en verdadero.

    Ejemplo de opciones de columna de cuadrícula de React

    EXAMPLE
    DATA
    TSX

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    Configuraciones de opciones de columna

    El filtrado se puede alternar por columna configurando la propiedad IsFilteringEnabled de la columna. Establecer verdadero o falso mostrará u ocultará la sección de filtrado en la interfaz de usuario de opciones de la columna.

    La clasificación se puede alternar para toda la cuadrícula si se aplica la propiedad headerClickAction. Establecer esto en None, por ejemplo, eliminará por completo la clasificación de la cuadrícula y se reflejará en las opciones de la interfaz de usuario para cada columna. Y configurar SortByOneColumnOnly por ejemplo, seguirá permitiendo ordenar una columna a la vez.

    Ignite UI for React | CTA Banner

    Fragmento de código

    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>
    tsx
    import { HeaderClickAction } from 'igniteui-react-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;
    ts

    Referencias de API