React 계층형 그리드 행 고정

React Hierarchical Grid의 Ignite UI for React 사용하면 그리드의 상단이나 하단에 하나 또는 여러 개의 행을 고정할 수 있습니다. Row Pinning을 사용하면 최종 사용자가 특정 순서로 행을 고정하여 IgrHierarchicalGrid를 수직으로 스크롤하더라도 항상 보이는 특수 영역에 복제할 수 있습니다. React Hierarchical Grid에는 Hierarchical Grid의 컨텍스트에서 IgrActionStrip 구성 요소를 초기화하여 활성화되는 기본 제공 행 고정 UI가 있습니다. 또한 Row Pinning API를 통해 사용자 지정 UI를 정의하고 행의 고정 상태를 변경할 수 있습니다.

React Hierarchical Grid Row Pinning Example

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts";
import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids";
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts";
import { IgrHierarchicalGrid, IgrPinningConfig, RowPinningPosition, ColumnPinningPosition, IgrColumn, IgrActionStrip, IgrGridPinningActions, IgrRowIsland } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchicalGridDescriptionModule } from "@infragistics/igniteui-react-core";
import SingersData from './SingersData.json';
import { IgrPropertyEditorPropertyDescriptionChangedEventArgs } from "@infragistics/igniteui-react-layouts";

import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

const mods: any[] = [
    IgrPropertyEditorPanelModule,
    IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());

export default class Sample extends React.Component<any, any> {
    private propertyEditorHierarchicalGrid: IgrPropertyEditorPanel
    private propertyEditorHierarchicalGridRef(r: IgrPropertyEditorPanel) {
        this.propertyEditorHierarchicalGrid = r;
        this.setState({});
    }
    private rowPinningEditor: IgrPropertyEditorPropertyDescription
    private grid: IgrHierarchicalGrid
    private gridRef(r: IgrHierarchicalGrid) {
        this.grid = r;
        this.setState({});
    }
    private  _pinningConfig1: IgrPinningConfig | null = null;
    public get pinningConfig1(): IgrPinningConfig {
        if (this._pinningConfig1 == null)
        {
            var pinningConfig1: IgrPinningConfig = {} as IgrPinningConfig;
            pinningConfig1.rows = RowPinningPosition.Top;
            pinningConfig1.columns = ColumnPinningPosition.End;

            this._pinningConfig1 = pinningConfig1;
        }
        return this._pinningConfig1;
    }
    private actionStrip1: IgrActionStrip
    private  _pinningConfig2: IgrPinningConfig | null = null;
    public get pinningConfig2(): IgrPinningConfig {
        if (this._pinningConfig2 == null)
        {
            var pinningConfig2: IgrPinningConfig = {} as IgrPinningConfig;
            pinningConfig2.rows = RowPinningPosition.Top;
            pinningConfig2.columns = ColumnPinningPosition.End;

            this._pinningConfig2 = pinningConfig2;
        }
        return this._pinningConfig2;
    }
    private actionStrip2: IgrActionStrip

    constructor(props: any) {
        super(props);

        this.propertyEditorHierarchicalGridRef = this.propertyEditorHierarchicalGridRef.bind(this);
        this.webHierarchicalGridChangePinningConfig = this.webHierarchicalGridChangePinningConfig.bind(this);
        this.gridRef = this.gridRef.bind(this);
        this.webHierarchicalGridPinRowOnRendered = this.webHierarchicalGridPinRowOnRendered.bind(this);
    }

