React Grid Column Hiding

    El Ignite UI for React tiene una interfaz de usuario de ocultación de columnas integrada, que se puede usar a través de la barra de herramientas de cuadrícula de React para cambiar el estado visible de las columnas. Los desarrolladores tienen la flexibilidad de definir la interfaz de usuario de ocultación de columnas en cualquier lugar de la página según sea necesario. La función de ocultación de columnas de cuadrícula React es especialmente útil cuando se desea disminuir el tamaño de la cuadrícula y eliminar la necesidad de tabular a través de campos redundantes.

    React Ejemplo de ocultación de columnas de cuadrícula

    EXAMPLE
    DATA
    TSX
    CSS

    ¿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.

    Configuración de cuadrícula

    Comencemos creando nuestro IgrGrid y vinculándolo a nuestros datos. También habilitaremos el filtrado y la clasificación de las columnas.

    <IgrGrid autoGenerate="false" width="100%" height="560px" allowFiltering="true">
        <IgrColumn field="ID" dataType="string" sortable="true" hidden="true"></IgrColumn>
        <IgrColumn field="ContactName" dataType="String" sortable="true" hidden="true"></IgrColumn>
        <IgrColumn field="ContactTitle" dataType="string" sortable="true"></IgrColumn>
        <IgrColumn field="City" dataType="string" sortable="true"></IgrColumn>
        <IgrColumn field="CompanyName" dataType="string" sortable="true"></IgrColumn>
        <IgrColumn field="Fax" dataType="string" sortable="true"></IgrColumn>
        <IgrColumn field="Address" dataType="string" sortable="true"></IgrColumn>
        <IgrColumn field="PostalCode" dataType="string" sortable="true"></IgrColumn>
        <IgrColumn field="Country" dataType="string" sortable="true"></IgrColumn>
        <IgrColumn field="Phone" dataType="string" sortable="true"></IgrColumn>
    </IgrGrid>
    tsx
    Ignite UI for React | CTA Banner

    IU para ocultar columnas de la barra de herramientas

    La interfaz de usuario integrada para ocultar columnas se coloca dentro de un DropDown en la barra de herramientas de IgrGrid. Podemos mostrar/ocultar la interfaz de usuario de ocultación de columnas usando este menú desplegable exacto.

    Para este propósito, todo lo que tenemos que hacer es configurar tanto IgrGridToolbarActions como IgrGridToolbarHiding dentro de IgrGrid. También agregaremos un título a nuestra barra de herramientas usando IgrGridToolbarTitle y un estilo personalizado para el contenedor de nuestra Grid.

    <IgrGrid>
        <IgrGridToolbar key="toolbar">
            <IgrGridToolbarActions key="toolbarActions">
                <IgrGridToolbarHiding key="toolbarHiding"></IgrGridToolbarHiding>
            </IgrGridToolbarActions>
        </IgrGridToolbar>
    </IgrGrid>
    tsx

    IgrGrid nos proporciona algunas propiedades útiles cuando se trata de usar la interfaz de usuario para ocultar columnas de la barra de herramientas.

    Al usar la propiedad title, configuraremos el título que se muestra dentro del botón desplegable en la barra de herramientas.

    <IgrGrid>
        <IgrGridToolbar key="toolbar">
            <IgrGridToolbarActions key="toolbarActions">
                <IgrGridToolbarHiding key="toolbarHiding" title="Column Hiding"></IgrGridToolbarHiding>
            </IgrGridToolbarActions>
        </IgrGridToolbar>
    </IgrGrid>
    tsx

    Puede ver el resultado del código de arriba al principio de este artículo en la sección Ejemplo de ocultación de columna React.

    Deshabilitar la ocultación de una columna

    Podemos evitar fácilmente que el usuario pueda ocultar columnas a través de la interfaz de usuario que oculta columnas simplemente configurando su propiedad disableHiding en verdadero.

    <IgrGrid>
        <IgrColumn field="ContactName" dataType="string" sortable="true" disableHiding="true"></IgrColumn>
        <IgrColumn field="ContactTitle" dataType="string" sortable="true" disableHiding="true"></IgrColumn>
    </IgrGrid>
    tsx

    Estilo

    La cuadrícula se puede personalizar aún más configurando algunas de las variables CSS disponibles. Para lograrlo usaremos una clase que primero asignaremos al grid:

    <IgrGrid className="grid"></IgrGrid>
    tsx

    Luego configure las variables CSS relacionadas para los componentes relacionados. Aplicaremos los estilos también solo en igx-column-actions, por lo que el resto de la cuadrícula no se ve afectado:

    .grid  igx-column-actions {
        /* Main Column Actions styles */
        --ig-column-actions-background-color: #292826;
        --ig-column-actions-title-color: #ffcd0f;
    
        /* Checkbox styles */
        --ig-checkbox-tick-color: #292826;
        --ig-checkbox-label-color: #ffcd0f;
        --ig-checkbox-empty-color: #ffcd0f;
        --ig-checkbox-fill-color: #ffcd0f;
    
        /* Input styles */
        --ig-input-group-idle-text-color: white;
        --ig-input-group-filled-text-color: #ffcd0f;
        --ig-input-group-focused-text-color: #ffcd0f;
        --ig-input-group-focused-border-color: #ffcd0f;
        --ig-input-group-focused-secondary-color: #ffcd0f;
    
        /* Buttons styles */
        --ig-button-foreground: #292826;
        --ig-button-background: #ffcd0f;
        --ig-button-hover-background: #404040;
        --ig-button-hover-foreground: #ffcd0f;
        --ig-button-focus-background: #ffcd0f;
        --ig-button-focus-foreground: black;
        --ig-button-focus-visible-background: #ffcd0f;
        --ig-button-focus-visible-foreground: black;
        --ig-button-disabled-foreground: #ffcd0f;
    }
    css

    Manifestación

    EXAMPLE
    DATA
    TSX
    CSS

    Referencias de API

    En este artículo, aprendimos a usar la interfaz de usuario de ocultación de columnas incorporada en la IgrGrid barra de herramientas. La columna que oculta la interfaz de usuario tiene algunas API más para explorar, que se enumeran a continuación.

    • ColumnActionsComponent

    Componentes adicionales con API relativas que se utilizaron:

    IgrColumn properties:

    IgrGridToolbar properties:

    • showProgress

    IgrGridToolbar methods:

    IgrGrid events:

    • ColumnVisibilityChanged

    Recursos adicionales

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.