React Grid 열 옵션 개요

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