React 계층형 그리드를 Excel 서비스로 내보내기
계층적 표 React Excel로 내보내기 Ignite UI for React 서비스는 데이터를 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/themes/light/bootstrap.css";
const mods: any[] = [
IgrGridToolbarModule,
IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private hierarchicalGrid: IgrHierarchicalGrid
private hierarchicalGridRef(r: IgrHierarchicalGrid) {
this.hierarchicalGrid = r;
this.setState({});
}
private gridToolbar: IgrGridToolbar
private gridToolbarActions: IgrGridToolbarActions
private gridToolbarExporter: IgrGridToolbarExporter
private column: IgrColumn
private rowIsland: IgrRowIsland
constructor(props: any) {
super(props);
this.hierarchicalGridRef = this.hierarchicalGridRef.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">
<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 정의된 여러 열 머리글. 모든 헤더는 내보낸 Excel 파일에 표시되는 대로 반영됩니다. IgrHierarchicalGrid. 내보낸 데이터에서 정의된 다중 열 헤더를 제외하려면 다음을 설정할 수 있습니다. 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/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 hierarchicalGrid: IgrHierarchicalGrid
private hierarchicalGridRef(r: IgrHierarchicalGrid) {
this.hierarchicalGrid = r;
this.setState({});
}
private gridToolbar: IgrGridToolbar
private gridToolbarActions: IgrGridToolbarActions
private hGridToolbarExporter: IgrGridToolbarExporter
private columnGroup: IgrColumnGroup
private column: IgrColumn
private rowIsland: IgrRowIsland
constructor(props: any) {
super(props);
this.hierarchicalGridRef = this.hierarchicalGridRef.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}>
<IgrGridToolbar
>
<IgrGridToolbarActions
>
<IgrGridToolbarExporter
exportCSV={false}
exportExcel={true}
onExportStarted={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(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(args: IgrExporterEventArgs) {
args.detail.options.freezeHeaders = true;
}
<IgrGridToolbar>
<IgrGridToolbarActions>
<IgrGridToolbarExporter onExportStarted={exportEventFreezeHeaders}></IgrGridToolbarExporter>
</IgrGridToolbarActions>
</IgrGridToolbar>
tsx알려진 제한 사항
| 한정 | 설명 |
|---|---|
| 계층 수준 | Excel 내보내기 서비스는 최대 8개 수준의 계층 구조를 생성할 수 있습니다. |
| 최대 워크시트 크기 | Excel에서 지원되는 최대 워크시트 크기는 1,048,576행 x 16,384열입니다. |
| 고정된 열 내보내기 | 내보낸 Excel 파일에서 고정된 열은 고정되지 않지만 그리드에 나타나는 것과 동일한 순서로 표시됩니다. |
API 참조
ExcelExporterServiceExcelExporterOptionsIgrHierarchicalGrid
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.