    public render(): JSX.Element {
        return (
        <div className="container sample ig-typography">
            <div className="options vertical">
                <IgrPropertyEditorPanel
                    ref={this.propertyEditorHierarchicalGridRef}
                    componentRenderer={this.renderer}
                    target={this.grid}
                    descriptionType="WebHierarchicalGrid"
                    isHorizontal="true"
                    isWrappingEnabled="true">
                    <IgrPropertyEditorPropertyDescription
                        name="rowPinningEditor"
                        label="Row Pinning toggle"
                        valueType="EnumValue"
                        dropDownNames={["Top", "Bottom"]}
                        dropDownValues={["Top", "Bottom"]}
                        changed={this.webHierarchicalGridChangePinningConfig}>
                    </IgrPropertyEditorPropertyDescription>
                </IgrPropertyEditorPanel>
            </div>

            <div className="container fill">
                <IgrHierarchicalGrid
                    autoGenerate={false}
                    data={this.singersData}
                    primaryKey="Photo"
                    id="grid"
                    ref={this.gridRef}
                    cellSelection="none"
                    onRendered={this.webHierarchicalGridPinRowOnRendered}
                    pinning={this.pinningConfig1}>
                    <IgrColumn
                        field="Artist"
                        header="Artist"
                        dataType="string">
                    </IgrColumn>
                    <IgrColumn
                        field="Photo"
                        header="Photo"
                        dataType="image"
                        minWidth="115px">
                    </IgrColumn>
                    <IgrColumn
                        field="Debut"
                        header="Debut"
                        dataType="number">
                    </IgrColumn>
                    <IgrColumn
                        field="GrammyNominations"
                        header="Grammy Nominations"
                        dataType="string">
                    </IgrColumn>
                    <IgrColumn
                        field="GrammyAwards"
                        header="Grammy Awards"
                        dataType="string">
                    </IgrColumn>
                    <IgrActionStrip
                    >
                        <IgrGridPinningActions
                        >
                        </IgrGridPinningActions>
                    </IgrActionStrip>
                    <IgrRowIsland
                        childDataKey="Albums"
                        primaryKey="Album"
                        cellSelection="none"
                        autoGenerate={false}
                        pinning={this.pinningConfig2}>
                        <IgrColumn
                            field="Album"
                            header="Album"
                            dataType="string">
                        </IgrColumn>
                        <IgrColumn
                            field="LaunchDate"
                            header="Launch Date"
                            dataType="date">
                        </IgrColumn>
                        <IgrColumn
                            field="BillboardReview"
                            header="Billboard Review"
                            dataType="string">
                        </IgrColumn>
                        <IgrColumn
                            field="USBillboard200"
                            header="US Billboard 200"
                            dataType="string">
                        </IgrColumn>
                        <IgrActionStrip
                        >
                            <IgrGridPinningActions
                            >
                            </IgrGridPinningActions>
                        </IgrActionStrip>
                    </IgrRowIsland>
                </IgrHierarchicalGrid>
            </div>
        </div>
        );
    }

