[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Web Components Grid Column Options 개요

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

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

    Web Components Grid Column Options Example

    Column Options Configurations

    필터링은 열별로 해당 열isFilteringEnabled의 속성을 설정하여 전환할 수 있습니다. true나 false를 선택하면 열 옵션 UI에서 필터링 섹션이 나타나거나 숨겨집니다.

    속성을 적용하면headerClickAction 전체 그리드에 대해 정렬을 토글할 수 있습니다. 예를 들어 이 설정을 하면None 그리드에서 정렬이 완전히 제거되고 각 열의 옵션 UI에 반영됩니다. 예를 들어 설정SortByOneColumnOnly은 한 번에 한 열씩 정렬할 수 있게 해줍니다.

    Code Snippet

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

    import { HeaderClickAction } from 'igniteui-webcomponents-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;

    <igc-data-grid
     id="grid"
     height="calc(100% - 40px)"
     width="100%"
     header-click-action="SortByOneColumnOnly"
     is-column-options-enabled="true">
    <igc-text-column field="ID" is-filtering-enabled="false"></igc-text-column>
</igc-data-grid>

    API References