Visão geral das opções de coluna do React Grid

    A Ignite UI for React Data Grid oferece 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.

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

    <IgrDataGrid
height="1-00%"
width="100%"
headerClickAction="SortByOneColumnOnly"
isColumnOptionsEnabled="true">
    <IgrTextColumn field="ID" isFilteringEnabled="false"/>
</IgrDataGrid>

    import { HeaderClickAction } from 'igniteui-react-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;

    API References