    private _singersData: any[] = SingersData;
    public get singersData(): any[] {
        return this._singersData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            WebHierarchicalGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public webHierarchicalGridChangePinningConfig(sender: any, args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
        const rows = args.newValue === "Top" ? RowPinningPosition.Top : RowPinningPosition.Bottom;
        const columns = ColumnPinningPosition.End;
        this._pinningConfig1 = { rows, columns };
        this._pinningConfig2 = { rows, columns };
        if ('_pinningConfig3' in this) {
            this._pinningConfig3 = { rows, columns };
        }
        if ('_pinningConfig4' in this) {
            this._pinningConfig4 = { rows, columns };
        }
        this.forceUpdate(); // due to not using state
    }

    public webHierarchicalGridPinRowOnRendered(): void {
        var hierarchicalGrid = this.grid;
        hierarchicalGrid.pinRow(hierarchicalGrid.data[0].Photo);
        hierarchicalGrid.pinRow(hierarchicalGrid.data[1].Photo);
    }

}

// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
cssコピー

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

Row Pinning UI

기본 제공 행 고정 UI는 IgrGridPinningActions 구성 요소와 함께 IgrActionStrip 구성 요소를 추가하여 활성화됩니다. 행을 마우스로 가리키면 작업 스트립이 자동으로 표시되며 표시된 행의 상태에 따라 고정 또는 고정 해제 버튼 아이콘이 표시됩니다. 고정된 행의 복사본을 보기로 스크롤할 수 있는 추가 작업도 고정된 각 행에 대해 표시됩니다.

<IgrHierarchicalGrid>
    <IgrColumn field="Country" header="Country"> </IgrColumn>
    <IgrActionStrip key="actionStrip">
        <IgrGridPinningActions key="pinningActions"></IgrGridPinningActions>
        <IgrGridEditingActions key="editingActions"></IgrGridEditingActions>
    </IgrActionStrip>
</IgrHierarchicalGrid>
tsx

Row Pinning API

행 고정은 의 입력을 pinned 통해 제어됩니다 Row. 고정된 행은 기본적으로 맨 위에 IgrHierarchicalGrid 렌더링되며 본문에서 IgrHierarchicalGrid 고정되지 않은 행의 세로 스크롤을 통해 고정된 상태로 유지됩니다.

gridRef.current.getRowByIndex(0).pinned = true;
tsx

의 또는 unpinRow 방법을 사용하여 IgrHierarchicalGrid​ ​pinRow ID로 레코드를 고정하거나 고정 해제할 수도 있습니다.

gridRef.current.pinRow('ALFKI');
gridRef.current.unpinRow('ALFKI');
tsx

행 ID는 그리드의 primaryKey 또는 레코드 인스턴스 자체에 의해 정의된 기본 키 값입니다. 두 메서드 모두 해당 작업의 성공 여부를 나타내는 부울 값을 반환합니다. 일반적으로 실패하는 이유는 행이 이미 원하는 상태에 있기 때문입니다.

행은 마지막으로 고정된 행 아래에 고정됩니다. 고정된 행의 순서를 변경하려면 RowPinning 이벤트를 구독하고 이벤트 인수의 InsertAtIndex 속성을 원하는 위치 인덱스로 변경하면 됩니다.

function rowPinning(grid: IgrGridBaseDirective, event: IgrPinRowEventArgs ) {
    event.detail.insertAtIndex = 0;
}

<IgrHierarchicalGrid autoGenerate="true" rowPinning={rowPinning}>
</IgrHierarchicalGrid>
tsx

Pinning Position

​pinning 구성 옵션을 통해 행 고정 위치를 변경할 수 있습니다. 핀 영역 위치를 상단 또는 하단으로 설정할 수 있습니다. 아래쪽으로 설정하면 고정된 행이 고정 해제된 행 뒤의 그리드 아래쪽에 렌더링됩니다. 고정 해제된 행은 세로로 스크롤할 수 있지만 고정된 행은 아래쪽에 고정된 상태로 유지됩니다.

<IgrHierarchicalGrid id="dataGrid" autoGenerate="true">
</IgrHierarchicalGrid>

var grid = document.getElementById("dataGrid") as IgrHierarchicalGrid;
grid.pinning = { rows: RowPinningPosition.Bottom };
tsx

Custom Row Pinning UI

사용자 정의 UI를 정의하고 관련 API를 통해 행의 핀 상태를 변경할 수 있습니다.

Via extra column with icon

액션 스트립 대신 최종 사용자가 클릭하여 특정 행의 핀 상태를 변경할 수 있도록 모든 행에 핀 아이콘을 표시하고 싶다고 가정해 보겠습니다. 이는 사용자 정의 아이콘이 포함된 셀 템플릿이 있는 추가 열을 추가하여 수행할 수 있습니다.

function cellPinCellTemplate(ctx: IgrCellTemplateContext) {
    const row = ctx.dataContext.cell.row;
    return (
        <>
            <span onPointerDown={(e: any) => toggleRowPin(row)}>📌</span>
        </>
    );
}

<IgrHierarchicalGrid primaryKey="ID" autoGenerate="false">
    <IgrColumn width="70px" bodyTemplate={cellPinCellTemplate}>
    </IgrColumn>
    <IgrRowIsland childDataKey="Orders" autoGenerate="true"></IgrRowIsland>
</IgrHierarchicalGrid>
tsx

사용자 정의 아이콘을 클릭하면 해당 행의 API 메소드를 사용하여 관련 행의 고정 상태를 변경할 수 있습니다.

function toggleRowPin(row: IgrRowType) {
  row.pinned = !row.pinned;
}
tsx

데모

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts";
import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids";
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts";
import { IgrHierarchicalGrid, IgrPinningConfig, RowPinningPosition, ColumnPinningPosition, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchicalGridDescriptionModule } from "@infragistics/igniteui-react-core";
import SingersData from './SingersData.json';
import { IgrPropertyEditorPropertyDescriptionChangedEventArgs } from "@infragistics/igniteui-react-layouts";
import { IgrCellTemplateContext, IgrRowType } from "@infragistics/igniteui-react-grids";

import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

const mods: any[] = [
    IgrPropertyEditorPanelModule,
    IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());

export default class Sample extends React.Component<any, any> {
    private propertyEditorHierarchicalGrid: IgrPropertyEditorPanel
    private propertyEditorHierarchicalGridRef(r: IgrPropertyEditorPanel) {
        this.propertyEditorHierarchicalGrid = r;
        this.setState({});
    }
    private rowPinningEditor: IgrPropertyEditorPropertyDescription
    private grid: IgrHierarchicalGrid
    private gridRef(r: IgrHierarchicalGrid) {
        this.grid = r;
        this.setState({});
    }
    private  _pinningConfig1: IgrPinningConfig | null = null;
    public get pinningConfig1(): IgrPinningConfig {
        if (this._pinningConfig1 == null)
        {
            var pinningConfig1: IgrPinningConfig = {} as IgrPinningConfig;
            pinningConfig1.rows = RowPinningPosition.Top;
            pinningConfig1.columns = ColumnPinningPosition.End;

            this._pinningConfig1 = pinningConfig1;
        }
        return this._pinningConfig1;
    }
    private  _pinningConfig2: IgrPinningConfig | null = null;
    public get pinningConfig2(): IgrPinningConfig {
        if (this._pinningConfig2 == null)
        {
            var pinningConfig2: IgrPinningConfig = {} as IgrPinningConfig;
            pinningConfig2.rows = RowPinningPosition.Top;
            pinningConfig2.columns = ColumnPinningPosition.End;

            this._pinningConfig2 = pinningConfig2;
        }
        return this._pinningConfig2;
    }
    private  _pinningConfig3: IgrPinningConfig | null = null;
    public get pinningConfig3(): IgrPinningConfig {
        if (this._pinningConfig3 == null)
        {
            var pinningConfig3: IgrPinningConfig = {} as IgrPinningConfig;
            pinningConfig3.rows = RowPinningPosition.Top;
            pinningConfig3.columns = ColumnPinningPosition.End;

            this._pinningConfig3 = pinningConfig3;
        }
        return this._pinningConfig3;
    }
    private  _pinningConfig4: IgrPinningConfig | null = null;
    public get pinningConfig4(): IgrPinningConfig {
        if (this._pinningConfig4 == null)
        {
            var pinningConfig4: IgrPinningConfig = {} as IgrPinningConfig;
            pinningConfig4.rows = RowPinningPosition.Top;
            pinningConfig4.columns = ColumnPinningPosition.End;

            this._pinningConfig4 = pinningConfig4;
        }
        return this._pinningConfig4;
    }

