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.
To enable the column options ui you can set the grid's isColumnOptionsEnabled property to true.
React Grid Column Options Example
Column Options Configurations
Filtering can be toggled per column by setting the column's isFilteringEnabled property. Setting true or false will show or hide the filtering section in the column's options ui.
Sorting can be toggled for the entire grid if the headerClickAction property is applied. Setting this to None for example will completely remove sorting from grid and reflect in the options ui for each column. And setting SortByOneColumnOnly for example will continue to allow one column to be sorted at a time.
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;