React Hierarchical Grid Export to Excel サービス
React Hierarchical Grid の Ignite UI for React Export to Excel サービスは、データを Excel へエクスポートできます。エクスポート機能は、ExcelExporterService クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式ではフィルタリングやソートなどの機能が使用でき、ExcelExporterService の Export メソッドを呼び出して最初の引数として IgrHierarchicalGrid コンポーネントを渡し、グリッドを簡単にエクスポートします。
React Excel Exporter の例
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrGridToolbarModule, IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids";
import { IgrHierarchicalGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids";
import SingersExportData from './SingersExportData.json';
import "@infragistics/igniteui-react-grids/grids/combined";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
const mods: any[] = [
IgrGridToolbarModule,
IgrHierarchicalGridModule
];
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
autoGenerate={false}
data={this.singersExportData}
primaryKey="ID"
allowFiltering={true}
filterMode="excelStyleFilter"
ref={this.hierarchicalGrid1Ref}>
<IgrGridToolbar
>
<IgrGridToolbarActions
>
<IgrGridToolbarExporter
exportCSV={false}
exportExcel={true}>
</IgrGridToolbarExporter>
</IgrGridToolbarActions>
</IgrGridToolbar>
<IgrColumn
field="Artist"
header="Artist"
dataType="string"
sortable={true}>
</IgrColumn>
<IgrColumn
field="Debut"
header="Debut"
dataType="number">
</IgrColumn>
<IgrColumn
field="GrammyNominations"
header="Grammy Nominations"
dataType="number"
sortable={true}>
</IgrColumn>
<IgrColumn
field="GrammyAwards"
header="Grammy Awards"
dataType="number"
sortable={true}>
</IgrColumn>
<IgrRowIsland
childDataKey="Albums"
autoGenerate={false}>
<IgrColumn
field="Album"
header="Album"
dataType="string">
</IgrColumn>
<IgrColumn
field="LaunchDate"
header="Launch Date"
dataType="date">
</IgrColumn>
<IgrColumn
field="BillboardReview"
header="Billboard Review"
dataType="string">
</IgrColumn>
<IgrColumn
field="USBillboard200"
header="US Billboard 200"
dataType="string">
</IgrColumn>
<IgrRowIsland
childDataKey="Songs"
autoGenerate={false}>
<IgrColumn
field="Number"
header="No."
dataType="string">
</IgrColumn>
<IgrColumn
field="Title"
header="Title"
dataType="string">
</IgrColumn>
<IgrColumn
field="Released"
header="Released"
dataType="date">
</IgrColumn>
<IgrColumn
field="Genre"
header="Genre"
dataType="string">
</IgrColumn>
</IgrRowIsland>
</IgrRowIsland>
<IgrRowIsland
childDataKey="Tours"
autoGenerate={false}>
<IgrColumn
field="Tour"
header="Tour"
dataType="string">
</IgrColumn>
<IgrColumn
field="StartedOn"
header="Started on"
dataType="string">
</IgrColumn>
<IgrColumn
field="Location"
header="Location"
dataType="string">
</IgrColumn>
<IgrColumn
field="Headliner"
header="Headliner"
dataType="string">
</IgrColumn>
<IgrRowIsland
childDataKey="TourData"
autoGenerate={false}>
<IgrColumn
field="Country"
header="Country"
dataType="string">
</IgrColumn>
<IgrColumn
field="TicketsSold"
header="Tickets Sold"
dataType="number">
</IgrColumn>
<IgrColumn
field="Attendants"
header="Attendants"
dataType="number">
</IgrColumn>
</IgrRowIsland>
</IgrRowIsland>
</IgrHierarchicalGrid>
</div>
</div>
);
}
private _singersExportData: any[] = SingersExportData;
public get singersExportData(): any[] {
return this._singersExportData;
}
}
// 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
このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
複数列ヘッダー グリッドのエクスポート
定義された複数列ヘッダーを使用して IgrHierarchicalGrid をエクスポートできるようになりました。すべてのヘッダーは、IgrHierarchicalGrid に表示されるときに、エクスポートされた Excel ファイルに反映されます。エクスポートされたデータから定義された複数列ヘッダーを除外する場合は、ExporterOption IgnoreMultiColumnHeaders を true に設定できます。
Excel テーブルは複数の列ヘッダーをサポートしていないため、エクスポートされた IgrHierarchicalGrid はテーブルとしてフォーマットされません。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrGridToolbarModule, IgrColumnGroupModule, IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids";
import { IgrHierarchicalGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter, IgrColumnGroup, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids";
import MultiColumnsExportData from './MultiColumnsExportData.json';
import { IgrExporterEventArgs } 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[] = [
IgrGridToolbarModule,
IgrColumnGroupModule,
IgrHierarchicalGridModule
];
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({});
}
private hGridToolbarExporter: IgrGridToolbarExporter
constructor(props: any) {
super(props);
this.hierarchicalGrid1Ref = this.hierarchicalGrid1Ref.bind(this);
this.webHierarchicalGridExportMultiColumnHeaders = this.webHierarchicalGridExportMultiColumnHeaders.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="container fill">
<IgrHierarchicalGrid
autoGenerate={false}
data={this.multiColumnsExportData}
primaryKey="ID"
moving={true}
allowFiltering={true}
ref={this.hierarchicalGrid1Ref}>
<IgrGridToolbar
>
<IgrGridToolbarActions
>
<IgrGridToolbarExporter
exportCSV={false}
exportExcel={true}
name="hGridToolbarExporter"
exportStarted={this.webHierarchicalGridExportMultiColumnHeaders}>
</IgrGridToolbarExporter>
</IgrGridToolbarActions>
</IgrGridToolbar>
<IgrColumnGroup
header="General Information">
<IgrColumn
field="Company"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumnGroup
header="Personal Details">
<IgrColumn
field="ContactName"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumn
field="ContactTitle"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
</IgrColumnGroup>
</IgrColumnGroup>
<IgrColumnGroup
header="Address Information">
<IgrColumnGroup
header="Location">
<IgrColumn
field="Address"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumn
field="City"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumn
field="PostalCode"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumn
field="Country"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
</IgrColumnGroup>
<IgrColumnGroup
header="Contact Information">
<IgrColumn
field="Phone"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumn
field="Fax"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
</IgrColumnGroup>
</IgrColumnGroup>
<IgrRowIsland
childDataKey="ChildCompanies"
autoGenerate={false}
moving={true}>
<IgrColumnGroup
header="General Information">
<IgrColumn
field="Company"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumnGroup
header="Personal Details">
<IgrColumn
field="ContactName"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumn
field="ContactTitle"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
</IgrColumnGroup>
</IgrColumnGroup>
<IgrColumnGroup
header="Address Information">
<IgrColumnGroup
header="Location">
<IgrColumn
field="Address"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumn
field="City"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumn
field="PostalCode"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumn
field="Country"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
</IgrColumnGroup>
<IgrColumnGroup
header="Contact Information">
<IgrColumn
field="Phone"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumn
field="Fax"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
</IgrColumnGroup>
</IgrColumnGroup>
<IgrRowIsland
childDataKey="ChildCompanies"
autoGenerate={false}
moving={true}>
<IgrColumnGroup
header="General Information">
<IgrColumn
field="Company"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumnGroup
header="Personal Details">
<IgrColumn
field="ContactName"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumn
field="ContactTitle"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
</IgrColumnGroup>
</IgrColumnGroup>
<IgrColumnGroup
header="Address Information">
<IgrColumnGroup
header="Location">
<IgrColumn
field="Address"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumn
field="City"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumn
field="PostalCode"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumn
field="Country"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
</IgrColumnGroup>
<IgrColumnGroup
header="Contact Information">
<IgrColumn
field="Phone"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
<IgrColumn
field="Fax"
dataType="string"
sortable={true}
resizable={true}>
</IgrColumn>
</IgrColumnGroup>
</IgrColumnGroup>
</IgrRowIsland>
</IgrRowIsland>
</IgrHierarchicalGrid>
</div>
</div>
);
}
private _multiColumnsExportData: any[] = MultiColumnsExportData;
public get multiColumnsExportData(): any[] {
return this._multiColumnsExportData;
}
public webHierarchicalGridExportMultiColumnHeaders(sender: IgrGridToolbarExporter, args: IgrExporterEventArgs): void {
if (args.detail.options) {
args.detail.options.ignoreMultiColumnHeaders = false;
}
}
}
// 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
固定された列ヘッダーを使用してグリッドをエクスポートする
デフォルトでは、Excel エクスポーター サービスは、スクロール可能な (固定されていない) 列ヘッダーを使用してグリッドをエクスポートします。エクスポートされた Excel ファイルの上にあるすべてのヘッダーを固定して、ユーザーがレコードをスクロールしても常に表示されたままにするシナリオがあります。これを実現するには、ExporterOption FreezeHeaders を true に設定します。
function exportEventFreezeHeaders(grid: IgrGridBaseDirective, args: IgrExporterEvent) {
args.detail.options.freezeHeaders = true;
}
<IgrGridToolbar key="toolbar">
<IgrGridToolbarActions key="toolbarActions">
<IgrGridToolbarExporter key="exporting" exportStarted={exportEventFreezeHeaders}></IgrGridToolbarExporter>
</IgrGridToolbarActions>
</IgrGridToolbar>
tsx既知の問題と制限
| 制限 | 説明 |
|---|---|
| 階層レベル | Excel エクスポーター サービスは、最大 8 レベルの階層を作成できます。 |
| ワークシートの最大サイズ | Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。 |
| ピン固定列された列のエクスポート | エクスポートされた Excel ファイルでは、ピン固定列は固定されませんが、グリッドに表示されるのと同じ順序で表示されます。 |
API リファレンス
ExcelExporterServiceExcelExporterOptionsIgrHierarchicalGrid
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。