React Tree Grid の Excel スタイル フィルタリング

React Tree Grid は、Excel のようなフィルタリング UI を提供する Excel スタイルのフィルタリング機能を公開します。これにより、大規模なデータセットを操作するプロセスが簡素化されます。主なアイデアは、無関係なエントリを排除しながら、最も関連性の高いデータをフィルタリングできるようにすることです。

React Tree Grid Excel スタイル フィルタリングの例

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 { IgrGridModule } from "@infragistics/igniteui-react-grids";
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts";
import { IgrTreeGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { FoodsDataItem, FoodsData } from './FoodsData';
import { IgrPropertyEditorPropertyDescriptionChangedEventArgs } from "@infragistics/igniteui-react-layouts";
import { IgrCellTemplateContext } from "@infragistics/igniteui-react-grids";

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

const mods: any[] = [
    IgrPropertyEditorPanelModule,
    IgrGridModule
];
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 sizeEditor: 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.webTreeGridSetGridSize = this.webTreeGridSetGridSize.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="WebGrid"
                    isHorizontal="true"
                    isWrappingEnabled="true">
                    <IgrPropertyEditorPropertyDescription
                        name="SizeEditor"
                        label="Grid Size:"
                        valueType="EnumValue"
                        dropDownNames={["Small", "Medium", "Large"]}
                        dropDownValues={["Small", "Medium", "Large"]}
                        changed={this.webTreeGridSetGridSize}>
                    </IgrPropertyEditorPropertyDescription>
                </IgrPropertyEditorPanel>
            </div>

            <div className="container fill">
                <IgrTreeGrid
                    autoGenerate={false}
                    id="treeGrid"
                    ref={this.treeGridRef}
                    data={this.foodsData}
                    primaryKey="ID"
                    foreignKey="ParentID"
                    moving={true}
                    allowFiltering={true}
                    filterMode="excelStyleFilter">
                    <IgrGridToolbar
                    >
                        <IgrGridToolbarActions
                        >
                            <IgrGridToolbarHiding
                            >
                            </IgrGridToolbarHiding>
                            <IgrGridToolbarPinning
                            >
                            </IgrGridToolbarPinning>
                        </IgrGridToolbarActions>
                    </IgrGridToolbar>
                    <IgrColumn
                        field="ID"
                        header="ID"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Name"
                        header="Product Name"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="UnitPrice"
                        header="Unit Price"
                        sortable={true}
                        dataType="currency">
                    </IgrColumn>
                    <IgrColumn
                        field="AddedDate"
                        header="Added Date"
                        sortable={true}
                        dataType="date">
                    </IgrColumn>
                    <IgrColumn
                        field="Discontinued"
                        dataType="boolean"
                        bodyTemplate={this.webGridBooleanCellTemplate}>
                    </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);
            WebGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public webTreeGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
        var newVal = (args.newValue as string).toLowerCase();
        var grid = document.getElementById("treeGrid");
        grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
    }

    public webGridBooleanCellTemplate = (props: {dataContext: IgrCellTemplateContext}) => {
        if (props.dataContext.cell.value) {
            return (
                <img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />
            );
        } else {
            return (
                <img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
            );
        }
    }

}

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

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

使用方法

IgrTreeGrid コンポーネントの Excel スタイル フィルタリングをオンにするには、2 つの入力を設定します。allowFiltering を true に設定し、filterMode を ExcelStyleFilter に設定してください。

<IgrTreeGrid data={nwindData} autoGenerate={true} allowFiltering={true} filterMode="excelStyleFilter">
</IgrTreeGrid>
tsx

インタラクション

特定の列のフィルター メニューを開くには、ヘッダーの React フィルター アイコンをクリックします。さらに、選択したヘッダーで Ctrl + Shift + L の組み合わせを使用できます。列でフィルタリング機能とソート、ピン固定、移動、選択、非表示が設定された場合、オンになっている機能のボタンが表示されます。

