Web Components Tree Grid Column Hiding

El Ignite UI for Web Components tiene una interfaz de usuario de ocultación de columnas integrada, que se puede usar a través de la barra de herramientas Cuadrícula de árbol de Web Components 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 de árbol Web Components 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.

Web Components Tree Grid Column Hiding Example

Tree Grid Setup

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

<igc-tree-grid id="treeGrid" auto-generate="false" width="100%" height="560px" allow-filtering="true">
    <igc-column field="Name" data-type="string" sortable="true" hidden="true"></igc-column>
    <igc-column field="ID" data-type="number" sortable="true" hidden="true"></igc-column>
    <igc-column field="Title" data-type="string" sortable="true"></igc-column>
    <igc-column field="HireDate" data-type="date" sortable="true"></igc-column>
    <igc-column field="Age" data-type="number" sortable="true"></igc-column>
    <igc-column field="Address" data-type="string" sortable="true"></igc-column>
    <igc-column field="City" data-type="string" sortable="true"></igc-column>
    <igc-column field="Country" data-type="string" sortable="true"></igc-column>
    <igc-column field="Fax" data-type="string" sortable="true"></igc-column>
    <igc-column field="PostalCode" data-type="string" sortable="true"></igc-column>
    <igc-column field="Phone" data-type="string" sortable="true"></igc-column>
</igc-tree-grid>

Toolbar's Column Hiding UI

The built-in Column Hiding UI is placed inside an DropDown in the IgcTreeGridComponent'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 IgcGridToolbarActionsComponent and the IgcGridToolbarHidingComponent inside of the IgcTreeGridComponent.

<igc-tree-grid>
    <igc-grid-toolbar>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-tree-grid>

The IgcTreeGridComponent 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.

<igc-tree-grid id="treeGrid">
    <igc-grid-toolbar>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-hiding id="hidingAction" title="Column Hiding"></igc-grid-toolbar-hiding>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-tree-grid>

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 Web Components.

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.

<igc-tree-grid>
    <igc-column field="Name" data-type="string" sortable="true" disable-hiding="true"></igc-column>
    <igc-column field="Title" data-type="string" sortable="true" disable-hiding="true"></igc-column>
</igc-tree-grid>

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:

<igc-tree-grid id="treeGrid"></igc-tree-grid>

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 IgcTreeGridComponent'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:

IgcColumnComponent properties:

disableHiding

IgcGridToolbarComponent properties:

showProgress

IgcGridToolbarComponent methods:

IgcTreeGridComponent events:

ColumnVisibilityChanged

Additional Resources

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