    constructor(props: any) {
        super(props);

        this.propertyEditorHierarchicalGridRef = this.propertyEditorHierarchicalGridRef.bind(this);
        this.webHierarchicalGridChangePinningConfig = this.webHierarchicalGridChangePinningConfig.bind(this);
        this.gridRef = this.gridRef.bind(this);
    }

    public render(): JSX.Element {
        return (
        <div className="container sample ig-typography">
            <div className="options vertical">
                <IgrPropertyEditorPanel
                    ref={this.propertyEditorHierarchicalGridRef}
                    componentRenderer={this.renderer}
                    target={this.grid}
                    descriptionType="WebHierarchicalGrid"
                    isHorizontal="true"
                    isWrappingEnabled="true">
                    <IgrPropertyEditorPropertyDescription
                        name="rowPinningEditor"
                        label="Row Pinning toggle"
                        valueType="EnumValue"
                        dropDownNames={["Top", "Bottom"]}
                        dropDownValues={["Top", "Bottom"]}
                        changed={this.webHierarchicalGridChangePinningConfig}>
                    </IgrPropertyEditorPropertyDescription>
                </IgrPropertyEditorPanel>
            </div>

            <div className="container fill">
                <IgrHierarchicalGrid
                    autoGenerate={false}
                    data={this.singersData}
                    primaryKey="Photo"
                    id="grid"
                    ref={this.gridRef}
                    cellSelection="none"
                    pinning={this.pinningConfig1}>
                    <IgrColumn
                        width="70px"
                        filterable={false}
                        pinned={true}
                        bodyTemplate={this.webHierarchicalGridRowPinCellTemplate}>
                    </IgrColumn>
                    <IgrColumn
                        field="Artist"
                        header="Artist"
                        dataType="string">
                    </IgrColumn>
                    <IgrColumn
                        field="Photo"
                        header="Photo"
                        dataType="image">
                    </IgrColumn>
                    <IgrColumn
                        field="Debut"
                        header="Debut"
                        dataType="number">
                    </IgrColumn>
                    <IgrColumn
                        field="GrammyNominations"
                        header="Grammy Nominations"
                        dataType="string">
                    </IgrColumn>
                    <IgrColumn
                        field="GrammyAwards"
                        header="Grammy Awards"
                        dataType="string">
                    </IgrColumn>
                    <IgrRowIsland
                        childDataKey="Albums"
                        primaryKey="Album"
                        cellSelection="none"
                        pinning={this.pinningConfig2}
                        autoGenerate={false}>
                        <IgrColumn
                            width="70px"
                            filterable={false}
                            pinned={true}
                            bodyTemplate={this.webHierarchicalGridRowPinCellTemplate}>
                        </IgrColumn>
                        <IgrColumn
                            field="Album"
                            header="Album"
                            dataType="string">
                        </IgrColumn>
                        <IgrColumn
                            field="LaunchDate"
                            header="Launch Date"
                            dataType="date">
                        </IgrColumn>
                        <IgrColumn
                            field="BillboardReview"
                            header="Billboard Review"
                            dataType="string">
                        </IgrColumn>
                        <IgrColumn
                            field="USBillboard200"
                            header="US Billboard 200"
                            dataType="string">
                        </IgrColumn>
                        <IgrRowIsland
                            childDataKey="Songs"
                            primaryKey="Number"
                            cellSelection="none"
                            pinning={this.pinningConfig3}
                            autoGenerate={false}>
                            <IgrColumn
                                width="70px"
                                filterable={false}
                                pinned={true}
                                bodyTemplate={this.webHierarchicalGridRowPinCellTemplate}>
                            </IgrColumn>
                            <IgrColumn
                                field="Number"
                                header="No."
                                dataType="string">
                            </IgrColumn>
                            <IgrColumn
                                field="Title"
                                header="Title"
                                dataType="string">
                            </IgrColumn>
                            <IgrColumn
                                field="Released"
                                header="Released"
                                dataType="string">
                            </IgrColumn>
                            <IgrColumn
                                field="Genre"
                                header="Genre"
                                dataType="string">
                            </IgrColumn>
                        </IgrRowIsland>
                    </IgrRowIsland>
                    <IgrRowIsland
                        childDataKey="Tours"
                        primaryKey="Tour"
                        cellSelection="none"
                        pinning={this.pinningConfig4}
                        autoGenerate={false}>
                        <IgrColumn
                            width="70px"
                            filterable={false}
                            pinned={true}
                            bodyTemplate={this.webHierarchicalGridRowPinCellTemplate}>
                        </IgrColumn>
                        <IgrColumn
                            field="Tour"
                            header="Tour"
                            dataType="string">
                        </IgrColumn>
                        <IgrColumn
                            field="StartedOn"
                            header="Started on"
                            dataType="string">
                        </IgrColumn>
                        <IgrColumn
                            field="Location"
                            header="Location"
                            dataType="string">
                        </IgrColumn>
                        <IgrColumn
                            field="Headliner"
                            header="Headliner"
                            dataType="string">
                        </IgrColumn>
                    </IgrRowIsland>
                </IgrHierarchicalGrid>
            </div>
        </div>
        );
    }

