React Grid 열 옵션 개요

    Ignite UI for React 각 열 머리글에 노출된 UI에서 직접 열을 그룹화, 숨기기, 정렬, 이동, 고정, 필터링, 정렬하는 기능을 지원합니다.

    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

    다음 코드는 표와 열을 조정하여 열 옵션 UI 조정 필터링 및 정렬을 프로그래밍 방식으로 활성화하는 방법을 보여줍니다.

    <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;

    API References