React 그리드 열 옵션 개요

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

    열 옵션 UI를 활성화하려면 그리드의 isColumnOptionsEnabled 속성을 true로 설정하면 됩니다.

    React Grid Column Options Example

    Column Options Configurations

    열의 IsFilteringEnabled 속성을 설정하여 열별로 필터링을 전환할 수 있습니다. true 또는 false를 설정하면 열의 옵션 UI에 필터링 섹션이 표시되거나 숨겨집니다.

    ​headerClickAction 속성을 적용하면 전체 그리드에 대해 정렬을 전환할 수 있습니다. 예를 들어 이를 None으로 설정하면 그리드에서 정렬이 완전히 제거되고 각 열의 옵션 UI에 반영됩니다. 예를 들어 SortByOneColumnOnly 설정하면 한 번에 하나의 열만 계속 정렬할 수 있습니다.

    Code Snippet

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

    <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