    private _singersData: any[] = SingersData;
    public get singersData(): any[] {
        return this._singersData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            WebHierarchicalGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public webHierarchicalGridChangePinningConfig(sender: any, args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
        const rows = args.newValue === "Top" ? RowPinningPosition.Top : RowPinningPosition.Bottom;
        const columns = ColumnPinningPosition.End;
        this._pinningConfig1 = { rows, columns };
        this._pinningConfig2 = { rows, columns };
        if ('_pinningConfig3' in this) {
            this._pinningConfig3 = { rows, columns };
        }
        if ('_pinningConfig4' in this) {
            this._pinningConfig4 = { rows, columns };
        }
        this.forceUpdate(); // due to not using state
    }

    public webHierarchicalGridRowPinCellTemplate = (e: {dataContext: IgrCellTemplateContext}) => {
        const row = e.dataContext.cell.row;
        return (
            <span onPointerDown={(e: any) => this.toggleRowPin(row)} style={{ cursor: 'pointer'}}>📌</span>
        );
    }

    public toggleRowPin(row: IgrRowType) {
        row.pinned = !row.pinned;
    }
}

// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
cssコピー

Edit in: Codesandbox

Row Pinning Limitations

• 데이터 원본에 존재하는 레코드만 고정할 수 있습니다.
• 행 고정 상태는 Excel로 내보내지지 않습니다. 행 고정이 적용되지 않은 것처럼 그리드가 내보내집니다.
• 그리드의 스크롤 가능 영역에 있는 고정된 행의 복사본은 고정된 행이 있을 때 다른 그리드 기능이 해당 기능을 달성하는 방법의 필수 부분이므로 생성을 비활성화하거나 제거할 수 없습니다.
• 행 선택은 전적으로 행 ID와 함께 작동하므로 고정된 행을 선택하면 해당 복사본도 선택됩니다(그 반대도 마찬가지). 또한 고정된 영역 내에서 범위 선택(예: Shift + 클릭 사용)은 스크롤 가능한 영역 내에서 행 범위를 선택하는 것과 동일한 방식으로 작동합니다. 결과 선택에는 현재 고정되어 있지 않은 경우에도 그 사이의 모든 행이 포함됩니다. API를 통해 선택한 행을 가져오면 선택한 각 레코드의 단일 인스턴스만 반환됩니다.

Styling

사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

<IgrHierarchicalGrid className="grid"></IgrHierarchicalGrid>
tsx

그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

.grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-style: double;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-cell-active-border-color: #FFCD0F;
}
css

데모

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids";
import { IgrHierarchicalGrid, IgrPinningConfig, RowPinningPosition, ColumnPinningPosition, IgrColumn, IgrActionStrip, IgrGridPinningActions, IgrRowIsland } from "@infragistics/igniteui-react-grids";
import SingersData from './SingersData.json';
import { IgrGrid } from "@infragistics/igniteui-react-grids";

import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";

const mods: any[] = [
    IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());

export default class Sample extends React.Component<any, any> {
    private grid: IgrHierarchicalGrid
    private gridRef(r: IgrHierarchicalGrid) {
        this.grid = r;
        this.setState({});
    }
    private  _pinningConfig1: IgrPinningConfig | null = null;
    public get pinningConfig1(): IgrPinningConfig {
        if (this._pinningConfig1 == null)
        {
            var pinningConfig1: IgrPinningConfig = {} as IgrPinningConfig;
            pinningConfig1.rows = RowPinningPosition.Top;
            pinningConfig1.columns = ColumnPinningPosition.End;

            this._pinningConfig1 = pinningConfig1;
        }
        return this._pinningConfig1;
    }
    private actionStrip1: IgrActionStrip
    private  _pinningConfig2: IgrPinningConfig | null = null;
    public get pinningConfig2(): IgrPinningConfig {
        if (this._pinningConfig2 == null)
        {
            var pinningConfig2: IgrPinningConfig = {} as IgrPinningConfig;
            pinningConfig2.rows = RowPinningPosition.Top;
            pinningConfig2.columns = ColumnPinningPosition.End;

            this._pinningConfig2 = pinningConfig2;
        }
        return this._pinningConfig2;
    }
    private actionStrip2: IgrActionStrip

