Web Components Tree Grid Column Hiding

O Ignite UI for Web Components tem uma interface do usuário interna de ocultação de coluna, que pode ser usada por meio da barra de ferramentas Web Components Grade de Árvore para alterar o estado visível das colunas. Os desenvolvedores têm a flexibilidade de definir a interface do usuário de ocultação de coluna em qualquer lugar da página, conforme necessário. O recurso Web Components Tree Grid Column Hiding é especialmente útil quando se deseja diminuir o tamanho da grade e eliminar a necessidade de tabulação em campos redundantes.

Web Components Tree Grid Column Hiding Example

Tree Grid Setup

Vamos começar criando nosso IgcTreeGridComponent e vinculando-o aos nossos dados. Também habilitaremos a filtragem e a classificação das colunas.

<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

A interface do usuário de ocultação de coluna interna é colocada dentro de uma DropDown barra de ferramentas do IgcTreeGridComponent. Podemos mostrar/ocultar a interface do usuário de ocultação de coluna usando esse menu suspenso exato.

Para isso, tudo o que precisamos fazer é definir o e o IgcGridToolbarActions IgcGridToolbarHiding interior do IgcTreeGridComponent. Também adicionaremos um título à nossa barra de ferramentas usando o e um estilo personalizado para o IgcGridToolbarTitle wrapper do nosso Tree Grid.

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

O nos IgcTreeGridComponent fornece algumas propriedades úteis quando se trata de usar a interface do usuário de ocultação de coluna da barra de ferramentas.

Ao usar a title propriedade, definiremos o título que é exibido dentro do botão suspenso na barra de ferramentas.

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

Você pode ver o resultado do código acima no início deste artigo na seção Exemplo de ocultação de coluna Web Components.

Disable hiding of a column

Podemos facilmente impedir que o usuário possa ocultar colunas por meio da interface do usuário de ocultação de coluna simplesmente definindo sua disableHiding propriedade como 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

A grade pode ser ainda mais personalizada definindo algumas das variáveis CSS disponíveis. Para conseguir isso, usaremos uma classe que primeiro atribuiremos à grade:

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

Em seguida, defina as variáveis CSS relacionadas para os componentes relacionados. Aplicaremos os estilos também apenas no igx-column-actions, para que o resto da grade não seja afetado:

#treeGrid {
    /* 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

Neste artigo, aprendemos como usar a interface do usuário de ocultação de coluna interna na barra de ferramentas do . IgcTreeGridComponent A coluna que oculta a interface do usuário tem mais algumas APIs para explorar, listadas abaixo.

ColumnActionsComponent

Componentes adicionais com APIs relativas que foram usadas:

IgcColumnComponent properties:

disableHiding

IgcGridToolbar properties:

showProgress

IgcGridToolbar methods:

IgcTreeGridComponent events:

ColumnVisibilityChanged

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.