React Tree Grid Column Hiding

O Ignite UI for React tem uma interface do usuário interna de ocultação de coluna, que pode ser usada por meio da barra de ferramentas React 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 React Tree Grid Column Hiding é especialmente útil quando se deseja diminuir o tamanho da grade e eliminar a necessidade de tabulação em campos redundantes.

React Tree Grid Column Hiding Example

Tree Grid Setup

Vamos começar criando eIgrTreeGrid vinculando isso aos nossos dados. Também vamos ativar tanto o filtragem quanto a ordenação das colunas.

<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

A interface de ocultação de colunas embutida está colocada dentro de umaDropDown barra de ferramentas doIgrTreeGrid. Podemos mostrar/ocultar a interface de ocultação de colunas usando exatamente esse menu suspenso.

Para esse propósito, tudo o que precisamos fazer é definir tanto oIgrGridToolbarActions quanto oIgrGridToolbarHiding interior doIgrTreeGrid.

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

EleIgrTreeGrid nos fornece algumas propriedades úteis quando se trata de usar a interface de ocultação de colunas da barra de ferramentas.

Usando atitle propriedade, definiremos o título que será exibido dentro do botão suspenso da barra de ferramentas.

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

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

Disable hiding of a column

Podemos facilmente impedir que o usuário oculte colunas através da interface de ocultação de colunas simplesmente definindo a propriedade delesdisableHiding como true.

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

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:

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

Depois, defina as variáveis CSS relacionadas para os componentes relacionados. Aplicaremos os estilos também apenas noigx-column-actions, para que o restante da grade não seja afetado:

.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

Neste artigo, aprendemos como usar a interface de ocultação de colunas embutida naIgrTreeGrid barra de ferramentas. A coluna que esconde a interface tem algumas APIs adicionais para explorar, que estão listadas abaixo.

ColumnActionsComponent

Componentes adicionais com APIs relativas que foram usadas:

IgrColumn properties:

disableHiding

IgrGridToolbar properties:

showProgress

IgrGridToolbar methods:

IgrTreeGrid events:

ColumnVisibilityChanged

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.