React Hierarchical Grid 列選択の概要

React Hierarchical Grid の Ignite UI for React 列選択機能は、シングルクリックで列全体を選択してハイライト表示する、簡略化された Excel のような方法を提供します。これは columnSelection 入力を通じて有効にできます。豊富な API のおかげで、この機能により、選択状態の操作、選択された部分からのデータ抽出、データ分析操作、視覚化が簡単に行えます。

React Hierarchical Grid 列選択の例

以下のサンプルは、IgrHierarchicalGrid の 3 種類の列選択動作を示しています。以下の列選択ドロップダウンを使用して、利用可能な各選択モードを有効にします。

*Photo および Debut の列選択が無効になっています。

EXAMPLE

TSX

CSS

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

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

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

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

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

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

        this.propertyEditorRef = this.propertyEditorRef.bind(this);
        this.hierarchicalGridRef = this.hierarchicalGridRef.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.hierarchicalGrid}
                    descriptionType="WebHierarchicalGrid"
                    isHorizontal="true"
                    isWrappingEnabled="true">
                    <IgrPropertyEditorPropertyDescription
                        propertyPath="ColumnSelection"
                        name="columnSelectionEditor"
                        label="Column Selection">
                    </IgrPropertyEditorPropertyDescription>
                </IgrPropertyEditorPanel>
            </div>

            <div className="container fill">
                <IgrHierarchicalGrid
                    autoGenerate={false}
                    data={this.singersData}
                    ref={this.hierarchicalGridRef}
                    id="hierarchicalGrid"
                    primaryKey="ID"
                    allowFiltering={true}
                    columnSelection="single">
                    <IgrColumn
                        field="Artist"
                        header="Artist">
                    </IgrColumn>
                    <IgrColumn
                        field="Photo"
                        header="Photo"
                        dataType="image"
                        selectable={false}>
                    </IgrColumn>
                    <IgrColumn
                        field="Debut"
                        header="Debut"
                        dataType="number"
                        selectable={false}>
                    </IgrColumn>
                    <IgrColumn
                        field="GrammyNominations"
                        header="Grammy Nominations">
                    </IgrColumn>
                    <IgrColumn
                        field="GrammyAwards"
                        header="Grammy Awards">
                    </IgrColumn>
                    <IgrRowIsland
                        childDataKey="Albums"
                        autoGenerate={false}
                        columnSelection="single">
                        <IgrColumn
                            field="Album"
                            header="Album">
                        </IgrColumn>
                        <IgrColumn
                            field="LaunchDate"
                            header="Launch Date"
                            dataType="date"
                            selectable={false}>
                        </IgrColumn>
                        <IgrColumn
                            field="BillboardReview"
                            header="Billboard Review">
                        </IgrColumn>
                        <IgrColumn
                            field="USBillboard200"
                            header="US Billboard 200">
                        </IgrColumn>
                        <IgrRowIsland
                            childDataKey="Songs"
                            autoGenerate={false}
                            columnSelection="single">
                            <IgrColumn
                                field="Number"
                                header="No.">
                            </IgrColumn>
                            <IgrColumn
                                field="Title"
                                header="Title">
                            </IgrColumn>
                            <IgrColumn
                                field="Released"
                                header="Released"
                                dataType="date"
                                selectable={false}>
                            </IgrColumn>
                            <IgrColumn
                                field="Genre"
                                header="Genre">
                            </IgrColumn>
                        </IgrRowIsland>
                    </IgrRowIsland>
                    <IgrRowIsland
                        childDataKey="Tours"
                        autoGenerate={false}
                        columnSelection="single">
                        <IgrColumn
                            field="Tour"
                            header="Tour"
                            selectable={false}>
                        </IgrColumn>
                        <IgrColumn
                            field="StartedOn"
                            header="Started on"
                            selectable={false}>
                        </IgrColumn>
                        <IgrColumn
                            field="Location"
                            header="Location"
                            selectable={false}>
                        </IgrColumn>
                        <IgrColumn
                            field="Headliner"
                            header="Headliner">
                        </IgrColumn>
                    </IgrRowIsland>
                </IgrHierarchicalGrid>
            </div>
        </div>
        );
    }

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

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

}

// 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ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

基本的な使用方法

列選択機能は、GridSelectionMode 値を受け取る columnSelection 入力によって有効にすることができます。

インタラクション

デフォルトの選択モードは None です。Single または Multiple に設定されると、すべての列は selectable になります。列を選択するには、列をクリックして selected としてマークします。列が選択不可な場合、ホバー時に選択スタイルはヘッダーに適用されません。