    constructor(props: any) {
        super(props);

        this.gridRef = this.gridRef.bind(this);
        this.webHierarchicalGridPinRowOnRendered = this.webHierarchicalGridPinRowOnRendered.bind(this);
    }

    public render(): JSX.Element {
        return (
        <div className="container sample ig-typography">

            <div className="container fill">
                <IgrHierarchicalGrid
                    autoGenerate={false}
                    data={this.singersData}
                    primaryKey="Photo"
                    id="grid"
                    ref={this.gridRef}
                    cellSelection="none"
                    onRendered={this.webHierarchicalGridPinRowOnRendered}
                    pinning={this.pinningConfig1}>
                    <IgrColumn
                        field="Artist"
                        header="Artist"
                        dataType="string">
                    </IgrColumn>
                    <IgrColumn
                        field="Photo"
                        header="Photo"
                        dataType="image"
                        minWidth="115px">
                    </IgrColumn>
                    <IgrColumn
                        field="Debut"
                        header="Debut"
                        dataType="number">
                    </IgrColumn>
                    <IgrColumn
                        field="GrammyNominations"
                        header="Grammy Nominations"
                        dataType="string">
                    </IgrColumn>
                    <IgrColumn
                        field="GrammyAwards"
                        header="Grammy Awards"
                        dataType="string">
                    </IgrColumn>
                    <IgrActionStrip
                    >
                        <IgrGridPinningActions
                        >
                        </IgrGridPinningActions>
                    </IgrActionStrip>
                    <IgrRowIsland
                        childDataKey="Albums"
                        primaryKey="Album"
                        cellSelection="none"
                        autoGenerate={false}
                        pinning={this.pinningConfig2}>
                        <IgrColumn
                            field="Album"
                            header="Album"
                            dataType="string">
                        </IgrColumn>
                        <IgrColumn
                            field="LaunchDate"
                            header="Launch Date"
                            dataType="date">
                        </IgrColumn>
                        <IgrColumn
                            field="BillboardReview"
                            header="Billboard Review"
                            dataType="string">
                        </IgrColumn>
                        <IgrColumn
                            field="USBillboard200"
                            header="US Billboard 200"
                            dataType="string">
                        </IgrColumn>
                        <IgrActionStrip
                        >
                            <IgrGridPinningActions
                            >
                            </IgrGridPinningActions>
                        </IgrActionStrip>
                    </IgrRowIsland>
                </IgrHierarchicalGrid>
            </div>
        </div>
        );
    }

    private _singersData: any[] = SingersData;
    public get singersData(): any[] {
        return this._singersData;
    }


    public webHierarchicalGridPinRowOnRendered(): void {
        var hierarchicalGrid = this.grid;
        hierarchicalGrid.pinRow(hierarchicalGrid.data[0].Photo);
        hierarchicalGrid.pinRow(hierarchicalGrid.data[1].Photo);
    }

}

// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

    #grid {
        --ig-grid-pinned-border-width: 5px;
        --ig-grid-pinned-border-style: double;
        --ig-grid-pinned-border-color: #FFCD0F;
        --ig-grid-cell-active-border-color: #FFCD0F;
    }

cssコピー

Edit in: Codesandbox

API References

• IgrHierarchicalGrid
• HierarchicalGridRow
• IgrRowType

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for React Forums
• Ignite UI for React GitHub