フィルターが適用されていない場合、リストのすべての項目が選択されます￥。リストの上の入力からフィルターされます。データのフィルターは、リストで項目を選択/非選択して [適用] ボタンをクリックするか、あるいは Enter. を押します。リスト項目に適用したフィルタリングは、equals オペレーターでフィルター式を作成します。各式間のロジック オペレーターは OR です。

検索ボックスに入力してフィルターを適用すると、検索条件に一致する項目のみが選択されます。ただし、現在フィルターされている項目に項目を追加したい場合は、[現在の選択をフィルターに追加] オプションを選択する必要があります。

フィルターをクリアしたい場合、[すべて選択] オプションをチェックして [適用] ボタンを押します。

異なる式でフィルターを適用する場合、テキスト フィルターをクリックし、特定の列で使用できるフィルター演算子のサブメニューを開きます。いずれかを選択してカスタム フィルター ダイアログを開き、フィルターとロジック演算子を使用して式を追加できます。[クリア] ボタンでフィルターをクリアできます。

メニュー機能の構成

ソート、ピン固定、および非表示機能は、対応する入力を使用してフィルター メニューから削除できます: sortable、selected、disablePinning、disableHiding。

以下のサンプルでは、「Product Name」 列と 「Discontinued」 列で 3 つの機能がすべて有効化され、「Unit Price」 で 3 つすべてが無効化され、「Added Date」 でピン固定と非表示のみが設定されています。

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 { IgrGridModule } from "@infragistics/igniteui-react-grids";
import { IgrTreeGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, WebGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { FoodsDataItem, FoodsData } from './FoodsData';
import { IgrCellTemplateContext } from "@infragistics/igniteui-react-grids";

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

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

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

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

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

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

            <div className="container fill">
                <IgrTreeGrid
                    autoGenerate={false}
                    ref={this.gridRef}
                    data={this.foodsData}
                    primaryKey="ID"
                    foreignKey="ParentID"
                    moving={true}
                    allowFiltering={true}
                    filterMode="excelStyleFilter">
                    <IgrGridToolbar
                    >
                        <IgrGridToolbarActions
                        >
                            <IgrGridToolbarHiding
                            >
                            </IgrGridToolbarHiding>
                            <IgrGridToolbarPinning
                            >
                            </IgrGridToolbarPinning>
                        </IgrGridToolbarActions>
                    </IgrGridToolbar>
                    <IgrColumn
                        field="ID"
                        header="ID">
                    </IgrColumn>
                    <IgrColumn
                        field="Name"
                        header="Product Name"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="UnitPrice"
                        header="Unit Price"
                        sortable={false}
                        dataType="number"
                        disablePinning={true}
                        disableHiding={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="AddedDate"
                        header="Added Date"
                        sortable={false}
                        dataType="date">
                    </IgrColumn>
                    <IgrColumn
                        field="Discontinued"
                        dataType="boolean"
                        bodyTemplate={this.webGridBooleanCellTemplate}
                        sortable={true}>
                    </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;
            WebGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public webGridBooleanCellTemplate = (props: {dataContext: IgrCellTemplateContext}) => {
        if (props.dataContext.cell.value) {
            return (
                <img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />
            );
        } else {
            return (
                <img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
            );
        }
    }

}

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

テンプレート

Excel スタイル フィルター メニューをさらにカスタマイズする場合は、excelStyleHeaderIconTemplate プロパティを使用して、メニューのヘッダー アイコンのカスタム テンプレートを定義できます。

次のコードは、excelStyleHeaderIconTemplate を使用して Excel スタイル フィルター メニューをカスタマイズする方法を示しています。

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 { IgrGridModule } from "@infragistics/igniteui-react-grids";
import { IgrTreeGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarHiding, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, WebGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { FoodsDataItem, FoodsData } from './FoodsData';
import { IgrGridHeaderTemplateContext, IgrCellTemplateContext } from "@infragistics/igniteui-react-grids";

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

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

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

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

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

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

            <div className="container fill">
                <IgrTreeGrid
                    autoGenerate={false}
                    ref={this.gridRef}
                    data={this.foodsData}
                    primaryKey="ID"
                    foreignKey="ParentID"
                    moving={true}
                    allowFiltering={true}
                    filterMode="excelStyleFilter"
                    excelStyleHeaderIconTemplate={this.webGridFilterAltIconTemplate}>
                    <IgrGridToolbar
                    >
                        <IgrGridToolbarActions
                        >
                            <IgrGridToolbarHiding
                            >
                            </IgrGridToolbarHiding>
                        </IgrGridToolbarActions>
                    </IgrGridToolbar>
                    <IgrColumn
                        field="ID"
                        header="ID"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Name"
                        header="Product Name"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="UnitPrice"
                        header="Unit Price"
                        sortable={true}
                        dataType="currency">
                    </IgrColumn>
                    <IgrColumn
                        field="AddedDate"
                        header="Added Date"
                        sortable={true}
                        dataType="date">
                    </IgrColumn>
                    <IgrColumn
                        field="Discontinued"
                        dataType="boolean"
                        bodyTemplate={this.webGridBooleanCellTemplate}>
                    </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;
            WebGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public webGridFilterAltIconTemplate = (props: { dataContext: IgrGridHeaderTemplateContext }) => {
        return (
            <img height="15px" width="15px" src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" title="Continued" alt="Continued" />
        );
    }

    public webGridBooleanCellTemplate = (props: {dataContext: IgrCellTemplateContext}) => {
        if (props.dataContext.cell.value) {
            return (
                <img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />
            );
        } else {
            return (
                <img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
            );
        }
    }

}

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

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

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

次に、そのクラスに関連する CSS プロパティを設定します。

.grid {
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-list-item-background: #ffcd0f;
}
css

デモ

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 { IgrGridModule } from "@infragistics/igniteui-react-grids";
import { IgrTreeGrid, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, WebGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { FoodsDataItem, FoodsData } from './FoodsData';
import { IgrCellTemplateContext } from "@infragistics/igniteui-react-grids";

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

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

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

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

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

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

            <div className="container fill">
                <IgrTreeGrid
                    autoGenerate={false}
                    ref={this.gridRef}
                    id="grid"
                    data={this.foodsData}
                    primaryKey="ID"
                    foreignKey="ParentID"
                    moving={true}
                    allowFiltering={true}
                    filterMode="excelStyleFilter">
                    <IgrColumn
                        field="ID"
                        header="ID"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Name"
                        header="Product Name"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="UnitPrice"
                        header="Unit Price"
                        sortable={true}
                        dataType="currency">
                    </IgrColumn>
                    <IgrColumn
                        field="AddedDate"
                        header="Added Date"
                        sortable={true}
                        dataType="date">
                    </IgrColumn>
                    <IgrColumn
                        field="Discontinued"
                        dataType="boolean"
                        bodyTemplate={this.webGridBooleanCellTemplate}>
                    </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;
            WebGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public webGridBooleanCellTemplate = (props: {dataContext: IgrCellTemplateContext}) => {
        if (props.dataContext.cell.value) {
            return (
                <img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />
            );
        } else {
            return (
                <img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
            );
        }
    }

}

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

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

    #grid {
        --ig-grid-filtering-row-background: #ffcd0f;
        --ig-button-background: #FFCD0F;
        --ig-button-foreground: #292826;
        --ig-button-hover-background: #292826;
        --ig-button-hover-foreground: #ffcd0f;

        --ig-list-background: #FFCD0F;
        --ig-list-item-background: #FFCD0F;
        --ig-list-item-background-hover: #c2b1b1bd;

        --ig-checkbox-empty-color: #292826;
        --ig-checkbox-fill-color: #292826;
        --ig-checkbox-tick-color: #FFCD0F;
        --ig-checkbox-label-color: #292826;

        --ig-drop-down-background-color: #FFCD0F;
        --ig-drop-down-item-text-color: #292826;
        --ig-drop-down-item-background: #FFCD0F;
        --ig-drop-down-item-text-color: #292826;
        --ig-drop-down-focused-item-background: #c2b1b1bd;
    }

cssコピー

Edit in: Codesandbox

API リファレンス

• IgrColumn
• IgrTreeGrid

その他のリソース

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

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