[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Visão geral das opções de coluna da grade Web Components

    A Grade de Dados do Ignite UI for Web Components dá suporte à capacidade de agrupar, ocultar, classificar, mover, fixar, filtrar e classificar colunas diretamente de uma interface do usuário exposta em cada cabeçalho de coluna.

    Para habilitar a interface de opções de coluna, você pode definir a propriedade isColumnOptionsEnabled da grade como true.

    Web Components Grid Column Options Example

    Column Options Configurations

    A filtragem pode ser alternada por coluna definindo a propriedade IsFilteringEnabled da coluna. Definir true ou false mostrará ou ocultará a seção de filtragem na interface de usuário de opções da coluna.

    A classificação pode ser alternada para toda a grade se a propriedade headerClickAction for aplicada. Definir isso como None, por exemplo, removerá completamente a classificação da grade e refletirá na interface do usuário de opções para cada coluna. E definir SortByOneColumnOnly, por exemplo, continuará permitindo que uma coluna seja classificada por vez.

    Code Snippet

    O código a seguir demonstra como habilitar programaticamente a interface de opções de coluna para ajustar a filtragem e a classificação na interface de opções de coluna ajustando a grade e a coluna.

    import { HeaderClickAction } from 'igniteui-webcomponents-grids';

//enable column options
this.grid.isColumnOptionsEnabled="true";

//adjust filtering for column
let idColumn = this.grid.actualColumns.item(0);
idColumn.isFilteringEnabled="false";

//adjust sorting
this.grid.headerClickAction = HeaderClickAction.SortByOneColumnOnly;

    <igc-data-grid
     id="grid"
     height="calc(100% - 40px)"
     width="100%"
     header-click-action="SortByOneColumnOnly"
     is-column-options-enabled="true">
    <igc-text-column field="ID" is-filtering-enabled="false"></igc-text-column>
</igc-data-grid>

    API References