[!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 그리드 열 옵션 개요

    Ignite UI for Web Components 각 열 헤더에 노출된 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-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