React Tree Grid Column Hiding

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

    React Tree Grid Column Hiding Example

    Tree Grid Setup

    Let's start by creating our IgrTreeGrid and binding it to our data. We will also enable both filtering and sorting for the columns.

    <IgrTreeGrid autoGenerate={false} data={employeesFlatDetails} width="100%" height="560px" allowFiltering={true}>
    <IgrColumn field="Name" dataType="string" sortable={true} hidden={true}></IgrColumn>
    <IgrColumn field="ID" dataType="number" sortable={true} hidden={true}></IgrColumn>
    <IgrColumn field="Title" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="HireDate" dataType="date" sortable={true}></IgrColumn>
    <IgrColumn field="Age" dataType="number" sortable={true}></IgrColumn>
    <IgrColumn field="Address" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="City" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="Country" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="Fax" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="PostalCode" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="Phone" dataType="string" sortable={true}></IgrColumn>
</IgrTreeGrid>

    Toolbar's Column Hiding UI

    The built-in Column Hiding UI is placed inside an DropDown in the IgrTreeGrid's toolbar. We can show/hide the Column Hiding UI by using this exact dropdown.

    For this purpose all we have to do is set both the IgrGridToolbarActions and the IgrGridToolbarHiding inside of the IgrTreeGrid.

    <IgrTreeGrid>
    <IgrGridToolbar>
        <IgrGridToolbarActions>
            <IgrGridToolbarHiding></IgrGridToolbarHiding>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrTreeGrid>

    The IgrTreeGrid provides us with some useful properties when it comes to using the toolbar's column hiding UI.

    By using the title property, we will set the title that is displayed inside the dropdown button in the toolbar.

    <IgrTreeGrid>
    <IgrGridToolbar>
        <IgrGridToolbarActions>
            <IgrGridToolbarHiding title="Column Hiding"></IgrGridToolbarHiding>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrTreeGrid>

    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.

    Disable hiding of a column

    We can easily prevent the user from being able to hide columns through the column hiding UI by simply setting their disableHiding property to true.

    <IgrTreeGrid>
    <IgrColumn field="Name" dataType="string" sortable={true} disableHiding={true}></IgrColumn>
    <IgrColumn field="Title" dataType="string" sortable={true} disableHiding={true}></IgrColumn>
</IgrTreeGrid>

    Styling

    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:

    <IgrTreeGrid className="tree-grid"></IgrTreeGrid>

    Then set the related CSS variables for the related components. We will apply the styles also only on the igx-column-actions, so the rest of the grid is unaffected:

    .tree-grid {
    /* 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;
}

    Demo

    API References

    In this article we learned how to use the built-in column hiding UI in the IgrTreeGrid's toolbar. The column hiding UI has a few more APIs to explore, which are listed below.

    • ColumnActionsComponent

    Componentes adicionales con API relativas que se utilizaron:

    IgrColumn properties:

    IgrGridToolbar properties:

    • showProgress

    IgrGridToolbar methods:

    IgrTreeGrid events:

    • ColumnVisibilityChanged

    Additional Resources

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