React Hierarchical Grid Export to Excel Service
The Ignite UI for React Export to Excel Service in React Hierarchical Grid can export data to excel. The data export functionality is encapsulated in the ExcelExporterService
class and the data is exported in MS Excel table format. This format allows features like filtering, sorting, etc. To do this you need to invoke the Export
method of ExcelExporterService
and pass the IgrHierarchicalGrid
component as first argument to export grid easily.
React Excel Exporter Example
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
Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.
Export Multi Column Headers Grid
It is now possible to export IgrHierarchicalGrid
with defined multi-column headers. All headers will be reflected in the exported excel file as they are displayed in the IgrHierarchicalGrid
. If you want to exclude the defined multi-column headers from the exported data you can set the ExporterOption
IgnoreMultiColumnHeaders
to true
.
The exported IgrHierarchicalGrid will not be formatted as a table, since Excel tables do not support multiple column headers.
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
Export Grid with Frozen Column Headers
By default Excel Exporter service exports the grid with scrollable (unfrozen) column headers. There are scenarios in which you may want to freeze all headers on top of the exported excel file so they always stay in view as the user scrolls through the records. To achieve this you could set the ExporterOption
FreezeHeaders
to 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
Known Limitations
Limitation | Description |
---|---|
Hierarchy levels | The excel exporter service can create up to 8 levels of hierarchy. |
Max worksheet size | The maximum worksheet size supported by Excel is 1,048,576 rows by 16,384 columns. |
Exporting pinned columns | In the exported Excel file, the pinned columns will not be frozen but will be displayed in the same order as they appear in the grid. |
API References
ExcelExporterService
ExcelExporterOptions
IgrHierarchicalGrid
Additional Resources
Our community is active and always welcoming to new ideas.