React Tree Grid の条件付きセルのスタイル設定

React Tree Grid の Ignite UI for React コンポーネントを使用すると、行またはセル レベルでカスタム スタイルを設定できます。IgrTreeGrid 条件付きセルのスタイル設定機能は、特定の基準を満たすデータを視覚的に強調またはハイライト表示するために使用され、ユーザーがグリッド内の重要な情報や傾向を簡単に識別できるようにします。

Tree Grid 条件付き行のスタイル設定

Ignite UI for React の IgrTreeGrid コンポーネントは、カスタム ルールに基づいて行の条件付きスタイル設定を作成する次の 2 つの方法を提供します:

• IgrTreeGrid コンポーネントで rowClasses 入力を設定する方法。
• IgrTreeGrid コンポーネントで rowStyles 入力を設定する方法。

さらにこのトピックでは、両方について詳しく説明します。

RowClasses の使用

IgrTreeGrid 行の条件付きスタイル設定は、rowClasses 入力を設定してカスタム条件を定義するころによりスタイル設定できます。

<IgrTreeGrid id="grid" height="600px" width="100%" rowClasses={rowClasses}>
</IgrTreeGrid>
tsx

rowClasses 入力は、キーと値のペアを含むオブジェクト リテラルを受け取ります。キーは CSS クラスの名前です。値はブール値を返すコールバック関数またはブール値です。

const rowClasses = {
    activeRow: (row: IgrRowType) => row.index === 0
}
tsx

.activeRow {
    border: 2px solid #fc81b8;
    border-left: 3px solid #e41c77;
}
css

デモ

EXAMPLE

DATA

TSX

