React Tree Grid 열 선택 개요

Ignite UI for React의 React 트리 그리드 열 선택 기능은 한 번의 클릭으로 전체 열을 선택하고 강조 표시하는 간단하고 Excel과 유사한 방법을 제공합니다. 입력을 통해 활성화할 수 있습니다. columnSelection 풍부한 API 덕분에 이 기능을 사용하면 선택 상태를 쉽게 조작하고, 선택한 분수에서 데이터 추출, 데이터 분석 작업 및 시각화를 수행할 수 있습니다.

React Tree Grid 열 선택 예제

아래 샘플은 세 가지 유형의 IgrTreeGrid​ ​열 선택 동작을 보여 줍니다. 아래의 열 선택 드롭다운을 사용하여 사용 가능한 각 선택 모드를 활성화합니다.

* 단가(Unit Price) 및 단종(Discontinued)은 열 선택이 비활성화된 상태입니다.

EXAMPLE

DATA

TSX

CSS

export class FoodsDataItem {
    public constructor(init: Partial<FoodsDataItem>) {
        Object.assign(this, init);
    }

    public ID: number;
    public ParentID: number;
    public Name: string;
    public UnitPrice: number;
    public AddedDate: string;
    public Discontinued: boolean;

}
export class FoodsData extends Array<FoodsDataItem> {
    public constructor(items: Array<FoodsDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new FoodsDataItem({ ID: 1, ParentID: -1, Name: `Foods`, UnitPrice: 0, AddedDate: `2009-06-19`, Discontinued: false }),
                new FoodsDataItem({ ID: 101, ParentID: 1, Name: `Chef Antons Gumbo Mix`, UnitPrice: 21.35, AddedDate: `2011-11-11`, Discontinued: true }),
                new FoodsDataItem({ ID: 102, ParentID: 1, Name: `Grandmas Boysenberry Spread`, UnitPrice: 25, AddedDate: `2017-12-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 103, ParentID: 1, Name: `Uncle Bobs Organic Dried Pears`, UnitPrice: 30, AddedDate: `2016-07-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 104, ParentID: 1, Name: `Mishi Kobe Niku`, UnitPrice: 97, AddedDate: `2010-02-17`, Discontinued: true }),
                new FoodsDataItem({ ID: 105, ParentID: 1, Name: `Queso Cabrales`, UnitPrice: 21, AddedDate: `2009-11-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 106, ParentID: 1, Name: `Queso Manchego La Pastora`, UnitPrice: 38, AddedDate: `2015-11-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 107, ParentID: 1, Name: `Konbu`, UnitPrice: 6, AddedDate: `2025-03-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 108, ParentID: 1, Name: `Tofu`, UnitPrice: 23.25, AddedDate: `2019-06-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 109, ParentID: 1, Name: `Ikura`, UnitPrice: 31, AddedDate: `2010-05-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 110, ParentID: 1, Name: `Pavlova`, UnitPrice: 17.45, AddedDate: `2018-03-28`, Discontinued: false }),
                new FoodsDataItem({ ID: 111, ParentID: 1, Name: `Alice Mutton`, UnitPrice: 39, AddedDate: `2015-08-17`, Discontinued: true }),
                new FoodsDataItem({ ID: 112, ParentID: 1, Name: `Carnarvon Tigers`, UnitPrice: 62.5, AddedDate: `2015-09-27`, Discontinued: false }),
                new FoodsDataItem({ ID: 113, ParentID: 1, Name: `Teatime Chocolate Biscuits`, UnitPrice: 9.2, AddedDate: `2011-03-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 2, ParentID: -1, Name: `Beverages`, UnitPrice: 0, AddedDate: `2009-06-19`, Discontinued: false }),
                new FoodsDataItem({ ID: 201, ParentID: 2, Name: `Chai`, UnitPrice: 18, AddedDate: `2012-02-12`, Discontinued: false }),
                new FoodsDataItem({ ID: 202, ParentID: 2, Name: `Chang`, UnitPrice: 19, AddedDate: `2013-03-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 3, ParentID: -1, Name: `Sauces`, UnitPrice: 0, AddedDate: `2009-06-19`, Discontinued: false }),
                new FoodsDataItem({ ID: 301, ParentID: 3, Name: `Aniseed Syrup`, UnitPrice: 10, AddedDate: `2016-03-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 302, ParentID: 3, Name: `Chef Antons Cajun Seasoning`, UnitPrice: 22, AddedDate: `2012-03-17`, Discontinued: true }),
                new FoodsDataItem({ ID: 303, ParentID: 3, Name: `Northwoods Cranberry Sauce`, UnitPrice: 40, AddedDate: `2012-01-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 304, ParentID: 3, Name: `Genen Shouyu`, UnitPrice: 15.5, AddedDate: `2010-03-17`, Discontinued: false }),
                new FoodsDataItem({ ID: 305, ParentID: 3, Name: `Sir Rodneys Marmalade`, UnitPrice: 18, AddedDate: `2015-03-17`, Discontinued: false }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

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

import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts";
import { IgrTreeGridModule } from "@infragistics/igniteui-react-grids";
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts";
import { IgrTreeGrid, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { FoodsDataItem, FoodsData } from './FoodsData';

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

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

export default class Sample extends React.Component<any, any> {
    private propertyEditor: IgrPropertyEditorPanel
    private propertyEditorRef(r: IgrPropertyEditorPanel) {
        this.propertyEditor = r;
        this.setState({});
    }
    private columnSelectionEditor: IgrPropertyEditorPropertyDescription
    private treeGrid: IgrTreeGrid
    private treeGridRef(r: IgrTreeGrid) {
        this.treeGrid = r;
        this.setState({});
    }

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

        this.propertyEditorRef = this.propertyEditorRef.bind(this);
        this.treeGridRef = this.treeGridRef.bind(this);
    }

    public render(): JSX.Element {
        return (
        <div className="container sample ig-typography">
            <div className="options vertical">
                <IgrPropertyEditorPanel
                    ref={this.propertyEditorRef}
                    componentRenderer={this.renderer}
                    target={this.treeGrid}
                    descriptionType="WebTreeGrid"
                    isHorizontal="true"
                    isWrappingEnabled="true">
                    <IgrPropertyEditorPropertyDescription
                        propertyPath="ColumnSelection"
                        name="columnSelectionEditor"
                        label="Column Selection">
                    </IgrPropertyEditorPropertyDescription>
                </IgrPropertyEditorPanel>
            </div>

            <div className="container fill">
                <IgrTreeGrid
                    autoGenerate={false}
                    ref={this.treeGridRef}
                    id="treeGrid"
                    data={this.foodsData}
                    primaryKey="ID"
                    foreignKey="ParentID">
                    <IgrColumn
                        field="ID">
                    </IgrColumn>
                    <IgrColumn
                        field="Name">
                    </IgrColumn>
                    <IgrColumn
                        field="UnitPrice"
                        header="Unit Price"
                        selectable={false}>
                    </IgrColumn>
                    <IgrColumn
                        field="AddedDate"
                        header="Added Date">
                    </IgrColumn>
                    <IgrColumn
                        field="Discontinued"
                        selectable={false}>
                    </IgrColumn>
                </IgrTreeGrid>
            </div>
        </div>
        );
    }

    private _foodsData: FoodsData = null;
    public get foodsData(): FoodsData {
        if (this._foodsData == null)
        {
            this._foodsData = new FoodsData();
        }
        return this._foodsData;
    }

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

}

// 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

기본 사용법

열 선택 기능은 다음을 통해 활성화할 수 있습니다. columnSelection 입력, 소요되는 GridSelectionMode 가치.

상호 작용

기본 선택 모드는 None 입니다. Single 또는 Multiple으로 설정하면 표시된 모든 열을 selectable 있습니다. 즉, 열을 선택하려면 하나를 클릭하면 selected로 표시됩니다. 열을 선택할 수 없는 경우 마우스를 가져가는 동안 헤더에 선택 스타일이 적용되지 않습니다.

다중 열 머리글 기능은 선택 가능한 입력에 반영되지 않습니다. ColumnGroupComponent는 하위 항목 중 하나 이상이 선택 동작을 활성화한 경우 선택 가능합니다. 또한 선택 가능한 하위 항목이 모두 선택된 경우 구성 요소는 선택됨으로 표시됩니다.

* 개인 세부정보 열 그룹에서는 열 ID와 제목만 선택할 수 있습니다.

EXAMPLE

DATA

TSX

CSS

export class EmployeesFlatDetailsItem {
    public constructor(init: Partial<EmployeesFlatDetailsItem>) {
        Object.assign(this, init);
    }

    public Address: string;
    public Age: number;
    public City: string;
    public Country: string;
    public Fax: string;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public ParentID: number;
    public Phone: string;
    public PostalCode: number;
    public Title: string;
    public LastName: string;
    public FullAddress: string;

}
export class EmployeesFlatDetails extends Array<EmployeesFlatDetailsItem> {
    public constructor(items: Array<EmployeesFlatDetailsItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EmployeesFlatDetailsItem({ Address: `Obere Str. 57`, Age: 55, City: `Berlin`, Country: `Germany`, Fax: `030-0076545`, HireDate: `2008-03-20`, ID: 1, Name: `Johnathan Winchester`, ParentID: -1, Phone: `030-0074321`, PostalCode: 12209, Title: `Development Manager`, LastName: `Winchester`, FullAddress: `Obere Str. 57, Berlin, Germany` }),
                new EmployeesFlatDetailsItem({ Address: `Avda. de la Constitución 2222`, Age: 42, City: `México D.F.`, Country: `Mexico`, Fax: `(51) 555-3745`, HireDate: `2014-01-22`, ID: 4, Name: `Ana Sanders`, ParentID: -1, Phone: `(5) 555-4729`, PostalCode: 5021, Title: `CEO`, LastName: `Sanders`, FullAddress: `Avda. de la Constitución 2222, México D.F., Mexico` }),
                new EmployeesFlatDetailsItem({ Address: `Mataderos 2312`, Age: 49, City: `México D.F.`, Country: `Mexico`, Fax: `(5) 555-3995`, HireDate: `2014-01-22`, ID: 18, Name: `Victoria Lincoln`, ParentID: -1, Phone: `(5) 555-3932`, PostalCode: 5023, Title: `Accounting Manager`, LastName: `Lincoln`, FullAddress: `Mataderos 2312, México D.F., Mexico` }),
                new EmployeesFlatDetailsItem({ Address: `120 Hanover Sq.`, Age: 61, City: `London`, Country: `UK`, Fax: `(171) 555-6750`, HireDate: `2010-01-01`, ID: 10, Name: `Yang Wang`, ParentID: -1, Phone: `(171) 555-7788`, PostalCode: 39000, Title: `Localization Manager`, LastName: `Wang`, FullAddress: `120 Hanover Sq., London, UK` }),
                new EmployeesFlatDetailsItem({ Address: `Berguvsvägen 8`, Age: 43, City: `Luleå`, Country: `Sweden`, Fax: `0921-12 34 67`, HireDate: `2011-06-03`, ID: 3, Name: `Michael Burke`, ParentID: 1, Phone: `0921-12 34 65`, PostalCode: 29000, Title: `Senior Software Developer`, LastName: `Burke`, FullAddress: `Berguvsvägen 8, Luleå, Sweden` }),
                new EmployeesFlatDetailsItem({ Address: `Forsterstr. 57`, Age: 29, City: `Mannheim`, Country: `Germany`, Fax: `0621-08924`, HireDate: `2009-06-19`, ID: 2, Name: `Thomas Anderson`, ParentID: 1, Phone: `0621-08460`, PostalCode: 68306, Title: `Senior Software Developer`, LastName: `Anderson`, FullAddress: `Forsterstr. 57, Mannheim, Germany` }),
                new EmployeesFlatDetailsItem({ Address: `24, place Kléber`, Age: 31, City: `Strasbourg`, Country: `France`, Fax: `88.60.15.32`, HireDate: `2014-08-18`, ID: 11, Name: `Monica Reyes`, ParentID: 1, Phone: `88.60.15.31`, PostalCode: 67000, Title: `Software Development Team Lead`, LastName: `Reyes`, FullAddress: `24, place Kléber, Strasbourg, France` }),
                new EmployeesFlatDetailsItem({ Address: `C/ Araquil, 67`, Age: 35, City: `Madrid`, Country: `Spain`, Fax: `(911) 555 91 99`, HireDate: `2015-09-17`, ID: 6, Name: `Roland Mendel`, ParentID: 11, Phone: `(91) 555 22 82`, PostalCode: 28023, Title: `Senior Software Developer`, LastName: `Mendel`, FullAddress: `C/ Araquil, 67, Madrid, Spain` }),
                new EmployeesFlatDetailsItem({ Address: `12, rue des Bouchers`, Age: 44, City: `Marseille`, Country: `France`, Fax: `91.24.45.41`, HireDate: `2009-10-11`, ID: 12, Name: `Sven Cooper`, ParentID: 11, Phone: `91.24.45.40`, PostalCode: 13008, Title: `Senior Software Developer`, LastName: `Cooper`, FullAddress: `12, rue des Bouchers, Marseille, France` }),
                new EmployeesFlatDetailsItem({ Address: `23 Tsawassen Blvd.`, Age: 44, City: `Tsawassen`, Country: `Canada`, Fax: `(604) 555-3745`, HireDate: `2014-04-04`, ID: 14, Name: `Laurence Johnson`, ParentID: 4, Phone: `(604) 555-4729`, PostalCode: 19000, Title: `Director`, LastName: `Johnson`, FullAddress: `23 Tsawassen Blvd., Tsawassen, Canada` }),
                new EmployeesFlatDetailsItem({ Address: `Fauntleroy Circus`, Age: 25, City: `London`, Country: `UK`, Fax: `(125) 555-3798`, HireDate: `2017-11-9`, ID: 5, Name: `Elizabeth Richards`, ParentID: 4, Phone: `(171) 555-1212`, PostalCode: 30000, Title: `Vice President`, LastName: `Richards`, FullAddress: `Fauntleroy Circus, London, UK` }),
                new EmployeesFlatDetailsItem({ Address: `Cerrito 333`, Age: 39, City: `Buenos Aires`, Country: `Argentina`, Fax: `(121) 135-4892`, HireDate: `2010-03-22`, ID: 13, Name: `Trevor Ashworth`, ParentID: 5, Phone: `(1) 135-5555`, PostalCode: 1010, Title: `Director`, LastName: `Ashworth`, FullAddress: `Cerrito 333, Buenos Aires, Argentina` }),
                new EmployeesFlatDetailsItem({ Address: `Sierras de Granada 9993`, Age: 44, City: `México D.F.`, Country: `Mexico`, Fax: `(153) 555-7293`, HireDate: `2014-04-04`, ID: 17, Name: `Antonio Moreno`, ParentID: 18, Phone: `(5) 555-3392`, PostalCode: 5022, Title: `Senior Accountant`, LastName: `Moreno`, FullAddress: `Sierras de Granada 9993, México D.F., Mexico` }),
                new EmployeesFlatDetailsItem({ Address: `Hauptstr. 29`, Age: 50, City: `Sao Paulo`, Country: `Brazil`, Fax: `(531) 555-6691`, HireDate: `2007-11-18`, ID: 7, Name: `Pedro Rodriguez`, ParentID: 10, Phone: `0452-076545`, PostalCode: 3012, Title: `Senior Localization Developer`, LastName: `Rodriguez`, FullAddress: `Hauptstr. 29, Sao Paulo, Brazil` }),
                new EmployeesFlatDetailsItem({ Address: `Av. dos Lusíadas, 23`, Age: 27, City: `Bern`, Country: `Switzerland`, Fax: `(271) 335-357`, HireDate: `2016-02-19`, ID: 8, Name: `Casey Harper`, ParentID: 10, Phone: `(11) 555-7647`, PostalCode: 40000, Title: `Senior Localization`, LastName: `Harper`, FullAddress: `Av. dos Lusíadas, 23, Bern, Switzerland` }),
                new EmployeesFlatDetailsItem({ Address: `Berkeley Gardens 12`, Age: 25, City: `London`, Country: `UK`, Fax: `(171) 555-9199`, HireDate: `2017-11-09`, ID: 15, Name: `Patricia Simpson`, ParentID: 7, Phone: `(171) 555-2282`, PostalCode: 26000, Title: `Localization Intern`, LastName: `Simpson`, FullAddress: `Berkeley Gardens 12, London, UK` }),
                new EmployeesFlatDetailsItem({ Address: `Walserweg 21`, Age: 39, City: `Aachen`, Country: `Germany`, Fax: `0241-059428`, HireDate: `2010-03-22`, ID: 9, Name: `Francisco Chang`, ParentID: 7, Phone: `0241-039123`, PostalCode: 52066, Title: `Localization Intern`, LastName: `Chang`, FullAddress: `Walserweg 21, Aachen, Germany` }),
                new EmployeesFlatDetailsItem({ Address: `35 King George`, Age: 25, City: `London`, Country: `UK`, Fax: `(171) 555-3373`, HireDate: `2018-03-18`, ID: 16, Name: `Peter Lewis`, ParentID: 7, Phone: `(171) 555-0297`, PostalCode: 48000, Title: `Localization Intern`, LastName: `Lewis`, FullAddress: `35 King George, London, UK` }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

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

import { IgrTreeGridModule } from "@infragistics/igniteui-react-grids";
import { IgrTreeGrid, IgrColumn, IgrColumnGroup } from "@infragistics/igniteui-react-grids";
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';

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

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

export default class Sample extends React.Component<any, any> {
    private treeGrid: IgrTreeGrid
    private treeGridRef(r: IgrTreeGrid) {
        this.treeGrid = r;
        this.setState({});
    }

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

        this.treeGridRef = this.treeGridRef.bind(this);
    }

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

            <div className="container fill">
                <IgrTreeGrid
                    autoGenerate={false}
                    ref={this.treeGridRef}
                    id="treeGrid"
                    data={this.employeesFlatDetails}
                    primaryKey="ID"
                    foreignKey="ParentID"
                    columnSelection="multiple">
                    <IgrColumn
                        field="Name"
                        dataType="string"
                        width="auto">
                    </IgrColumn>
                    <IgrColumnGroup
                        header="General Information">
                        <IgrColumn
                            field="HireDate"
                            header="Hire Date"
                            dataType="date">
                        </IgrColumn>
                        <IgrColumnGroup
                            header="Personal Details">
                            <IgrColumn
                                field="ID"
                                dataType="number">
                            </IgrColumn>
                            <IgrColumn
                                field="Title"
                                dataType="string">
                            </IgrColumn>
                            <IgrColumn
                                field="Age"
                                dataType="number"
                                selectable={false}>
                            </IgrColumn>
                        </IgrColumnGroup>
                    </IgrColumnGroup>
                    <IgrColumnGroup
                        header="Address Information">
                        <IgrColumnGroup
                            header="Location">
                            <IgrColumn
                                field="Country"
                                dataType="string"
                                selectable={false}>
                            </IgrColumn>
                            <IgrColumn
                                field="City"
                                dataType="string">
                            </IgrColumn>
                            <IgrColumn
                                field="Address"
                                dataType="string">
                            </IgrColumn>
                        </IgrColumnGroup>
                        <IgrColumnGroup
                            header="Contact Information">
                            <IgrColumn
                                field="Phone"
                                dataType="string"
                                selectable={false}>
                            </IgrColumn>
                            <IgrColumn
                                field="Fax"
                                dataType="string"
                                selectable={false}>
                            </IgrColumn>
                            <IgrColumn
                                field="PostalCode"
                                header="Postal Code"
                                dataType="string">
                            </IgrColumn>
                        </IgrColumnGroup>
                    </IgrColumnGroup>
                </IgrTreeGrid>
            </div>
        </div>
        );
    }

    private _employeesFlatDetails: EmployeesFlatDetails = null;
    public get employeesFlatDetails(): EmployeesFlatDetails {
        if (this._employeesFlatDetails == null)
        {
            this._employeesFlatDetails = new EmployeesFlatDetails();
        }
        return this._employeesFlatDetails;
    }

}

// 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

키보드 조합

키보드 조합은 그리드 열 선택 입력이 다중으로 설정된 경우에만 사용할 수 있습니다.

​열 선택 기능의 키보드 탐색에는 두 가지 시나리오가 있습니다.

• Multi-column selection - holding CTRL + click on every selectable header cell.
• Range column selection - holding SHIFT + click selects all selectable columns in between.

API 조작

그만큼 API 몇 가지 추가 기능을 제공합니다. 눈에 보이지 않는 열은 모든 숨겨진 열은 다음과 같이 표시될 수 있습니다. selected 해당 설정을 통해 세터.

위 명령문은 선택한 속성이 변경될 때 해당 하위 항목의 상태가 변경된다는 점을 제외하고 ColumnGroupComponent에도 적용됩니다.

API 조작에 관한 자세한 내용은 API 참조 섹션에서 확인할 수 있습니다.

스타일링

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

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

그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.

.grid {
    --ig-grid-row-selected-background: #0062A3;
    --ig-grid-row-selected-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
    --ig-grid-header-selected-text-color: #ecaa53;
    --ig-grid-header-selected-background: #0062A3;
    --ig-grid-row-selected-hover-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
}
css

데모

EXAMPLE

DATA

TSX

CSS

export class EmployeesFlatDetailsItem {
    public constructor(init: Partial<EmployeesFlatDetailsItem>) {
        Object.assign(this, init);
    }

    public Address: string;
    public Age: number;
    public City: string;
    public Country: string;
    public Fax: string;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public ParentID: number;
    public Phone: string;
    public PostalCode: number;
    public Title: string;
    public LastName: string;
    public FullAddress: string;

}
export class EmployeesFlatDetails extends Array<EmployeesFlatDetailsItem> {
    public constructor(items: Array<EmployeesFlatDetailsItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EmployeesFlatDetailsItem({ Address: `Obere Str. 57`, Age: 55, City: `Berlin`, Country: `Germany`, Fax: `030-0076545`, HireDate: `2008-03-20`, ID: 1, Name: `Johnathan Winchester`, ParentID: -1, Phone: `030-0074321`, PostalCode: 12209, Title: `Development Manager`, LastName: `Winchester`, FullAddress: `Obere Str. 57, Berlin, Germany` }),
                new EmployeesFlatDetailsItem({ Address: `Avda. de la Constitución 2222`, Age: 42, City: `México D.F.`, Country: `Mexico`, Fax: `(51) 555-3745`, HireDate: `2014-01-22`, ID: 4, Name: `Ana Sanders`, ParentID: -1, Phone: `(5) 555-4729`, PostalCode: 5021, Title: `CEO`, LastName: `Sanders`, FullAddress: `Avda. de la Constitución 2222, México D.F., Mexico` }),
                new EmployeesFlatDetailsItem({ Address: `Mataderos 2312`, Age: 49, City: `México D.F.`, Country: `Mexico`, Fax: `(5) 555-3995`, HireDate: `2014-01-22`, ID: 18, Name: `Victoria Lincoln`, ParentID: -1, Phone: `(5) 555-3932`, PostalCode: 5023, Title: `Accounting Manager`, LastName: `Lincoln`, FullAddress: `Mataderos 2312, México D.F., Mexico` }),
                new EmployeesFlatDetailsItem({ Address: `120 Hanover Sq.`, Age: 61, City: `London`, Country: `UK`, Fax: `(171) 555-6750`, HireDate: `2010-01-01`, ID: 10, Name: `Yang Wang`, ParentID: -1, Phone: `(171) 555-7788`, PostalCode: 39000, Title: `Localization Manager`, LastName: `Wang`, FullAddress: `120 Hanover Sq., London, UK` }),
                new EmployeesFlatDetailsItem({ Address: `Berguvsvägen 8`, Age: 43, City: `Luleå`, Country: `Sweden`, Fax: `0921-12 34 67`, HireDate: `2011-06-03`, ID: 3, Name: `Michael Burke`, ParentID: 1, Phone: `0921-12 34 65`, PostalCode: 29000, Title: `Senior Software Developer`, LastName: `Burke`, FullAddress: `Berguvsvägen 8, Luleå, Sweden` }),
                new EmployeesFlatDetailsItem({ Address: `Forsterstr. 57`, Age: 29, City: `Mannheim`, Country: `Germany`, Fax: `0621-08924`, HireDate: `2009-06-19`, ID: 2, Name: `Thomas Anderson`, ParentID: 1, Phone: `0621-08460`, PostalCode: 68306, Title: `Senior Software Developer`, LastName: `Anderson`, FullAddress: `Forsterstr. 57, Mannheim, Germany` }),
                new EmployeesFlatDetailsItem({ Address: `24, place Kléber`, Age: 31, City: `Strasbourg`, Country: `France`, Fax: `88.60.15.32`, HireDate: `2014-08-18`, ID: 11, Name: `Monica Reyes`, ParentID: 1, Phone: `88.60.15.31`, PostalCode: 67000, Title: `Software Development Team Lead`, LastName: `Reyes`, FullAddress: `24, place Kléber, Strasbourg, France` }),
                new EmployeesFlatDetailsItem({ Address: `C/ Araquil, 67`, Age: 35, City: `Madrid`, Country: `Spain`, Fax: `(911) 555 91 99`, HireDate: `2015-09-17`, ID: 6, Name: `Roland Mendel`, ParentID: 11, Phone: `(91) 555 22 82`, PostalCode: 28023, Title: `Senior Software Developer`, LastName: `Mendel`, FullAddress: `C/ Araquil, 67, Madrid, Spain` }),
                new EmployeesFlatDetailsItem({ Address: `12, rue des Bouchers`, Age: 44, City: `Marseille`, Country: `France`, Fax: `91.24.45.41`, HireDate: `2009-10-11`, ID: 12, Name: `Sven Cooper`, ParentID: 11, Phone: `91.24.45.40`, PostalCode: 13008, Title: `Senior Software Developer`, LastName: `Cooper`, FullAddress: `12, rue des Bouchers, Marseille, France` }),
                new EmployeesFlatDetailsItem({ Address: `23 Tsawassen Blvd.`, Age: 44, City: `Tsawassen`, Country: `Canada`, Fax: `(604) 555-3745`, HireDate: `2014-04-04`, ID: 14, Name: `Laurence Johnson`, ParentID: 4, Phone: `(604) 555-4729`, PostalCode: 19000, Title: `Director`, LastName: `Johnson`, FullAddress: `23 Tsawassen Blvd., Tsawassen, Canada` }),
                new EmployeesFlatDetailsItem({ Address: `Fauntleroy Circus`, Age: 25, City: `London`, Country: `UK`, Fax: `(125) 555-3798`, HireDate: `2017-11-9`, ID: 5, Name: `Elizabeth Richards`, ParentID: 4, Phone: `(171) 555-1212`, PostalCode: 30000, Title: `Vice President`, LastName: `Richards`, FullAddress: `Fauntleroy Circus, London, UK` }),
                new EmployeesFlatDetailsItem({ Address: `Cerrito 333`, Age: 39, City: `Buenos Aires`, Country: `Argentina`, Fax: `(121) 135-4892`, HireDate: `2010-03-22`, ID: 13, Name: `Trevor Ashworth`, ParentID: 5, Phone: `(1) 135-5555`, PostalCode: 1010, Title: `Director`, LastName: `Ashworth`, FullAddress: `Cerrito 333, Buenos Aires, Argentina` }),
                new EmployeesFlatDetailsItem({ Address: `Sierras de Granada 9993`, Age: 44, City: `México D.F.`, Country: `Mexico`, Fax: `(153) 555-7293`, HireDate: `2014-04-04`, ID: 17, Name: `Antonio Moreno`, ParentID: 18, Phone: `(5) 555-3392`, PostalCode: 5022, Title: `Senior Accountant`, LastName: `Moreno`, FullAddress: `Sierras de Granada 9993, México D.F., Mexico` }),
                new EmployeesFlatDetailsItem({ Address: `Hauptstr. 29`, Age: 50, City: `Sao Paulo`, Country: `Brazil`, Fax: `(531) 555-6691`, HireDate: `2007-11-18`, ID: 7, Name: `Pedro Rodriguez`, ParentID: 10, Phone: `0452-076545`, PostalCode: 3012, Title: `Senior Localization Developer`, LastName: `Rodriguez`, FullAddress: `Hauptstr. 29, Sao Paulo, Brazil` }),
                new EmployeesFlatDetailsItem({ Address: `Av. dos Lusíadas, 23`, Age: 27, City: `Bern`, Country: `Switzerland`, Fax: `(271) 335-357`, HireDate: `2016-02-19`, ID: 8, Name: `Casey Harper`, ParentID: 10, Phone: `(11) 555-7647`, PostalCode: 40000, Title: `Senior Localization`, LastName: `Harper`, FullAddress: `Av. dos Lusíadas, 23, Bern, Switzerland` }),
                new EmployeesFlatDetailsItem({ Address: `Berkeley Gardens 12`, Age: 25, City: `London`, Country: `UK`, Fax: `(171) 555-9199`, HireDate: `2017-11-09`, ID: 15, Name: `Patricia Simpson`, ParentID: 7, Phone: `(171) 555-2282`, PostalCode: 26000, Title: `Localization Intern`, LastName: `Simpson`, FullAddress: `Berkeley Gardens 12, London, UK` }),
                new EmployeesFlatDetailsItem({ Address: `Walserweg 21`, Age: 39, City: `Aachen`, Country: `Germany`, Fax: `0241-059428`, HireDate: `2010-03-22`, ID: 9, Name: `Francisco Chang`, ParentID: 7, Phone: `0241-039123`, PostalCode: 52066, Title: `Localization Intern`, LastName: `Chang`, FullAddress: `Walserweg 21, Aachen, Germany` }),
                new EmployeesFlatDetailsItem({ Address: `35 King George`, Age: 25, City: `London`, Country: `UK`, Fax: `(171) 555-3373`, HireDate: `2018-03-18`, ID: 16, Name: `Peter Lewis`, ParentID: 7, Phone: `(171) 555-0297`, PostalCode: 48000, Title: `Localization Intern`, LastName: `Lewis`, FullAddress: `35 King George, London, UK` }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

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

import { IgrTreeGridModule } from "@infragistics/igniteui-react-grids";
import { IgrTreeGrid, IgrColumn, IgrColumnGroup } from "@infragistics/igniteui-react-grids";
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';

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

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

export default class Sample extends React.Component<any, any> {
    private treeGrid: IgrTreeGrid
    private treeGridRef(r: IgrTreeGrid) {
        this.treeGrid = r;
        this.setState({});
    }

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

        this.treeGridRef = this.treeGridRef.bind(this);
    }

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

            <div className="container fill">
                <IgrTreeGrid
                    autoGenerate={false}
                    ref={this.treeGridRef}
                    id="treeGrid"
                    data={this.employeesFlatDetails}
                    primaryKey="ID"
                    foreignKey="ParentID"
                    columnSelection="multiple">
                    <IgrColumn
                        field="Name"
                        dataType="string">
                    </IgrColumn>
                    <IgrColumnGroup
                        header="General Information">
                        <IgrColumn
                            field="HireDate"
                            header="Hire Date"
                            dataType="date">
                        </IgrColumn>
                        <IgrColumnGroup
                            header="Personal Details">
                            <IgrColumn
                                field="ID"
                                dataType="number">
                            </IgrColumn>
                            <IgrColumn
                                field="Title"
                                dataType="string">
                            </IgrColumn>
                            <IgrColumn
                                field="Age"
                                dataType="number"
                                selectable={false}>
                            </IgrColumn>
                        </IgrColumnGroup>
                    </IgrColumnGroup>
                    <IgrColumnGroup
                        header="Address Information">
                        <IgrColumnGroup
                            header="Location">
                            <IgrColumn
                                field="Country"
                                dataType="string"
                                selectable={false}>
                            </IgrColumn>
                            <IgrColumn
                                field="City"
                                dataType="string">
                            </IgrColumn>
                            <IgrColumn
                                field="Address"
                                dataType="string">
                            </IgrColumn>
                        </IgrColumnGroup>
                        <IgrColumnGroup
                            header="Contact Information">
                            <IgrColumn
                                field="Phone"
                                dataType="string"
                                selectable={false}>
                            </IgrColumn>
                            <IgrColumn
                                field="Fax"
                                dataType="string"
                                selectable={false}>
                            </IgrColumn>
                            <IgrColumn
                                field="PostalCode"
                                header="Postal Code"
                                dataType="string">
                            </IgrColumn>
                        </IgrColumnGroup>
                    </IgrColumnGroup>
                </IgrTreeGrid>
            </div>
        </div>
        );
    }

    private _employeesFlatDetails: EmployeesFlatDetails = null;
    public get employeesFlatDetails(): EmployeesFlatDetails {
        if (this._employeesFlatDetails == null)
        {
            this._employeesFlatDetails = new EmployeesFlatDetails();
        }
        return this._employeesFlatDetails;
    }

}

// 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 */

#treeGrid {
	--ig-grid-row-selected-background: #0062A3;
    --ig-grid-row-selected-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
    --ig-grid-header-selected-text-color: #ecaa53;
    --ig-grid-header-selected-background: #0062A3;
    --ig-grid-row-selected-hover-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
}

cssコピー

Edit in: Codesandbox

API 참조

열 선택 UI에는 아래에 나열된 몇 가지 API가 더 있습니다.

• IgrTreeGrid
• IgrColumn
• columnGroup

IgrTreeGrid properties:

• columnSelection
• selectedColumns
• selectColumns
• deselectColumns
• selectAllColumns
• deselectAllColumns

IgrColumn properties:

• selectable
• selected

columnGroup properties:

• selectable
• selected

IgrTreeGrid events:

• OnColumnsSelectionChange

추가 리소스

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

• Ignite UI for React 포럼
• Ignite UI for React GitHub