React 그리드 열 고정 개요

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

하나 이상의 열을 데이터 그리드의 왼쪽이나 오른쪽에 고정할 수 있습니다. 또한 pinColumn 함수를 활용하여 열의 핀 상태를 변경할 수 있습니다.

React Grid Column Pinning Example

데이터 그리드의 Column Pinning API는 열의 Pinned 속성을 설정하거나 그리드의 pinColumn 함수를 활용하여 설정할 때 활성화할 수 있습니다.

​Pinned 속성에는 세 가지 옵션이 있습니다.

• 왼쪽 -Left 활성화하면 고정된 열이 그리드의 왼쪽에 배치됩니다.
• 오른쪽 -Right 활성화하면 고정된 열이 그리드 오른쪽에 배치됩니다.
• 없음 -None 활성화하면 열의 고정이 해제되고 그리드 내 기본 배치 위치가 변경됩니다.

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

​pinColumn 함수에는 두 개의 필수 매개변수가 포함되어 있습니다. 첫 번째 매개 변수는 고정할 열이고 두 번째 매개 변수는 PinnedPositions 열거 설정입니다.

Code Snippet

다음 코드는 Pinned 속성과 pinColumn 함수를 사용하여 열 고정을 통해 React 데이터 그리드에서 열 고정을 구현하는 방법을 보여줍니다.

<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-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);
}

Toolbar's Column Pinning UI

열 고정 UI는 그리드와 별도로 IgrDataGridToolbar 구성 요소 내에서 액세스할 수 있습니다. 이를 위해 우리가 해야 할 일은 도구 모음의 columnPinning 속성을 true로 설정하는 것뿐입니다. 그러면 도구 모음에 IgrButton 표시되고, 클릭하면 열 고정 UI가 표시됩니다. 이 버튼은 고정된 왼쪽 열의 합계도 표시합니다. 도구 모음이 생성되지 않은 경우, columnPinning 속성을 활성화해도 효과가 없으며 버튼이 숨겨집니다.

그만큼 IgrDataGridToolbar 도구 모음에 제목을 추가하는 등의 추가 속성을 제공합니다. toolbarTitle 속성, 텍스트 배치 IgrButton 설정하여 columnPinningText 속성을 설정하고 UI를 숨기는 열에 제목 헤더를 추가합니다. columnPinningTitle.

Demo

Code Snippet

<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-grids';
import { IgrDataGridToolbar } from 'igniteui-react-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";
    }
}

API References

• IgrButton
• IgrDataGridToolbar
• pinColumn
• PinnedPositions
• Pinned