CSS

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

    public Age: number;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public Phone: string;
    public OnPTO: boolean;
    public ParentID: number;
    public Title: string;

}
export class EmployeesFlatData extends Array<EmployeesFlatDataItem> {
    public constructor(items: Array<EmployeesFlatDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EmployeesFlatDataItem(
                {
                    Age: 55,
                    HireDate: `2008-03-20`,
                    ID: 1,
                    Name: `Johnathan Winchester`,
                    Phone: `0251-031259`,
                    OnPTO: false,
                    ParentID: -1,
                    Title: `Development Manager`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 42,
                    HireDate: `2014-01-22`,
                    ID: 4,
                    Name: `Ana Sanders`,
                    Phone: `(21) 555-0091`,
                    OnPTO: true,
                    ParentID: -1,
                    Title: `CEO`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 49,
                    HireDate: `2014-01-22`,
                    ID: 18,
                    Name: `Victoria Lincoln`,
                    Phone: `(071) 23 67 22 20`,
                    OnPTO: true,
                    ParentID: -1,
                    Title: `Accounting Manager`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 61,
                    HireDate: `2010-01-01`,
                    ID: 10,
                    Name: `Yang Wang`,
                    Phone: `(21) 555-0091`,
                    OnPTO: false,
                    ParentID: -1,
                    Title: `Localization Manager`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 43,
                    HireDate: `2011-06-03`,
                    ID: 3,
                    Name: `Michael Burke`,
                    Phone: `0452-076545`,
                    OnPTO: true,
                    ParentID: 1,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 29,
                    HireDate: `2009-06-19`,
                    ID: 2,
                    Name: `Thomas Anderson`,
                    Phone: `(14) 555-8122`,
                    OnPTO: false,
                    ParentID: 1,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 31,
                    HireDate: `2014-08-18`,
                    ID: 11,
                    Name: `Monica Reyes`,
                    Phone: `7675-3425`,
                    OnPTO: false,
                    ParentID: 1,
                    Title: `Software Development Team Lead`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 35,
                    HireDate: `2015-09-17`,
                    ID: 6,
                    Name: `Roland Mendel`,
                    Phone: `(505) 555-5939`,
                    OnPTO: false,
                    ParentID: 11,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 44,
                    HireDate: `2009-10-11`,
                    ID: 12,
                    Name: `Sven Cooper`,
                    Phone: `0695-34 67 21`,
                    OnPTO: true,
                    ParentID: 11,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 44,
                    HireDate: `2014-04-04`,
                    ID: 14,
                    Name: `Laurence Johnson`,
                    Phone: `981-443655`,
                    OnPTO: false,
                    ParentID: 4,
                    Title: `Director`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 25,
                    HireDate: `2017-11-09`,
                    ID: 5,
                    Name: `Elizabeth Richards`,
                    Phone: `(2) 283-2951`,
                    OnPTO: true,
                    ParentID: 4,
                    Title: `Vice President`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 39,
                    HireDate: `2010-03-22`,
                    ID: 13,
                    Name: `Trevor Ashworth`,
                    Phone: `981-443655`,
                    OnPTO: true,
                    ParentID: 5,
                    Title: `Director`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 44,
                    HireDate: `2014-04-04`,
                    ID: 17,
                    Name: `Antonio Moreno`,
                    Phone: `(505) 555-5939`,
                    OnPTO: false,
                    ParentID: 18,
                    Title: `Senior Accountant`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 50,
                    HireDate: `2007-11-18`,
                    ID: 7,
                    Name: `Pedro Rodriguez`,
                    Phone: `035-640230`,
                    OnPTO: false,
                    ParentID: 10,
                    Title: `Senior Localization Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 27,
                    HireDate: `2016-02-19`,
                    ID: 8,
                    Name: `Casey Harper`,
                    Phone: `0342-023176`,
                    OnPTO: true,
                    ParentID: 10,
                    Title: `Senior Localization`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 25,
                    HireDate: `2017-11-09`,
                    ID: 15,
                    Name: `Patricia Simpson`,
                    Phone: `069-0245984`,
                    OnPTO: false,
                    ParentID: 7,
                    Title: `Localization Intern`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 39,
                    HireDate: `2010-03-22`,
                    ID: 9,
                    Name: `Francisco Chang`,
                    Phone: `(91) 745 6200`,
                    OnPTO: false,
                    ParentID: 7,
                    Title: `Localization Intern`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 25,
                    HireDate: `2018-03-18`,
                    ID: 16,
                    Name: `Peter Lewis`,
                    Phone: `069-0245984`,
                    OnPTO: true,
                    ParentID: 7,
                    Title: `Localization Intern`
                }),
            ];
            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 } from "@infragistics/igniteui-react-grids";
import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
import { IgrRowType } from "@infragistics/igniteui-react-grids";

import "@infragistics/igniteui-react-grids/grids/combined";
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 treeGrid1: IgrTreeGrid
    private treeGrid1Ref(r: IgrTreeGrid) {
        this.treeGrid1 = r;
        this.setState({});
    }

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

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

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

            <div className="container fill">
                <IgrTreeGrid
                    autoGenerate={false}
                    data={this.employeesFlatData}
                    primaryKey="ID"
                    foreignKey="ParentID"
                    moving={true}
                    rowEditable={true}
                    rowClasses={this.webGridRowClassesHandler}
                    ref={this.treeGrid1Ref}>
                    <IgrColumn
                        field="Name"
                        header="Full Name"
                        dataType="string">
                    </IgrColumn>
                    <IgrColumn
                        field="Age"
                        header="Age"
                        dataType="number">
                    </IgrColumn>
                    <IgrColumn
                        field="Title"
                        header="Title"
                        dataType="string">
                    </IgrColumn>
                    <IgrColumn
                        field="HireDate"
                        header="Hire Date"
                        dataType="date">
                    </IgrColumn>
                </IgrTreeGrid>
            </div>
        </div>
        );
    }

    private _employeesFlatData: EmployeesFlatData = null;
    public get employeesFlatData(): EmployeesFlatData {
        if (this._employeesFlatData == null)
        {
            this._employeesFlatData = new EmployeesFlatData();
        }
        return this._employeesFlatData;
    }


    public webGridRowClassesHandler = {
      activeRow: (row: IgrRowType) => row.index % 2 === 0
    };

}

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

    .activeRow {
        border-top: 2px solid #fc81b8;
        border-left: 3px solid #e41c77;
    }

cssコピー

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

RowStyles の使用

IgrTreeGrid コントロールは、データ行の条件付きスタイル設定を可能にする rowStyles プロパティを公開します。rowClasses と同様、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取ります。また、通常のスタイル設定 (条件なし) を適用することもできます。

rowStyles と rowClasses の両方のコールバック署名は以下のとおりです。

(row: IgrRowType) => boolean
tsx

次にスタイルを定義します。

const rowStyles = {
    'background': (row: IgrRowType) => row.data['Title'] === 'CEO' ? '#6c757d' :
        row.data['Title'].includes('President') ?'#adb5bd' :
        row.data['Title'].includes('Director') ? '#ced4da' :
        row.data['Title'].includes('Manager') ? '#dee2e6' :
        row.data['Title'].includes('Lead') ? '#e9ecef' :
        row.data['Title'].includes('Senior') ? '#f8f9fa' : null,
    'border-left': (row: IgrRowType) => row.data['Title'] === 'CEO' || row.data['Title'].includes('President') ? '2px solid' : null,
    'border-color': (row: IgrRowType) => row.data['Title'] === 'CEO' ? '#495057' : null,
    'color': (row: IgrRowType) => row.data['Title'] === 'CEO' ? '#fff' : null
};
tsx

<IgrTreeGrid autoGenerate="true" primaryKey="ID" foreignKey="ParentID" data={data} rowStyles={rowStyles}>
</IgrTreeGrid>
tsx

デモ

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 } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, WebTreeGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
import { IgrPropertyEditorPropertyDescriptionButtonClickEventArgs } from "@infragistics/igniteui-react-layouts";
import { IgrRowType } from "@infragistics/igniteui-react-grids";

import "@infragistics/igniteui-react-grids/grids/combined";
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"
                    moving={true}
                    rowStyles={this.webTreeGridRowStylesHandler}>
                    <IgrColumn
                        field="Name"
                        dataType="string"
                        sortable={true}
                        filterable={true}
                        editable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Age"
                        dataType="number"
                        resizable={false}
                        filterable={false}
                        editable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Title"
                        dataType="string"
                        resizable={true}
                        filterable={true}
                        editable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="HireDate"
                        dataType="date"
                        resizable={true}
                        filterable={true}
                        editable={true}>
                    </IgrColumn>
                </IgrTreeGrid>
            </div>
        </div>
        );
    }

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

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

    public webTreeGridRowStylesHandler = {
        'background': (row: IgrRowType) => row.data['Title'] === 'CEO' ? '#6c757d' : row.data['Title'].includes('President') ? '#adb5bd' :
            row.data['Title'].includes('Director') ? '#ced4da' : row.data['Title'].includes('Manager') ? '#dee2e6' :
            row.data['Title'].includes('Lead') ? '#e9ecef' : row.data['Title'].includes('Senior') ? '#f8f9fa' : null,
        'border-left': (row: IgrRowType) => row.data['Title'] === 'CEO' || row.data['Title'].includes('President') ? '2px solid' : null,
        'border-color': (row: IgrRowType) => row.data['Title'] === 'CEO' ? '#495057' : null,
        'color': (row: IgrRowType) => row.data['Title'] === 'CEO' ? '#fff' : null
    };

}

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

Tree Grid 条件付きセルのスタイル設定

概要

Ignite UI for React の IgrTreeGrid コンポーネントは、カスタム ルールに基づいてセルの条件付きスタイル設定を作成する次の 2 つの方法を提供します:

• IgrColumn 入力 cellClasses をキーと値のペアを含むオブジェクト リテラルに設定します。キーは CSS クラスの名前です。値はブール値を返すコールバック関数またはブール値です。その結果、セルのマテリアル スタイル設定が簡単にできます。

CellClasses の使用

IgrColumn cellClasses 入力を設定してカスタム条件を定義することにより、IgrTreeGrid の条件付きセルのスタイルを設定できます。

<IgrColumn field="UnitPrice" header="Unit Price" dataType="currency" cellClasses={unitPriceCellClasses}>
</IgrColumn>
tsx

cellClasses 入力は、キーと値のペアを含むオブジェクト リテラルを受け取ります。キーは CSS クラスの名前です。値はブール値を返すコールバック関数またはブール値です。

function upPriceCondition(rowData: any, columnKey: any): boolean {
    return rowData[columnKey] > 5;
}

function downPriceCondition(rowData: any, columnKey: any): boolean {
    return rowData[columnKey] <= 5;
}

const unitPriceCellClasses = {
    downPrice: downPriceCondition,
    upPrice: upPriceCondition
};
tsx

.upPrice {
    color: red !important;
}

.downPrice {
    color: green !important;
}
css

デモ

EXAMPLE

DATA

TSX

CSS

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

    public ID: number;
    public ParentID: number;
    public Name: string;
    public Category: string;
    public OrderDate: string;
    public Units: number;
    public UnitPrice: number;
    public Price: number;
    public Delivered: boolean;

}
export class OrdersTreeData extends Array<OrdersTreeDataItem> {
    public constructor(items: Array<OrdersTreeDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new OrdersTreeDataItem(
                {
                    ID: 1,
                    ParentID: -1,
                    Name: `Order 1`,
                    Category: ``,
                    OrderDate: `2010-02-17`,
                    Units: 1844,
                    UnitPrice: 3.73,
                    Price: 6884.38,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 101,
                    ParentID: 1,
                    Name: `Chocolate Chip Cookies`,
                    Category: `Cookies`,
                    OrderDate: `2010-02-17`,
                    Units: 834,
                    UnitPrice: 3.59,
                    Price: 2994.06,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 102,
                    ParentID: 1,
                    Name: `Red Apples`,
                    Category: `Fruit`,
                    OrderDate: `2010-02-17`,
                    Units: 371,
                    UnitPrice: 3.66,
                    Price: 1357.86,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 103,
                    ParentID: 1,
                    Name: `Butter`,
                    Category: `Diary`,
                    OrderDate: `2010-02-17`,
                    Units: 260,
                    UnitPrice: 3.45,
                    Price: 897,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 104,
                    ParentID: 1,
                    Name: `Potato Chips`,
                    Category: `Snack`,
                    OrderDate: `2010-02-17`,
                    Units: 118,
                    UnitPrice: 1.96,
                    Price: 231.28,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 105,
                    ParentID: 1,
                    Name: `Orange Juice`,
                    Category: `Beverages`,
                    OrderDate: `2010-02-17`,
                    Units: 261,
                    UnitPrice: 5.38,
                    Price: 1404.18,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 2,
                    ParentID: -1,
                    Name: `Order 2`,
                    Category: ``,
                    OrderDate: `2022-05-27`,
                    Units: 1831,
                    UnitPrice: 8.23,
                    Price: 15062.77,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 201,
                    ParentID: 2,
                    Name: `Frozen Shrimps`,
                    Category: `Seafood`,
                    OrderDate: `2022-05-27`,
                    Units: 120,
                    UnitPrice: 20.45,
                    Price: 2454,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 202,
                    ParentID: 2,
                    Name: `Ice Tea`,
                    Category: `Beverages`,
                    OrderDate: `2022-05-27`,
                    Units: 840,
                    UnitPrice: 7,
                    Price: 5880,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 203,
                    ParentID: 2,
                    Name: `Fresh Cheese`,
                    Category: `Diary`,
                    OrderDate: `2022-05-27`,
                    Units: 267,
                    UnitPrice: 16.55,
                    Price: 4418.85,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 204,
                    ParentID: 2,
                    Name: `Carrots`,
                    Category: `Vegetables`,
                    OrderDate: `2022-05-27`,
                    Units: 360,
                    UnitPrice: 2.77,
                    Price: 997.2,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 205,
                    ParentID: 2,
                    Name: `Apple Juice`,
                    Category: `Beverages`,
                    OrderDate: `2022-05-27`,
                    Units: 244,
                    UnitPrice: 5.38,
                    Price: 1312.72,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 3,
                    ParentID: -1,
                    Name: `Order 3`,
                    Category: ``,
                    OrderDate: `2022-08-04`,
                    Units: 1972,
                    UnitPrice: 3.47,
                    Price: 6849.18,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 301,
                    ParentID: 3,
                    Name: `Skimmed Milk 1L`,
                    Category: `Diary`,
                    OrderDate: `2022-08-04`,
                    Units: 1028,
                    UnitPrice: 3.56,
                    Price: 3659.68,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 302,
                    ParentID: 3,
                    Name: `Bananas 5 Pack`,
                    Category: `Fruit`,
                    OrderDate: `2022-08-04`,
                    Units: 370,
                    UnitPrice: 6.36,
                    Price: 2353.2,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 303,
                    ParentID: 3,
                    Name: `Cauliflower`,
                    Category: `Vegetables`,
                    OrderDate: `2022-08-04`,
                    Units: 283,
                    UnitPrice: 0.95,
                    Price: 268.85,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 304,
                    ParentID: 3,
                    Name: `White Chocolate Cookies`,
                    Category: `Cookies`,
                    OrderDate: `2022-08-04`,
                    Units: 291,
                    UnitPrice: 1.95,
                    Price: 567.45,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 4,
                    ParentID: -1,
                    Name: `Order 4`,
                    Category: ``,
                    OrderDate: `2023-01-04`,
                    Units: 1065,
                    UnitPrice: 5.56,
                    Price: 5923.5,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 401,
                    ParentID: 4,
                    Name: `Mini Milk Chocolate Cookie Bites`,
                    Category: `Cookies`,
                    OrderDate: `2023-01-04`,
                    Units: 68,
                    UnitPrice: 2.25,
                    Price: 153,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 402,
                    ParentID: 4,
                    Name: `Wild Salmon Fillets`,
                    Category: `Seafood`,
                    OrderDate: `2023-01-04`,
                    Units: 320,
                    UnitPrice: 16.15,
                    Price: 5168,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 403,
                    ParentID: 4,
                    Name: `Diet Lemonade`,
                    Category: `Beverages`,
                    OrderDate: `2023-01-04`,
                    Units: 437,
                    UnitPrice: 0.5,
                    Price: 218.5,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 404,
                    ParentID: 4,
                    Name: `Potatoes`,
                    Category: `Vegetables`,
                    OrderDate: `2023-01-04`,
                    Units: 240,
                    UnitPrice: 1.6,
                    Price: 384,
                    Delivered: true
                }),
            ];
            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 } from "@infragistics/igniteui-react-grids";
import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';

import "@infragistics/igniteui-react-grids/grids/combined";
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({});
    }
    private column1: IgrColumn
    private column2: IgrColumn

    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
                    ref={this.treeGridRef}
                    id="treeGrid"
                    data={this.ordersTreeData}
                    primaryKey="ID"
                    foreignKey="ParentID">
                    <IgrColumn
                        field="ID"
                        header="Order ID"
                        dataType="string">
                    </IgrColumn>
                    <IgrColumn
                        field="Name"
                        header="Order Product"
                        dataType="string"
                        cellClasses={this.webTreeGridAllergensCellClassesHandler}
                        name="column1">
                    </IgrColumn>
                    <IgrColumn
                        field="Category"
                        dataType="string">
                    </IgrColumn>
                    <IgrColumn
                        field="Units"
                        dataType="number">
                    </IgrColumn>
                    <IgrColumn
                        field="UnitPrice"
                        header="Unit Price"
                        dataType="currency"
                        cellClasses={this.webTreeGridUnitPriceCellClassesHandler}
                        name="column2">
                    </IgrColumn>
                    <IgrColumn
                        field="Price"
                        dataType="currency">
                    </IgrColumn>
                    <IgrColumn
                        field="OrderDate"
                        header="Order Date"
                        dataType="date">
                    </IgrColumn>
                    <IgrColumn
                        field="Delivered"
                        dataType="boolean">
                    </IgrColumn>
                </IgrTreeGrid>
            </div>
        </div>
        );
    }

    private _ordersTreeData: OrdersTreeData = null;
    public get ordersTreeData(): OrdersTreeData {
        if (this._ordersTreeData == null)
        {
            this._ordersTreeData = new OrdersTreeData();
        }
        return this._ordersTreeData;
    }


    public allergenItems = ['Frozen Shrimps', 'Wild Salmon Fillets', 'Fresh Cheese', 'Skimmed Milk 1L', 'Butter'];

    public webTreeGridAllergensCellClassesHandler = {
        allergensFont: (rowData: any, columnKey: any): boolean => this.allergenItems.indexOf(rowData[columnKey]) >= 0,
    }

    public webTreeGridUnitPriceCellClassesHandler = {
        downPrice: (rowData: any, columnKey: any): boolean => rowData[columnKey] <= 5,
        upPrice: (rowData: any, columnKey: any): boolean => rowData[columnKey] > 5,
    }

}

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

.allergensFont {
    color: royalblue !important;
}

.upPrice {
    color: red !important;
}

.downPrice {
    color: green !important;
}

cssコピー

Edit in: Codesandbox

• IgrColumn 入力を使用して、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取る cellStyles。

cellStyles と cellClasses の両方のコールバック シグネチャが次のように変更されました。

(rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean
ts

CellStyles の使用

列の cellStyles プロパティを公開。列セルの条件付きスタイリングが可能になりました。cellClasses と同様、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取ります。また、通常のスタイリングを簡単に適用できます (条件なし)。

次にスタイルを定義します。

const webTreeGridCellStyles = {
    background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
    color: (rowData, columnKey, cellValue, rowIndex) => {
        if (columnKey === "UnitPrice") {
            if (cellValue > 10) return "#dc3545";
            if (cellValue < 5) return "#28a745";
            if (cellValue >= 5 && cellValue <= 10) return "#17a2b8";
        }
    }
}
tsx

<IgrColumn cellStyles={webTreeGridCellStyles}></IgrColumn>
tsx

デモ

EXAMPLE

DATA

TSX

CSS

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

    public ID: number;
    public ParentID: number;
    public Name: string;
    public Category: string;
    public OrderDate: string;
    public Units: number;
    public UnitPrice: number;
    public Price: number;
    public Delivered: boolean;

}
export class OrdersTreeData extends Array<OrdersTreeDataItem> {
    public constructor(items: Array<OrdersTreeDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new OrdersTreeDataItem(
                {
                    ID: 1,
                    ParentID: -1,
                    Name: `Order 1`,
                    Category: ``,
                    OrderDate: `2010-02-17`,
                    Units: 1844,
                    UnitPrice: 3.73,
                    Price: 6884.38,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 101,
                    ParentID: 1,
                    Name: `Chocolate Chip Cookies`,
                    Category: `Cookies`,
                    OrderDate: `2010-02-17`,
                    Units: 834,
                    UnitPrice: 3.59,
                    Price: 2994.06,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 102,
                    ParentID: 1,
                    Name: `Red Apples`,
                    Category: `Fruit`,
                    OrderDate: `2010-02-17`,
                    Units: 371,
                    UnitPrice: 3.66,
                    Price: 1357.86,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 103,
                    ParentID: 1,
                    Name: `Butter`,
                    Category: `Diary`,
                    OrderDate: `2010-02-17`,
                    Units: 260,
                    UnitPrice: 3.45,
                    Price: 897,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 104,
                    ParentID: 1,
                    Name: `Potato Chips`,
                    Category: `Snack`,
                    OrderDate: `2010-02-17`,
                    Units: 118,
                    UnitPrice: 1.96,
                    Price: 231.28,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 105,
                    ParentID: 1,
                    Name: `Orange Juice`,
                    Category: `Beverages`,
                    OrderDate: `2010-02-17`,
                    Units: 261,
                    UnitPrice: 5.38,
                    Price: 1404.18,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 2,
                    ParentID: -1,
                    Name: `Order 2`,
                    Category: ``,
                    OrderDate: `2022-05-27`,
                    Units: 1831,
                    UnitPrice: 8.23,
                    Price: 15062.77,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 201,
                    ParentID: 2,
                    Name: `Frozen Shrimps`,
                    Category: `Seafood`,
                    OrderDate: `2022-05-27`,
                    Units: 120,
                    UnitPrice: 20.45,
                    Price: 2454,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 202,
                    ParentID: 2,
                    Name: `Ice Tea`,
                    Category: `Beverages`,
                    OrderDate: `2022-05-27`,
                    Units: 840,
                    UnitPrice: 7,
                    Price: 5880,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 203,
                    ParentID: 2,
                    Name: `Fresh Cheese`,
                    Category: `Diary`,
                    OrderDate: `2022-05-27`,
                    Units: 267,
                    UnitPrice: 16.55,
                    Price: 4418.85,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 204,
                    ParentID: 2,
                    Name: `Carrots`,
                    Category: `Vegetables`,
                    OrderDate: `2022-05-27`,
                    Units: 360,
                    UnitPrice: 2.77,
                    Price: 997.2,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 205,
                    ParentID: 2,
                    Name: `Apple Juice`,
                    Category: `Beverages`,
                    OrderDate: `2022-05-27`,
                    Units: 244,
                    UnitPrice: 5.38,
                    Price: 1312.72,
                    Delivered: false
                }),
                new OrdersTreeDataItem(
                {
                    ID: 3,
                    ParentID: -1,
                    Name: `Order 3`,
                    Category: ``,
                    OrderDate: `2022-08-04`,
                    Units: 1972,
                    UnitPrice: 3.47,
                    Price: 6849.18,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 301,
                    ParentID: 3,
                    Name: `Skimmed Milk 1L`,
                    Category: `Diary`,
                    OrderDate: `2022-08-04`,
                    Units: 1028,
                    UnitPrice: 3.56,
                    Price: 3659.68,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 302,
                    ParentID: 3,
                    Name: `Bananas 5 Pack`,
                    Category: `Fruit`,
                    OrderDate: `2022-08-04`,
                    Units: 370,
                    UnitPrice: 6.36,
                    Price: 2353.2,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 303,
                    ParentID: 3,
                    Name: `Cauliflower`,
                    Category: `Vegetables`,
                    OrderDate: `2022-08-04`,
                    Units: 283,
                    UnitPrice: 0.95,
                    Price: 268.85,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 304,
                    ParentID: 3,
                    Name: `White Chocolate Cookies`,
                    Category: `Cookies`,
                    OrderDate: `2022-08-04`,
                    Units: 291,
                    UnitPrice: 1.95,
                    Price: 567.45,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 4,
                    ParentID: -1,
                    Name: `Order 4`,
                    Category: ``,
                    OrderDate: `2023-01-04`,
                    Units: 1065,
                    UnitPrice: 5.56,
                    Price: 5923.5,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 401,
                    ParentID: 4,
                    Name: `Mini Milk Chocolate Cookie Bites`,
                    Category: `Cookies`,
                    OrderDate: `2023-01-04`,
                    Units: 68,
                    UnitPrice: 2.25,
                    Price: 153,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 402,
                    ParentID: 4,
                    Name: `Wild Salmon Fillets`,
                    Category: `Seafood`,
                    OrderDate: `2023-01-04`,
                    Units: 320,
                    UnitPrice: 16.15,
                    Price: 5168,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 403,
                    ParentID: 4,
                    Name: `Diet Lemonade`,
                    Category: `Beverages`,
                    OrderDate: `2023-01-04`,
                    Units: 437,
                    UnitPrice: 0.5,
                    Price: 218.5,
                    Delivered: true
                }),
                new OrdersTreeDataItem(
                {
                    ID: 404,
                    ParentID: 4,
                    Name: `Potatoes`,
                    Category: `Vegetables`,
                    OrderDate: `2023-01-04`,
                    Units: 240,
                    UnitPrice: 1.6,
                    Price: 384,
                    Delivered: true
                }),
            ];
            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 } from "@infragistics/igniteui-react-grids";
import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';

import "@infragistics/igniteui-react-grids/grids/combined";
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({});
    }
    private column1: IgrColumn
    private column2: IgrColumn
    private column3: IgrColumn
    private column4: IgrColumn

    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
                    ref={this.treeGridRef}
                    id="treeGrid"
                    data={this.ordersTreeData}
                    primaryKey="ID"
                    foreignKey="ParentID">
                    <IgrColumn
                        field="ID"
                        header="Order ID"
                        dataType="string"
                        cellStyles={this.webTreeGridCellStylesHandler}
                        name="column1">
                    </IgrColumn>
                    <IgrColumn
                        field="Name"
                        header="Order Product"
                        dataType="string"
                        cellStyles={this.webTreeGridCellStylesHandler}
                        name="column2">
                    </IgrColumn>
                    <IgrColumn
                        field="UnitPrice"
                        header="Unit Price"
                        dataType="currency"
                        cellStyles={this.webTreeGridCellStylesHandler}
                        name="column3">
                    </IgrColumn>
                    <IgrColumn
                        field="OrderDate"
                        header="Order Date"
                        cellStyles={this.webTreeGridCellStylesHandler}
                        name="column4">
                    </IgrColumn>
                </IgrTreeGrid>
            </div>
        </div>
        );
    }

    private _ordersTreeData: OrdersTreeData = null;
    public get ordersTreeData(): OrdersTreeData {
        if (this._ordersTreeData == null)
        {
            this._ordersTreeData = new OrdersTreeData();
        }
        return this._ordersTreeData;
    }


    public webTreeGridCellStylesHandler = {
        background: (rowData: any, columnKey: any, cellValue: any, rowIndex: any) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
        color: (rowData: any, columnKey: any, cellValue: any, rowIndex: any) => {
            if (columnKey === "UnitPrice") {
                if (cellValue > 10) return "#dc3545";
                if (cellValue < 5) return "#28a745";
                if (cellValue >= 5 && cellValue <= 10) return "#17a2b8";
            }
            return undefined;
        }
    };

}

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

既知の問題と制限

• 他の列に同じ条件でバインドされたセルがある場合に、そのうち 1 つのセルが更新された際に条件が満たされている場合も、他のセルが新しい値に基づいて更新されない問題。

let backgroundClasses = {
    myBackground: (rowData: any, columnKey: string) => {
        return rowData.Col2 < 10;
    }
};

function editDone(grid, evt) {
    backgroundClasses = {...backgroundClasses};
}

<IgrTreeGrid id="grid1" height="500px" width="100%" onCellEdit={editDone}>
  <IgrColumn id="Col1" field="Col1" dataType="number" cellClasses={backgroundClasses}></IgrColumn>
  <IgrColumn id="Col2" field="Col2" dataType="number" editable="true" cellClasses={backgroundClasses}></IgrColumn>
  <IgrColumn id="Col3" field="Col3" header="Col3" dataType="string" cellClasses={backgroundClasses}></IgrColumn>
</IgrTreeGrid>
tsx

API リファレンス

• IgrColumn
• IgrTreeGrid

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)