How can I help you?
Excel Export in React Grid Component
17 Feb 202624 minutes to read
The Excel export feature in the React Grid component enables exporting Grid data to Excel or CSV documents. This capability is helpful when sharing or analyzing data in spreadsheet format is required.
Enable Excel export
Excel export configuration in the Grid component requires the following setup:
Module injection: Inject the ExcelExport module into the grid. This module provides the necessary services for exporting data to Excel or CSV formats.
Enable export: Set the allowExcelExport property to true. This property activates the Excel and CSV export options in the Grid.
Trigger export: Use the excelExport method to export Grid data to an Excel document. For CSV export, use the csvExport method instead.
The following example demonstrates performing the Excel export action in the grid by adding the ExcelExport item to the grid toolbar and invoking the excelExport method inside the toolbarClick event.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
const toolbar = ['ExcelExport'];
const toolbarClick = (args) => {
if (grid && args.item.id === 'Grid_excelexport') {
grid.excelExport();
}
};
return (<div>
<GridComponent id='Grid' dataSource={data} height={270} toolbar={toolbar} allowExcelExport={true} toolbarClick={toolbarClick} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
<ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
<ColumnDirective field='ShipName' headerText='Ship Name' width='150'/>
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]}/>
</GridComponent>
</div>);
}
export default App;import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, GridComponent, ToolbarItems } from '@syncfusion/ej2-react-grids';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: GridComponent | null;
const toolbar: ToolbarItems[] = ['ExcelExport'];
const toolbarClick = (args: ClickEventArgs) => {
if (grid && args.item.id === 'Grid_excelexport') {
grid.excelExport();
}
}
return (
<div>
<GridComponent id='Grid' dataSource={data} height={270} toolbar={toolbar}
allowExcelExport={true} toolbarClick={toolbarClick} ref={g=> grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]}/>
</GridComponent>
</div>
);
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Show spinner while exporting
Showing a spinner during the export operation enhances usability by giving a clear visual indicator of progress, helping to understand that the export is actively processing.
To show or hide a spinner while exporting the grid, utilize the showSpinner and hideSpinner methods within the toolbarClick event.
The toolbarClick event is triggered when a toolbar item in the Grid is clicked. Within the event handler, the code checks whether the clicked item corresponds to Excel export by examining its ID, which typically combines the Grid’s ID with either “_excelexport”. If a match is found, the showSpinner method is invoked to display the spinner before invoking the excelExport method.
To hide the spinner after the exporting is completed, bind the excelExportComplete event and use the hideSpinner method on the grid instance to hide the spinner.
The following example demonstrates displaying the spinner during Excel export in the grid:
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, ExcelExport, GridComponent, Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
const toolbar = ['ExcelExport'];
const toolbarClick = (args) => {
if (grid && args.item.id === 'Grid_excelexport') {
grid.showSpinner();
grid.excelExport();
}
}
const excelExportComplete = () => {
grid.hideSpinner();
}
return (<GridComponent id='Grid' dataSource={data} excelExportComplete={excelExportComplete}
allowExcelExport={true} toolbar={toolbar} toolbarClick={toolbarClick}
ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" />
<ColumnDirective field='ProductName' headerText='ProductName' width='120' />
<ColumnDirective field='ProductID' headerText='Product ID' width='120' />
<ColumnDirective field='CustomerName' headerText='CustomerName' width='150' />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]} />
</GridComponent>)
};
export default App;import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, ExcelExport, GridComponent, Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: GridComponent | null;
const toolbar: ToolbarItems[] = ['ExcelExport'];
const toolbarClick = (args: ClickEventArgs) => {
if (grid && args.item.id === 'Grid_excelexport') {
grid.showSpinner();
grid.excelExport();
}
}
const excelExportComplete = (): void => {
(grid as GridComponent).hideSpinner();
}
return (<GridComponent id='Grid' dataSource={data} excelExportComplete={excelExportComplete}
allowExcelExport={true} toolbar={toolbar} toolbarClick={toolbarClick}
ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" />
<ColumnDirective field='ProductName' headerText='ProductName' width='120' />
<ColumnDirective field='ProductID' headerText='Product ID' width='120' />
<ColumnDirective field='CustomerName' headerText='CustomerName' width='150' />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]} />
</GridComponent>)
};
export default App;export let data = createLazyLoadData();
function createLazyLoadData() {
let lazyLoadData = [];
let customerid = ['VINET', 'TOMSP', 'HANAR', 'VICTE', 'SUPRD', 'HANAR', 'CHOPS', 'RICSU', 'WELLI', 'HILAA', 'ERNSH', 'CENTC',
'OTTIK', 'QUEDE', 'RATTC', 'ERNSH', 'FOLKO', 'BLONP', 'WARTH', 'FRANK', 'GROSR', 'WHITC', 'WARTH', 'SPLIR', 'RATTC', 'QUICK', 'VINET',
'MAGAA', 'TORTU', 'MORGK', 'BERGS', 'LEHMS', 'BERGS', 'ROMEY', 'ROMEY', 'LILAS', 'LEHMS', 'QUICK', 'QUICK', 'RICAR', 'REGGC', 'BSBEV',
'COMMI', 'QUEDE', 'TRADH', 'TORTU', 'RATTC', 'VINET', 'LILAS', 'BLONP', 'HUNGO', 'RICAR', 'MAGAA', 'WANDK', 'SUPRD', 'GODOS', 'TORTU',
'OLDWO', 'ROMEY', 'LONEP', 'ANATR', 'HUNGO', 'THEBI', 'DUMON', 'WANDK', 'QUICK', 'RATTC', 'ISLAT', 'RATTC', 'LONEP', 'ISLAT', 'TORTU',
'WARTH', 'ISLAT', 'PERIC', 'KOENE', 'SAVEA', 'KOENE', 'BOLID', 'FOLKO', 'FURIB', 'SPLIR', 'LILAS', 'BONAP', 'MEREP', 'WARTH', 'VICTE',
'HUNGO', 'PRINI', 'FRANK', 'OLDWO', 'MEREP', 'BONAP', 'SIMOB', 'FRANK', 'LEHMS', 'WHITC', 'QUICK', 'RATTC', 'FAMIA'];
let product = ['Chai', 'Chang', 'Aniseed Syrup', 'Chef Anton\'s Cajun Seasoning', 'Chef Anton\'s Gumbo Mix', 'Grandma\'s Boysenberry Spread',
'Uncle Bob\'s Organic Dried Pears', 'Northwoods Cranberry Sauce', 'Mishi Kobe Niku', 'Ikura', 'Queso Cabrales', 'Queso Manchego La Pastora', 'Konbu',
'Tofu', 'Genen Shouyu', 'Pavlova', 'Alice Mutton', 'Carnarvon Tigers', 'Teatime Chocolate Biscuits', 'Sir Rodney\'s Marmalade', 'Sir Rodney\'s Scones',
'Gustaf\'s Knäckebröd', 'Tunnbröd', 'Guaraná Fantástica', 'NuNuCa Nuß-Nougat-Creme', 'Gumbär Gummibärchen', 'Schoggi Schokolade', 'Rössle Sauerkraut',
'Thüringer Rostbratwurst', 'Nord-Ost Matjeshering', 'Gorgonzola Telino', 'Mascarpone Fabioli', 'Geitost', 'Sasquatch Ale', 'Steeleye Stout', 'Inlagd Sill',
'Gravad lax', 'Côte de Blaye', 'Chartreuse verte', 'Boston Crab Meat', 'Jack\'s New England Clam Chowder', 'Singaporean Hokkien Fried Mee', 'Ipoh Coffee',
'Gula Malacca', 'Rogede sild', 'Spegesild', 'Zaanse koeken', 'Chocolade', 'Maxilaku', 'Valkoinen suklaa', 'Manjimup Dried Apples', 'Filo Mix', 'Perth Pasties',
'Tourtière', 'Pâté chinois', 'Gnocchi di nonna Alice', 'Ravioli Angelo', 'Escargots de Bourgogne', 'Raclette Courdavault', 'Camembert Pierrot', 'Sirop d\'érable',
'Tarte au sucre', 'Vegie-spread', 'Wimmers gute Semmelknödel', 'Louisiana Fiery Hot Pepper Sauce', 'Louisiana Hot Spiced Okra', 'Laughing Lumberjack Lager', 'Scottish Longbreads',
'Gudbrandsdalsost', 'Outback Lager', 'Flotemysost', 'Mozzarella di Giovanni', 'Röd Kaviar', 'Longlife Tofu', 'Rhönbräu Klosterbier', 'Lakkalikööri', 'Original Frankfurter grüne Soße'];
let customername = ['Maria', 'Ana Trujillo', 'Antonio Moreno', 'Thomas Hardy', 'Christina Berglund', 'Hanna Moos', 'Frédérique Citeaux', 'Martín Sommer', 'Laurence Lebihan', 'Elizabeth Lincoln',
'Victoria Ashworth', 'Patricio Simpson', 'Francisco Chang', 'Yang Wang', 'Pedro Afonso', 'Elizabeth Brown', 'Sven Ottlieb', 'Janine Labrune', 'Ann Devon', 'Roland Mendel', 'Aria Cruz', 'Diego Roel',
'Martine Rancé', 'Maria Larsson', 'Peter Franken', 'Carine Schmitt', 'Paolo Accorti', 'Lino Rodriguez', 'Eduardo Saavedra', 'José Pedro Freyre', 'André Fonseca', 'Howard Snyder', 'Manuel Pereira',
'Mario Pontes', 'Carlos Hernández', 'Yoshi Latimer', 'Patricia McKenna', 'Helen Bennett', 'Philip Cramer', 'Daniel Tonini', 'Annette Roulet', 'Yoshi Tannamuri', 'John Steel', 'Renate Messner', 'Jaime Yorres',
'Carlos González', 'Felipe Izquierdo', 'Fran Wilson', 'Giovanni Rovelli', 'Catherine Dewey', 'Jean Fresnière', 'Alexander Feuer', 'Simon Crowther', 'Yvonne Moncada', 'Rene Phillips', 'Henriette Pfalzheim',
'Marie Bertrand', 'Guillermo Fernández', 'Georg Pipps', 'Isabel de Castro', 'Bernardo Batista', 'Lúcia Carvalho', 'Horst Kloss', 'Sergio Gutiérrez', 'Paula Wilson', 'Maurizio Moroni', 'Janete Limeira', 'Michael Holz',
'Alejandra Camino', 'Jonas Bergulfsen', 'Jose Pavarotti', 'Hari Kumar', 'Jytte Petersen', 'Dominique Perrier', 'Art Braunschweiger', 'Pascale Cartrain', 'Liz Nixon', 'Liu Wong', 'Karin Josephs', 'Miguel Angel Paolino',
'Anabela Domingues', 'Helvetius Nagy', 'Palle Ibsen', 'Mary Saveley', 'Paul Henriot', 'Rita Müller', 'Pirkko Koskitalo', 'Paula Parente', 'Karl Jablonski', 'Matti Karttunen', 'Zbyszek Piestrzeniewicz'];
let customeraddress = ['507 - 20th Ave. E.\r\nApt. 2A', '908 W. Capital Way', '722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House\r\nMiner Rd.', 'Edgeham Hollow\r\nWinchester Way',
'4726 - 11th Ave. N.E.', '7 Houndstooth Rd.', '59 rue de l\'Abbaye', 'Luisenstr. 48', '908 W. Capital Way', '722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House\r\nMiner Rd.', 'Edgeham Hollow\r\nWinchester Way',
'7 Houndstooth Rd.', '2817 Milton Dr.', 'Kirchgasse 6', 'Sierras de Granada 9993', 'Mehrheimerstr. 369', 'Rua da Panificadora, 12', '2817 Milton Dr.', 'Mehrheimerstr. 369'];
let quantityperunit = ['10 boxes x 20 bags', '24 - 12 oz bottles', '12 - 550 ml bottles', '48 - 6 oz jars', '36 boxes', '12 - 8 oz jars', '12 - 1 lb pkgs.', '12 - 12 oz jars', '18 - 500 g pkgs.', '12 - 200 ml jars',
'1 kg pkg.', '10 - 500 g pkgs.', '2 kg box', '40 - 100 g pkgs.', '24 - 250 ml bottles', '32 - 500 g boxes', '20 - 1 kg tins', '16 kg pkg.', '10 boxes x 12 pieces', '30 gift boxes', '24 pkgs. x 4 pieces', '24 - 500 g pkgs.', '12 - 250 g pkgs.',
'12 - 355 ml cans', '20 - 450 g glasses', '100 - 250 g bags'];
let OrderID = 10248;
for (let i = 0; i < 5000; i++) {
lazyLoadData.push({
'OrderID': OrderID + i,
'CustomerID': customerid[Math.floor(Math.random() * customerid.length)],
'CustomerName': customername[Math.floor(Math.random() * customername.length)],
'CustomerAddress': customeraddress[Math.floor(Math.random() * customeraddress.length)],
'ProductName': product[Math.floor(Math.random() * product.length)],
'ProductID': i,
'Quantity': quantityperunit[Math.floor(Math.random() * quantityperunit.length)]
})
}
return lazyLoadData;
}export let data: Object[] = createLazyLoadData();
function createLazyLoadData(): Object[] {
let lazyLoadData: Object[] = [];
let customerid: string[] = ['VINET', 'TOMSP', 'HANAR', 'VICTE', 'SUPRD', 'HANAR', 'CHOPS', 'RICSU', 'WELLI', 'HILAA', 'ERNSH', 'CENTC',
'OTTIK', 'QUEDE', 'RATTC', 'ERNSH', 'FOLKO', 'BLONP', 'WARTH', 'FRANK', 'GROSR', 'WHITC', 'WARTH', 'SPLIR', 'RATTC', 'QUICK', 'VINET',
'MAGAA', 'TORTU', 'MORGK', 'BERGS', 'LEHMS', 'BERGS', 'ROMEY', 'ROMEY', 'LILAS', 'LEHMS', 'QUICK', 'QUICK', 'RICAR', 'REGGC', 'BSBEV',
'COMMI', 'QUEDE', 'TRADH', 'TORTU', 'RATTC', 'VINET', 'LILAS', 'BLONP', 'HUNGO', 'RICAR', 'MAGAA', 'WANDK', 'SUPRD', 'GODOS', 'TORTU',
'OLDWO', 'ROMEY', 'LONEP', 'ANATR', 'HUNGO', 'THEBI', 'DUMON', 'WANDK', 'QUICK', 'RATTC', 'ISLAT', 'RATTC', 'LONEP', 'ISLAT', 'TORTU',
'WARTH', 'ISLAT', 'PERIC', 'KOENE', 'SAVEA', 'KOENE', 'BOLID', 'FOLKO', 'FURIB', 'SPLIR', 'LILAS', 'BONAP', 'MEREP', 'WARTH', 'VICTE',
'HUNGO', 'PRINI', 'FRANK', 'OLDWO', 'MEREP', 'BONAP', 'SIMOB', 'FRANK', 'LEHMS', 'WHITC', 'QUICK', 'RATTC', 'FAMIA'];
let product: string[] = ['Chai', 'Chang', 'Aniseed Syrup', 'Chef Anton\'s Cajun Seasoning', 'Chef Anton\'s Gumbo Mix', 'Grandma\'s Boysenberry Spread',
'Uncle Bob\'s Organic Dried Pears', 'Northwoods Cranberry Sauce', 'Mishi Kobe Niku', 'Ikura', 'Queso Cabrales', 'Queso Manchego La Pastora', 'Konbu',
'Tofu', 'Genen Shouyu', 'Pavlova', 'Alice Mutton', 'Carnarvon Tigers', 'Teatime Chocolate Biscuits', 'Sir Rodney\'s Marmalade', 'Sir Rodney\'s Scones',
'Gustaf\'s Knäckebröd', 'Tunnbröd', 'Guaraná Fantástica', 'NuNuCa Nuß-Nougat-Creme', 'Gumbär Gummibärchen', 'Schoggi Schokolade', 'Rössle Sauerkraut',
'Thüringer Rostbratwurst', 'Nord-Ost Matjeshering', 'Gorgonzola Telino', 'Mascarpone Fabioli', 'Geitost', 'Sasquatch Ale', 'Steeleye Stout', 'Inlagd Sill',
'Gravad lax', 'Côte de Blaye', 'Chartreuse verte', 'Boston Crab Meat', 'Jack\'s New England Clam Chowder', 'Singaporean Hokkien Fried Mee', 'Ipoh Coffee',
'Gula Malacca', 'Rogede sild', 'Spegesild', 'Zaanse koeken', 'Chocolade', 'Maxilaku', 'Valkoinen suklaa', 'Manjimup Dried Apples', 'Filo Mix', 'Perth Pasties',
'Tourtière', 'Pâté chinois', 'Gnocchi di nonna Alice', 'Ravioli Angelo', 'Escargots de Bourgogne', 'Raclette Courdavault', 'Camembert Pierrot', 'Sirop d\'érable',
'Tarte au sucre', 'Vegie-spread', 'Wimmers gute Semmelknödel', 'Louisiana Fiery Hot Pepper Sauce', 'Louisiana Hot Spiced Okra', 'Laughing Lumberjack Lager', 'Scottish Longbreads',
'Gudbrandsdalsost', 'Outback Lager', 'Flotemysost', 'Mozzarella di Giovanni', 'Röd Kaviar', 'Longlife Tofu', 'Rhönbräu Klosterbier', 'Lakkalikööri', 'Original Frankfurter grüne Soße'];
let customername: string[] = ['Maria', 'Ana Trujillo', 'Antonio Moreno', 'Thomas Hardy', 'Christina Berglund', 'Hanna Moos', 'Frédérique Citeaux', 'Martín Sommer', 'Laurence Lebihan', 'Elizabeth Lincoln',
'Victoria Ashworth', 'Patricio Simpson', 'Francisco Chang', 'Yang Wang', 'Pedro Afonso', 'Elizabeth Brown', 'Sven Ottlieb', 'Janine Labrune', 'Ann Devon', 'Roland Mendel', 'Aria Cruz', 'Diego Roel',
'Martine Rancé', 'Maria Larsson', 'Peter Franken', 'Carine Schmitt', 'Paolo Accorti', 'Lino Rodriguez', 'Eduardo Saavedra', 'José Pedro Freyre', 'André Fonseca', 'Howard Snyder', 'Manuel Pereira',
'Mario Pontes', 'Carlos Hernández', 'Yoshi Latimer', 'Patricia McKenna', 'Helen Bennett', 'Philip Cramer', 'Daniel Tonini', 'Annette Roulet', 'Yoshi Tannamuri', 'John Steel', 'Renate Messner', 'Jaime Yorres',
'Carlos González', 'Felipe Izquierdo', 'Fran Wilson', 'Giovanni Rovelli', 'Catherine Dewey', 'Jean Fresnière', 'Alexander Feuer', 'Simon Crowther', 'Yvonne Moncada', 'Rene Phillips', 'Henriette Pfalzheim',
'Marie Bertrand', 'Guillermo Fernández', 'Georg Pipps', 'Isabel de Castro', 'Bernardo Batista', 'Lúcia Carvalho', 'Horst Kloss', 'Sergio Gutiérrez', 'Paula Wilson', 'Maurizio Moroni', 'Janete Limeira', 'Michael Holz',
'Alejandra Camino', 'Jonas Bergulfsen', 'Jose Pavarotti', 'Hari Kumar', 'Jytte Petersen', 'Dominique Perrier', 'Art Braunschweiger', 'Pascale Cartrain', 'Liz Nixon', 'Liu Wong', 'Karin Josephs', 'Miguel Angel Paolino',
'Anabela Domingues', 'Helvetius Nagy', 'Palle Ibsen', 'Mary Saveley', 'Paul Henriot', 'Rita Müller', 'Pirkko Koskitalo', 'Paula Parente', 'Karl Jablonski', 'Matti Karttunen', 'Zbyszek Piestrzeniewicz'];
let customeraddress: string[] = ['507 - 20th Ave. E.\r\nApt. 2A', '908 W. Capital Way', '722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House\r\nMiner Rd.', 'Edgeham Hollow\r\nWinchester Way',
'4726 - 11th Ave. N.E.', '7 Houndstooth Rd.', '59 rue de l\'Abbaye', 'Luisenstr. 48', '908 W. Capital Way', '722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House\r\nMiner Rd.', 'Edgeham Hollow\r\nWinchester Way',
'7 Houndstooth Rd.', '2817 Milton Dr.', 'Kirchgasse 6', 'Sierras de Granada 9993', 'Mehrheimerstr. 369', 'Rua da Panificadora, 12', '2817 Milton Dr.', 'Mehrheimerstr. 369'];
let quantityperunit: string[] = ['10 boxes x 20 bags', '24 - 12 oz bottles', '12 - 550 ml bottles', '48 - 6 oz jars', '36 boxes', '12 - 8 oz jars', '12 - 1 lb pkgs.', '12 - 12 oz jars', '18 - 500 g pkgs.', '12 - 200 ml jars',
'1 kg pkg.', '10 - 500 g pkgs.', '2 kg box', '40 - 100 g pkgs.', '24 - 250 ml bottles', '32 - 500 g boxes', '20 - 1 kg tins', '16 kg pkg.', '10 boxes x 12 pieces', '30 gift boxes', '24 pkgs. x 4 pieces', '24 - 500 g pkgs.', '12 - 250 g pkgs.',
'12 - 355 ml cans', '20 - 450 g glasses', '100 - 250 g bags'];
let OrderID: number = 10248;
for (let i: number = 0; i < 5000; i++) {
lazyLoadData.push({
'OrderID': OrderID + i,
'CustomerID': customerid[Math.floor(Math.random() * customerid.length)],
'CustomerName': customername[Math.floor(Math.random() * customername.length)],
'CustomerAddress': customeraddress[Math.floor(Math.random() * customeraddress.length)],
'ProductName': product[Math.floor(Math.random() * product.length)],
'ProductID': i,
'Quantity': quantityperunit[Math.floor(Math.random() * quantityperunit.length)]
})
}
return lazyLoadData;
}Bind custom data source while exporting
The Grid component provides a convenient way to export data to Excel or CSV format. With the Excel or CSV export feature, a custom data source can be defined while exporting. This allows exporting data that is not necessarily bound to the grid, which can be generated or retrieved based on application logic.
To export data, define the dataSource property within the excelExportProperties object. This property represents the data source that will be used for the Excel or CSV export.
The following example demonstrates rendering custom dataSource during Excel export. By calling the excelExport method and passing the excelExportProperties object through the grid instance, the grid data will be exported to Excel using the dynamically defined data source:
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
const toolbar = ['ExcelExport'];
const toolbarClick = (args) => {
if (grid && args.item.id === 'Grid_excelexport') {
const excelExportProperties = {
dataSource: data
};
grid.excelExport(excelExportProperties);
}
};
return (<div>
<GridComponent id='Grid' dataSource={data} height={270} toolbar={toolbar} allowExcelExport={true} toolbarClick={toolbarClick} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]} />
</GridComponent>
</div>);
}
export default App;import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, GridComponent, ToolbarItems } from '@syncfusion/ej2-react-grids';
import { ExcelExport, ExcelExportProperties, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: GridComponent | null;
const toolbar: ToolbarItems[] = ['ExcelExport'];
const toolbarClick = (args: ClickEventArgs) => {
if (grid && args.item.id === 'Grid_excelexport') {
const excelExportProperties: ExcelExportProperties = {
dataSource: data
};
grid.excelExport(excelExportProperties);
}
}
return (
<div>
<GridComponent id='Grid' dataSource={data} height={270} toolbar={toolbar}
allowExcelExport={true} toolbarClick={toolbarClick} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]} />
</GridComponent>
</div>
);
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Export with custom aggregate
Exporting grid data with custom aggregates allows including additional calculated values in the exported file based on specific requirements. This feature is helpful for providing a comprehensive view of the data in the exported file, incorporating specific aggregated information for analysis or reporting purposes.
In order to utilize custom aggregation, specify the type property as Custom and provide the custom aggregate function in the customAggregate property.
Within the customAggregate function, the argument contains the data that has a result property. The function calculates the count of objects in this data where the “Ship Country” field value is equal to “Brazil” and returns the count with a descriptive label.
The following example shows exporting the grid with a custom aggregate that shows the calculation of the “Brazil” count of the “Ship Country” column:
import { Aggregate, AggregateColumnDirective, AggregateColumnsDirective, AggregateDirective, AggregatesDirective, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
const toolbar = ['ExcelExport'];
const toolbarClick = (args) => {
if (grid && args.item.id === 'Grid_excelexport') {
grid.excelExport();
}
}
const customAggregate = (customData) => {
const brazilCount = customData.result ? customData.result.filter((item) => item['ShipCountry'] === 'Brazil').length : customData.filter((item) => item['ShipCountry'] === 'Brazil').length;
return `Brazil Count::${brazilCount}`;
};
const footerTemplate = (props) => {
return (<span>{props.Custom}</span>)
}
return (
<div>
<GridComponent id='Grid' dataSource={data} height={260} toolbar={toolbar}
allowExcelExport={true} toolbarClick={toolbarClick} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='Freight' headerText='Freight' width='100' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='150' format='yMd' type='date' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective>
<AggregateColumnsDirective>
<AggregateColumnDirective columnName='ShipCountry' type='Custom' customAggregate={customAggregate} footerTemplate={footerTemplate}></AggregateColumnDirective>
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[Toolbar, ExcelExport, Aggregate]} />
</GridComponent>
</div>
);
}
export default App;import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { Aggregate, AggregateColumnDirective, AggregateColumnsDirective, AggregateDirective, AggregatesDirective, ColumnDirective, ColumnsDirective, GridComponent, ToolbarItems } from '@syncfusion/ej2-react-grids';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: GridComponent | null;
const toolbar: ToolbarItems[] = ['ExcelExport'];
const toolbarClick = (args: ClickEventArgs) => {
if (grid && args.item.id === 'Grid_excelexport') {
grid.excelExport();
}
}
const customAggregate = (customData) => {
const brazilCount = customData.result ? customData.result.filter((item: object) => item['ShipCountry'] === 'Brazil').length : customData.filter((item: object) => item['ShipCountry'] === 'Brazil').length;
return `Brazil Count::${brazilCount}`;
};
const footerTemplate = (props) => {
return (<span>{props.Custom}</span>)
}
return (
<div>
<GridComponent id='Grid' dataSource={data} height={260} toolbar={toolbar}
allowExcelExport={true} toolbarClick={toolbarClick} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='Freight' headerText='Freight' width='100' textAlign='Right'/>
<ColumnDirective field='OrderDate' headerText='Order Date' width='150' format='yMd' type='date' textAlign='Right'/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective>
<AggregateColumnsDirective>
<AggregateColumnDirective columnName='ShipCountry' type='Custom' customAggregate={customAggregate} footerTemplate={footerTemplate}></AggregateColumnDirective>
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[Toolbar, ExcelExport, Aggregate]} />
</GridComponent>
</div>
);
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Export with cell and row spanning
Exporting data from the Grid with cell and row spanning enables maintaining cell and row layout in the exported data. This feature is useful when merged cells or rows exist in the Grid and maintaining the same structure in the exported file is desired.
To achieve this, utilize the rowSpan and colSpan properties in the queryCellInfo event of the Grid. This event allows defining the span values for specific cells. Additionally, the appearance of the grid cells during the export can be customized using the excelQueryCellInfo event of the Grid.
The following example demonstrates performing export with cell and row spanning using queryCellInfo and excelQueryCellInfo events of the Grid:
import { ColumnDirective, ColumnsDirective, ExcelExport, GridComponent, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
const toolbar = ['ExcelExport'];
const toolbarClick = (args) => {
if (args.item.id === 'Grid_excelexport') {
grid.excelExport();
}
}
const queryCellInfo = (args) => {
let data = args.data.OrderID;
switch (data) {
case 10248:
if (args.column.field === 'CustomerID') {
args.rowSpan = 2;
}
break;
case 10250:
if (args.column.field === 'CustomerID') {
args.colSpan = 2;
}
break;
case 10252:
if (args.column.field === 'OrderID') {
args.rowSpan = 3;
}
break;
case 10256:
if (args.column.field === 'CustomerID') {
args.colSpan = 3;
}
break;
case 10261:
if (args.column.field === 'Freight') {
args.colSpan = 2;
}
break;
}
}
const excelQueryCellInfo = (args) => {
let data = args.data.OrderID;
switch (data) {
case 10248:
if (args.column.field === 'CustomerID') {
args.cell.rowSpan = 2;
}
break;
case 10250:
if (args.column.field === 'CustomerID') {
args.colSpan = 2;
}
break;
case 10252:
if (args.column.field === 'OrderID') {
args.cell.rowSpan = 3;
}
break;
case 10256:
if (args.column.field === 'CustomerID') {
args.colSpan = 3;
}
break;
case 10261:
if (args.column.field === 'Freight') {
args.colSpan = 2;
}
break;
}
};
return (
<div>
<GridComponent id='Grid' gridLines='Both' dataSource={data} toolbar={toolbar} allowExcelExport={true}
toolbarClick={toolbarClick} ref={g => grid = g} excelQueryCellInfo={excelQueryCellInfo} queryCellInfo={queryCellInfo}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='Freight' headerText='Freight' width='150' textAlign='Right'/>
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]} />
</GridComponent>
</div>
);
}
export default App;import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, ExcelExport, GridComponent, QueryCellInfoEventArgs, ToolbarItems, Inject, Toolbar, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: GridComponent | null;
const toolbar: ToolbarItems[] = ['ExcelExport'];
const toolbarClick = (args: ClickEventArgs) => {
if (args.item.id === 'Grid_excelexport') {
(grid as GridComponent).excelExport();
}
}
const queryCellInfo = (args: QueryCellInfoEventArgs) => {
let data = args.data.OrderID;
switch (data) {
case 10248:
if (args.column.field === 'CustomerID') {
args.rowSpan = 2;
}
break;
case 10250:
if (args.column.field === 'CustomerID') {
args.colSpan = 2;
}
break;
case 10252:
if (args.column.field === 'OrderID') {
args.rowSpan = 3;
}
break;
case 10256:
if (args.column.field === 'CustomerID') {
args.colSpan = 3;
}
break;
case 10261:
if (args.column.field === 'Freight') {
args.colSpan = 2;
}
break;
}
}
const excelQueryCellInfo = (args: ExcelQueryCellInfoEventArgs) => {
let data = args.data.OrderID;
switch (data) {
case 10248:
if (args.column.field === 'CustomerID') {
args.cell.rowSpan = 2;
}
break;
case 10250:
if (args.column.field === 'CustomerID') {
args.colSpan = 2;
}
break;
case 10252:
if (args.column.field === 'OrderID') {
args.cell.rowSpan = 3;
}
break;
case 10256:
if (args.column.field === 'CustomerID') {
args.colSpan = 3;
}
break;
case 10261:
if (args.column.field === 'Freight') {
args.colSpan = 2;
}
break;
}
};
return (
<div>
<GridComponent id='Grid' gridLines='Both' dataSource={data} toolbar={toolbar} allowExcelExport={true}
toolbarClick={toolbarClick} ref={g => grid = g} excelQueryCellInfo={excelQueryCellInfo} queryCellInfo={queryCellInfo}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='Freight' headerText='Freight' width='150' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]} />
</GridComponent>
</div>
);
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Export with custom date format
The exporting functionality in the Syncfusion® React Grid allows exporting grid data, including custom date format. This feature is useful when exporting grid data with customized date values is needed.
To apply a custom date format to grid columns during the export, utilize the format property. This property allows defining a custom format using format options.
The following example demonstrates exporting the grid with custom date format. In the example, the “formatOptions” object is set to the format property for the “Order Date” column. This custom date format displays the date in the format of day-of-the-week, month abbreviation, day, and 2-digit year (e.g., Sun, May 8, ‘23):
import { ColumnDirective, ColumnsDirective, ExcelExport, GridComponent, Inject, PageSettingsModel, Toolbar, ToolbarItems, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
const pageOptions = { pageSize: 5 };
const toolbar = ['ExcelExport'];
const formatOptions = { type: 'date', format: "EEE, MMM d, ''yy" };
const toolbarClick = (args) => {
if (args.item.text === 'Excel Export') {
grid.excelExport();
}
}
return (
<div>
<GridComponent dataSource={data} toolbar={toolbar} allowExcelExport={true} allowPaging={true} pageSettings={pageOptions}
toolbarClick={toolbarClick} ref={g => grid = g} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='OrderDate' headerText='Order Date' format={formatOptions} width='150' textAlign='Right' />
<ColumnDirective field='Freight' headerText='Freight' format='C2' width='150' textAlign='Right'/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
</ColumnsDirective>
<Inject services={[Toolbar, Page, ExcelExport]} />
</GridComponent>
</div>
);
}
export default App;import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, ExcelExport, GridComponent, Inject, PageSettingsModel, Toolbar, ToolbarItems, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: GridComponent | null;
const pageOptions: PageSettingsModel = { pageSize: 5 };
const toolbar: ToolbarItems[] = ['ExcelExport'];
const formatOptions = { type: 'date', format: "EEE, MMM d, ''yy" };
const toolbarClick = (args: ClickEventArgs) => {
if (args.item.text === 'Excel Export') {
(grid as GridComponent).excelExport();
}
}
return (
<div>
<GridComponent dataSource={data} toolbar={toolbar} allowExcelExport={true} allowPaging={true} pageSettings={pageOptions}
toolbarClick={toolbarClick} ref={g => grid = g} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='OrderDate' headerText='Order Date' format={formatOptions} width='150' textAlign='Right' />
<ColumnDirective field='Freight' headerText='Freight' format='C2' width='150' textAlign='Right'/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
</ColumnsDirective>
<Inject services={[Toolbar, Page, ExcelExport]} />
</GridComponent>
</div>
);
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Merge duplicate cells on export
Duplicate cells (based on their values) in a specific column of the Syncfusion® React Grid can be merged. This can be achieved by utilizing the dataBound event. Additionally, duplicate cells in the specified column can be merged during export by using the excelQueryCellInfo event for Excel and CSV formats. This functionality is useful for improving the readability of data and providing a clearer visual representation.
The following example demonstrates merging duplicate cells in the “Order ID” column in both Grid view and export:
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
let gridcells= null;
let currentOrderID=null;
let rowspanCount= 1;
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') {
grid.excelExport();
}
};
const excelQueryCellInfo = function(args) {
if (!currentOrderID && args.column.field == "OrderID") {
currentOrderID = args.data["OrderID"];
gridcells = args.cell;
}
else if (currentOrderID && args.column.field == "OrderID" && currentOrderID == args.data["OrderID"]) {
rowspanCount++;
} else if (currentOrderID !== args.data["OrderID"] && args.column.field == "OrderID") {
gridcells.rowSpan = rowspanCount;
currentOrderID = args.data["OrderID"];
gridcells = args.cell;
rowspanCount = 1;
}
};
const excelExportComplete=function(args) {
currentOrderID = null;
gridcells = null;
rowspanCount=1;
}
return (<div>
<GridComponent id='Grid' dataSource={data} height={270} allowExcelExport={true}
toolbarClick={toolbarClick} ref={g => grid = g} toolbar={toolbarOptions} enableRowSpan={true}
gridLines = 'Both' excelQueryCellInfo={excelQueryCellInfo} excelExportComplete={excelExportComplete}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
<ColumnDirective field='City' headerText='City' width='150'/>
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]}/>
</GridComponent>
</div>);
}
;
export default App;import { ColumnDirective, ColumnsDirective, GridComponent,ExcelQueryCellInfoEventArgs,ExcelExportCompleteArgs } from '@syncfusion/ej2-react-grids';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid:GridComponent| null;
let gridcells: HTMLElement | null = null;
let currentOrderID:number | null = null;
let rowspanCount= 1;
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function(args:ClickEventArgs) {
if (args.item.id === 'Grid_excelexport') {
(grid as GridComponent).excelExport();
}
};
const excelQueryCellInfo = function(args:ExcelQueryCellInfoEventArgs) {
if (!currentOrderID && args.column.field == "OrderID") {
currentOrderID = (args.data as Order)["OrderID"];
gridcells = (args.cell as HTMLElement) ;
}
else if (currentOrderID && args.column.field == "OrderID" && currentOrderID == (args.data as Order)["OrderID"]) {
rowspanCount++;
} else if (currentOrderID !== (args.data as Order)["OrderID"] && args.column.field == "OrderID") {
(gridcells as HTMLTableCellElement).rowSpan = rowspanCount;
currentOrderID = (args.data as Order)["OrderID"];
gridcells = (args.cell as HTMLElement);
rowspanCount = 1;
}
};
const excelExportComplete=function(args:ExcelExportCompleteArgs) {
currentOrderID = null;
gridcells = null;
rowspanCount=1;
}
return (<div>
<GridComponent id='Grid' dataSource={data} height={270} allowExcelExport={true}
toolbarClick={toolbarClick} ref={g => grid = g} toolbar={toolbarOptions} enableRowSpan={true}
gridLines = 'Both' excelQueryCellInfo={excelQueryCellInfo} excelExportComplete={excelExportComplete}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
<ColumnDirective field='City' headerText='City' width='150'/>
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]}/>
</GridComponent>
</div>);
}
;
export default App;
interface Order {
OrderID: number;
CustomerID: string;
City: string;
}export let data = [{OrderID: 10248,CustomerID:"VINET",City:"Reims"},{OrderID: 10248,CustomerID:"CHOPS",City:"Münster"},
{OrderID: 10250,CustomerID:"TOMSP",City:"San Cristóbal"}, {OrderID: 10251,CustomerID:"RISCU",City:"Rio de Janeiro"},
{OrderID: 10251,CustomerID:"HANAR",City:"Resende"}, {OrderID: 10251,CustomerID:"WELLI",City:"Lyon"},
{OrderID: 10255,CustomerID:"SUPRD",City:"Genève"},{OrderID: 10256,CustomerID:"HILAA",City:"Charleroi"},
{OrderID: 10257,CustomerID:"CENTC",City:"Bern"},{OrderID: 10257,CustomerID:"HANAR",City:"Rio de Janeiro"},
{OrderID: 10259,CustomerID:"TOMSP",City:"Reims"}];export let data :object[]= [{OrderID: 10248,CustomerID:"VINET",City:"Reims"},{OrderID: 10248,CustomerID:"CHOPS",City:"Münster"},
{OrderID: 10250,CustomerID:"TOMSP",City:"San Cristóbal"}, {OrderID: 10251,CustomerID:"RISCU",City:"Rio de Janeiro"},
{OrderID: 10251,CustomerID:"HANAR",City:"Resende"}, {OrderID: 10251,CustomerID:"WELLI",City:"Lyon"},
{OrderID: 10255,CustomerID:"SUPRD",City:"Genève"},{OrderID: 10256,CustomerID:"HILAA",City:"Charleroi"},
{OrderID: 10257,CustomerID:"CENTC",City:"Bern"},{OrderID: 10257,CustomerID:"HANAR",City:"Rio de Janeiro"},
{OrderID: 10259,CustomerID:"TOMSP",City:"Reims"}];Export multiple grids
Exporting multiple grids in the Syncfusion® React Grid component allows exporting different grids to compare them side by side in external applications on the same or different pages of an Excel document. Each grid is identified by its unique ID. The grids to export can be specified by listing their IDs in the exportGrids property.
Same sheet
Excel exporting provides support for exporting multiple grids on the same page. This feature is particularly useful when combining and organizing data from different grids for a unified view in the exported Excel file is desired.
To achieve this, define the multipleExport.type property as AppendToSheet in the excelExportProperties object. This setting ensures that the data from each grid will be appended to the same Excel sheet.
Additionally, there is an option to include blank rows between the data of each grid to visually separate them in the exported Excel sheet. The number of blank rows to be inserted can be defined using the multipleExport.blankRows property.
The following example demonstrates exporting multiple grids to the same page in an Excel file when a toolbar item is clicked:
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
let firstGrid;
let secondGrid;
const toolbar = ['ExcelExport'];
const gridsToExport = ['FirstGrid', 'SecondGrid'];
const toolbarClick = (args) => {
if (firstGrid &&
args.item.id === 'FirstGrid_excelexport') {
const appendExcelExportProperties = {
multipleExport: { type: 'AppendToSheet', blankRows: 2 }
};
firstGrid.excelExport(appendExcelExportProperties, true);
}
};
return (<div>
<p><b>First Grid:</b></p>
<GridComponent id='FirstGrid' dataSource={data.slice(0, 5)} toolbar={toolbar} allowExcelExport={true} toolbarClick={toolbarClick} exportGrids={gridsToExport} ref={g => firstGrid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'/>
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]}/>
</GridComponent>
<p><b>Second Grid:</b></p>
<GridComponent id='SecondGrid' dataSource={employeeData.slice(0, 5)} allowExcelExport={true} ref={g => secondGrid = g}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign="Right"/>
<ColumnDirective field='FirstName' headerText='First Name' width='120'/>
<ColumnDirective field='LastName' headerText='Last Name' width='120'/>
<ColumnDirective field='City' headerText='City' width='150'/>
</ColumnsDirective>
<Inject services={[ExcelExport]}/>
</GridComponent>
</div>);
}
export default App;import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, GridComponent, ToolbarItems } from '@syncfusion/ej2-react-grids';
import { ExcelExport, ExcelExportProperties, Grid, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
let firstGrid: Grid | null;
let secondGrid: Grid | null;
const toolbar: ToolbarItems[] = ['ExcelExport'];
const gridsToExport: string[] = ['FirstGrid', 'SecondGrid'];
const toolbarClick = (args: ClickEventArgs) => {
if (firstGrid &&
args.item.id === 'FirstGrid_excelexport') {
const appendExcelExportProperties: ExcelExportProperties = {
multipleExport: { type: 'AppendToSheet', blankRows: 2 }
};
firstGrid.excelExport(appendExcelExportProperties, true);
}
}
return (
<div>
<p><b>First Grid:</b></p>
<GridComponent id='FirstGrid' dataSource={data.slice(0, 5)} toolbar={toolbar} exportGrids={gridsToExport}
allowExcelExport={true} toolbarClick={toolbarClick} ref={g => firstGrid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'/>
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]}/>
</GridComponent>
<p><b>Second Grid:</b></p>
<GridComponent id='SecondGrid' dataSource={employeeData.slice(0, 5)}
allowExcelExport={true} ref={g => secondGrid = g}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign="Right"/>
<ColumnDirective field='FirstName' headerText='First Name' width='120'/>
<ColumnDirective field='LastName' headerText='Last Name' width='120'/>
<ColumnDirective field='City' headerText='City' width='150'/>
</ColumnsDirective>
<Inject services={[ExcelExport]}/>
</GridComponent>
</div>
);
}
export default App;export let employeeData = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let employeeData: Object[] = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];By default,
multipleExport.blankRowsvalue is 5.
New sheet
Excel export functionality enables the exporting of multiple grids into separate pages (each grid on a new page) within the Excel file.
To achieve this, follow these steps:
-
Access the excelExportProperties of the Grid component.
-
Set the multipleExport.type to
NewPage. -
Trigger the Excel export operation.
The following example demonstrates exporting multiple grids to an Excel file when a toolbar item is clicked:
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
let firstGrid;
let secondGrid;
const toolbar = ['ExcelExport'];
const gridsToExport = ['FirstGrid', 'SecondGrid'];
const toolbarClick = (args) => {
if (firstGrid &&
args.item.id === 'FirstGrid_excelexport') {
const appendExcelExportProperties = {
multipleExport: { type: 'NewSheet' }
};
firstGrid.excelExport(appendExcelExportProperties, true);
}
};
return (<div>
<p><b>First Grid:</b></p>
<GridComponent id='FirstGrid' dataSource={data.slice(0, 5)} toolbar={toolbar} allowExcelExport={true} exportGrids={gridsToExport} toolbarClick={toolbarClick} ref={g => firstGrid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'/>
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]}/>
</GridComponent>
<p><b>Second Grid:</b></p>
<GridComponent id='SecondGrid' dataSource={employeeData.slice(0, 5)} allowExcelExport={true} ref={g => secondGrid = g}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign="Right"/>
<ColumnDirective field='FirstName' headerText='First Name' width='120'/>
<ColumnDirective field='LastName' headerText='Last Name' width='120'/>
<ColumnDirective field='City' headerText='City' width='150'/>
</ColumnsDirective>
<Inject services={[ExcelExport]}/>
</GridComponent>
</div>);
}
export default App;import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, GridComponent, ToolbarItems } from '@syncfusion/ej2-react-grids';
import { ExcelExport, ExcelExportProperties, Grid, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
let firstGrid: Grid | null;
let secondGrid: Grid | null;
const toolbar: ToolbarItems[] = ['ExcelExport'];
const gridsToExport: string[] = ['FirstGrid', 'SecondGrid'];
const toolbarClick = (args: ClickEventArgs) => {
if (firstGrid &&
args.item.id === 'FirstGrid_excelexport') {
const appendExcelExportProperties: ExcelExportProperties = {
multipleExport: { type: 'NewSheet' }
};
firstGrid.excelExport(appendExcelExportProperties, true);
}
}
return (
<div>
<p><b>First Grid:</b></p>
<GridComponent id='FirstGrid' dataSource={data.slice(0, 5)} toolbar={toolbar} exportGrids={gridsToExport}
allowExcelExport={true} toolbarClick={toolbarClick} ref={g => firstGrid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'/>
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]}/>
</GridComponent>
<p><b>Second Grid:</b></p>
<GridComponent id='SecondGrid' dataSource={employeeData.slice(0, 5)}
allowExcelExport={true} ref={g => secondGrid = g}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign="Right"/>
<ColumnDirective field='FirstName' headerText='First Name' width='120'/>
<ColumnDirective field='LastName' headerText='Last Name' width='120'/>
<ColumnDirective field='City' headerText='City' width='150'/>
</ColumnsDirective>
<Inject services={[ExcelExport]}/>
</GridComponent>
</div>
);
}
export default App;export let employeeData = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let employeeData: Object[] = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Limitations
- Multiple grids exporting feature is not supported with server side exporting.
Export hierarchy grid
Exporting a hierarchy grid in the Syncfusion® React Grid component allows generating an Excel or CSV document that includes the parent grid along with its child grids. This feature is useful when exporting hierarchical data with its related details is needed.
To achieve this, the exporting behavior can be customized by using the ExcelExportProperties.hierarchyExportMode property of the Grid. This property allows specifying the exporting behavior for the hierarchy grid. The following options are available:
| Mode | Behavior |
|---|---|
| Expanded | Exports the master grid with expanded child grids. |
| All | Exports the master grid with all child grids, expanded or not. |
| None | Exports only the master grid without any child grids. |
The following example demonstrates exporting hierarchical grid to Excel document. Also change the excelExportProperties.hierarchyExportMode property by using value property of the DropDownList component:
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ColumnDirective, ColumnsDirective, DetailRow, ExcelExport, ExcelExportProperties, GridComponent, ToolbarItems } from '@syncfusion/ej2-react-grids';
import { GridModel, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
let grid;
let dropDown;
const toolbar = ['ExcelExport'];
const ddlData = [
{ text: 'Expanded', value: 'Expanded' },
{ text: 'All', value: 'All' },
{ text: 'None', value: 'None' },
];
const childGridOptions = {
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
],
dataSource: data,
queryString: 'EmployeeID'
};
const toolbarClick = (args) => {
if (args.item.id === 'Grid_excelexport') {
const exportProperties = {
hierarchyExportMode: dropDown.value
};
grid.excelExport(exportProperties);
}
}
return (
<div>
<label style={{ padding: "10px 10px 26px 0" }}> Change the hierarchy export mode: </label>
<DropDownListComponent ref={d => dropDown = d} index={0} width={200} dataSource={ddlData}></DropDownListComponent>
<GridComponent id='Grid' dataSource={employeeData} toolbar={toolbar} allowExcelExport={true}
toolbarClick={toolbarClick} ref={g => grid = g} childGrid={childGridOptions}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign="Right" />
<ColumnDirective field='FirstName' headerText='First Name' width='150' />
<ColumnDirective field='LastName' headerText='Last Name' width='150' />
<ColumnDirective field='City' headerText='City' width='150' />
</ColumnsDirective>
<Inject services={[DetailRow, Toolbar, ExcelExport]} />
</GridComponent>
</div>
);
}
export default App;import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ColumnDirective, ColumnsDirective, DetailRow, ExcelExport, ExcelExportProperties, GridComponent, ToolbarItems } from '@syncfusion/ej2-react-grids';
import { GridModel, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
let grid: GridComponent | null;
let dropDown: DropDownListComponent | null;
const toolbar: ToolbarItems[] = ['ExcelExport'];
const ddlData: { [key: string]: Object; }[] = [
{ text: 'Expanded', value: 'Expanded' },
{ text: 'All', value: 'All' },
{ text: 'None', value: 'None' },
];
const childGridOptions: GridModel = {
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
],
dataSource: data,
queryString: 'EmployeeID'
};
const toolbarClick = (args: ClickEventArgs) => {
if (args.item.id === 'Grid_excelexport') {
const exportProperties: ExcelExportProperties = {
hierarchyExportMode: ((dropDown as DropDownListComponent).value as ExcelExportProperties["hierarchyExportMode"])
};
(grid as GridComponent).excelExport(exportProperties);
}
}
return (
<div>
<label style={{ padding: "10px 10px 26px 0" }}> Change the hierarchy export mode: </label>
<DropDownListComponent ref={d => dropDown = d} index={0} width={200} dataSource={ddlData}></DropDownListComponent>
<GridComponent id='Grid' dataSource={employeeData} toolbar={toolbar} allowExcelExport={true}
toolbarClick={toolbarClick} ref={g => grid = g} childGrid={childGridOptions}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign="Right" />
<ColumnDirective field='FirstName' headerText='First Name' width='150' />
<ColumnDirective field='LastName' headerText='Last Name' width='150' />
<ColumnDirective field='City' headerText='City' width='150' />
</ColumnsDirective>
<Inject services={[DetailRow, Toolbar, ExcelExport]} />
</GridComponent>
</div>
);
}
export default App;export let employeeData = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let employeeData: Object[] = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Format the child Grid columns before exporting
The Syncfusion React Grid allows customization of the child Grid’s Excel export options, enabling precise control over data formatting before export. This functionality is achieved using the exportDetailDataBound event, which is triggered for each child Grid during the export process. This event provides access to the child Grid instance, allowing modifications to its column formatting before generating the Excel document.
In the following example, the exportDetailDataBound event is used to modify the “Order Date” column of the child Grid. By setting the column’s format property, the date values are formatted as dd/MM/yyyy when exported to Excel document:
import { GridComponent, ColumnsDirective, ColumnDirective, Inject, DetailRow, ExcelExport, Toolbar} from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { employeeData, data } from './datasource';
function App() {
let grid;
const toolbar = ['ExcelExport'];
const childGrid = {
dataSource: data,
queryString: 'EmployeeID',
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120,},
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120 },
{ field: 'OrderDate', headerText: 'Order Date', width: 120, format: { type: 'date', format: 'dd-MM-yyyy' },},
{ field: 'ShipCity', headerText: 'Ship City', width: 120 },
],
};
const toolbarClick = (args) => {
if (args.item.id === 'Grid_excelexport') {
const exportProperties = {
hierarchyExportMode: 'All',
};
grid.excelExport(exportProperties);
}
};
const exportDetailDataBound = (args) => {
args.childGrid.columns[2].format = 'dd\\/MM\\/yyyy';
};
return (
<div>
<GridComponent ref={(g) => (grid = g)} id="Grid" dataSource={employeeData} height="220px" toolbar={toolbar} allowExcelExport={true} childGrid={childGrid} exportDetailDataBound={exportDetailDataBound} toolbarClick={toolbarClick}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign='Right' />
<ColumnDirective field='FirstName' headerText='First Name' width='100' />
<ColumnDirective field='LastName' headerText='Last Name' width='150' />
<ColumnDirective field='City' headerText='City' width='120' />
</ColumnsDirective>
<Inject services={[DetailRow, Toolbar, ExcelExport]} />
</GridComponent>
</div>
);
}
export default App;import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GridComponent, ColumnsDirective, ColumnDirective, Inject, DetailRow, ExcelExport, Toolbar, GridModel, ExcelExportProperties, ToolbarItems, DetailDataBoundEventArgs, ColumnModel} from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data,employeeData } from './datasource';
function App() {
let grid: GridComponent | null;
const toolbar: ToolbarItems[] = ['ExcelExport'];
const childGrid: GridModel = {
dataSource: data,
queryString: "EmployeeID",
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120,},
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120 },
{ field: 'OrderDate', headerText: 'Order Date', width: 120, format: { type: 'date', format: 'dd-MM-yyyy' },},
{ field: 'ShipCity', headerText: 'Ship City', width: 120 },
],
};
const toolbarClick = (args: ClickEventArgs) => {
if (args.item.id === 'Grid_excelexport') {
const exportProperties: ExcelExportProperties = {
hierarchyExportMode: 'All',
};
(grid as GridComponent).excelExport(exportProperties);
}
}
const exportDetailDataBound = (args: DetailDataBoundEventArgs) => {
((args.childGrid as GridModel).columns as ColumnModel[])[2].format = 'dd\\/MM\\/yyyy';
}
return (
<div>
<GridComponent ref={g => grid = g} id='Grid' dataSource={employeeData} height="220px" toolbar={toolbar} allowExcelExport={true} childGrid={childGrid} exportDetailDataBound={exportDetailDataBound} toolbarClick={toolbarClick}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign="Right" />
<ColumnDirective field='FirstName' headerText='First Name' width='150' />
<ColumnDirective field='LastName' headerText='Last Name' width='150' />
<ColumnDirective field='City' headerText='City' width='150' />
</ColumnsDirective>
<Inject services={[DetailRow, Toolbar, ExcelExport]} />
</GridComponent>
</div>
);
}
export default App;export let employeeData = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let employeeData: Object[] = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Limitations
- Microsoft Excel permits up to seven nested levels in outlines. So that in the grid we can able to provide only up to seven nested levels and if it exceeds more than seven levels then the document will be exported without outline option. Please refer the Microsoft Limitation.
Add formula for the cell while exporting
The Grid component provides a convenient way to add formulas to cells during the export process. This feature allows performing calculations and applying formulas to specific cells in the exported Excel document. This can be particularly useful when including calculated values or performing complex calculations is needed.
To add formulas to cells during the export process, utilize the valueAccessor method along with the excelQueryCellInfo event.
In the following example, the toolbarClick function handles a toolbar button click event. When the Excel Export button is clicked, it triggers the Excel export process. Inside this function, an excelExportProperties object is defined, specifying that hidden columns should be included in the export. Inside the excelQueryCellInfo event, the valueAccessor method generates formulas for the desired cells and assigns these formulas to the cell’s formula property, ensuring that the calculated values are exported to the Excel document:
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, GridComponent, ToolbarItems, ExcelExport, ExcelQueryCellInfoEventArgs, ExcelExportProperties, Inject, Toolbar, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { inventoryData } from './datasource';
function App() {
let grid;
const toolbar = ['ExcelExport'];
const toolbarClick = (args) => {
if (grid && args.item.id === 'Grid_excelexport') {
const excelExportProperties = {
includeHiddenColumn: true,
};
grid.excelExport(excelExportProperties);
}
}
const excelQueryCellInfo = (args) => {
if (args.column.field === 'TotalPatents') {
args.value = valueAccess(args.column.field, (args.data));
args.cell.formula = args.value;
}
}
const valueAccess = (field, data) => {
const cell = (inventoryData).indexOf(data) + 2;
return '=E' + cell + '+' + 'B' + cell;
}
return (
<div>
<GridComponent id='Grid' dataSource={inventoryData} height={250} allowPaging={true} toolbar={toolbar} allowExcelExport={true} toolbarClick={toolbarClick} ref={g => grid = g} excelQueryCellInfo={excelQueryCellInfo}>
<ColumnsDirective>
<ColumnDirective field='Inventor' headerText='Inventor Name' width='120' textAlign='Right' />
<ColumnDirective field='NumberofPatentFamilies' headerText='Number of Patent Families' width='150' />
<ColumnDirective field='Country' headerText='Country' width='150' />
<ColumnDirective field='Mainfieldsofinvention' headerText='Main fields of invention' width='150' />
<ColumnDirective field='Number of INPADOC patents' headerText='Number of INPADOC patents' width='150' />
<ColumnDirective field='TotalPatents' headerText='Total Patents' valueAccessor={valueAccess} width='150' visible={false} />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport, Page]} />
</GridComponent>
</div>
);
}
export default App;import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, GridComponent, ToolbarItems, ExcelExport, ExcelQueryCellInfoEventArgs, ExcelExportProperties, Inject, Toolbar, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { inventoryData } from './datasource';
interface CustomExcelCell {
formula: string;
}
function App() {
let grid: GridComponent | null;
const toolbar: ToolbarItems[] = ['ExcelExport'];
const toolbarClick = (args: ClickEventArgs) => {
if (grid && args.item.id === 'Grid_excelexport') {
const excelExportProperties: ExcelExportProperties = {
includeHiddenColumn: true,
};
grid.excelExport(excelExportProperties);
}
}
const excelQueryCellInfo = (args: ExcelQueryCellInfoEventArgs) => {
if (args.column.field === 'TotalPatents') {
args.value = valueAccess(args.column.field, (args.data as Object[]));
(args.cell as CustomExcelCell).formula = args.value;
}
}
const valueAccess = (field: string, data: Object[]) => {
const cell = (inventoryData as Object[]).indexOf(data) + 2;
return '=E' + cell + '+' + 'B' + cell;
}
return (
<div>
<GridComponent id='Grid' dataSource={inventoryData} height={250} allowPaging={true} toolbar={toolbar} allowExcelExport={true} toolbarClick={toolbarClick} ref={g => grid = g} excelQueryCellInfo={excelQueryCellInfo}>
<ColumnsDirective>
<ColumnDirective field='Inventor' headerText='Inventor Name' width='120' textAlign='Right' />
<ColumnDirective field='NumberofPatentFamilies' headerText='Number of Patent Families' width='150' />
<ColumnDirective field='Country' headerText='Country' width='150' />
<ColumnDirective field='Mainfieldsofinvention' headerText='Main fields of invention' width='150' />
<ColumnDirective field='Number of INPADOC patents' headerText='Number of INPADOC patents' width='150' />
<ColumnDirective field='TotalPatents' headerText='Total Patents' valueAccessor={valueAccess} width='150' visible={false} />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport, Page]} />
</GridComponent>
</div>
);
}
export default App;export var inventoryData = [
{
Inventor: 'Kia Silverbrook',
NumberofPatentFamilies: 4737,
Country: 'Australia',
'Number of INPADOC patents': 9839,
Active: '1994-2016',
Mainfieldsofinvention:
'Printing, Digital paper, Internet, Electronics,Lab-on-a-chip, MEMS, Mechanical, VLSI',
},
{
Inventor: 'Shunpei Yamazaki',
NumberofPatentFamilies: 4677,
Country: 'Japan',
'Number of INPADOC patents': 10000,
Active: '1976-2016',
Mainfieldsofinvention:
'Thin film transistors, Liquid crystal displays, Solar cells, Flash memory, OLED',
},
{
Inventor: 'Lowell L. Wood, Jr.',
NumberofPatentFamilies: 1419,
Country: 'USA',
'Number of INPADOC patents': 1332,
Active: '1977-2016',
Mainfieldsofinvention: 'Mosquito laser, Nuclear weapons',
},
{
Inventor: 'Paul Lapstun',
NumberofPatentFamilies: 1281,
Country: 'Australia',
'Number of INPADOC patents': 3099,
Active: '2000-2016',
Mainfieldsofinvention:
'Printing, Digital paper, Internet, Electronics, CGI, VLSI',
},
{
Inventor: 'Gurtej Sandhu',
NumberofPatentFamilies: 1255,
Country: 'India',
'Number of INPADOC patents': 2038,
Active: '1991-2016',
Mainfieldsofinvention:
'Thin film processes and materials, VLSI, Semiconductor device fabrication',
},
{
Inventor: 'Jun Koyama',
NumberofPatentFamilies: 1240,
Country: 'Japan',
'Number of INPADOC patents': 4126,
Active: '1991-2016',
Mainfieldsofinvention:
'Thin film transistors, Liquid crystal displays, OLED',
},
{
Inventor: 'Roderick A. Hyde',
NumberofPatentFamilies: 1240,
Country: 'USA',
'Number of INPADOC patents': 3360,
Active: '2001-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Leonard Forbes',
NumberofPatentFamilies: 1093,
Country: 'Canada',
'Number of INPADOC patents': 1398,
Active: '1991-2016',
Mainfieldsofinvention:
'Semiconductor Memories, CCDs, Thin film processes and materials, VLSI',
},
{
Inventor: 'Thomas Edison',
NumberofPatentFamilies: 1084,
Country: 'USA',
'Number of INPADOC patents': 2332,
Active: '1847(b)-1931(d)',
Mainfieldsofinvention:
'Electric power, Lighting, Batteries, Phonograph, Cement, Telegraphy, Mining',
},
{
Inventor: 'Donald E. Weder',
NumberofPatentFamilies: 999,
Country: 'USA',
'Number of INPADOC patents': 1993,
Active: '1976-2015',
Mainfieldsofinvention: 'Florist supplies',
},
{
Inventor: 'George Albert Lyon',
NumberofPatentFamilies: 993,
Country: 'Canada',
'Number of INPADOC patents': 0,
Active: '1882(b)-1961(d)',
Mainfieldsofinvention: 'Automotive, Stainless steel products',
},
{
Inventor: "John F. O'Connor",
NumberofPatentFamilies: 949,
Country: 'USA',
'Number of INPADOC patents': 0,
Active: '1864(b)-1938(d)',
Mainfieldsofinvention: 'Railway draft gearing',
},
{
Inventor: 'Melvin De Groote',
NumberofPatentFamilies: 925,
Country: 'USA',
'Number of INPADOC patents': 0,
Active: '1895(b)-1963(d)',
Mainfieldsofinvention: 'Chemical de-emulsifiers',
},
{
Inventor: 'Jay S. Walker',
NumberofPatentFamilies: 918,
Country: 'USA',
'Number of INPADOC patents': 2206,
Active: '1998-2016',
Mainfieldsofinvention: 'Gaming machines',
},
{
Inventor: 'Edward K. Y. Jung',
NumberofPatentFamilies: 911,
Country: 'USA',
'Number of INPADOC patents': 2254,
Active: '1996-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Francis H. Richards',
NumberofPatentFamilies: 894,
Country: 'USA',
'Number of INPADOC patents': 12,
Active: '1850(b)-19??(d)',
Mainfieldsofinvention: 'Mechanical, automation',
},
{
Inventor: 'Kangguo Cheng',
NumberofPatentFamilies: 884,
Country: 'USA',
'Number of INPADOC patents': 1314,
Active: '2004-2016',
Mainfieldsofinvention:
'Semiconductor device fabrication, Semiconductor memory, Semiconductor device',
},
{
Inventor: 'Clarence T. Tegreene',
NumberofPatentFamilies: 872,
Country: 'USA',
'Number of INPADOC patents': 2255,
Active: '2000-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Ahmadreza Rofougaran',
NumberofPatentFamilies: 808,
Country: 'USA',
'Number of INPADOC patents': 1396,
Active: '2002-2016',
Mainfieldsofinvention: 'Radio Frequency Integrated Circuits',
},
{
Inventor: 'Shou-Shan Fan',
NumberofPatentFamilies: 805,
Country: 'China',
'Number of INPADOC patents': 2120,
Active: '2006-2016',
Mainfieldsofinvention:
'Carbon nanotubes and applications of carbon nanotubes',
},
{
Inventor: 'Michael J. Sullivan',
NumberofPatentFamilies: 788,
Country: 'USA',
'Number of INPADOC patents': 1560,
Active: '1977-2016',
Mainfieldsofinvention: 'Golf balls',
},
{
Inventor: 'Rick Allen Hamilton II',
NumberofPatentFamilies: 773,
Country: 'USA',
'Number of INPADOC patents': 1064,
Active: '1999-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Warren Farnworth',
NumberofPatentFamilies: 770,
Country: 'USA',
'Number of INPADOC patents': 931,
Active: '1990-2016',
Mainfieldsofinvention: 'Semiconductor packaging',
},
{
Inventor: 'Carleton Ellis',
NumberofPatentFamilies: 753,
Country: 'USA',
'Number of INPADOC patents': 21,
Active: '1876(b)-1941(d)',
Mainfieldsofinvention:
'Margarine, Polyester, Anti-knock gasoline, Paint stripper',
},
{
Inventor: 'William H. Eby',
NumberofPatentFamilies: 733,
Country: 'USA',
'Number of INPADOC patents': 758,
Active: '1994-2016',
Mainfieldsofinvention: 'Transgenic soybeans',
},
{
Inventor: 'Hideo Ando',
NumberofPatentFamilies: 728,
Country: 'Japan',
'Number of INPADOC patents': 2588,
Active: '1983-2016',
Mainfieldsofinvention: 'Optical recording',
},
{
Inventor: 'Salman Akram',
NumberofPatentFamilies: 728,
Country: 'USA',
'Number of INPADOC patents': 915,
Active: '1995-2016',
Mainfieldsofinvention: 'Semiconductor packaging',
},
{
Inventor: 'George Spector',
NumberofPatentFamilies: 722,
Country: 'USA',
'Number of INPADOC patents': 747,
Active: '1976-1998',
Mainfieldsofinvention: 'Gadgets, Toys',
},
{
Inventor: 'Jeyhan Karaoguz',
NumberofPatentFamilies: 721,
Country: 'USA',
'Number of INPADOC patents': 1530,
Active: '1996-2016',
Mainfieldsofinvention: 'Wireless communications, Computer networks',
},
{
Inventor: 'Elihu Thomson',
NumberofPatentFamilies: 696,
Country: 'UK',
'Number of INPADOC patents': 50,
Active: '1853(b)-1937(d)',
Mainfieldsofinvention:
'Electric power, Arc lamp, Electric motors, Lightning arrester, Arc welder',
},
{
Inventor: 'Austin L. Gurney',
NumberofPatentFamilies: 695,
Country: 'USA',
'Number of INPADOC patents': 3909,
Active: '1999-2016',
Mainfieldsofinvention: 'Proteins, Antibodies',
},
{
Inventor: 'Tetsujiro Kondo',
NumberofPatentFamilies: 684,
Country: 'Japan',
'Number of INPADOC patents': 4158,
Active: '1987-2015',
Mainfieldsofinvention: 'Signal processing, Image processing',
},
{
Inventor: 'Nathan Myhrvold',
NumberofPatentFamilies: 661,
Country: 'USA',
'Number of INPADOC patents': 1690,
Active: '1994-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'William I. Wood',
NumberofPatentFamilies: 653,
Country: 'USA',
'Number of INPADOC patents': 3560,
Active: '1981-2016',
Mainfieldsofinvention: 'Proteins, Antibodies',
},
{
Inventor: 'Simon R. Walmsley',
NumberofPatentFamilies: 651,
Country: 'Australia',
'Number of INPADOC patents': 1249,
Active: '1995-2015',
Mainfieldsofinvention: 'Printing, Electronics, VLSI, Cryptography',
},
{
Inventor: 'Mark Malamud',
NumberofPatentFamilies: 632,
Country: 'USA',
'Number of INPADOC patents': 1759,
Active: '1997-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Royce A. Levien',
NumberofPatentFamilies: 630,
Country: 'USA',
'Number of INPADOC patents': 1799,
Active: '1997-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Audrey D. Goddard',
NumberofPatentFamilies: 622,
Country: 'USA',
'Number of INPADOC patents': 3416,
Active: '1997-2014',
Mainfieldsofinvention: 'Proteins, Antibodies',
},
{
Inventor: 'Muriel Y. Ishikawa',
NumberofPatentFamilies: 619,
Country: 'USA',
'Number of INPADOC patents': 1660,
Active: '2002-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Robert W. Lord',
NumberofPatentFamilies: 618,
Country: 'USA',
'Number of INPADOC patents': 1708,
Active: '2003-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Jerome Lemelson',
NumberofPatentFamilies: 606,
Country: 'USA',
'Number of INPADOC patents': 60,
Active: '1923(b)-1997(d)',
Mainfieldsofinvention:
'Toys, Industrial robots, Cordless telephones, Fax machines, Videocassette recorders',
},
{
Inventor: 'Béla Barényi',
NumberofPatentFamilies: 595,
Country: 'Austria',
'Number of INPADOC patents': 1244,
Active: '1907(b)-1997(d)',
Mainfieldsofinvention: 'Passive safety in automobiles',
},
{
Inventor: 'Kie Y Ahn',
NumberofPatentFamilies: 593,
Country: 'USA',
'Number of INPADOC patents': 709,
Active: '1976-2016',
Mainfieldsofinvention:
'Thin film processes and materials, VLSI, Semiconductor device fabrication',
},
{
Inventor: 'Tadahiro Ohmi',
NumberofPatentFamilies: 592,
Country: 'Japan',
'Number of INPADOC patents': 2691,
Active: '1981-2016',
Mainfieldsofinvention:
'Thin film processes and materials, Semiconductor device fabrication',
},
{
Inventor: 'Jordin T. Kare',
NumberofPatentFamilies: 585,
Country: 'USA',
'Number of INPADOC patents': 1559,
Active: '1992-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Paul J. Godowski',
NumberofPatentFamilies: 579,
Country: 'USA',
'Number of INPADOC patents': 2605,
Active: '1994-2014',
Mainfieldsofinvention: 'Proteins, Antibodies',
},
{
Inventor: 'Artur Fischer',
NumberofPatentFamilies: 570,
Country: 'Germany',
'Number of INPADOC patents': 3097,
Active: '1976-2002',
Mainfieldsofinvention: 'Fasteners, Construction toys',
},
{
Inventor: 'Edward J. Nowak',
NumberofPatentFamilies: 564,
Country: 'USA',
'Number of INPADOC patents': 1145,
Active: '1979-2016',
Mainfieldsofinvention:
'Semiconductor device fabrication, Semiconductor memory, Semiconductor device',
},
{
Inventor: 'Louis L. Hsu',
NumberofPatentFamilies: 551,
Country: 'USA',
'Number of INPADOC patents': 914,
Active: '1988-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Edwin H. Land',
NumberofPatentFamilies: 535,
Country: 'USA',
'Number of INPADOC patents': 1236,
Active: '1909(b)-1991(d)',
Mainfieldsofinvention: 'Instant photography, Polarizing film',
},
{
Inventor: 'Henri Dreyfus',
NumberofPatentFamilies: 524,
Country: 'Switzerland',
'Number of INPADOC patents': 2117,
Active: '1882(b)-1944(d)',
Mainfieldsofinvention: 'Polymers, Synthetic fibers, Dyes',
},
{
Inventor: 'Bruce B. Doris',
NumberofPatentFamilies: 522,
Country: 'USA',
'Number of INPADOC patents': 867,
Active: '1995-2016',
Mainfieldsofinvention:
'Integrated Circuits, CMOS, DRAM, Semiconductor device fabrication',
},
{
Inventor: 'Clyde C. Farmer',
NumberofPatentFamilies: 513,
Country: 'USA',
'Number of INPADOC patents': 830,
Active: '18??(b)-19??(d)',
Mainfieldsofinvention: 'Railway air brakes',
},
{
Inventor: 'Heinz Focke',
NumberofPatentFamilies: 512,
Country: 'Germany',
'Number of INPADOC patents': 2896,
Active: '1976-2013',
Mainfieldsofinvention: 'Cigarette packaging',
},
{
Inventor: 'Mark I. Gardner',
NumberofPatentFamilies: 511,
Country: 'USA',
'Number of INPADOC patents': 587,
Active: '1994-2010',
Mainfieldsofinvention:
'Consumer electronics, Energy, Computers, Semiconductors, Physics',
},
{
Inventor: 'Ravi K. Arimilli',
NumberofPatentFamilies: 506,
Country: 'India',
'Number of INPADOC patents': 767,
Active: '1992-2016',
Mainfieldsofinvention:
'Computer architecture, Semiconductor memory, Cache coherence, Symmetric multiprocessing',
},
{
Inventor: 'Louis H. Morin',
NumberofPatentFamilies: 503,
Country: 'USA',
'Number of INPADOC patents': 720,
Active: '18??(b)-19??(d)',
Mainfieldsofinvention: 'Fasteners, Locks, Bobbins',
},
{
Inventor: 'Tobin A. King',
NumberofPatentFamilies: 497,
Country: 'Australia',
'Number of INPADOC patents': 1218,
Active: '2000-2015',
Mainfieldsofinvention: 'Printing, Digital paper, Mechanical',
},
{
Inventor: 'Eric C. Leuthardt',
NumberofPatentFamilies: 495,
Country: 'USA',
'Number of INPADOC patents': 1274,
Active: '2006-2016',
Mainfieldsofinvention: 'Medical devices',
},
{
Inventor: 'Ali Khakifirooz',
NumberofPatentFamilies: 489,
Country: 'USA',
'Number of INPADOC patents': 737,
Active: '2011-2016',
Mainfieldsofinvention:
'Integrated Circuits, CMOS, Semiconductor device fabrication',
},
{
Inventor: 'Jack A. Mandelman',
NumberofPatentFamilies: 481,
Country: 'USA',
'Number of INPADOC patents': 889,
Active: '1987-2014',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Jeffrey P. Gambino',
NumberofPatentFamilies: 479,
Country: 'USA',
'Number of INPADOC patents': 798,
Active: '1992-2016',
Mainfieldsofinvention:
'MEMS, CMOS, BiCMOS, DRAM, Image Sensors, RF, Biosensors, 3D Integrated Circuits',
},
{
Inventor: 'John M. Santosuosso',
NumberofPatentFamilies: 473,
Country: 'USA',
'Number of INPADOC patents': 683,
Active: '2001-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'James M. Hart',
NumberofPatentFamilies: 464,
Country: 'USA',
'Number of INPADOC patents': 1145,
Active: '1988-2016',
Mainfieldsofinvention: 'Motor vehicle transmission',
},
{
Inventor: 'Eberhard Ammermann',
NumberofPatentFamilies: 451,
Country: 'Germany',
'Number of INPADOC patents': 5178,
Active: '1979-2015',
Mainfieldsofinvention: 'Fungicides',
},
{
Inventor: 'Thomas E. Murray',
NumberofPatentFamilies: 449,
Country: 'USA',
'Number of INPADOC patents': 462,
Active: '1860(b)-1929(d)',
Mainfieldsofinvention:
'Electrical, HVAC, Wheels, Metal working, Light dimmer',
},
{
Inventor: 'Akira Nakazawa',
NumberofPatentFamilies: 445,
Country: 'Australia',
'Number of INPADOC patents': 1340,
Active: '1980-2016',
Mainfieldsofinvention: 'Printing, Mechanical',
},
{
Inventor: 'Hongyong Zhang',
NumberofPatentFamilies: 440,
Country: 'Japan',
'Number of INPADOC patents': 858,
Active: '1993-2016',
Mainfieldsofinvention: 'Thin film transistors, Liquid crystal displays',
},
{
Inventor: 'Ronald S. Cok',
NumberofPatentFamilies: 436,
Country: 'USA',
'Number of INPADOC patents': 747,
Active: '1986-2016',
Mainfieldsofinvention: 'OLED displays; image processing',
},
{
Inventor: 'fe',
NumberofPatentFamilies: 430,
Country: 'USA',
'Number of INPADOC patents': 1759,
Active: '1983-2016',
Mainfieldsofinvention: 'Biotechnology, Drug delivery, Tissue engineering',
},
{
Inventor: 'Scott H. Wittkopp',
NumberofPatentFamilies: 429,
Country: 'USA',
'Number of INPADOC patents': 1010,
Active: '2001-2016',
Mainfieldsofinvention: 'Motor vehicle transmission',
},
{
Inventor: 'John Hays Hammond, Jr.',
NumberofPatentFamilies: 417,
Country: 'USA',
'Number of INPADOC patents': 460,
Active: '1888(b)-1965(d)',
Mainfieldsofinvention: 'Radio control, Radio communications, Torpedoes',
},
{
Inventor: 'Wilhelm Brandes',
NumberofPatentFamilies: 411,
Country: 'Germany',
'Number of INPADOC patents': 2923,
Active: '1976-2010',
Mainfieldsofinvention: 'Fungicides',
},
{
Inventor: 'Anthony K. Stamper',
NumberofPatentFamilies: 411,
Country: 'USA',
'Number of INPADOC patents': 726,
Active: '1998-2016',
Mainfieldsofinvention: 'MEMS, CMOS, BiCMOS, Silicon-germanium',
},
{
Inventor: 'Hossein Eslambolchi',
NumberofPatentFamilies: 410,
Country: 'USA',
'Number of INPADOC patents': 631,
Active: '1993-2016',
Mainfieldsofinvention:
'Telecommunications, Network intelligence, information Technology, communications technology',
},
{
Inventor: 'Stanford R. Ovshinsky',
NumberofPatentFamilies: 400,
Country: 'USA',
'Number of INPADOC patents': 1649,
Active: '1922(b)-2012(d)',
Mainfieldsofinvention:
'Batteries, Solar cells, Liquid crystal displays, Hydrogen fuel cells, Computer data storage',
},
{
Inventor: 'Victoria Y. H. Wood',
NumberofPatentFamilies: 400,
Country: 'USA',
'Number of INPADOC patents': 1045,
Active: '2009-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Josef Theurer',
NumberofPatentFamilies: 388,
Country: 'Austria',
'Number of INPADOC patents': 5085,
Active: '1976-2016',
Mainfieldsofinvention: 'Railroad maintenance machines',
},
{
Inventor: 'Cary L. Bates',
NumberofPatentFamilies: 384,
Country: 'USA',
'Number of INPADOC patents': 570,
Active: '1994-2016',
Mainfieldsofinvention: 'Programming tools, DBX, Memory debuggers',
},
{
Inventor: 'David V. Horak',
NumberofPatentFamilies: 380,
Country: 'USA',
'Number of INPADOC patents': 616,
Active: '1992-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Kai-Li Jiang',
NumberofPatentFamilies: 379,
Country: 'China',
'Number of INPADOC patents': 829,
Active: '2006-2016',
Mainfieldsofinvention:
'Carbon nanotubes and applications of carbon nanotubes',
},
{
Inventor: 'Hans-Joachim Santel',
NumberofPatentFamilies: 377,
Country: 'Germany',
'Number of INPADOC patents': 2623,
Active: '1986-2013',
Mainfieldsofinvention: 'Herbicides, Pesticides, Organic chemistry',
},
{
Inventor: 'Xuemin (Sherman) Chen',
NumberofPatentFamilies: 377,
Country: 'USA',
'Number of INPADOC patents': 1151,
Active: '1997-2017',
Mainfieldsofinvention:
'Computer networks, Integrated Circuits, Signal Processing',
},
{
Inventor: 'George P. Liang',
NumberofPatentFamilies: 375,
Country: 'China',
'Number of INPADOC patents': 508,
Active: '1983-2016',
Mainfieldsofinvention: 'Gas turbine cooling',
},
{
Inventor: 'Gisela Lorenz',
NumberofPatentFamilies: 374,
Country: 'Germany',
'Number of INPADOC patents': 4155,
Active: '1990-2015',
Mainfieldsofinvention: 'Fungicides, Organic chemistry',
},
{
Inventor: 'Garry R. Jackson',
NumberofPatentFamilies: 367,
Country: 'Australia',
'Number of INPADOC patents': 656,
Active: '2001-2016',
Mainfieldsofinvention: 'Printing, Mechanical',
},
{
Inventor: 'Paul W. Dent',
NumberofPatentFamilies: 362,
Country: 'USA',
'Number of INPADOC patents': 2252,
Active: '1984-2015',
Mainfieldsofinvention: 'Wireless communications',
},
{
Inventor: 'George Westinghouse',
NumberofPatentFamilies: 361,
Country: 'USA',
'Number of INPADOC patents': 0,
Active: '1846(b)-1914(d)',
Mainfieldsofinvention:
'Electric power, Electricity meter, Railway air brake, Steam engines',
},
{
Inventor: 'Wael W. Diab',
NumberofPatentFamilies: 358,
Country: 'USA',
'Number of INPADOC patents': 774,
Active: '2003-2016',
Mainfieldsofinvention: 'Computer networks',
},
{
Inventor: 'Devendra K. Sadana',
NumberofPatentFamilies: 356,
Country: 'India',
'Number of INPADOC patents': 794,
Active: '1983-2016',
Mainfieldsofinvention:
'Solar cells, OLED, Integrated Circuits, CMOS, DRAM, LEDs',
},
{
Inventor: 'Vincent J. Zimmer',
NumberofPatentFamilies: 354,
Country: 'USA',
'Number of INPADOC patents': 972,
Active: '1999-2016',
Mainfieldsofinvention: 'Computer software and firmware',
},
{
Inventor: 'Robert R. Schmidt',
NumberofPatentFamilies: 350,
Country: 'Germany',
'Number of INPADOC patents': 2467,
Active: '1971-2005',
Mainfieldsofinvention: 'Herbicides, Fungicides, Organic chemistry',
},
{
Inventor: 'Norman M. Berry',
NumberofPatentFamilies: 347,
Country: 'Australia',
'Number of INPADOC patents': 516,
Active: '2006-2016',
Mainfieldsofinvention: 'Printing, Mechanical',
},
{
Inventor: 'Chih-Chao Yang',
NumberofPatentFamilies: 345,
Country: 'USA',
'Number of INPADOC patents': 690,
Active: '2003-2016',
Mainfieldsofinvention: 'Integrated Circuits',
},
{
Inventor: 'Gregory J. Boss',
NumberofPatentFamilies: 345,
Country: 'USA',
'Number of INPADOC patents': 588,
Active: '2008-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Mark W. Kroll',
NumberofPatentFamilies: 343,
Country: 'USA',
'Number of INPADOC patents': 460,
Active: '1987-2016',
Mainfieldsofinvention: 'Implantable medical devices',
},
{
Inventor: "Brian M. O'Connell",
NumberofPatentFamilies: 331,
Country: 'USA',
'Number of INPADOC patents': 592,
Active: '2009-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'William Daniel Hillis',
NumberofPatentFamilies: 328,
Country: 'USA',
'Number of INPADOC patents': 229,
Active: '1986-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Brent A. Anderson',
NumberofPatentFamilies: 323,
Country: 'USA',
'Number of INPADOC patents': 454,
Active: '2001-2016',
Mainfieldsofinvention:
'Semiconductor device fabrication, Semiconductor memory, Semiconductor device',
},
{
Inventor: 'Jeffrey E. Stahmann',
NumberofPatentFamilies: 321,
Country: 'USA',
'Number of INPADOC patents': 640,
Active: '1994-2016',
Mainfieldsofinvention: 'Medical devices',
},
{
Inventor: 'Carl J. Radens',
NumberofPatentFamilies: 317,
Country: 'USA',
'Number of INPADOC patents': 636,
Active: '1994-2016',
Mainfieldsofinvention:
'Integrated Circuits, CMOS, DRAM, Semiconductor device fabrication',
},
{
Inventor: 'Clifford A. Pickover',
NumberofPatentFamilies: 317,
Country: 'USA',
'Number of INPADOC patents': 653,
Active: '1992-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Liang Liu',
NumberofPatentFamilies: 310,
Country: 'China',
'Number of INPADOC patents': 777,
Active: '2005-2016',
Mainfieldsofinvention:
'Carbon nanotubes and applications of carbon nanotubes',
},
{
Inventor: 'Steven L. Teig',
NumberofPatentFamilies: 307,
Country: 'USA',
'Number of INPADOC patents': 366,
Active: '1995-2016',
Mainfieldsofinvention: 'Integrated Circuits',
},
{
Inventor: 'Victoria Smith',
NumberofPatentFamilies: 305,
Country: 'USA',
'Number of INPADOC patents': 2040,
Active: '2006-2016',
Mainfieldsofinvention: 'Proteins, Antibodies',
},
{
Inventor: 'Robert G. LeTourneau',
NumberofPatentFamilies: 299,
Country: 'USA',
'Number of INPADOC patents': 67,
Active: '1888(b)-1969(d)',
Mainfieldsofinvention:
'Earthworks (engineering), Heavy Equipment, Industrial Machinery',
},
{
Inventor: 'William R. Tonti',
NumberofPatentFamilies: 291,
Country: 'USA',
'Number of INPADOC patents': 441,
Active: '1994-2016',
Mainfieldsofinvention:
'Integrated Circuits, CMOS, DRAM, Semiconductor device fabrication',
},
{
Inventor: 'Keith R. Walker',
NumberofPatentFamilies: 282,
Country: 'Saudi Arabia',
'Number of INPADOC patents': 318,
Active: '2003-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Victor S. Moore',
NumberofPatentFamilies: 280,
Country: 'USA',
'Number of INPADOC patents': 428,
Active: '1982-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Hanson S. Gifford III',
NumberofPatentFamilies: 276,
Country: 'USA',
'Number of INPADOC patents': 795,
Active: '1987-2016',
Mainfieldsofinvention: 'Medical Devices',
},
{
Inventor: 'Daniel J. Winarski',
NumberofPatentFamilies: 275,
Country: 'USA',
'Number of INPADOC patents': 506,
Active: '1982-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Adam Heller',
NumberofPatentFamilies: 272,
Country: 'Romania',
'Number of INPADOC patents': 711,
Active: '1968-2016',
Mainfieldsofinvention: 'Solar cells, Glucose meters, Lasers',
},
{
Inventor: 'Lisa Seacat DeLuca',
NumberofPatentFamilies: 271,
Country: 'USA',
'Number of INPADOC patents': 385,
Active: '2009-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Brent Keeth',
NumberofPatentFamilies: 270,
Country: 'USA',
'Number of INPADOC patents': 470,
Active: '1994-2016',
Mainfieldsofinvention: 'Integrated Circuits, CMOS, DRAM',
},
{
Inventor: 'Hartley Owen',
NumberofPatentFamilies: 267,
Country: 'USA',
'Number of INPADOC patents': 751,
Active: '1976-2010',
Mainfieldsofinvention: 'Fluid catalytic cracking',
},
{
Inventor: 'Michael A. Rothman',
NumberofPatentFamilies: 256,
Country: 'USA',
'Number of INPADOC patents': 687,
Active: '2001-2017',
Mainfieldsofinvention: 'Computer software and firmware',
},
{
Inventor: 'Yoshihiro Kikuchi',
NumberofPatentFamilies: 255,
Country: 'Japan',
'Number of INPADOC patents': 1120,
Active: '1994-2015',
Mainfieldsofinvention: 'Video processing',
},
{
Inventor: 'Kulvir S. Bhogal',
NumberofPatentFamilies: 252,
Country: 'USA',
'Number of INPADOC patents': 486,
Active: '2003-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Bengt Lindoff',
NumberofPatentFamilies: 248,
Country: 'Sweden',
'Number of INPADOC patents': 1658,
Active: '2000-2017',
Mainfieldsofinvention: 'Wireless communications',
},
{
Inventor: 'Nobuyuki Taniguchi',
NumberofPatentFamilies: 245,
Country: 'Japan',
'Number of INPADOC patents': 967,
Active: '1979-2015',
Mainfieldsofinvention: 'Cameras',
},
{
Inventor: 'Dean L. Kamen',
NumberofPatentFamilies: 243,
Country: 'USA',
'Number of INPADOC patents': 1186,
Active: '1979-2016',
Mainfieldsofinvention:
'Battery-powered electric vehicles, Medical devices, Stirling engines, Water purification, Wheelchairs',
},
{
Inventor: 'Philip S. Yu',
NumberofPatentFamilies: 236,
Country: 'USA',
'Number of INPADOC patents': 158,
Active: '1982-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Rajiv V. Joshi',
NumberofPatentFamilies: 235,
Country: 'USA',
'Number of INPADOC patents': 354,
Active: '1986-2016',
Mainfieldsofinvention: 'Electronics, analytics',
},
{
Inventor: 'Lawrence A. Clevenger',
NumberofPatentFamilies: 235,
Country: 'USA',
'Number of INPADOC patents': 526,
Active: '1996-2017',
Mainfieldsofinvention:
'Semiconductor, Cognitive, Memory, Security, Analytics',
},
{
Inventor: 'Johnny M. Shieh',
NumberofPatentFamilies: 231,
Country: 'USA',
'Number of INPADOC patents': 444,
Active: '1996-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Takeshi Chujoh',
NumberofPatentFamilies: 229,
Country: 'Japan',
'Number of INPADOC patents': 1065,
Active: '1995-2016',
Mainfieldsofinvention: 'Video processing',
},
{
Inventor: 'Bran Ferren',
NumberofPatentFamilies: 225,
Country: 'USA',
'Number of INPADOC patents': 589,
Active: '1986-2017',
Mainfieldsofinvention:
'Computers, Consumer Electronics, Optical Systems, Medical, User Interfaces, Automotive',
},
{
Inventor: 'Paul Ian Mackey',
NumberofPatentFamilies: 220,
Country: 'Australia',
'Number of INPADOC patents': 246,
Active: '2008-2016',
Mainfieldsofinvention: 'Printing, Mechanical',
},
{
Inventor: 'Louis Rosenberg',
NumberofPatentFamilies: 218,
Country: 'USA',
'Number of INPADOC patents': 444,
Active: '1995-2016',
Mainfieldsofinvention: 'Augmented Reality, Virtual Reality, A.I., HCI',
},
{
Inventor: 'Thomas J. Kennedy III',
NumberofPatentFamilies: 218,
Country: 'USA',
'Number of INPADOC patents': 513,
Active: '1992-2016',
Mainfieldsofinvention: 'Sporting Goods, Wind Turbines',
},
{
Inventor: 'Gerald F. McBrearty',
NumberofPatentFamilies: 213,
Country: 'USA',
'Number of INPADOC patents': 387,
Active: '1997-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Esmael H. Dinan',
NumberofPatentFamilies: 208,
Country: 'USA',
'Number of INPADOC patents': 344,
Active: '2000-2017',
Mainfieldsofinvention: 'Communication Networks',
},
{
Inventor: 'Imad Libbus',
NumberofPatentFamilies: 207,
Country: 'USA',
'Number of INPADOC patents': 472,
Active: '2007-2017',
Mainfieldsofinvention: 'Medical devices',
},
{
Inventor: 'Hiroshi (You) Yoshioka',
NumberofPatentFamilies: 205,
Country: 'Japan',
'Number of INPADOC patents': 181,
Active: '1997-2015',
Mainfieldsofinvention: 'Cameras',
},
{
Inventor: 'Patrick B. Usoro',
NumberofPatentFamilies: 205,
Country: 'USA',
'Number of INPADOC patents': 343,
Active: '1999-2016',
Mainfieldsofinvention:
'Transmissions, Hybrid Powertrains, Vehicle Thermal Management',
},
{
Inventor: 'Gregory McAvoy',
NumberofPatentFamilies: 205,
Country: 'Australia',
'Number of INPADOC patents': 433,
Active: '2003-2014',
Mainfieldsofinvention: 'Printing, MEMS',
},
{
Inventor: 'Sebastian T Ventrone',
NumberofPatentFamilies: 204,
Country: 'USA',
'Number of INPADOC patents': 283,
Active: '1989-2017',
Mainfieldsofinvention: 'Semiconductor, Logic, Architecture',
},
{
Inventor: 'Dorin Comaniciu',
NumberofPatentFamilies: 200,
Country: 'USA',
'Number of INPADOC patents': 452,
Active: '2003-2017',
Mainfieldsofinvention:
'Machine Intelligence, Medical Imaging, Image-Guided Surgery, Computer Vision',
},
];export var inventoryData = [
{
Inventor: 'Kia Silverbrook',
NumberofPatentFamilies: 4737,
Country: 'Australia',
'Number of INPADOC patents': 9839,
Active: '1994-2016',
Mainfieldsofinvention:
'Printing, Digital paper, Internet, Electronics,Lab-on-a-chip, MEMS, Mechanical, VLSI',
},
{
Inventor: 'Shunpei Yamazaki',
NumberofPatentFamilies: 4677,
Country: 'Japan',
'Number of INPADOC patents': 10000,
Active: '1976-2016',
Mainfieldsofinvention:
'Thin film transistors, Liquid crystal displays, Solar cells, Flash memory, OLED',
},
{
Inventor: 'Lowell L. Wood, Jr.',
NumberofPatentFamilies: 1419,
Country: 'USA',
'Number of INPADOC patents': 1332,
Active: '1977-2016',
Mainfieldsofinvention: 'Mosquito laser, Nuclear weapons',
},
{
Inventor: 'Paul Lapstun',
NumberofPatentFamilies: 1281,
Country: 'Australia',
'Number of INPADOC patents': 3099,
Active: '2000-2016',
Mainfieldsofinvention:
'Printing, Digital paper, Internet, Electronics, CGI, VLSI',
},
{
Inventor: 'Gurtej Sandhu',
NumberofPatentFamilies: 1255,
Country: 'India',
'Number of INPADOC patents': 2038,
Active: '1991-2016',
Mainfieldsofinvention:
'Thin film processes and materials, VLSI, Semiconductor device fabrication',
},
{
Inventor: 'Jun Koyama',
NumberofPatentFamilies: 1240,
Country: 'Japan',
'Number of INPADOC patents': 4126,
Active: '1991-2016',
Mainfieldsofinvention:
'Thin film transistors, Liquid crystal displays, OLED',
},
{
Inventor: 'Roderick A. Hyde',
NumberofPatentFamilies: 1240,
Country: 'USA',
'Number of INPADOC patents': 3360,
Active: '2001-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Leonard Forbes',
NumberofPatentFamilies: 1093,
Country: 'Canada',
'Number of INPADOC patents': 1398,
Active: '1991-2016',
Mainfieldsofinvention:
'Semiconductor Memories, CCDs, Thin film processes and materials, VLSI',
},
{
Inventor: 'Thomas Edison',
NumberofPatentFamilies: 1084,
Country: 'USA',
'Number of INPADOC patents': 2332,
Active: '1847(b)-1931(d)',
Mainfieldsofinvention:
'Electric power, Lighting, Batteries, Phonograph, Cement, Telegraphy, Mining',
},
{
Inventor: 'Donald E. Weder',
NumberofPatentFamilies: 999,
Country: 'USA',
'Number of INPADOC patents': 1993,
Active: '1976-2015',
Mainfieldsofinvention: 'Florist supplies',
},
{
Inventor: 'George Albert Lyon',
NumberofPatentFamilies: 993,
Country: 'Canada',
'Number of INPADOC patents': 0,
Active: '1882(b)-1961(d)',
Mainfieldsofinvention: 'Automotive, Stainless steel products',
},
{
Inventor: "John F. O'Connor",
NumberofPatentFamilies: 949,
Country: 'USA',
'Number of INPADOC patents': 0,
Active: '1864(b)-1938(d)',
Mainfieldsofinvention: 'Railway draft gearing',
},
{
Inventor: 'Melvin De Groote',
NumberofPatentFamilies: 925,
Country: 'USA',
'Number of INPADOC patents': 0,
Active: '1895(b)-1963(d)',
Mainfieldsofinvention: 'Chemical de-emulsifiers',
},
{
Inventor: 'Jay S. Walker',
NumberofPatentFamilies: 918,
Country: 'USA',
'Number of INPADOC patents': 2206,
Active: '1998-2016',
Mainfieldsofinvention: 'Gaming machines',
},
{
Inventor: 'Edward K. Y. Jung',
NumberofPatentFamilies: 911,
Country: 'USA',
'Number of INPADOC patents': 2254,
Active: '1996-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Francis H. Richards',
NumberofPatentFamilies: 894,
Country: 'USA',
'Number of INPADOC patents': 12,
Active: '1850(b)-19??(d)',
Mainfieldsofinvention: 'Mechanical, automation',
},
{
Inventor: 'Kangguo Cheng',
NumberofPatentFamilies: 884,
Country: 'USA',
'Number of INPADOC patents': 1314,
Active: '2004-2016',
Mainfieldsofinvention:
'Semiconductor device fabrication, Semiconductor memory, Semiconductor device',
},
{
Inventor: 'Clarence T. Tegreene',
NumberofPatentFamilies: 872,
Country: 'USA',
'Number of INPADOC patents': 2255,
Active: '2000-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Ahmadreza Rofougaran',
NumberofPatentFamilies: 808,
Country: 'USA',
'Number of INPADOC patents': 1396,
Active: '2002-2016',
Mainfieldsofinvention: 'Radio Frequency Integrated Circuits',
},
{
Inventor: 'Shou-Shan Fan',
NumberofPatentFamilies: 805,
Country: 'China',
'Number of INPADOC patents': 2120,
Active: '2006-2016',
Mainfieldsofinvention:
'Carbon nanotubes and applications of carbon nanotubes',
},
{
Inventor: 'Michael J. Sullivan',
NumberofPatentFamilies: 788,
Country: 'USA',
'Number of INPADOC patents': 1560,
Active: '1977-2016',
Mainfieldsofinvention: 'Golf balls',
},
{
Inventor: 'Rick Allen Hamilton II',
NumberofPatentFamilies: 773,
Country: 'USA',
'Number of INPADOC patents': 1064,
Active: '1999-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Warren Farnworth',
NumberofPatentFamilies: 770,
Country: 'USA',
'Number of INPADOC patents': 931,
Active: '1990-2016',
Mainfieldsofinvention: 'Semiconductor packaging',
},
{
Inventor: 'Carleton Ellis',
NumberofPatentFamilies: 753,
Country: 'USA',
'Number of INPADOC patents': 21,
Active: '1876(b)-1941(d)',
Mainfieldsofinvention:
'Margarine, Polyester, Anti-knock gasoline, Paint stripper',
},
{
Inventor: 'William H. Eby',
NumberofPatentFamilies: 733,
Country: 'USA',
'Number of INPADOC patents': 758,
Active: '1994-2016',
Mainfieldsofinvention: 'Transgenic soybeans',
},
{
Inventor: 'Hideo Ando',
NumberofPatentFamilies: 728,
Country: 'Japan',
'Number of INPADOC patents': 2588,
Active: '1983-2016',
Mainfieldsofinvention: 'Optical recording',
},
{
Inventor: 'Salman Akram',
NumberofPatentFamilies: 728,
Country: 'USA',
'Number of INPADOC patents': 915,
Active: '1995-2016',
Mainfieldsofinvention: 'Semiconductor packaging',
},
{
Inventor: 'George Spector',
NumberofPatentFamilies: 722,
Country: 'USA',
'Number of INPADOC patents': 747,
Active: '1976-1998',
Mainfieldsofinvention: 'Gadgets, Toys',
},
{
Inventor: 'Jeyhan Karaoguz',
NumberofPatentFamilies: 721,
Country: 'USA',
'Number of INPADOC patents': 1530,
Active: '1996-2016',
Mainfieldsofinvention: 'Wireless communications, Computer networks',
},
{
Inventor: 'Elihu Thomson',
NumberofPatentFamilies: 696,
Country: 'UK',
'Number of INPADOC patents': 50,
Active: '1853(b)-1937(d)',
Mainfieldsofinvention:
'Electric power, Arc lamp, Electric motors, Lightning arrester, Arc welder',
},
{
Inventor: 'Austin L. Gurney',
NumberofPatentFamilies: 695,
Country: 'USA',
'Number of INPADOC patents': 3909,
Active: '1999-2016',
Mainfieldsofinvention: 'Proteins, Antibodies',
},
{
Inventor: 'Tetsujiro Kondo',
NumberofPatentFamilies: 684,
Country: 'Japan',
'Number of INPADOC patents': 4158,
Active: '1987-2015',
Mainfieldsofinvention: 'Signal processing, Image processing',
},
{
Inventor: 'Nathan Myhrvold',
NumberofPatentFamilies: 661,
Country: 'USA',
'Number of INPADOC patents': 1690,
Active: '1994-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'William I. Wood',
NumberofPatentFamilies: 653,
Country: 'USA',
'Number of INPADOC patents': 3560,
Active: '1981-2016',
Mainfieldsofinvention: 'Proteins, Antibodies',
},
{
Inventor: 'Simon R. Walmsley',
NumberofPatentFamilies: 651,
Country: 'Australia',
'Number of INPADOC patents': 1249,
Active: '1995-2015',
Mainfieldsofinvention: 'Printing, Electronics, VLSI, Cryptography',
},
{
Inventor: 'Mark Malamud',
NumberofPatentFamilies: 632,
Country: 'USA',
'Number of INPADOC patents': 1759,
Active: '1997-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Royce A. Levien',
NumberofPatentFamilies: 630,
Country: 'USA',
'Number of INPADOC patents': 1799,
Active: '1997-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Audrey D. Goddard',
NumberofPatentFamilies: 622,
Country: 'USA',
'Number of INPADOC patents': 3416,
Active: '1997-2014',
Mainfieldsofinvention: 'Proteins, Antibodies',
},
{
Inventor: 'Muriel Y. Ishikawa',
NumberofPatentFamilies: 619,
Country: 'USA',
'Number of INPADOC patents': 1660,
Active: '2002-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Robert W. Lord',
NumberofPatentFamilies: 618,
Country: 'USA',
'Number of INPADOC patents': 1708,
Active: '2003-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Jerome Lemelson',
NumberofPatentFamilies: 606,
Country: 'USA',
'Number of INPADOC patents': 60,
Active: '1923(b)-1997(d)',
Mainfieldsofinvention:
'Toys, Industrial robots, Cordless telephones, Fax machines, Videocassette recorders',
},
{
Inventor: 'Béla Barényi',
NumberofPatentFamilies: 595,
Country: 'Austria',
'Number of INPADOC patents': 1244,
Active: '1907(b)-1997(d)',
Mainfieldsofinvention: 'Passive safety in automobiles',
},
{
Inventor: 'Kie Y Ahn',
NumberofPatentFamilies: 593,
Country: 'USA',
'Number of INPADOC patents': 709,
Active: '1976-2016',
Mainfieldsofinvention:
'Thin film processes and materials, VLSI, Semiconductor device fabrication',
},
{
Inventor: 'Tadahiro Ohmi',
NumberofPatentFamilies: 592,
Country: 'Japan',
'Number of INPADOC patents': 2691,
Active: '1981-2016',
Mainfieldsofinvention:
'Thin film processes and materials, Semiconductor device fabrication',
},
{
Inventor: 'Jordin T. Kare',
NumberofPatentFamilies: 585,
Country: 'USA',
'Number of INPADOC patents': 1559,
Active: '1992-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Paul J. Godowski',
NumberofPatentFamilies: 579,
Country: 'USA',
'Number of INPADOC patents': 2605,
Active: '1994-2014',
Mainfieldsofinvention: 'Proteins, Antibodies',
},
{
Inventor: 'Artur Fischer',
NumberofPatentFamilies: 570,
Country: 'Germany',
'Number of INPADOC patents': 3097,
Active: '1976-2002',
Mainfieldsofinvention: 'Fasteners, Construction toys',
},
{
Inventor: 'Edward J. Nowak',
NumberofPatentFamilies: 564,
Country: 'USA',
'Number of INPADOC patents': 1145,
Active: '1979-2016',
Mainfieldsofinvention:
'Semiconductor device fabrication, Semiconductor memory, Semiconductor device',
},
{
Inventor: 'Louis L. Hsu',
NumberofPatentFamilies: 551,
Country: 'USA',
'Number of INPADOC patents': 914,
Active: '1988-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Edwin H. Land',
NumberofPatentFamilies: 535,
Country: 'USA',
'Number of INPADOC patents': 1236,
Active: '1909(b)-1991(d)',
Mainfieldsofinvention: 'Instant photography, Polarizing film',
},
{
Inventor: 'Henri Dreyfus',
NumberofPatentFamilies: 524,
Country: 'Switzerland',
'Number of INPADOC patents': 2117,
Active: '1882(b)-1944(d)',
Mainfieldsofinvention: 'Polymers, Synthetic fibers, Dyes',
},
{
Inventor: 'Bruce B. Doris',
NumberofPatentFamilies: 522,
Country: 'USA',
'Number of INPADOC patents': 867,
Active: '1995-2016',
Mainfieldsofinvention:
'Integrated Circuits, CMOS, DRAM, Semiconductor device fabrication',
},
{
Inventor: 'Clyde C. Farmer',
NumberofPatentFamilies: 513,
Country: 'USA',
'Number of INPADOC patents': 830,
Active: '18??(b)-19??(d)',
Mainfieldsofinvention: 'Railway air brakes',
},
{
Inventor: 'Heinz Focke',
NumberofPatentFamilies: 512,
Country: 'Germany',
'Number of INPADOC patents': 2896,
Active: '1976-2013',
Mainfieldsofinvention: 'Cigarette packaging',
},
{
Inventor: 'Mark I. Gardner',
NumberofPatentFamilies: 511,
Country: 'USA',
'Number of INPADOC patents': 587,
Active: '1994-2010',
Mainfieldsofinvention:
'Consumer electronics, Energy, Computers, Semiconductors, Physics',
},
{
Inventor: 'Ravi K. Arimilli',
NumberofPatentFamilies: 506,
Country: 'India',
'Number of INPADOC patents': 767,
Active: '1992-2016',
Mainfieldsofinvention:
'Computer architecture, Semiconductor memory, Cache coherence, Symmetric multiprocessing',
},
{
Inventor: 'Louis H. Morin',
NumberofPatentFamilies: 503,
Country: 'USA',
'Number of INPADOC patents': 720,
Active: '18??(b)-19??(d)',
Mainfieldsofinvention: 'Fasteners, Locks, Bobbins',
},
{
Inventor: 'Tobin A. King',
NumberofPatentFamilies: 497,
Country: 'Australia',
'Number of INPADOC patents': 1218,
Active: '2000-2015',
Mainfieldsofinvention: 'Printing, Digital paper, Mechanical',
},
{
Inventor: 'Eric C. Leuthardt',
NumberofPatentFamilies: 495,
Country: 'USA',
'Number of INPADOC patents': 1274,
Active: '2006-2016',
Mainfieldsofinvention: 'Medical devices',
},
{
Inventor: 'Ali Khakifirooz',
NumberofPatentFamilies: 489,
Country: 'USA',
'Number of INPADOC patents': 737,
Active: '2011-2016',
Mainfieldsofinvention:
'Integrated Circuits, CMOS, Semiconductor device fabrication',
},
{
Inventor: 'Jack A. Mandelman',
NumberofPatentFamilies: 481,
Country: 'USA',
'Number of INPADOC patents': 889,
Active: '1987-2014',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Jeffrey P. Gambino',
NumberofPatentFamilies: 479,
Country: 'USA',
'Number of INPADOC patents': 798,
Active: '1992-2016',
Mainfieldsofinvention:
'MEMS, CMOS, BiCMOS, DRAM, Image Sensors, RF, Biosensors, 3D Integrated Circuits',
},
{
Inventor: 'John M. Santosuosso',
NumberofPatentFamilies: 473,
Country: 'USA',
'Number of INPADOC patents': 683,
Active: '2001-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'James M. Hart',
NumberofPatentFamilies: 464,
Country: 'USA',
'Number of INPADOC patents': 1145,
Active: '1988-2016',
Mainfieldsofinvention: 'Motor vehicle transmission',
},
{
Inventor: 'Eberhard Ammermann',
NumberofPatentFamilies: 451,
Country: 'Germany',
'Number of INPADOC patents': 5178,
Active: '1979-2015',
Mainfieldsofinvention: 'Fungicides',
},
{
Inventor: 'Thomas E. Murray',
NumberofPatentFamilies: 449,
Country: 'USA',
'Number of INPADOC patents': 462,
Active: '1860(b)-1929(d)',
Mainfieldsofinvention:
'Electrical, HVAC, Wheels, Metal working, Light dimmer',
},
{
Inventor: 'Akira Nakazawa',
NumberofPatentFamilies: 445,
Country: 'Australia',
'Number of INPADOC patents': 1340,
Active: '1980-2016',
Mainfieldsofinvention: 'Printing, Mechanical',
},
{
Inventor: 'Hongyong Zhang',
NumberofPatentFamilies: 440,
Country: 'Japan',
'Number of INPADOC patents': 858,
Active: '1993-2016',
Mainfieldsofinvention: 'Thin film transistors, Liquid crystal displays',
},
{
Inventor: 'Ronald S. Cok',
NumberofPatentFamilies: 436,
Country: 'USA',
'Number of INPADOC patents': 747,
Active: '1986-2016',
Mainfieldsofinvention: 'OLED displays; image processing',
},
{
Inventor: 'fe',
NumberofPatentFamilies: 430,
Country: 'USA',
'Number of INPADOC patents': 1759,
Active: '1983-2016',
Mainfieldsofinvention: 'Biotechnology, Drug delivery, Tissue engineering',
},
{
Inventor: 'Scott H. Wittkopp',
NumberofPatentFamilies: 429,
Country: 'USA',
'Number of INPADOC patents': 1010,
Active: '2001-2016',
Mainfieldsofinvention: 'Motor vehicle transmission',
},
{
Inventor: 'John Hays Hammond, Jr.',
NumberofPatentFamilies: 417,
Country: 'USA',
'Number of INPADOC patents': 460,
Active: '1888(b)-1965(d)',
Mainfieldsofinvention: 'Radio control, Radio communications, Torpedoes',
},
{
Inventor: 'Wilhelm Brandes',
NumberofPatentFamilies: 411,
Country: 'Germany',
'Number of INPADOC patents': 2923,
Active: '1976-2010',
Mainfieldsofinvention: 'Fungicides',
},
{
Inventor: 'Anthony K. Stamper',
NumberofPatentFamilies: 411,
Country: 'USA',
'Number of INPADOC patents': 726,
Active: '1998-2016',
Mainfieldsofinvention: 'MEMS, CMOS, BiCMOS, Silicon-germanium',
},
{
Inventor: 'Hossein Eslambolchi',
NumberofPatentFamilies: 410,
Country: 'USA',
'Number of INPADOC patents': 631,
Active: '1993-2016',
Mainfieldsofinvention:
'Telecommunications, Network intelligence, information Technology, communications technology',
},
{
Inventor: 'Stanford R. Ovshinsky',
NumberofPatentFamilies: 400,
Country: 'USA',
'Number of INPADOC patents': 1649,
Active: '1922(b)-2012(d)',
Mainfieldsofinvention:
'Batteries, Solar cells, Liquid crystal displays, Hydrogen fuel cells, Computer data storage',
},
{
Inventor: 'Victoria Y. H. Wood',
NumberofPatentFamilies: 400,
Country: 'USA',
'Number of INPADOC patents': 1045,
Active: '2009-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Josef Theurer',
NumberofPatentFamilies: 388,
Country: 'Austria',
'Number of INPADOC patents': 5085,
Active: '1976-2016',
Mainfieldsofinvention: 'Railroad maintenance machines',
},
{
Inventor: 'Cary L. Bates',
NumberofPatentFamilies: 384,
Country: 'USA',
'Number of INPADOC patents': 570,
Active: '1994-2016',
Mainfieldsofinvention: 'Programming tools, DBX, Memory debuggers',
},
{
Inventor: 'David V. Horak',
NumberofPatentFamilies: 380,
Country: 'USA',
'Number of INPADOC patents': 616,
Active: '1992-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Kai-Li Jiang',
NumberofPatentFamilies: 379,
Country: 'China',
'Number of INPADOC patents': 829,
Active: '2006-2016',
Mainfieldsofinvention:
'Carbon nanotubes and applications of carbon nanotubes',
},
{
Inventor: 'Hans-Joachim Santel',
NumberofPatentFamilies: 377,
Country: 'Germany',
'Number of INPADOC patents': 2623,
Active: '1986-2013',
Mainfieldsofinvention: 'Herbicides, Pesticides, Organic chemistry',
},
{
Inventor: 'Xuemin (Sherman) Chen',
NumberofPatentFamilies: 377,
Country: 'USA',
'Number of INPADOC patents': 1151,
Active: '1997-2017',
Mainfieldsofinvention:
'Computer networks, Integrated Circuits, Signal Processing',
},
{
Inventor: 'George P. Liang',
NumberofPatentFamilies: 375,
Country: 'China',
'Number of INPADOC patents': 508,
Active: '1983-2016',
Mainfieldsofinvention: 'Gas turbine cooling',
},
{
Inventor: 'Gisela Lorenz',
NumberofPatentFamilies: 374,
Country: 'Germany',
'Number of INPADOC patents': 4155,
Active: '1990-2015',
Mainfieldsofinvention: 'Fungicides, Organic chemistry',
},
{
Inventor: 'Garry R. Jackson',
NumberofPatentFamilies: 367,
Country: 'Australia',
'Number of INPADOC patents': 656,
Active: '2001-2016',
Mainfieldsofinvention: 'Printing, Mechanical',
},
{
Inventor: 'Paul W. Dent',
NumberofPatentFamilies: 362,
Country: 'USA',
'Number of INPADOC patents': 2252,
Active: '1984-2015',
Mainfieldsofinvention: 'Wireless communications',
},
{
Inventor: 'George Westinghouse',
NumberofPatentFamilies: 361,
Country: 'USA',
'Number of INPADOC patents': 0,
Active: '1846(b)-1914(d)',
Mainfieldsofinvention:
'Electric power, Electricity meter, Railway air brake, Steam engines',
},
{
Inventor: 'Wael W. Diab',
NumberofPatentFamilies: 358,
Country: 'USA',
'Number of INPADOC patents': 774,
Active: '2003-2016',
Mainfieldsofinvention: 'Computer networks',
},
{
Inventor: 'Devendra K. Sadana',
NumberofPatentFamilies: 356,
Country: 'India',
'Number of INPADOC patents': 794,
Active: '1983-2016',
Mainfieldsofinvention:
'Solar cells, OLED, Integrated Circuits, CMOS, DRAM, LEDs',
},
{
Inventor: 'Vincent J. Zimmer',
NumberofPatentFamilies: 354,
Country: 'USA',
'Number of INPADOC patents': 972,
Active: '1999-2016',
Mainfieldsofinvention: 'Computer software and firmware',
},
{
Inventor: 'Robert R. Schmidt',
NumberofPatentFamilies: 350,
Country: 'Germany',
'Number of INPADOC patents': 2467,
Active: '1971-2005',
Mainfieldsofinvention: 'Herbicides, Fungicides, Organic chemistry',
},
{
Inventor: 'Norman M. Berry',
NumberofPatentFamilies: 347,
Country: 'Australia',
'Number of INPADOC patents': 516,
Active: '2006-2016',
Mainfieldsofinvention: 'Printing, Mechanical',
},
{
Inventor: 'Chih-Chao Yang',
NumberofPatentFamilies: 345,
Country: 'USA',
'Number of INPADOC patents': 690,
Active: '2003-2016',
Mainfieldsofinvention: 'Integrated Circuits',
},
{
Inventor: 'Gregory J. Boss',
NumberofPatentFamilies: 345,
Country: 'USA',
'Number of INPADOC patents': 588,
Active: '2008-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Mark W. Kroll',
NumberofPatentFamilies: 343,
Country: 'USA',
'Number of INPADOC patents': 460,
Active: '1987-2016',
Mainfieldsofinvention: 'Implantable medical devices',
},
{
Inventor: "Brian M. O'Connell",
NumberofPatentFamilies: 331,
Country: 'USA',
'Number of INPADOC patents': 592,
Active: '2009-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'William Daniel Hillis',
NumberofPatentFamilies: 328,
Country: 'USA',
'Number of INPADOC patents': 229,
Active: '1986-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Brent A. Anderson',
NumberofPatentFamilies: 323,
Country: 'USA',
'Number of INPADOC patents': 454,
Active: '2001-2016',
Mainfieldsofinvention:
'Semiconductor device fabrication, Semiconductor memory, Semiconductor device',
},
{
Inventor: 'Jeffrey E. Stahmann',
NumberofPatentFamilies: 321,
Country: 'USA',
'Number of INPADOC patents': 640,
Active: '1994-2016',
Mainfieldsofinvention: 'Medical devices',
},
{
Inventor: 'Carl J. Radens',
NumberofPatentFamilies: 317,
Country: 'USA',
'Number of INPADOC patents': 636,
Active: '1994-2016',
Mainfieldsofinvention:
'Integrated Circuits, CMOS, DRAM, Semiconductor device fabrication',
},
{
Inventor: 'Clifford A. Pickover',
NumberofPatentFamilies: 317,
Country: 'USA',
'Number of INPADOC patents': 653,
Active: '1992-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Liang Liu',
NumberofPatentFamilies: 310,
Country: 'China',
'Number of INPADOC patents': 777,
Active: '2005-2016',
Mainfieldsofinvention:
'Carbon nanotubes and applications of carbon nanotubes',
},
{
Inventor: 'Steven L. Teig',
NumberofPatentFamilies: 307,
Country: 'USA',
'Number of INPADOC patents': 366,
Active: '1995-2016',
Mainfieldsofinvention: 'Integrated Circuits',
},
{
Inventor: 'Victoria Smith',
NumberofPatentFamilies: 305,
Country: 'USA',
'Number of INPADOC patents': 2040,
Active: '2006-2016',
Mainfieldsofinvention: 'Proteins, Antibodies',
},
{
Inventor: 'Robert G. LeTourneau',
NumberofPatentFamilies: 299,
Country: 'USA',
'Number of INPADOC patents': 67,
Active: '1888(b)-1969(d)',
Mainfieldsofinvention:
'Earthworks (engineering), Heavy Equipment, Industrial Machinery',
},
{
Inventor: 'William R. Tonti',
NumberofPatentFamilies: 291,
Country: 'USA',
'Number of INPADOC patents': 441,
Active: '1994-2016',
Mainfieldsofinvention:
'Integrated Circuits, CMOS, DRAM, Semiconductor device fabrication',
},
{
Inventor: 'Keith R. Walker',
NumberofPatentFamilies: 282,
Country: 'Saudi Arabia',
'Number of INPADOC patents': 318,
Active: '2003-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Victor S. Moore',
NumberofPatentFamilies: 280,
Country: 'USA',
'Number of INPADOC patents': 428,
Active: '1982-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Hanson S. Gifford III',
NumberofPatentFamilies: 276,
Country: 'USA',
'Number of INPADOC patents': 795,
Active: '1987-2016',
Mainfieldsofinvention: 'Medical Devices',
},
{
Inventor: 'Daniel J. Winarski',
NumberofPatentFamilies: 275,
Country: 'USA',
'Number of INPADOC patents': 506,
Active: '1982-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Adam Heller',
NumberofPatentFamilies: 272,
Country: 'Romania',
'Number of INPADOC patents': 711,
Active: '1968-2016',
Mainfieldsofinvention: 'Solar cells, Glucose meters, Lasers',
},
{
Inventor: 'Lisa Seacat DeLuca',
NumberofPatentFamilies: 271,
Country: 'USA',
'Number of INPADOC patents': 385,
Active: '2009-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Brent Keeth',
NumberofPatentFamilies: 270,
Country: 'USA',
'Number of INPADOC patents': 470,
Active: '1994-2016',
Mainfieldsofinvention: 'Integrated Circuits, CMOS, DRAM',
},
{
Inventor: 'Hartley Owen',
NumberofPatentFamilies: 267,
Country: 'USA',
'Number of INPADOC patents': 751,
Active: '1976-2010',
Mainfieldsofinvention: 'Fluid catalytic cracking',
},
{
Inventor: 'Michael A. Rothman',
NumberofPatentFamilies: 256,
Country: 'USA',
'Number of INPADOC patents': 687,
Active: '2001-2017',
Mainfieldsofinvention: 'Computer software and firmware',
},
{
Inventor: 'Yoshihiro Kikuchi',
NumberofPatentFamilies: 255,
Country: 'Japan',
'Number of INPADOC patents': 1120,
Active: '1994-2015',
Mainfieldsofinvention: 'Video processing',
},
{
Inventor: 'Kulvir S. Bhogal',
NumberofPatentFamilies: 252,
Country: 'USA',
'Number of INPADOC patents': 486,
Active: '2003-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Bengt Lindoff',
NumberofPatentFamilies: 248,
Country: 'Sweden',
'Number of INPADOC patents': 1658,
Active: '2000-2017',
Mainfieldsofinvention: 'Wireless communications',
},
{
Inventor: 'Nobuyuki Taniguchi',
NumberofPatentFamilies: 245,
Country: 'Japan',
'Number of INPADOC patents': 967,
Active: '1979-2015',
Mainfieldsofinvention: 'Cameras',
},
{
Inventor: 'Dean L. Kamen',
NumberofPatentFamilies: 243,
Country: 'USA',
'Number of INPADOC patents': 1186,
Active: '1979-2016',
Mainfieldsofinvention:
'Battery-powered electric vehicles, Medical devices, Stirling engines, Water purification, Wheelchairs',
},
{
Inventor: 'Philip S. Yu',
NumberofPatentFamilies: 236,
Country: 'USA',
'Number of INPADOC patents': 158,
Active: '1982-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Rajiv V. Joshi',
NumberofPatentFamilies: 235,
Country: 'USA',
'Number of INPADOC patents': 354,
Active: '1986-2016',
Mainfieldsofinvention: 'Electronics, analytics',
},
{
Inventor: 'Lawrence A. Clevenger',
NumberofPatentFamilies: 235,
Country: 'USA',
'Number of INPADOC patents': 526,
Active: '1996-2017',
Mainfieldsofinvention:
'Semiconductor, Cognitive, Memory, Security, Analytics',
},
{
Inventor: 'Johnny M. Shieh',
NumberofPatentFamilies: 231,
Country: 'USA',
'Number of INPADOC patents': 444,
Active: '1996-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Takeshi Chujoh',
NumberofPatentFamilies: 229,
Country: 'Japan',
'Number of INPADOC patents': 1065,
Active: '1995-2016',
Mainfieldsofinvention: 'Video processing',
},
{
Inventor: 'Bran Ferren',
NumberofPatentFamilies: 225,
Country: 'USA',
'Number of INPADOC patents': 589,
Active: '1986-2017',
Mainfieldsofinvention:
'Computers, Consumer Electronics, Optical Systems, Medical, User Interfaces, Automotive',
},
{
Inventor: 'Paul Ian Mackey',
NumberofPatentFamilies: 220,
Country: 'Australia',
'Number of INPADOC patents': 246,
Active: '2008-2016',
Mainfieldsofinvention: 'Printing, Mechanical',
},
{
Inventor: 'Louis Rosenberg',
NumberofPatentFamilies: 218,
Country: 'USA',
'Number of INPADOC patents': 444,
Active: '1995-2016',
Mainfieldsofinvention: 'Augmented Reality, Virtual Reality, A.I., HCI',
},
{
Inventor: 'Thomas J. Kennedy III',
NumberofPatentFamilies: 218,
Country: 'USA',
'Number of INPADOC patents': 513,
Active: '1992-2016',
Mainfieldsofinvention: 'Sporting Goods, Wind Turbines',
},
{
Inventor: 'Gerald F. McBrearty',
NumberofPatentFamilies: 213,
Country: 'USA',
'Number of INPADOC patents': 387,
Active: '1997-2016',
Mainfieldsofinvention: 'Various',
},
{
Inventor: 'Esmael H. Dinan',
NumberofPatentFamilies: 208,
Country: 'USA',
'Number of INPADOC patents': 344,
Active: '2000-2017',
Mainfieldsofinvention: 'Communication Networks',
},
{
Inventor: 'Imad Libbus',
NumberofPatentFamilies: 207,
Country: 'USA',
'Number of INPADOC patents': 472,
Active: '2007-2017',
Mainfieldsofinvention: 'Medical devices',
},
{
Inventor: 'Hiroshi (You) Yoshioka',
NumberofPatentFamilies: 205,
Country: 'Japan',
'Number of INPADOC patents': 181,
Active: '1997-2015',
Mainfieldsofinvention: 'Cameras',
},
{
Inventor: 'Patrick B. Usoro',
NumberofPatentFamilies: 205,
Country: 'USA',
'Number of INPADOC patents': 343,
Active: '1999-2016',
Mainfieldsofinvention:
'Transmissions, Hybrid Powertrains, Vehicle Thermal Management',
},
{
Inventor: 'Gregory McAvoy',
NumberofPatentFamilies: 205,
Country: 'Australia',
'Number of INPADOC patents': 433,
Active: '2003-2014',
Mainfieldsofinvention: 'Printing, MEMS',
},
{
Inventor: 'Sebastian T Ventrone',
NumberofPatentFamilies: 204,
Country: 'USA',
'Number of INPADOC patents': 283,
Active: '1989-2017',
Mainfieldsofinvention: 'Semiconductor, Logic, Architecture',
},
{
Inventor: 'Dorin Comaniciu',
NumberofPatentFamilies: 200,
Country: 'USA',
'Number of INPADOC patents': 452,
Active: '2003-2017',
Mainfieldsofinvention:
'Machine Intelligence, Medical Imaging, Image-Guided Surgery, Computer Vision',
},
];Pass additional parameters to the server when exporting
Passing additional parameters to the server when exporting data in the Syncfusion React Grid involves providing flexibility to include extra information or customize the export process based on specific requirements.
This can be achieved by utilizing the query property and the toolbarClick event. Within the query property, the addParams method can be invoked to add parameters to the request.
The following example demonstrates how to pass additional parameters to the server when Excel exporting within the toolbarClick event. Within the event, the additional parameters, specifically “recordcount” as 15, are passed using the addParams method and displayed as a message:
import React, { useRef, useState } from "react";
import {GridComponent, ColumnsDirective, ColumnDirective, ExcelExport, Toolbar, Inject, ToolbarItems} from "@syncfusion/ej2-react-grids";
import { Query } from "@syncfusion/ej2-data";
import { data } from "./datasource";
function App() {
const gridRef = useRef(null);
const [message, setMessage] = useState("");
const toolbarOptions = ["ExcelExport"];
const toolbarClick = (args) => {
if (gridRef.current && args.item.id === "Grid_excelexport") {
let queryClone = gridRef.current.query;
gridRef.current.query = new Query().addParams("recordcount", "15");
setMessage(`Key: ${gridRef.current.query.params[0].key} and Value: ${gridRef.current.query.params[0].value} on ${args.item.text}`);
gridRef.current.excelExport();
}
};
const excelExportComplete = (args) => {
gridRef.current.query = new Query();
};
return (
<div>
<p id="message">{message}</p>
<GridComponent
id="Grid"
dataSource={data}
height={272}
toolbar={toolbarOptions}
allowExcelExport={true}
toolbarClick={toolbarClick}
excelExportComplete={excelExportComplete}
ref={gridRef}>
<ColumnsDirective>
<ColumnDirective field="OrderID" headerText="Order ID" textAlign="Right" width="120" />
<ColumnDirective field="CustomerID" headerText="Customer ID" visible={false} width="150" />
<ColumnDirective field="ShipCity" headerText="Ship City" width="150" />
<ColumnDirective field="ShipName" headerText="Ship Name" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]} />
</GridComponent>
</div>
);
}
export default App;import React, { useRef, useState } from "react";
import {GridComponent, ColumnsDirective, ColumnDirective, ExcelExport, Inject, Toolbar, ToolbarItems, ToolbarClickEventArgs, ExcelExportCompleteArgs} from "@syncfusion/ej2-react-grids";
import { Query } from "@syncfusion/ej2-data";
import { data } from "./datasource";
function App() {
const gridRef = useRef<GridComponent>(null);
const [message, setMessage] = useState("");
const toolbarOptions: ToolbarItems[] = ["ExcelExport"];
const toolbarClick = (args: ToolbarClickEventArgs) => {
if (gridRef.current && args.item.id === "Grid_excelexport") {
let queryClone = gridRef.current.query;
gridRef.current.query = new Query().addParams("recordcount", "15");
setMessage(`Key: ${gridRef.current.query.params[0].key} and Value: ${gridRef.current.query.params[0].value} on ${args.item.text}`);
gridRef.current.excelExport();
}
};
const excelExportComplete = (args: ExcelExportCompleteArgs): void => {
gridRef.current.query = new Query();
};
return (
<div>
<p id="message">{message}</p>
<GridComponent
id="Grid"
dataSource={data}
height={272}
toolbar={toolbarOptions}
allowExcelExport={true}
toolbarClick={toolbarClick}
excelExportComplete={excelExportComplete}
ref={gridRef}>
<ColumnsDirective>
<ColumnDirective field="OrderID" headerText="Order ID" textAlign="Right" width="120" />
<ColumnDirective field="CustomerID" headerText="Customer ID" visible={false} width="150" />
<ColumnDirective field="ShipCity" headerText="Ship City" width="150" />
<ColumnDirective field="ShipName" headerText="Ship Name" width="150" />
</ColumnsDirective>
<Inject services={[Toolbar, ExcelExport]} />
</GridComponent>
</div>
);
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];Limitations
- A CSV is a plain text format that does not support features such as cell rotation, font and color customization, column and row spanning, or adding formulas. CSV files store raw data without any formatting or styling.