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 ativar a interface de opções de coluna, você pode definir a propriedade daisColumnOptionsEnabled grade como true.
React Grid Column Options Example
Column Options Configurations
O filtragem pode ser ativado por coluna definindo a propriedade daisFilteringEnabled coluna. Definir verdadeiro ou falso mostrará ou ocultará a seção de filtragem na interface de opções da coluna.
A ordenação pode ser ativada para toda a grade se aheaderClickAction propriedade for aplicada. Configurar isso, por exemplo,None remove completamente a ordenação da grade e a reflete na interface de opções para cada coluna. E a definiçãoSortByOneColumnOnly, por exemplo, continuará permitindo que uma coluna seja ordenada 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-data-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;