複数列ヘッダー機能は selectable 入力に反映されません。その子の 1 つ以上で選択動作が有効な場合、ColumnGroupComponent は selectable です。さらに、すべての selectable 子孫が selected である場合、コンポーネントは selected としてマークされます。

*Location 列グループでは、City 列のみを選択できます。

EXAMPLE

TSX

CSS

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

import { IgrHierarchicalGridModule, IgrColumnGroupModule } from "@infragistics/igniteui-react-grids";
import { IgrHierarchicalGrid, IgrColumnGroup, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids";
import HierarchicalCustomers from './HierarchicalCustomers.json';

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

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

export default class Sample extends React.Component<any, any> {
    private hierarchicalGrid1: IgrHierarchicalGrid
    private hierarchicalGrid1Ref(r: IgrHierarchicalGrid) {
        this.hierarchicalGrid1 = r;
        this.setState({});
    }

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

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

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

            <div className="container fill">
                <IgrHierarchicalGrid
                    data={this.hierarchicalCustomers}
                    columnSelection="multiple"
                    ref={this.hierarchicalGrid1Ref}>
                    <IgrColumnGroup
                        header="General Information">
                        <IgrColumn
                            field="Company"
                            header="Company">
                        </IgrColumn>
                        <IgrColumnGroup
                            header="Personal Details">
                            <IgrColumn
                                field="ContactName"
                                header="Name">
                            </IgrColumn>
                            <IgrColumn
                                field="ContactTitle"
                                header="Title">
                            </IgrColumn>
                        </IgrColumnGroup>
                    </IgrColumnGroup>
                    <IgrColumnGroup
                        header="Address Information">
                        <IgrColumnGroup
                            header="Location">
                            <IgrColumn
                                field="Address"
                                header="Address"
                                selectable={false}>
                            </IgrColumn>
                            <IgrColumn
                                field="City"
                                header="City">
                            </IgrColumn>
                            <IgrColumn
                                field="PostalCode"
                                header="Postal Code"
                                selectable={false}>
                            </IgrColumn>
                            <IgrColumn
                                field="Country"
                                header="Country"
                                selectable={false}>
                            </IgrColumn>
                        </IgrColumnGroup>
                        <IgrColumnGroup
                            header="Contact Information">
                            <IgrColumn
                                field="Phone">
                            </IgrColumn>
                            <IgrColumn
                                field="Fax">
                            </IgrColumn>
                        </IgrColumnGroup>
                    </IgrColumnGroup>
                    <IgrRowIsland
                        childDataKey="Orders"
                        autoGenerate={false}
                        columnSelection="multiple">
                        <IgrColumnGroup
                            header="Order Information">
                            <IgrColumnGroup
                                header="Order Details">
                                <IgrColumn
                                    field="OrderID">
                                </IgrColumn>
                                <IgrColumn
                                    field="EmployeeID">
                                </IgrColumn>
                                <IgrColumn
                                    field="OrderDate"
                                    dataType="date">
                                </IgrColumn>
                                <IgrColumn
                                    field="RequiredDate"
                                    dataType="date">
                                </IgrColumn>
                            </IgrColumnGroup>
                            <IgrColumnGroup
                                header="General Shipping Information">
                                <IgrColumn
                                    field="ShippedDate"
                                    dataType="date">
                                </IgrColumn>
                                <IgrColumn
                                    field="ShipVia"
                                    selectable={false}>
                                </IgrColumn>
                                <IgrColumn
                                    field="Freight"
                                    selectable={false}>
                                </IgrColumn>
                                <IgrColumn
                                    field="ShipName">
                                </IgrColumn>
                            </IgrColumnGroup>
                            <IgrColumnGroup
                                header="Shipping Location">
                                <IgrColumn
                                    field="ShipAddress">
                                </IgrColumn>
                                <IgrColumn
                                    field="ShipCity">
                                </IgrColumn>
                                <IgrColumn
                                    field="ShipPostalCode">
                                </IgrColumn>
                                <IgrColumn
                                    field="ShipCountry">
                                </IgrColumn>
                            </IgrColumnGroup>
                        </IgrColumnGroup>
                        <IgrRowIsland
                            childDataKey="OrderDetails"
                            autoGenerate={false}
                            columnSelection="single">
                            <IgrColumn
                                field="ProductID">
                            </IgrColumn>
                            <IgrColumn
                                field="UnitPrice">
                            </IgrColumn>
                            <IgrColumn
                                field="Quantity"
                                selectable={false}>
                            </IgrColumn>
                            <IgrColumn
                                field="Discount">
                            </IgrColumn>
                        </IgrRowIsland>
                    </IgrRowIsland>
                </IgrHierarchicalGrid>
            </div>
        </div>
        );
    }

    private _hierarchicalCustomers: any[] = HierarchicalCustomers;
    public get hierarchicalCustomers(): any[] {
        return this._hierarchicalCustomers;
    }

}

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

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

