React Grid 열 선택기 개요

    Ignite UI for React 데이터 그리드는 UIIgrDataGridToolbar를 통해 컴포넌트 또는 컴포넌트별로columnChooser 열을 표시하고 숨기는 기능을 지원하며, 페이지 어디에나 유연하게 배치할 수 있습니다. 열의 속성은isHidden 수동 열 생성을 위해 단일 열을 빠르게 숨기거나 표시하는 데도 사용할 수 있으며, 의isHidden 값은 컴포넌트에columnChooser 반영됩니다. 각 방법은 열의 가시 상태를 바꾸기 위해 서로 교환하여 사용할 수 있습니다.

    React Grid Column Chooser Example

    Toolbar's Column Chooser UI

    컬럼 선택 UI는 그리드와는 별개로 컴포넌트IgrDataGridToolbar 내에서 접근할 수 있습니다. 이 목적을 위해 우리는 툴바의columnChooser 속성을 true로 설정하기만 하면 됩니다. 툴바IgrButton에 표시되고, 클릭하면 컬럼 선택기 UI가 표시됩니다. 이 버튼은 숨겨진 열의 총합도 보여줍니다. 툴바가 생성되지 않았다면, 속성을 활성화columnChooser 하면 아무런 효과가 없고 버튼이 숨겨집니다.

    이 기능은IgrDataGridToolbar 속성을 사용toolbarTitle 해 툴바에 제목을 추가하거나, 속성을 설정IgrButton 하여 텍스트columnChooserText를 배치하거나, 설정을columnChooserTitle 통해 열 선택기 UI에 제목 헤더를 추가하는 등의 추가 속성을 제공합니다.

    컬럼 선택기는 그리드columnHidingAnimationMode와columnShowingAnimationMode 속성을 설정하여 애니메이션으로 설정할 수 있습니다.

    Code Snippet

    다음은 React Data Grid의 열 선택 도구 모음 UI를 구현하는 방법을 보여줍니다.

    <IgrDataGridToolbar ref={this.onToolbarRef}
    toolbarTitle="Grid Title"
    columnChooser="true"
    columnChooserText="Columns"
    columnChooserTitle="Column Chooser">
</IgrDataGridToolbar>
<IgrDataGrid
    ref={this.onGridRef}
    height="calc(100% - 40px)"
    dataSource={this.data}
    autoGenerateColumns="true"
    columnHidingAnimationMode="SlideOver">
</IgrDataGrid>

    import { IgrDataGrid } from 'igniteui-react-data-grids';
import { IgrDataGridToolbar } from 'igniteui-react-data-grids';

public grid : IgrDataGrid;
public toolbar: IgrDataGridToolbar;

this.onGridRef = this.onGridRef.bind(this);
this.onToolbarRef = this.onToolbarRef.bind(this);


public onGridRef(grid: IgrDataGrid) {
    this.grid = grid;
    if (this.toolbar != null) {
        this.toolbar.targetGrid = this.grid;
        this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;

        let productNameColumn = document.getElementById("productname") as IgrTextColumnComponent;
        productNameColumn.isHidden = true;
    }
}

public onToolbarRef(toolbar: IgrDataGridToolbar) {
    this.toolbar = toolbar;
    if (this.grid != null) {
    this.toolbar.targetGrid = this.grid;
    this.toolbar.columnChooser = "true";
    this.toolbar.toolbarTitle = "Grid Title";
    this.toolbar.columnChooserText = "Column Chooser";
    this.toolbar.columnChooserTitle = "Column Chooser";
    }
}

    Simple Column Chooser

    예를 들어, 툴바 없이 UI를columnChooser 수동으로 표시하고 페이지 어디에나 배치하고 싶다고 가정해 봅시다. 이는 마크업에 해당 구성 요소의 인스턴스를 생성하는 것만으로도 쉽게 할 수 있습니다.

    Demo

    Code Snippet

    다음은 데이터 그리드에 대한 열 선택기 UI를 구현하는 방법을 보여줍니다.

    <IgrColumnChooser
    ref={this.onColumnChooserRef}
    height="100%"
    width="250px"
    title="Column Chooser"
    showAllText="Show All"
    hideAllText="Hide All">
</IgrColumnChooser>
<IgrDataGrid
    ref={this.onGridRef}
    height="100%"
    width="100%"
    dataSource={this.data}
    autoGenerateColumns="false"
    columnHidingAnimationMode="SlideOver">
    <IgrTextColumn isHidden="true" field="ProductPrice" headerText="Product Price"/>
</IgrDataGrid>

    import { IgrDataGrid } from 'igniteui-react-data-grids';
import { IgrColumnChooser } from 'igniteui-react-data-grids';
import { ColumnMovingAnimationMode } from 'igniteui-react-data-grids';

public grid : IgrDataGrid;
public columnChooser: IgrColumnChooser;

public onGridRef(grid: IgrDataGrid) {
    this.grid = grid;
    if (this.columnChooser) {
        this.columnChooser.targetGrid = this.grid;
        this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;
    }
}

public onColumnChooserRef(columnChooser: IgrColumnChooser) {
    this.columnChooser = columnChooser;
    if (this.grid) {
        this.columnChooser.targetGrid = this.grid;
        this.columnChooser.showAllText = "Show All";
        this.columnChooser.hideAllText = "Hide All";
    }
}

    API References