React Grid 열 고정 개요

Ignite UI for React 열 고정 기능을 지원하여 최종 사용자가 특정 열 순서로 열을 잠글 수 있습니다.

데이터 그리드의 왼쪽 또는 오른쪽에 한 열 또는 여러 열을 핀할 수 있습니다. 또한, 함수를 이용pinColumn 해 열의 핀 상태를 변경할 수도 있습니다.

React Grid 열 고정 예제

데이터 그리드의 컬럼 핀닝 API는 열의pinned 속성을 설정하거나, 설정 시 그리드의 기능을 활용pinColumn 해 활성화할 수 있습니다.

이 부동산에는pinned 세 가지 옵션이 있습니다:

왼쪽 - 활성화Left 하면 고정된 열을 그리드의 왼쪽에 위치시킵니다.
오른쪽을 활성화Right 하면 고정된 열을 그리드의 오른쪽에 위치시킵니다.
없음 - 활성화None 하면 열이 풀리고 그리드 내 기본 위치를 재배치합니다.

고정된 열에 인접한 고정되지 않은 열은 여전히 가로 스크롤을 유지합니다.

이 함수는pinColumn 두 가지 필수 매개변수를 포함합니다. 첫 번째 매개변수는 고정할 열이고, 두 번째는 열거 설정입니다PinnedPositions.

코드 조각

다음 코드는 React 데이터 그리드에서 열 고정을 구현하는 방법을 다음과 같이 보여줍니다: 속성과pinned 함수:pinColumn

<IgrDataGrid
ref={this.onGridRef}
height="calc(100% - 40px)"
width="100%"
autoGenerateColumns="false"
defaultColumnMinWidth={120}
scrollbarStyle="thin"
dataSource={this.data}>

    {/*Columns pinned left*/}
    <IgrTextColumn pinned="left" field="ID" headerText="Employee ID" width="100"  horizontalAlignment="center"/>
    <IgrTextColumn pinned="left" field="FirstName" headerText="First Name" width="170"/>
    <IgrTextColumn pinned="left" field="LastName" headerText="Last Name" width="170"/>

    {/*Columns unpinned*/}
    <IgrDateTimeColumn pinned="none" field="Birthday" headerText="Date of Birth" width="150" horizontalAlignment="center"/>
    <IgrNumericColumn pinned="none" field="Age" width="100" horizontalAlignment="center"/>
    <IgrImageColumn pinned="none" field="CountryFlag" headerText="Country"
    width="140" contentOpacity="1" horizontalAlignment="center"/>

    {/*Columns pinned right*/}
    <IgrTextColumn field="Street" headerText="Address" width="240"/>
    <IgrTextColumn field="City"  width="150" />
    <IgrTextColumn field="Country"  width="150" />
</IgrDataGrid>

import { PinnedPositions } from 'igniteui-react-data-grids';

public onButtonPinLeft = (e: any) => {

    let idColumn = this.grid.actualColumns.item(0);
    let firstNameColumn = this.grid.actualColumns.item(1);
    let lastNameColumn = this.grid.actualColumns.item(2);

    //pinned property
    idColumn.pinned = PinnedPositions.Left;
    firstNameColumn.pinned = PinnedPositions.Left;
    lastNameColumn.pinned = PinnedPositions.Left;

    // pinColumn Function
    this.grid.pinColumn(idColumn, PinnedPositions.Left);
    this.grid.pinColumn(firstNameColumn, PinnedPositions.Left);
    this.grid.pinColumn(lastNameColumn, PinnedPositions.Left);
}

public onButtonPinRight = (e: any) => {

    let streetColumn = this.grid.actualColumns.item(6);
    let cityColumn = this.grid.actualColumns.item(7);
    let countryColumn = this.grid.actualColumns.item(8);

    //pinned property
    streetColumn.pinned = PinnedPositions.Right;
    cityColumn.pinned = PinnedPositions.Right;
    countryColumn.pinned = PinnedPositions.Right;

    //pinColumn function
    this.grid.pinColumn(streetColumn, PinnedPositions.Right);
    this.grid.pinColumn(cityColumn, PinnedPositions.Right);
    this.grid.pinColumn(countryColumn, PinnedPositions.Right);
}

public onButtonUnPin = (e: any) => {

    let idColumn = this.grid.actualColumns.item(0);
    let firstNameColumn = this.grid.actualColumns.item(1);
    let lastNameColumn = this.grid.actualColumns.item(2);

    //pinned property
    idColumn.pinned = PinnedPositions.Left;
    firstNameColumn.pinned = PinnedPositions.Left;
    lastNameColumn.pinned = PinnedPositions.Left;

    //pinColumn function
    this.grid.pinColumn(idColumn, PinnedPositions.None);
    this.grid.pinColumn(firstNameColumn, PinnedPositions.None);
    this.grid.pinColumn(lastNameColumn, PinnedPositions.None);

    let streetColumn = this.grid.actualColumns.item(6);
    let cityColumn = this.grid.actualColumns.item(7);
    let countryColumn = this.grid.actualColumns.item(8);

    //pinned property
    streetColumn.pinned = PinnedPositions.None;
    cityColumn.pinned = PinnedPositions.None;
    countryColumn.pinned = PinnedPositions.None;

    //pinColumn function
    this.grid.pinColumn(streetColumn, PinnedPositions.None);
    this.grid.pinColumn(cityColumn, PinnedPositions.None);
    this.grid.pinColumn(countryColumn, PinnedPositions.None);
}

툴바의 열 고정 UI

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

그IgrDataGridToolbar 툴바에 제목을 추가하는 등 추가 속성을 제공합니다.toolbarTitle 속성, 텍스트를 다음 에 배치하는 방법IgrButton 다음에columnPinningText 속성을 설정하여 열에 제목 헤더를 추가하여 UI 숨기기를 사용했습니다columnPinningTitle.

데모

코드 조각

<IgrDataGridToolbar ref={this.onToolbarRef}
    toolbarTitle="Grid Title"
    columnPinning="true"
    columnPinningText="Pinning"
    columnPinningTitle="Column Pinning">
</IgrDataGridToolbar>
<IgrDataGrid
    ref={this.onGridRef}
    height="calc(100% - 40px)"
    dataSource={this.data}
    autoGenerateColumns="true">
</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;

        let productNameColumn = this.grid.actualColumns.item(0);
        productNameColumn.pinned = PinnedPositions.Left;
    }
}

public onToolbarRef(toolbar: IgrDataGridToolbar) {
    this.toolbar = toolbar;
    if (this.grid != null) {
    this.toolbar.targetGrid = this.grid;
    this.toolbar.columnPinning = "true";
    this.toolbar.toolbarTitle = "Grid Title";
    this.toolbar.columnPinningText = "Pinning";
    this.toolbar.columnPinningTitle = "Pinning Title";
    }
}

React Grid 열 고정 개요

React Grid 열 고정 예제

코드 조각

툴바의 열 고정 UI

데모

코드 조각

API 참조