Edit in: Codesandbox

キーボードの組み合わせ

キーボードの組み合わせは、グリッドの columnSelection 入力が multiple に設定されている場合にのみ使用できます。

列の選択機能のキーボード ナビゲーションには 2 つのオプションがあります。

• 複数列選択 - Ctrl キーを押しながら、すべての選択可能なヘッダー セルを クリック。
• 範囲列の選択 - Shift キーを押しながら + クリック、間にあるすべての選択可能な列を選択します。

API 操作

API は、非表示列に関していくつかの追加機能を提供し、対応する setter を設定することにより、すべての非表示列を selected としてマークできます。

上記は ColumnGroupComponent にも適用されますが、selected プロパティを変更する場合、その子孫の状態を変更します。

API 操作の詳細については、API リファレンス セクションを参照してください。

スタイル設定

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

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

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

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

デモ

EXAMPLE

TSX

CSS

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

import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids";
import { IgrHierarchicalGrid, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids";
import SingersData from './SingersData.json';

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

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

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

    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">
                <IgrHierarchicalGrid
                    autoGenerate={false}
                    data={this.singersData}
                    ref={this.gridRef}
                    id="grid"
                    primaryKey="ID"
                    allowFiltering={true}
                    columnSelection="single">
                    <IgrColumn
                        field="Artist"
                        header="Artist">
                    </IgrColumn>
                    <IgrColumn
                        field="Photo"
                        header="Photo"
                        dataType="image"
                        selectable={false}>
                    </IgrColumn>
                    <IgrColumn
                        field="Debut"
                        header="Debut"
                        dataType="number"
                        selectable={false}>
                    </IgrColumn>
                    <IgrColumn
                        field="GrammyNominations"
                        header="Grammy Nominations">
                    </IgrColumn>
                    <IgrColumn
                        field="GrammyAwards"
                        header="Grammy Awards">
                    </IgrColumn>
                    <IgrRowIsland
                        childDataKey="Albums"
                        autoGenerate={false}
                        columnSelection="multiple">
                        <IgrColumn
                            field="Album"
                            header="Album">
                        </IgrColumn>
                        <IgrColumn
                            field="LaunchDate"
                            header="Launch Date"
                            dataType="date"
                            selectable={false}>
                        </IgrColumn>
                        <IgrColumn
                            field="BillboardReview"
                            header="Billboard Review">
                        </IgrColumn>
                        <IgrColumn
                            field="USBillboard200"
                            header="US Billboard 200">
                        </IgrColumn>
                        <IgrRowIsland
                            childDataKey="Songs"
                            autoGenerate={false}
                            columnSelection="multiple">
                            <IgrColumn
                                field="Number"
                                header="No.">
                            </IgrColumn>
                            <IgrColumn
                                field="Title"
                                header="Title">
                            </IgrColumn>
                            <IgrColumn
                                field="Released"
                                header="Released"
                                dataType="date"
                                selectable={false}>
                            </IgrColumn>
                            <IgrColumn
                                field="Genre"
                                header="Genre">
                            </IgrColumn>
                        </IgrRowIsland>
                    </IgrRowIsland>
                    <IgrRowIsland
                        childDataKey="Tours"
                        autoGenerate={false}
                        columnSelection="single">
                        <IgrColumn
                            field="Tour"
                            header="Tour"
                            selectable={false}>
                        </IgrColumn>
                        <IgrColumn
                            field="StartedOn"
                            header="Started on"
                            selectable={false}>
                        </IgrColumn>
                        <IgrColumn
                            field="Location"
                            header="Location"
                            selectable={false}>
                        </IgrColumn>
                        <IgrColumn
                            field="Headliner"
                            header="Headliner">
                        </IgrColumn>
                    </IgrRowIsland>
                </IgrHierarchicalGrid>
            </div>
        </div>
        );
    }

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

}

// 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-row-selected-background: #0062A3;
    --ig-grid-row-selected-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
    --ig-grid-header-selected-text-color: #ecaa53;
    --ig-grid-header-selected-background: #0062A3;
    --ig-grid-row-selected-hover-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
}

cssコピー

Edit in: Codesandbox

API リファレンス

以下は、列選択 UI のその他の API です。

• IgrHierarchicalGrid
• IgrColumn
• columnGroup

IgrHierarchicalGrid プロパティ:

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

IgrColumn プロパティ:

• selectable
• selected

columnGroup プロパティ:

• selectable
• selected

IgrHierarchicalGrid イベント:

• OnColumnsSelectionChange

その他のリソース

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

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