Data binding in React Spreadsheet component
20 Jan 202324 minutes to read
The Spreadsheet uses DataManager, which supports both RESTful JSON data services and local JavaScript object array binding to a range. The dataSource property can be assigned either with the instance of DataManager or JavaScript object array collection.
To get start quickly with Data Binding, you can check on this video:
To bind data to a cell, use
cell data bindingsupport.
Local data
To bind local data to the Spreadsheet, you can assign a JavaScript object array to the dataSource property.
Refer to the following code example for local data binding.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component {
spreadsheet;
render() {
return (<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={110}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component<{}, {}> {
spreadsheet: SpreadsheetComponent;
render() {
return (<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={110}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Default data source
*/
export let data = [{
OrderID: 10248,
CustomerID: 'VINET',
EmployeeID: 5,
ShipName: 'Vins et alcools Chevalier',
ShipCity: 'Reims',
ShipAddress: '59 rue de lAbbaye'
},
{
OrderID: 10249,
CustomerID: 'TOMSP',
EmployeeID: 6,
ShipName: 'Toms Spezialitäten',
ShipCity: 'Münster',
ShipAddress: 'Luisenstr. 48'
},
{
OrderID: 10250,
CustomerID: 'HANAR',
EmployeeID: 4,
ShipName: 'Hanari Carnes',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua do Paço, 67'
},
{
OrderID: 10251,
CustomerID: 'VICTE',
EmployeeID: 3,
ShipName: 'Victuailles en stock',
ShipCity: 'Lyon',
ShipAddress: '2, rue du Commerce'
},
{
OrderID: 10252,
CustomerID: 'SUPRD',
EmployeeID: 4,
ShipName: 'Suprêmes délices',
ShipCity: 'Charleroi',
ShipAddress: 'Boulevard Tirou, 255'
}];/**
* Default data source
*/
export let data: Object[] = [{
OrderID: 10248,
CustomerID: 'VINET',
EmployeeID: 5,
ShipName: 'Vins et alcools Chevalier',
ShipCity: 'Reims',
ShipAddress: '59 rue de lAbbaye'
},
{
OrderID: 10249,
CustomerID: 'TOMSP',
EmployeeID: 6,
ShipName: 'Toms Spezialitäten',
ShipCity: 'Münster',
ShipAddress: 'Luisenstr. 48'
},
{
OrderID: 10250,
CustomerID: 'HANAR',
EmployeeID: 4,
ShipName: 'Hanari Carnes',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua do Paço, 67'
},
{
OrderID: 10251,
CustomerID: 'VICTE',
EmployeeID: 3,
ShipName: 'Victuailles en stock',
ShipCity: 'Lyon',
ShipAddress: '2, rue du Commerce'
},
{
OrderID: 10252,
CustomerID: 'SUPRD',
EmployeeID: 4,
ShipName: 'Suprêmes délices',
ShipCity: 'Charleroi',
ShipAddress: 'Boulevard Tirou, 255'
}];The local data source can also be provided as an instance of the
DataManager. By default,DataManageruses JsonAdaptor for local data-binding.
Remote data
To bind remote data to the Spreadsheet control, assign service data as an instance of DataManager to the dataSource property. To interact with remote data source, provide the service endpoint url.
Refer to the following code example for remote data binding.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component {
query = new Query().select(['OrderID', 'CustomerID', 'ShipName', 'ShipCity', 'ShipCountry', 'Freight']).take(200);
data = new DataManager({
url: 'https://js.syncfusion.com/demos/ejServices//wcf/Northwind.svc/Orders',
crossDomain: true
});
spreadsheet;
render() {
return (<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }}>
<SheetsDirective>
<SheetDirective name='Shipment Details'>
<RangesDirective>
<RangeDirective dataSource={this.data} query={this.query}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={110}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component<{}, {}> {
public query: Query = new Query().select(['OrderID', 'CustomerID', 'ShipName', 'ShipCity', 'ShipCountry', 'Freight']).take(200);
public data: DataManager = new DataManager({
url: 'https://js.syncfusion.com/demos/ejServices//wcf/Northwind.svc/Orders',
crossDomain: true
});
spreadsheet: SpreadsheetComponent;
render() {
return (<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
<SheetsDirective>
<SheetDirective name= 'Shipment Details'>
<RangesDirective>
<RangeDirective dataSource={this.data} query={this.query}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={110}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Default data source
*/
export let defaultData = [
{ 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
{ 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
{ 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
{ 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
{ 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
{ 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
{ 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
{ 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
{ 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
];
/**
* Grid datasource
*/
export function getTradeData(dataCount) {
let employees = [
'Michael', 'Kathryn', 'Tamer', 'Martin', 'Davolio', 'Nancy', 'Fuller', 'Leverling', 'Peacock',
'Margaret', 'Buchanan', 'Janet', 'Andrew', 'Callahan', 'Laura', 'Dodsworth', 'Anne',
'Bergs', 'Vinet', 'Anton', 'Fleet', 'Zachery', 'Van', 'King', 'Jack', 'Rose'
];
let designation = ['Manager', 'CFO', 'Designer', 'Developer', 'Program Directory', 'System Analyst', 'Project Lead'];
let mail = ['sample.com', 'arpy.com', 'rpy.com', 'mail.com', 'jourrapide.com'];
let location = ['UK', 'USA', 'Sweden', 'France', 'Canada', 'Argentina', 'Austria', 'Germany', 'Mexico'];
let status = ['Active', 'Inactive'];
let trustworthiness = ['Perfect', 'Sufficient', 'Insufficient'];
let tradeData = [];
let address = ['59 rue de lAbbaye', 'Luisenstr. 48', 'Rua do Paço, 67', '2, rue du Commerce', 'Boulevard Tirou, 255',
'Rua do mailPaço, 67', 'Hauptstr. 31', 'Starenweg 5', 'Rua do Mercado, 12',
'Carrera 22 con Ave. Carlos Soublette #8-35', 'Kirchgasse 6',
'Sierras de Granada 9993', 'Mehrheimerstr. 369', 'Rua da Panificadora, 12', '2817 Milton Dr.', 'Kirchgasse 6',
'Åkergatan 24', '24, place Kléber', 'Torikatu 38', 'Berliner Platz 43', '5ª Ave. Los Palos Grandes', '1029 - 12th Ave. S.',
'Torikatu 38', 'P.O. Box 555', '2817 Milton Dr.', 'Taucherstraße 10', '59 rue de lAbbaye', 'Via Ludovico il Moro 22',
'Avda. Azteca 123', 'Heerstr. 22', 'Berguvsvägen 8', 'Magazinweg 7', 'Berguvsvägen 8', 'Gran Vía, 1', 'Gran Vía, 1',
'Carrera 52 con Ave. Bolívar #65-98 Llano Largo', 'Magazinweg 7', 'Taucherstraße 10', 'Taucherstraße 10',
'Av. Copacabana, 267', 'Strada Provinciale 124', 'Fauntleroy Circus', 'Av. dos Lusíadas, 23',
'Rua da Panificadora, 12', 'Av. Inês de Castro, 414', 'Avda. Azteca 123', '2817 Milton Dr.'];
let employeeimg = ['usermale', 'userfemale'];
if (typeof dataCount === 'string') {
dataCount = parseInt(dataCount, 10);
}
for (let i = 1; i <= dataCount; i++) {
let code = 10000;
tradeData.push({
'EmployeeID': code + i,
'Employees': employees[Math.floor(Math.random() * employees.length)] + ' ' + employees[Math.floor(Math.random() * employees.length)],
'Designation': designation[Math.floor(Math.random() * designation.length)],
'Location': location[Math.floor(Math.random() * location.length)],
'Status': status[Math.floor(Math.random() * status.length)],
'Trustworthiness': trustworthiness[Math.floor(Math.random() * trustworthiness.length)],
'Rating': Math.floor(Math.random() * 5),
'Software': Math.floor(Math.random() * 100),
'EmployeeImg': employeeimg[Math.floor(Math.random() * employeeimg.length)],
'CurrentSalary': Math.floor((Math.random() * 100000)),
'Address': address[Math.floor(Math.random() * address.length)],
});
let employee = 'Employees';
let emp = tradeData[i - 1][employee];
let sName = emp.substr(0, emp.indexOf(' ')).toLowerCase();
let empmail = 'Mail';
tradeData[i - 1][empmail] = sName + (Math.floor(Math.random() * 100) + 10) + '@' + mail[Math.floor(Math.random() * mail.length)];
}
return tradeData;
}
export let tradeData = [
{
"EmployeeID": 10001,
"Employees": "Laura Nancy",
"Designation": "Designer",
"Location": "France",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 69,
"EmployeeImg": "usermale",
"CurrentSalary": 84194,
"Address": "Taucherstraße 10",
"Mail": "laura15@jourrapide.com"
},
{
"EmployeeID": 10002,
"Employees": "Zachery Van",
"Designation": "CFO",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 99,
"EmployeeImg": "usermale",
"CurrentSalary": 55349,
"Address": "5ª Ave. Los Palos Grandes",
"Mail": "zachery109@sample.com"
},
{
"EmployeeID": 10003,
"Employees": "Rose Fuller",
"Designation": "CFO",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 1,
"EmployeeImg": "usermale",
"CurrentSalary": 16477,
"Address": "2817 Milton Dr.",
"Mail": "rose55@rpy.com"
},
{
"EmployeeID": 10004,
"Employees": "Jack Bergs",
"Designation": "Manager",
"Location": "Mexico",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 36,
"EmployeeImg": "usermale",
"CurrentSalary": 49040,
"Address": "2, rue du Commerce",
"Mail": "jack30@sample.com"
},
{
"EmployeeID": 10005,
"Employees": "Vinet Bergs",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 39,
"EmployeeImg": "usermale",
"CurrentSalary": 5495,
"Address": "Rua da Panificadora, 12",
"Mail": "vinet32@jourrapide.com"
},
{
"EmployeeID": 10006,
"Employees": "Buchanan Van",
"Designation": "Designer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 42182,
"Address": "24, place Kléber",
"Mail": "buchanan18@mail.com"
},
{
"EmployeeID": 10007,
"Employees": "Dodsworth Nancy",
"Designation": "Project Lead",
"Location": "USA",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 35776,
"Address": "Rua do Paço, 67",
"Mail": "dodsworth84@mail.com"
},
{
"EmployeeID": 10008,
"Employees": "Laura Jack",
"Designation": "Developer",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 89,
"EmployeeImg": "usermale",
"CurrentSalary": 25108,
"Address": "Rua da Panificadora, 12",
"Mail": "laura82@mail.com"
},
{
"EmployeeID": 10009,
"Employees": "Anne Fuller",
"Designation": "Program Directory",
"Location": "Mexico",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 0,
"Software": 19,
"EmployeeImg": "userfemale",
"CurrentSalary": 32568,
"Address": "Gran Vía, 1",
"Mail": "anne97@jourrapide.com"
},
{
"EmployeeID": 10010,
"Employees": "Buchanan Andrew",
"Designation": "Designer",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 62,
"EmployeeImg": "userfemale",
"CurrentSalary": 12320,
"Address": "P.O. Box 555",
"Mail": "buchanan50@jourrapide.com"
},
{
"EmployeeID": 10011,
"Employees": "Andrew Janet",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 20890,
"Address": "Starenweg 5",
"Mail": "andrew63@mail.com"
},
{
"EmployeeID": 10012,
"Employees": "Margaret Tamer",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 7,
"EmployeeImg": "userfemale",
"CurrentSalary": 22337,
"Address": "Magazinweg 7",
"Mail": "margaret26@mail.com"
},
{
"EmployeeID": 10013,
"Employees": "Tamer Fuller",
"Designation": "CFO",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 89181,
"Address": "Taucherstraße 10",
"Mail": "tamer40@arpy.com"
},
{
"EmployeeID": 10014,
"Employees": "Tamer Anne",
"Designation": "CFO",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 18,
"EmployeeImg": "usermale",
"CurrentSalary": 20998,
"Address": "Taucherstraße 10",
"Mail": "tamer68@arpy.com"
},
{
"EmployeeID": 10015,
"Employees": "Anton Davolio",
"Designation": "Project Lead",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 4,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 48232,
"Address": "Luisenstr. 48",
"Mail": "anton46@mail.com"
},
{
"EmployeeID": 10016,
"Employees": "Buchanan Buchanan",
"Designation": "System Analyst",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 19,
"EmployeeImg": "usermale",
"CurrentSalary": 43041,
"Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
"Mail": "buchanan68@mail.com"
},
{
"EmployeeID": 10017,
"Employees": "King Buchanan",
"Designation": "Program Directory",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 44,
"EmployeeImg": "userfemale",
"CurrentSalary": 25259,
"Address": "Magazinweg 7",
"Mail": "king80@jourrapide.com"
},
{
"EmployeeID": 10018,
"Employees": "Rose Michael",
"Designation": "Project Lead",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 31,
"EmployeeImg": "userfemale",
"CurrentSalary": 91156,
"Address": "Fauntleroy Circus",
"Mail": "rose75@mail.com"
},
{
"EmployeeID": 10019,
"Employees": "King Bergs",
"Designation": "Developer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 2,
"Software": 29,
"EmployeeImg": "userfemale",
"CurrentSalary": 28826,
"Address": "2817 Milton Dr.",
"Mail": "king57@jourrapide.com"
},
{
"EmployeeID": 10020,
"Employees": "Davolio Fuller",
"Designation": "Designer",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 3,
"Software": 35,
"EmployeeImg": "userfemale",
"CurrentSalary": 71035,
"Address": "Gran Vía, 1",
"Mail": "davolio29@arpy.com"
},
{
"EmployeeID": 10021,
"Employees": "Rose Rose",
"Designation": "CFO",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 38,
"EmployeeImg": "usermale",
"CurrentSalary": 68123,
"Address": "Rua do Mercado, 12",
"Mail": "rose54@arpy.com"
},
{
"EmployeeID": 10022,
"Employees": "Andrew Michael",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 2,
"Software": 61,
"EmployeeImg": "userfemale",
"CurrentSalary": 75470,
"Address": "2, rue du Commerce",
"Mail": "andrew88@jourrapide.com"
},
{
"EmployeeID": 10023,
"Employees": "Davolio Kathryn",
"Designation": "Manager",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 25,
"EmployeeImg": "usermale",
"CurrentSalary": 25234,
"Address": "Hauptstr. 31",
"Mail": "davolio42@sample.com"
},
{
"EmployeeID": 10024,
"Employees": "Anne Fleet",
"Designation": "System Analyst",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 8341,
"Address": "59 rue de lAbbaye",
"Mail": "anne86@arpy.com"
},
{
"EmployeeID": 10025,
"Employees": "Margaret Andrew",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 51,
"EmployeeImg": "userfemale",
"CurrentSalary": 84975,
"Address": "P.O. Box 555",
"Mail": "margaret41@arpy.com"
},
{
"EmployeeID": 10026,
"Employees": "Kathryn Laura",
"Designation": "Project Lead",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 48,
"EmployeeImg": "usermale",
"CurrentSalary": 97282,
"Address": "Avda. Azteca 123",
"Mail": "kathryn82@rpy.com"
},
{
"EmployeeID": 10027,
"Employees": "Michael Michael",
"Designation": "Developer",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 16,
"EmployeeImg": "usermale",
"CurrentSalary": 4184,
"Address": "Rua do Paço, 67",
"Mail": "michael58@jourrapide.com"
},
{
"EmployeeID": 10028,
"Employees": "Leverling Vinet",
"Designation": "Project Lead",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 57,
"EmployeeImg": "userfemale",
"CurrentSalary": 38370,
"Address": "59 rue de lAbbaye",
"Mail": "leverling102@sample.com"
},
{
"EmployeeID": 10029,
"Employees": "Rose Jack",
"Designation": "Developer",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 46,
"EmployeeImg": "userfemale",
"CurrentSalary": 84790,
"Address": "Rua do Mercado, 12",
"Mail": "rose108@jourrapide.com"
},
{
"EmployeeID": 10030,
"Employees": "Vinet Van",
"Designation": "Developer",
"Location": "USA",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 40,
"EmployeeImg": "usermale",
"CurrentSalary": 71005,
"Address": "Gran Vía, 1",
"Mail": "vinet90@jourrapide.com"
}
];/**
* Default data source
*/
export let defaultData: Object[] = [
{ 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
{ 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
{ 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
{ 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
{ 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
{ 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
{ 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
{ 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
{ 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
];
/**
* Grid datasource
*/
export function getTradeData(dataCount?: number): object {
let employees: string[] = [
'Michael', 'Kathryn', 'Tamer', 'Martin', 'Davolio', 'Nancy', 'Fuller', 'Leverling', 'Peacock',
'Margaret', 'Buchanan', 'Janet', 'Andrew', 'Callahan', 'Laura', 'Dodsworth', 'Anne',
'Bergs', 'Vinet', 'Anton', 'Fleet', 'Zachery', 'Van', 'King', 'Jack', 'Rose'];
let designation: string[] = ['Manager', 'CFO', 'Designer', 'Developer', 'Program Directory', 'System Analyst', 'Project Lead'];
let mail: string[] = ['sample.com', 'arpy.com', 'rpy.com', 'mail.com', 'jourrapide.com'];
let location: string[] = ['UK', 'USA', 'Sweden', 'France', 'Canada', 'Argentina', 'Austria', 'Germany', 'Mexico'];
let status: string[] = ['Active', 'Inactive'];
let trustworthiness: string[] = ['Perfect', 'Sufficient', 'Insufficient'];
let tradeData: Object[] = [];
let address: string[] = ['59 rue de lAbbaye', 'Luisenstr. 48', 'Rua do Paço, 67', '2, rue du Commerce', 'Boulevard Tirou, 255',
'Rua do mailPaço, 67', 'Hauptstr. 31', 'Starenweg 5', 'Rua do Mercado, 12',
'Carrera 22 con Ave. Carlos Soublette #8-35', 'Kirchgasse 6',
'Sierras de Granada 9993', 'Mehrheimerstr. 369', 'Rua da Panificadora, 12', '2817 Milton Dr.', 'Kirchgasse 6',
'Åkergatan 24', '24, place Kléber', 'Torikatu 38', 'Berliner Platz 43', '5ª Ave. Los Palos Grandes', '1029 - 12th Ave. S.',
'Torikatu 38', 'P.O. Box 555', '2817 Milton Dr.', 'Taucherstraße 10', '59 rue de lAbbaye', 'Via Ludovico il Moro 22',
'Avda. Azteca 123', 'Heerstr. 22', 'Berguvsvägen 8', 'Magazinweg 7', 'Berguvsvägen 8', 'Gran Vía, 1', 'Gran Vía, 1',
'Carrera 52 con Ave. Bolívar #65-98 Llano Largo', 'Magazinweg 7', 'Taucherstraße 10', 'Taucherstraße 10',
'Av. Copacabana, 267', 'Strada Provinciale 124', 'Fauntleroy Circus', 'Av. dos Lusíadas, 23',
'Rua da Panificadora, 12', 'Av. Inês de Castro, 414', 'Avda. Azteca 123', '2817 Milton Dr.'];
let employeeimg: string[] = ['usermale', 'userfemale'];
if (typeof dataCount === 'string') {
dataCount = parseInt(dataCount, 10);
}
for (let i: number = 1; i <= dataCount; i++) {
let code: any = 10000;
tradeData.push({
'EmployeeID': code + i,
'Employees':
employees[Math.floor(Math.random() * employees.length)] + ' ' + employees[Math.floor(Math.random() * employees.length)],
'Designation': designation[Math.floor(Math.random() * designation.length)],
'Location': location[Math.floor(Math.random() * location.length)],
'Status': status[Math.floor(Math.random() * status.length)],
'Trustworthiness': trustworthiness[Math.floor(Math.random() * trustworthiness.length)],
'Rating': Math.floor(Math.random() * 5),
'Software': Math.floor(Math.random() * 100),
'EmployeeImg': employeeimg[Math.floor(Math.random() * employeeimg.length)],
'CurrentSalary': Math.floor((Math.random() * 100000)),
'Address': address[Math.floor(Math.random() * address.length)],
});
let employee: string = 'Employees';
let emp: string = tradeData[i - 1][employee];
let sName: string = emp.substr(0, emp.indexOf(' ')).toLowerCase();
let empmail: string = 'Mail';
tradeData[i - 1][empmail] = sName + (Math.floor(Math.random() * 100) + 10) + '@' + mail[Math.floor(Math.random() * mail.length)];
}
return tradeData;
}
export let tradeData: Object[] = [
{
"EmployeeID": 10001,
"Employees": "Laura Nancy",
"Designation": "Designer",
"Location": "France",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 69,
"EmployeeImg": "usermale",
"CurrentSalary": 84194,
"Address": "Taucherstraße 10",
"Mail": "laura15@jourrapide.com"
},
{
"EmployeeID": 10002,
"Employees": "Zachery Van",
"Designation": "CFO",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 99,
"EmployeeImg": "usermale",
"CurrentSalary": 55349,
"Address": "5ª Ave. Los Palos Grandes",
"Mail": "zachery109@sample.com"
},
{
"EmployeeID": 10003,
"Employees": "Rose Fuller",
"Designation": "CFO",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 1,
"EmployeeImg": "usermale",
"CurrentSalary": 16477,
"Address": "2817 Milton Dr.",
"Mail": "rose55@rpy.com"
},
{
"EmployeeID": 10004,
"Employees": "Jack Bergs",
"Designation": "Manager",
"Location": "Mexico",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 36,
"EmployeeImg": "usermale",
"CurrentSalary": 49040,
"Address": "2, rue du Commerce",
"Mail": "jack30@sample.com"
},
{
"EmployeeID": 10005,
"Employees": "Vinet Bergs",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 39,
"EmployeeImg": "usermale",
"CurrentSalary": 5495,
"Address": "Rua da Panificadora, 12",
"Mail": "vinet32@jourrapide.com"
},
{
"EmployeeID": 10006,
"Employees": "Buchanan Van",
"Designation": "Designer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 42182,
"Address": "24, place Kléber",
"Mail": "buchanan18@mail.com"
},
{
"EmployeeID": 10007,
"Employees": "Dodsworth Nancy",
"Designation": "Project Lead",
"Location": "USA",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 35776,
"Address": "Rua do Paço, 67",
"Mail": "dodsworth84@mail.com"
},
{
"EmployeeID": 10008,
"Employees": "Laura Jack",
"Designation": "Developer",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 89,
"EmployeeImg": "usermale",
"CurrentSalary": 25108,
"Address": "Rua da Panificadora, 12",
"Mail": "laura82@mail.com"
},
{
"EmployeeID": 10009,
"Employees": "Anne Fuller",
"Designation": "Program Directory",
"Location": "Mexico",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 0,
"Software": 19,
"EmployeeImg": "userfemale",
"CurrentSalary": 32568,
"Address": "Gran Vía, 1",
"Mail": "anne97@jourrapide.com"
},
{
"EmployeeID": 10010,
"Employees": "Buchanan Andrew",
"Designation": "Designer",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 62,
"EmployeeImg": "userfemale",
"CurrentSalary": 12320,
"Address": "P.O. Box 555",
"Mail": "buchanan50@jourrapide.com"
},
{
"EmployeeID": 10011,
"Employees": "Andrew Janet",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 20890,
"Address": "Starenweg 5",
"Mail": "andrew63@mail.com"
},
{
"EmployeeID": 10012,
"Employees": "Margaret Tamer",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 7,
"EmployeeImg": "userfemale",
"CurrentSalary": 22337,
"Address": "Magazinweg 7",
"Mail": "margaret26@mail.com"
},
{
"EmployeeID": 10013,
"Employees": "Tamer Fuller",
"Designation": "CFO",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 89181,
"Address": "Taucherstraße 10",
"Mail": "tamer40@arpy.com"
},
{
"EmployeeID": 10014,
"Employees": "Tamer Anne",
"Designation": "CFO",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 18,
"EmployeeImg": "usermale",
"CurrentSalary": 20998,
"Address": "Taucherstraße 10",
"Mail": "tamer68@arpy.com"
},
{
"EmployeeID": 10015,
"Employees": "Anton Davolio",
"Designation": "Project Lead",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 4,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 48232,
"Address": "Luisenstr. 48",
"Mail": "anton46@mail.com"
},
{
"EmployeeID": 10016,
"Employees": "Buchanan Buchanan",
"Designation": "System Analyst",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 19,
"EmployeeImg": "usermale",
"CurrentSalary": 43041,
"Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
"Mail": "buchanan68@mail.com"
},
{
"EmployeeID": 10017,
"Employees": "King Buchanan",
"Designation": "Program Directory",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 44,
"EmployeeImg": "userfemale",
"CurrentSalary": 25259,
"Address": "Magazinweg 7",
"Mail": "king80@jourrapide.com"
},
{
"EmployeeID": 10018,
"Employees": "Rose Michael",
"Designation": "Project Lead",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 31,
"EmployeeImg": "userfemale",
"CurrentSalary": 91156,
"Address": "Fauntleroy Circus",
"Mail": "rose75@mail.com"
},
{
"EmployeeID": 10019,
"Employees": "King Bergs",
"Designation": "Developer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 2,
"Software": 29,
"EmployeeImg": "userfemale",
"CurrentSalary": 28826,
"Address": "2817 Milton Dr.",
"Mail": "king57@jourrapide.com"
},
{
"EmployeeID": 10020,
"Employees": "Davolio Fuller",
"Designation": "Designer",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 3,
"Software": 35,
"EmployeeImg": "userfemale",
"CurrentSalary": 71035,
"Address": "Gran Vía, 1",
"Mail": "davolio29@arpy.com"
},
{
"EmployeeID": 10021,
"Employees": "Rose Rose",
"Designation": "CFO",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 38,
"EmployeeImg": "usermale",
"CurrentSalary": 68123,
"Address": "Rua do Mercado, 12",
"Mail": "rose54@arpy.com"
},
{
"EmployeeID": 10022,
"Employees": "Andrew Michael",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 2,
"Software": 61,
"EmployeeImg": "userfemale",
"CurrentSalary": 75470,
"Address": "2, rue du Commerce",
"Mail": "andrew88@jourrapide.com"
},
{
"EmployeeID": 10023,
"Employees": "Davolio Kathryn",
"Designation": "Manager",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 25,
"EmployeeImg": "usermale",
"CurrentSalary": 25234,
"Address": "Hauptstr. 31",
"Mail": "davolio42@sample.com"
},
{
"EmployeeID": 10024,
"Employees": "Anne Fleet",
"Designation": "System Analyst",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 8341,
"Address": "59 rue de lAbbaye",
"Mail": "anne86@arpy.com"
},
{
"EmployeeID": 10025,
"Employees": "Margaret Andrew",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 51,
"EmployeeImg": "userfemale",
"CurrentSalary": 84975,
"Address": "P.O. Box 555",
"Mail": "margaret41@arpy.com"
},
{
"EmployeeID": 10026,
"Employees": "Kathryn Laura",
"Designation": "Project Lead",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 48,
"EmployeeImg": "usermale",
"CurrentSalary": 97282,
"Address": "Avda. Azteca 123",
"Mail": "kathryn82@rpy.com"
},
{
"EmployeeID": 10027,
"Employees": "Michael Michael",
"Designation": "Developer",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 16,
"EmployeeImg": "usermale",
"CurrentSalary": 4184,
"Address": "Rua do Paço, 67",
"Mail": "michael58@jourrapide.com"
},
{
"EmployeeID": 10028,
"Employees": "Leverling Vinet",
"Designation": "Project Lead",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 57,
"EmployeeImg": "userfemale",
"CurrentSalary": 38370,
"Address": "59 rue de lAbbaye",
"Mail": "leverling102@sample.com"
},
{
"EmployeeID": 10029,
"Employees": "Rose Jack",
"Designation": "Developer",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 46,
"EmployeeImg": "userfemale",
"CurrentSalary": 84790,
"Address": "Rua do Mercado, 12",
"Mail": "rose108@jourrapide.com"
},
{
"EmployeeID": 10030,
"Employees": "Vinet Van",
"Designation": "Developer",
"Location": "USA",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 40,
"EmployeeImg": "usermale",
"CurrentSalary": 71005,
"Address": "Gran Vía, 1",
"Mail": "vinet90@jourrapide.com"
}
]By default,
DataManageruses ODataAdaptor for remote data-binding.
Binding with OData services
OData is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the DataManager. Refer to the following code example for remote Data binding using OData service.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component {
data = new DataManager({
adaptor: new ODataAdaptor,
url: 'https://ej2services.syncfusion.com/production/web-services/api/Orders'
});
spreadsheet;
created() {
//Applies cell and number formatting to specified range of the active sheet
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:K1');
}
render() {
return (<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.created.bind(this)}>
<SheetsDirective>
<SheetDirective name='Order Details'>
<RangesDirective>
<RangeDirective dataSource={this.data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={280}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component<{}, {}> {
public data = new DataManager({
adaptor: new ODataAdaptor,
url: 'https://ej2services.syncfusion.com/production/web-services/api/Orders'
});
spreadsheet: SpreadsheetComponent;
public created(): void {
//Applies cell and number formatting to specified range of the active sheet
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' },
'A1:K1');
}
render() {
return (<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.created.bind(this)}>
<SheetsDirective>
<SheetDirective name= 'Order Details'>
<RangesDirective>
<RangeDirective dataSource={this.data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={280}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Default data source
*/
export let defaultData = [
{ 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
{ 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
{ 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
{ 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
{ 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
{ 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
{ 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
{ 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
{ 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
];
/**
* Grid datasource
*/
export function getTradeData(dataCount) {
let employees = [
'Michael', 'Kathryn', 'Tamer', 'Martin', 'Davolio', 'Nancy', 'Fuller', 'Leverling', 'Peacock',
'Margaret', 'Buchanan', 'Janet', 'Andrew', 'Callahan', 'Laura', 'Dodsworth', 'Anne',
'Bergs', 'Vinet', 'Anton', 'Fleet', 'Zachery', 'Van', 'King', 'Jack', 'Rose'
];
let designation = ['Manager', 'CFO', 'Designer', 'Developer', 'Program Directory', 'System Analyst', 'Project Lead'];
let mail = ['sample.com', 'arpy.com', 'rpy.com', 'mail.com', 'jourrapide.com'];
let location = ['UK', 'USA', 'Sweden', 'France', 'Canada', 'Argentina', 'Austria', 'Germany', 'Mexico'];
let status = ['Active', 'Inactive'];
let trustworthiness = ['Perfect', 'Sufficient', 'Insufficient'];
let tradeData = [];
let address = ['59 rue de lAbbaye', 'Luisenstr. 48', 'Rua do Paço, 67', '2, rue du Commerce', 'Boulevard Tirou, 255',
'Rua do mailPaço, 67', 'Hauptstr. 31', 'Starenweg 5', 'Rua do Mercado, 12',
'Carrera 22 con Ave. Carlos Soublette #8-35', 'Kirchgasse 6',
'Sierras de Granada 9993', 'Mehrheimerstr. 369', 'Rua da Panificadora, 12', '2817 Milton Dr.', 'Kirchgasse 6',
'Åkergatan 24', '24, place Kléber', 'Torikatu 38', 'Berliner Platz 43', '5ª Ave. Los Palos Grandes', '1029 - 12th Ave. S.',
'Torikatu 38', 'P.O. Box 555', '2817 Milton Dr.', 'Taucherstraße 10', '59 rue de lAbbaye', 'Via Ludovico il Moro 22',
'Avda. Azteca 123', 'Heerstr. 22', 'Berguvsvägen 8', 'Magazinweg 7', 'Berguvsvägen 8', 'Gran Vía, 1', 'Gran Vía, 1',
'Carrera 52 con Ave. Bolívar #65-98 Llano Largo', 'Magazinweg 7', 'Taucherstraße 10', 'Taucherstraße 10',
'Av. Copacabana, 267', 'Strada Provinciale 124', 'Fauntleroy Circus', 'Av. dos Lusíadas, 23',
'Rua da Panificadora, 12', 'Av. Inês de Castro, 414', 'Avda. Azteca 123', '2817 Milton Dr.'];
let employeeimg = ['usermale', 'userfemale'];
if (typeof dataCount === 'string') {
dataCount = parseInt(dataCount, 10);
}
for (let i = 1; i <= dataCount; i++) {
let code = 10000;
tradeData.push({
'EmployeeID': code + i,
'Employees': employees[Math.floor(Math.random() * employees.length)] + ' ' + employees[Math.floor(Math.random() * employees.length)],
'Designation': designation[Math.floor(Math.random() * designation.length)],
'Location': location[Math.floor(Math.random() * location.length)],
'Status': status[Math.floor(Math.random() * status.length)],
'Trustworthiness': trustworthiness[Math.floor(Math.random() * trustworthiness.length)],
'Rating': Math.floor(Math.random() * 5),
'Software': Math.floor(Math.random() * 100),
'EmployeeImg': employeeimg[Math.floor(Math.random() * employeeimg.length)],
'CurrentSalary': Math.floor((Math.random() * 100000)),
'Address': address[Math.floor(Math.random() * address.length)],
});
let employee = 'Employees';
let emp = tradeData[i - 1][employee];
let sName = emp.substr(0, emp.indexOf(' ')).toLowerCase();
let empmail = 'Mail';
tradeData[i - 1][empmail] = sName + (Math.floor(Math.random() * 100) + 10) + '@' + mail[Math.floor(Math.random() * mail.length)];
}
return tradeData;
}
export let tradeData = [
{
"EmployeeID": 10001,
"Employees": "Laura Nancy",
"Designation": "Designer",
"Location": "France",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 69,
"EmployeeImg": "usermale",
"CurrentSalary": 84194,
"Address": "Taucherstraße 10",
"Mail": "laura15@jourrapide.com"
},
{
"EmployeeID": 10002,
"Employees": "Zachery Van",
"Designation": "CFO",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 99,
"EmployeeImg": "usermale",
"CurrentSalary": 55349,
"Address": "5ª Ave. Los Palos Grandes",
"Mail": "zachery109@sample.com"
},
{
"EmployeeID": 10003,
"Employees": "Rose Fuller",
"Designation": "CFO",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 1,
"EmployeeImg": "usermale",
"CurrentSalary": 16477,
"Address": "2817 Milton Dr.",
"Mail": "rose55@rpy.com"
},
{
"EmployeeID": 10004,
"Employees": "Jack Bergs",
"Designation": "Manager",
"Location": "Mexico",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 36,
"EmployeeImg": "usermale",
"CurrentSalary": 49040,
"Address": "2, rue du Commerce",
"Mail": "jack30@sample.com"
},
{
"EmployeeID": 10005,
"Employees": "Vinet Bergs",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 39,
"EmployeeImg": "usermale",
"CurrentSalary": 5495,
"Address": "Rua da Panificadora, 12",
"Mail": "vinet32@jourrapide.com"
},
{
"EmployeeID": 10006,
"Employees": "Buchanan Van",
"Designation": "Designer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 42182,
"Address": "24, place Kléber",
"Mail": "buchanan18@mail.com"
},
{
"EmployeeID": 10007,
"Employees": "Dodsworth Nancy",
"Designation": "Project Lead",
"Location": "USA",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 35776,
"Address": "Rua do Paço, 67",
"Mail": "dodsworth84@mail.com"
},
{
"EmployeeID": 10008,
"Employees": "Laura Jack",
"Designation": "Developer",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 89,
"EmployeeImg": "usermale",
"CurrentSalary": 25108,
"Address": "Rua da Panificadora, 12",
"Mail": "laura82@mail.com"
},
{
"EmployeeID": 10009,
"Employees": "Anne Fuller",
"Designation": "Program Directory",
"Location": "Mexico",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 0,
"Software": 19,
"EmployeeImg": "userfemale",
"CurrentSalary": 32568,
"Address": "Gran Vía, 1",
"Mail": "anne97@jourrapide.com"
},
{
"EmployeeID": 10010,
"Employees": "Buchanan Andrew",
"Designation": "Designer",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 62,
"EmployeeImg": "userfemale",
"CurrentSalary": 12320,
"Address": "P.O. Box 555",
"Mail": "buchanan50@jourrapide.com"
},
{
"EmployeeID": 10011,
"Employees": "Andrew Janet",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 20890,
"Address": "Starenweg 5",
"Mail": "andrew63@mail.com"
},
{
"EmployeeID": 10012,
"Employees": "Margaret Tamer",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 7,
"EmployeeImg": "userfemale",
"CurrentSalary": 22337,
"Address": "Magazinweg 7",
"Mail": "margaret26@mail.com"
},
{
"EmployeeID": 10013,
"Employees": "Tamer Fuller",
"Designation": "CFO",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 89181,
"Address": "Taucherstraße 10",
"Mail": "tamer40@arpy.com"
},
{
"EmployeeID": 10014,
"Employees": "Tamer Anne",
"Designation": "CFO",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 18,
"EmployeeImg": "usermale",
"CurrentSalary": 20998,
"Address": "Taucherstraße 10",
"Mail": "tamer68@arpy.com"
},
{
"EmployeeID": 10015,
"Employees": "Anton Davolio",
"Designation": "Project Lead",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 4,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 48232,
"Address": "Luisenstr. 48",
"Mail": "anton46@mail.com"
},
{
"EmployeeID": 10016,
"Employees": "Buchanan Buchanan",
"Designation": "System Analyst",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 19,
"EmployeeImg": "usermale",
"CurrentSalary": 43041,
"Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
"Mail": "buchanan68@mail.com"
},
{
"EmployeeID": 10017,
"Employees": "King Buchanan",
"Designation": "Program Directory",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 44,
"EmployeeImg": "userfemale",
"CurrentSalary": 25259,
"Address": "Magazinweg 7",
"Mail": "king80@jourrapide.com"
},
{
"EmployeeID": 10018,
"Employees": "Rose Michael",
"Designation": "Project Lead",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 31,
"EmployeeImg": "userfemale",
"CurrentSalary": 91156,
"Address": "Fauntleroy Circus",
"Mail": "rose75@mail.com"
},
{
"EmployeeID": 10019,
"Employees": "King Bergs",
"Designation": "Developer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 2,
"Software": 29,
"EmployeeImg": "userfemale",
"CurrentSalary": 28826,
"Address": "2817 Milton Dr.",
"Mail": "king57@jourrapide.com"
},
{
"EmployeeID": 10020,
"Employees": "Davolio Fuller",
"Designation": "Designer",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 3,
"Software": 35,
"EmployeeImg": "userfemale",
"CurrentSalary": 71035,
"Address": "Gran Vía, 1",
"Mail": "davolio29@arpy.com"
},
{
"EmployeeID": 10021,
"Employees": "Rose Rose",
"Designation": "CFO",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 38,
"EmployeeImg": "usermale",
"CurrentSalary": 68123,
"Address": "Rua do Mercado, 12",
"Mail": "rose54@arpy.com"
},
{
"EmployeeID": 10022,
"Employees": "Andrew Michael",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 2,
"Software": 61,
"EmployeeImg": "userfemale",
"CurrentSalary": 75470,
"Address": "2, rue du Commerce",
"Mail": "andrew88@jourrapide.com"
},
{
"EmployeeID": 10023,
"Employees": "Davolio Kathryn",
"Designation": "Manager",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 25,
"EmployeeImg": "usermale",
"CurrentSalary": 25234,
"Address": "Hauptstr. 31",
"Mail": "davolio42@sample.com"
},
{
"EmployeeID": 10024,
"Employees": "Anne Fleet",
"Designation": "System Analyst",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 8341,
"Address": "59 rue de lAbbaye",
"Mail": "anne86@arpy.com"
},
{
"EmployeeID": 10025,
"Employees": "Margaret Andrew",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 51,
"EmployeeImg": "userfemale",
"CurrentSalary": 84975,
"Address": "P.O. Box 555",
"Mail": "margaret41@arpy.com"
},
{
"EmployeeID": 10026,
"Employees": "Kathryn Laura",
"Designation": "Project Lead",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 48,
"EmployeeImg": "usermale",
"CurrentSalary": 97282,
"Address": "Avda. Azteca 123",
"Mail": "kathryn82@rpy.com"
},
{
"EmployeeID": 10027,
"Employees": "Michael Michael",
"Designation": "Developer",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 16,
"EmployeeImg": "usermale",
"CurrentSalary": 4184,
"Address": "Rua do Paço, 67",
"Mail": "michael58@jourrapide.com"
},
{
"EmployeeID": 10028,
"Employees": "Leverling Vinet",
"Designation": "Project Lead",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 57,
"EmployeeImg": "userfemale",
"CurrentSalary": 38370,
"Address": "59 rue de lAbbaye",
"Mail": "leverling102@sample.com"
},
{
"EmployeeID": 10029,
"Employees": "Rose Jack",
"Designation": "Developer",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 46,
"EmployeeImg": "userfemale",
"CurrentSalary": 84790,
"Address": "Rua do Mercado, 12",
"Mail": "rose108@jourrapide.com"
},
{
"EmployeeID": 10030,
"Employees": "Vinet Van",
"Designation": "Developer",
"Location": "USA",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 40,
"EmployeeImg": "usermale",
"CurrentSalary": 71005,
"Address": "Gran Vía, 1",
"Mail": "vinet90@jourrapide.com"
}
];/**
* Default data source
*/
export let defaultData: Object[] = [
{ 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
{ 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
{ 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
{ 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
{ 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
{ 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
{ 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
{ 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
{ 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
];
/**
* Grid datasource
*/
export function getTradeData(dataCount?: number): object {
let employees: string[] = [
'Michael', 'Kathryn', 'Tamer', 'Martin', 'Davolio', 'Nancy', 'Fuller', 'Leverling', 'Peacock',
'Margaret', 'Buchanan', 'Janet', 'Andrew', 'Callahan', 'Laura', 'Dodsworth', 'Anne',
'Bergs', 'Vinet', 'Anton', 'Fleet', 'Zachery', 'Van', 'King', 'Jack', 'Rose'];
let designation: string[] = ['Manager', 'CFO', 'Designer', 'Developer', 'Program Directory', 'System Analyst', 'Project Lead'];
let mail: string[] = ['sample.com', 'arpy.com', 'rpy.com', 'mail.com', 'jourrapide.com'];
let location: string[] = ['UK', 'USA', 'Sweden', 'France', 'Canada', 'Argentina', 'Austria', 'Germany', 'Mexico'];
let status: string[] = ['Active', 'Inactive'];
let trustworthiness: string[] = ['Perfect', 'Sufficient', 'Insufficient'];
let tradeData: Object[] = [];
let address: string[] = ['59 rue de lAbbaye', 'Luisenstr. 48', 'Rua do Paço, 67', '2, rue du Commerce', 'Boulevard Tirou, 255',
'Rua do mailPaço, 67', 'Hauptstr. 31', 'Starenweg 5', 'Rua do Mercado, 12',
'Carrera 22 con Ave. Carlos Soublette #8-35', 'Kirchgasse 6',
'Sierras de Granada 9993', 'Mehrheimerstr. 369', 'Rua da Panificadora, 12', '2817 Milton Dr.', 'Kirchgasse 6',
'Åkergatan 24', '24, place Kléber', 'Torikatu 38', 'Berliner Platz 43', '5ª Ave. Los Palos Grandes', '1029 - 12th Ave. S.',
'Torikatu 38', 'P.O. Box 555', '2817 Milton Dr.', 'Taucherstraße 10', '59 rue de lAbbaye', 'Via Ludovico il Moro 22',
'Avda. Azteca 123', 'Heerstr. 22', 'Berguvsvägen 8', 'Magazinweg 7', 'Berguvsvägen 8', 'Gran Vía, 1', 'Gran Vía, 1',
'Carrera 52 con Ave. Bolívar #65-98 Llano Largo', 'Magazinweg 7', 'Taucherstraße 10', 'Taucherstraße 10',
'Av. Copacabana, 267', 'Strada Provinciale 124', 'Fauntleroy Circus', 'Av. dos Lusíadas, 23',
'Rua da Panificadora, 12', 'Av. Inês de Castro, 414', 'Avda. Azteca 123', '2817 Milton Dr.'];
let employeeimg: string[] = ['usermale', 'userfemale'];
if (typeof dataCount === 'string') {
dataCount = parseInt(dataCount, 10);
}
for (let i: number = 1; i <= dataCount; i++) {
let code: any = 10000;
tradeData.push({
'EmployeeID': code + i,
'Employees':
employees[Math.floor(Math.random() * employees.length)] + ' ' + employees[Math.floor(Math.random() * employees.length)],
'Designation': designation[Math.floor(Math.random() * designation.length)],
'Location': location[Math.floor(Math.random() * location.length)],
'Status': status[Math.floor(Math.random() * status.length)],
'Trustworthiness': trustworthiness[Math.floor(Math.random() * trustworthiness.length)],
'Rating': Math.floor(Math.random() * 5),
'Software': Math.floor(Math.random() * 100),
'EmployeeImg': employeeimg[Math.floor(Math.random() * employeeimg.length)],
'CurrentSalary': Math.floor((Math.random() * 100000)),
'Address': address[Math.floor(Math.random() * address.length)],
});
let employee: string = 'Employees';
let emp: string = tradeData[i - 1][employee];
let sName: string = emp.substr(0, emp.indexOf(' ')).toLowerCase();
let empmail: string = 'Mail';
tradeData[i - 1][empmail] = sName + (Math.floor(Math.random() * 100) + 10) + '@' + mail[Math.floor(Math.random() * mail.length)];
}
return tradeData;
}
export let tradeData: Object[] = [
{
"EmployeeID": 10001,
"Employees": "Laura Nancy",
"Designation": "Designer",
"Location": "France",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 69,
"EmployeeImg": "usermale",
"CurrentSalary": 84194,
"Address": "Taucherstraße 10",
"Mail": "laura15@jourrapide.com"
},
{
"EmployeeID": 10002,
"Employees": "Zachery Van",
"Designation": "CFO",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 99,
"EmployeeImg": "usermale",
"CurrentSalary": 55349,
"Address": "5ª Ave. Los Palos Grandes",
"Mail": "zachery109@sample.com"
},
{
"EmployeeID": 10003,
"Employees": "Rose Fuller",
"Designation": "CFO",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 1,
"EmployeeImg": "usermale",
"CurrentSalary": 16477,
"Address": "2817 Milton Dr.",
"Mail": "rose55@rpy.com"
},
{
"EmployeeID": 10004,
"Employees": "Jack Bergs",
"Designation": "Manager",
"Location": "Mexico",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 36,
"EmployeeImg": "usermale",
"CurrentSalary": 49040,
"Address": "2, rue du Commerce",
"Mail": "jack30@sample.com"
},
{
"EmployeeID": 10005,
"Employees": "Vinet Bergs",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 39,
"EmployeeImg": "usermale",
"CurrentSalary": 5495,
"Address": "Rua da Panificadora, 12",
"Mail": "vinet32@jourrapide.com"
},
{
"EmployeeID": 10006,
"Employees": "Buchanan Van",
"Designation": "Designer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 42182,
"Address": "24, place Kléber",
"Mail": "buchanan18@mail.com"
},
{
"EmployeeID": 10007,
"Employees": "Dodsworth Nancy",
"Designation": "Project Lead",
"Location": "USA",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 35776,
"Address": "Rua do Paço, 67",
"Mail": "dodsworth84@mail.com"
},
{
"EmployeeID": 10008,
"Employees": "Laura Jack",
"Designation": "Developer",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 89,
"EmployeeImg": "usermale",
"CurrentSalary": 25108,
"Address": "Rua da Panificadora, 12",
"Mail": "laura82@mail.com"
},
{
"EmployeeID": 10009,
"Employees": "Anne Fuller",
"Designation": "Program Directory",
"Location": "Mexico",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 0,
"Software": 19,
"EmployeeImg": "userfemale",
"CurrentSalary": 32568,
"Address": "Gran Vía, 1",
"Mail": "anne97@jourrapide.com"
},
{
"EmployeeID": 10010,
"Employees": "Buchanan Andrew",
"Designation": "Designer",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 62,
"EmployeeImg": "userfemale",
"CurrentSalary": 12320,
"Address": "P.O. Box 555",
"Mail": "buchanan50@jourrapide.com"
},
{
"EmployeeID": 10011,
"Employees": "Andrew Janet",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 20890,
"Address": "Starenweg 5",
"Mail": "andrew63@mail.com"
},
{
"EmployeeID": 10012,
"Employees": "Margaret Tamer",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 7,
"EmployeeImg": "userfemale",
"CurrentSalary": 22337,
"Address": "Magazinweg 7",
"Mail": "margaret26@mail.com"
},
{
"EmployeeID": 10013,
"Employees": "Tamer Fuller",
"Designation": "CFO",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 89181,
"Address": "Taucherstraße 10",
"Mail": "tamer40@arpy.com"
},
{
"EmployeeID": 10014,
"Employees": "Tamer Anne",
"Designation": "CFO",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 18,
"EmployeeImg": "usermale",
"CurrentSalary": 20998,
"Address": "Taucherstraße 10",
"Mail": "tamer68@arpy.com"
},
{
"EmployeeID": 10015,
"Employees": "Anton Davolio",
"Designation": "Project Lead",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 4,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 48232,
"Address": "Luisenstr. 48",
"Mail": "anton46@mail.com"
},
{
"EmployeeID": 10016,
"Employees": "Buchanan Buchanan",
"Designation": "System Analyst",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 19,
"EmployeeImg": "usermale",
"CurrentSalary": 43041,
"Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
"Mail": "buchanan68@mail.com"
},
{
"EmployeeID": 10017,
"Employees": "King Buchanan",
"Designation": "Program Directory",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 44,
"EmployeeImg": "userfemale",
"CurrentSalary": 25259,
"Address": "Magazinweg 7",
"Mail": "king80@jourrapide.com"
},
{
"EmployeeID": 10018,
"Employees": "Rose Michael",
"Designation": "Project Lead",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 31,
"EmployeeImg": "userfemale",
"CurrentSalary": 91156,
"Address": "Fauntleroy Circus",
"Mail": "rose75@mail.com"
},
{
"EmployeeID": 10019,
"Employees": "King Bergs",
"Designation": "Developer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 2,
"Software": 29,
"EmployeeImg": "userfemale",
"CurrentSalary": 28826,
"Address": "2817 Milton Dr.",
"Mail": "king57@jourrapide.com"
},
{
"EmployeeID": 10020,
"Employees": "Davolio Fuller",
"Designation": "Designer",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 3,
"Software": 35,
"EmployeeImg": "userfemale",
"CurrentSalary": 71035,
"Address": "Gran Vía, 1",
"Mail": "davolio29@arpy.com"
},
{
"EmployeeID": 10021,
"Employees": "Rose Rose",
"Designation": "CFO",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 38,
"EmployeeImg": "usermale",
"CurrentSalary": 68123,
"Address": "Rua do Mercado, 12",
"Mail": "rose54@arpy.com"
},
{
"EmployeeID": 10022,
"Employees": "Andrew Michael",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 2,
"Software": 61,
"EmployeeImg": "userfemale",
"CurrentSalary": 75470,
"Address": "2, rue du Commerce",
"Mail": "andrew88@jourrapide.com"
},
{
"EmployeeID": 10023,
"Employees": "Davolio Kathryn",
"Designation": "Manager",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 25,
"EmployeeImg": "usermale",
"CurrentSalary": 25234,
"Address": "Hauptstr. 31",
"Mail": "davolio42@sample.com"
},
{
"EmployeeID": 10024,
"Employees": "Anne Fleet",
"Designation": "System Analyst",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 8341,
"Address": "59 rue de lAbbaye",
"Mail": "anne86@arpy.com"
},
{
"EmployeeID": 10025,
"Employees": "Margaret Andrew",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 51,
"EmployeeImg": "userfemale",
"CurrentSalary": 84975,
"Address": "P.O. Box 555",
"Mail": "margaret41@arpy.com"
},
{
"EmployeeID": 10026,
"Employees": "Kathryn Laura",
"Designation": "Project Lead",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 48,
"EmployeeImg": "usermale",
"CurrentSalary": 97282,
"Address": "Avda. Azteca 123",
"Mail": "kathryn82@rpy.com"
},
{
"EmployeeID": 10027,
"Employees": "Michael Michael",
"Designation": "Developer",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 16,
"EmployeeImg": "usermale",
"CurrentSalary": 4184,
"Address": "Rua do Paço, 67",
"Mail": "michael58@jourrapide.com"
},
{
"EmployeeID": 10028,
"Employees": "Leverling Vinet",
"Designation": "Project Lead",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 57,
"EmployeeImg": "userfemale",
"CurrentSalary": 38370,
"Address": "59 rue de lAbbaye",
"Mail": "leverling102@sample.com"
},
{
"EmployeeID": 10029,
"Employees": "Rose Jack",
"Designation": "Developer",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 46,
"EmployeeImg": "userfemale",
"CurrentSalary": 84790,
"Address": "Rua do Mercado, 12",
"Mail": "rose108@jourrapide.com"
},
{
"EmployeeID": 10030,
"Employees": "Vinet Van",
"Designation": "Developer",
"Location": "USA",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 40,
"EmployeeImg": "usermale",
"CurrentSalary": 71005,
"Address": "Gran Vía, 1",
"Mail": "vinet90@jourrapide.com"
}
]Web API
You can use WebApiAdaptor to bind spreadsheet with Web API created using OData endpoint.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component {
data = new DataManager({
adaptor: new WebApiAdaptor,
url: 'https://ej2services.syncfusion.com/production/web-services/api/Orders'
});
spreadsheet;
created() {
//Applies cell and number formatting to specified range of the active sheet
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:K1');
}
render() {
return (<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.created.bind(this)}>
<SheetsDirective>
<SheetDirective name='Order Details'>
<RangesDirective>
<RangeDirective dataSource={this.data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={280}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component<{}, {}> {
public data = new DataManager({
adaptor: new WebApiAdaptor,
url: 'https://ej2services.syncfusion.com/production/web-services/api/Orders'
});
spreadsheet: SpreadsheetComponent;
public created(): void {
//Applies cell and number formatting to specified range of the active sheet
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' },
'A1:K1');
}
render() {
return (<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.created.bind(this)}>
<SheetsDirective>
<SheetDirective name= 'Order Details'>
<RangesDirective>
<RangeDirective dataSource={this.data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={280}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Default data source
*/
export let defaultData = [
{ 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
{ 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
{ 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
{ 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
{ 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
{ 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
{ 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
{ 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
{ 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
];
/**
* Grid datasource
*/
export function getTradeData(dataCount) {
let employees = [
'Michael', 'Kathryn', 'Tamer', 'Martin', 'Davolio', 'Nancy', 'Fuller', 'Leverling', 'Peacock',
'Margaret', 'Buchanan', 'Janet', 'Andrew', 'Callahan', 'Laura', 'Dodsworth', 'Anne',
'Bergs', 'Vinet', 'Anton', 'Fleet', 'Zachery', 'Van', 'King', 'Jack', 'Rose'
];
let designation = ['Manager', 'CFO', 'Designer', 'Developer', 'Program Directory', 'System Analyst', 'Project Lead'];
let mail = ['sample.com', 'arpy.com', 'rpy.com', 'mail.com', 'jourrapide.com'];
let location = ['UK', 'USA', 'Sweden', 'France', 'Canada', 'Argentina', 'Austria', 'Germany', 'Mexico'];
let status = ['Active', 'Inactive'];
let trustworthiness = ['Perfect', 'Sufficient', 'Insufficient'];
let tradeData = [];
let address = ['59 rue de lAbbaye', 'Luisenstr. 48', 'Rua do Paço, 67', '2, rue du Commerce', 'Boulevard Tirou, 255',
'Rua do mailPaço, 67', 'Hauptstr. 31', 'Starenweg 5', 'Rua do Mercado, 12',
'Carrera 22 con Ave. Carlos Soublette #8-35', 'Kirchgasse 6',
'Sierras de Granada 9993', 'Mehrheimerstr. 369', 'Rua da Panificadora, 12', '2817 Milton Dr.', 'Kirchgasse 6',
'Åkergatan 24', '24, place Kléber', 'Torikatu 38', 'Berliner Platz 43', '5ª Ave. Los Palos Grandes', '1029 - 12th Ave. S.',
'Torikatu 38', 'P.O. Box 555', '2817 Milton Dr.', 'Taucherstraße 10', '59 rue de lAbbaye', 'Via Ludovico il Moro 22',
'Avda. Azteca 123', 'Heerstr. 22', 'Berguvsvägen 8', 'Magazinweg 7', 'Berguvsvägen 8', 'Gran Vía, 1', 'Gran Vía, 1',
'Carrera 52 con Ave. Bolívar #65-98 Llano Largo', 'Magazinweg 7', 'Taucherstraße 10', 'Taucherstraße 10',
'Av. Copacabana, 267', 'Strada Provinciale 124', 'Fauntleroy Circus', 'Av. dos Lusíadas, 23',
'Rua da Panificadora, 12', 'Av. Inês de Castro, 414', 'Avda. Azteca 123', '2817 Milton Dr.'];
let employeeimg = ['usermale', 'userfemale'];
if (typeof dataCount === 'string') {
dataCount = parseInt(dataCount, 10);
}
for (let i = 1; i <= dataCount; i++) {
let code = 10000;
tradeData.push({
'EmployeeID': code + i,
'Employees': employees[Math.floor(Math.random() * employees.length)] + ' ' + employees[Math.floor(Math.random() * employees.length)],
'Designation': designation[Math.floor(Math.random() * designation.length)],
'Location': location[Math.floor(Math.random() * location.length)],
'Status': status[Math.floor(Math.random() * status.length)],
'Trustworthiness': trustworthiness[Math.floor(Math.random() * trustworthiness.length)],
'Rating': Math.floor(Math.random() * 5),
'Software': Math.floor(Math.random() * 100),
'EmployeeImg': employeeimg[Math.floor(Math.random() * employeeimg.length)],
'CurrentSalary': Math.floor((Math.random() * 100000)),
'Address': address[Math.floor(Math.random() * address.length)],
});
let employee = 'Employees';
let emp = tradeData[i - 1][employee];
let sName = emp.substr(0, emp.indexOf(' ')).toLowerCase();
let empmail = 'Mail';
tradeData[i - 1][empmail] = sName + (Math.floor(Math.random() * 100) + 10) + '@' + mail[Math.floor(Math.random() * mail.length)];
}
return tradeData;
}
export let tradeData = [
{
"EmployeeID": 10001,
"Employees": "Laura Nancy",
"Designation": "Designer",
"Location": "France",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 69,
"EmployeeImg": "usermale",
"CurrentSalary": 84194,
"Address": "Taucherstraße 10",
"Mail": "laura15@jourrapide.com"
},
{
"EmployeeID": 10002,
"Employees": "Zachery Van",
"Designation": "CFO",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 99,
"EmployeeImg": "usermale",
"CurrentSalary": 55349,
"Address": "5ª Ave. Los Palos Grandes",
"Mail": "zachery109@sample.com"
},
{
"EmployeeID": 10003,
"Employees": "Rose Fuller",
"Designation": "CFO",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 1,
"EmployeeImg": "usermale",
"CurrentSalary": 16477,
"Address": "2817 Milton Dr.",
"Mail": "rose55@rpy.com"
},
{
"EmployeeID": 10004,
"Employees": "Jack Bergs",
"Designation": "Manager",
"Location": "Mexico",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 36,
"EmployeeImg": "usermale",
"CurrentSalary": 49040,
"Address": "2, rue du Commerce",
"Mail": "jack30@sample.com"
},
{
"EmployeeID": 10005,
"Employees": "Vinet Bergs",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 39,
"EmployeeImg": "usermale",
"CurrentSalary": 5495,
"Address": "Rua da Panificadora, 12",
"Mail": "vinet32@jourrapide.com"
},
{
"EmployeeID": 10006,
"Employees": "Buchanan Van",
"Designation": "Designer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 42182,
"Address": "24, place Kléber",
"Mail": "buchanan18@mail.com"
},
{
"EmployeeID": 10007,
"Employees": "Dodsworth Nancy",
"Designation": "Project Lead",
"Location": "USA",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 35776,
"Address": "Rua do Paço, 67",
"Mail": "dodsworth84@mail.com"
},
{
"EmployeeID": 10008,
"Employees": "Laura Jack",
"Designation": "Developer",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 89,
"EmployeeImg": "usermale",
"CurrentSalary": 25108,
"Address": "Rua da Panificadora, 12",
"Mail": "laura82@mail.com"
},
{
"EmployeeID": 10009,
"Employees": "Anne Fuller",
"Designation": "Program Directory",
"Location": "Mexico",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 0,
"Software": 19,
"EmployeeImg": "userfemale",
"CurrentSalary": 32568,
"Address": "Gran Vía, 1",
"Mail": "anne97@jourrapide.com"
},
{
"EmployeeID": 10010,
"Employees": "Buchanan Andrew",
"Designation": "Designer",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 62,
"EmployeeImg": "userfemale",
"CurrentSalary": 12320,
"Address": "P.O. Box 555",
"Mail": "buchanan50@jourrapide.com"
},
{
"EmployeeID": 10011,
"Employees": "Andrew Janet",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 20890,
"Address": "Starenweg 5",
"Mail": "andrew63@mail.com"
},
{
"EmployeeID": 10012,
"Employees": "Margaret Tamer",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 7,
"EmployeeImg": "userfemale",
"CurrentSalary": 22337,
"Address": "Magazinweg 7",
"Mail": "margaret26@mail.com"
},
{
"EmployeeID": 10013,
"Employees": "Tamer Fuller",
"Designation": "CFO",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 89181,
"Address": "Taucherstraße 10",
"Mail": "tamer40@arpy.com"
},
{
"EmployeeID": 10014,
"Employees": "Tamer Anne",
"Designation": "CFO",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 18,
"EmployeeImg": "usermale",
"CurrentSalary": 20998,
"Address": "Taucherstraße 10",
"Mail": "tamer68@arpy.com"
},
{
"EmployeeID": 10015,
"Employees": "Anton Davolio",
"Designation": "Project Lead",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 4,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 48232,
"Address": "Luisenstr. 48",
"Mail": "anton46@mail.com"
},
{
"EmployeeID": 10016,
"Employees": "Buchanan Buchanan",
"Designation": "System Analyst",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 19,
"EmployeeImg": "usermale",
"CurrentSalary": 43041,
"Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
"Mail": "buchanan68@mail.com"
},
{
"EmployeeID": 10017,
"Employees": "King Buchanan",
"Designation": "Program Directory",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 44,
"EmployeeImg": "userfemale",
"CurrentSalary": 25259,
"Address": "Magazinweg 7",
"Mail": "king80@jourrapide.com"
},
{
"EmployeeID": 10018,
"Employees": "Rose Michael",
"Designation": "Project Lead",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 31,
"EmployeeImg": "userfemale",
"CurrentSalary": 91156,
"Address": "Fauntleroy Circus",
"Mail": "rose75@mail.com"
},
{
"EmployeeID": 10019,
"Employees": "King Bergs",
"Designation": "Developer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 2,
"Software": 29,
"EmployeeImg": "userfemale",
"CurrentSalary": 28826,
"Address": "2817 Milton Dr.",
"Mail": "king57@jourrapide.com"
},
{
"EmployeeID": 10020,
"Employees": "Davolio Fuller",
"Designation": "Designer",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 3,
"Software": 35,
"EmployeeImg": "userfemale",
"CurrentSalary": 71035,
"Address": "Gran Vía, 1",
"Mail": "davolio29@arpy.com"
},
{
"EmployeeID": 10021,
"Employees": "Rose Rose",
"Designation": "CFO",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 38,
"EmployeeImg": "usermale",
"CurrentSalary": 68123,
"Address": "Rua do Mercado, 12",
"Mail": "rose54@arpy.com"
},
{
"EmployeeID": 10022,
"Employees": "Andrew Michael",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 2,
"Software": 61,
"EmployeeImg": "userfemale",
"CurrentSalary": 75470,
"Address": "2, rue du Commerce",
"Mail": "andrew88@jourrapide.com"
},
{
"EmployeeID": 10023,
"Employees": "Davolio Kathryn",
"Designation": "Manager",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 25,
"EmployeeImg": "usermale",
"CurrentSalary": 25234,
"Address": "Hauptstr. 31",
"Mail": "davolio42@sample.com"
},
{
"EmployeeID": 10024,
"Employees": "Anne Fleet",
"Designation": "System Analyst",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 8341,
"Address": "59 rue de lAbbaye",
"Mail": "anne86@arpy.com"
},
{
"EmployeeID": 10025,
"Employees": "Margaret Andrew",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 51,
"EmployeeImg": "userfemale",
"CurrentSalary": 84975,
"Address": "P.O. Box 555",
"Mail": "margaret41@arpy.com"
},
{
"EmployeeID": 10026,
"Employees": "Kathryn Laura",
"Designation": "Project Lead",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 48,
"EmployeeImg": "usermale",
"CurrentSalary": 97282,
"Address": "Avda. Azteca 123",
"Mail": "kathryn82@rpy.com"
},
{
"EmployeeID": 10027,
"Employees": "Michael Michael",
"Designation": "Developer",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 16,
"EmployeeImg": "usermale",
"CurrentSalary": 4184,
"Address": "Rua do Paço, 67",
"Mail": "michael58@jourrapide.com"
},
{
"EmployeeID": 10028,
"Employees": "Leverling Vinet",
"Designation": "Project Lead",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 57,
"EmployeeImg": "userfemale",
"CurrentSalary": 38370,
"Address": "59 rue de lAbbaye",
"Mail": "leverling102@sample.com"
},
{
"EmployeeID": 10029,
"Employees": "Rose Jack",
"Designation": "Developer",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 46,
"EmployeeImg": "userfemale",
"CurrentSalary": 84790,
"Address": "Rua do Mercado, 12",
"Mail": "rose108@jourrapide.com"
},
{
"EmployeeID": 10030,
"Employees": "Vinet Van",
"Designation": "Developer",
"Location": "USA",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 40,
"EmployeeImg": "usermale",
"CurrentSalary": 71005,
"Address": "Gran Vía, 1",
"Mail": "vinet90@jourrapide.com"
}
];/**
* Default data source
*/
export let defaultData: Object[] = [
{ 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
{ 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
{ 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
{ 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
{ 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
{ 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
{ 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
{ 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
{ 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
];
/**
* Grid datasource
*/
export function getTradeData(dataCount?: number): object {
let employees: string[] = [
'Michael', 'Kathryn', 'Tamer', 'Martin', 'Davolio', 'Nancy', 'Fuller', 'Leverling', 'Peacock',
'Margaret', 'Buchanan', 'Janet', 'Andrew', 'Callahan', 'Laura', 'Dodsworth', 'Anne',
'Bergs', 'Vinet', 'Anton', 'Fleet', 'Zachery', 'Van', 'King', 'Jack', 'Rose'];
let designation: string[] = ['Manager', 'CFO', 'Designer', 'Developer', 'Program Directory', 'System Analyst', 'Project Lead'];
let mail: string[] = ['sample.com', 'arpy.com', 'rpy.com', 'mail.com', 'jourrapide.com'];
let location: string[] = ['UK', 'USA', 'Sweden', 'France', 'Canada', 'Argentina', 'Austria', 'Germany', 'Mexico'];
let status: string[] = ['Active', 'Inactive'];
let trustworthiness: string[] = ['Perfect', 'Sufficient', 'Insufficient'];
let tradeData: Object[] = [];
let address: string[] = ['59 rue de lAbbaye', 'Luisenstr. 48', 'Rua do Paço, 67', '2, rue du Commerce', 'Boulevard Tirou, 255',
'Rua do mailPaço, 67', 'Hauptstr. 31', 'Starenweg 5', 'Rua do Mercado, 12',
'Carrera 22 con Ave. Carlos Soublette #8-35', 'Kirchgasse 6',
'Sierras de Granada 9993', 'Mehrheimerstr. 369', 'Rua da Panificadora, 12', '2817 Milton Dr.', 'Kirchgasse 6',
'Åkergatan 24', '24, place Kléber', 'Torikatu 38', 'Berliner Platz 43', '5ª Ave. Los Palos Grandes', '1029 - 12th Ave. S.',
'Torikatu 38', 'P.O. Box 555', '2817 Milton Dr.', 'Taucherstraße 10', '59 rue de lAbbaye', 'Via Ludovico il Moro 22',
'Avda. Azteca 123', 'Heerstr. 22', 'Berguvsvägen 8', 'Magazinweg 7', 'Berguvsvägen 8', 'Gran Vía, 1', 'Gran Vía, 1',
'Carrera 52 con Ave. Bolívar #65-98 Llano Largo', 'Magazinweg 7', 'Taucherstraße 10', 'Taucherstraße 10',
'Av. Copacabana, 267', 'Strada Provinciale 124', 'Fauntleroy Circus', 'Av. dos Lusíadas, 23',
'Rua da Panificadora, 12', 'Av. Inês de Castro, 414', 'Avda. Azteca 123', '2817 Milton Dr.'];
let employeeimg: string[] = ['usermale', 'userfemale'];
if (typeof dataCount === 'string') {
dataCount = parseInt(dataCount, 10);
}
for (let i: number = 1; i <= dataCount; i++) {
let code: any = 10000;
tradeData.push({
'EmployeeID': code + i,
'Employees':
employees[Math.floor(Math.random() * employees.length)] + ' ' + employees[Math.floor(Math.random() * employees.length)],
'Designation': designation[Math.floor(Math.random() * designation.length)],
'Location': location[Math.floor(Math.random() * location.length)],
'Status': status[Math.floor(Math.random() * status.length)],
'Trustworthiness': trustworthiness[Math.floor(Math.random() * trustworthiness.length)],
'Rating': Math.floor(Math.random() * 5),
'Software': Math.floor(Math.random() * 100),
'EmployeeImg': employeeimg[Math.floor(Math.random() * employeeimg.length)],
'CurrentSalary': Math.floor((Math.random() * 100000)),
'Address': address[Math.floor(Math.random() * address.length)],
});
let employee: string = 'Employees';
let emp: string = tradeData[i - 1][employee];
let sName: string = emp.substr(0, emp.indexOf(' ')).toLowerCase();
let empmail: string = 'Mail';
tradeData[i - 1][empmail] = sName + (Math.floor(Math.random() * 100) + 10) + '@' + mail[Math.floor(Math.random() * mail.length)];
}
return tradeData;
}
export let tradeData: Object[] = [
{
"EmployeeID": 10001,
"Employees": "Laura Nancy",
"Designation": "Designer",
"Location": "France",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 69,
"EmployeeImg": "usermale",
"CurrentSalary": 84194,
"Address": "Taucherstraße 10",
"Mail": "laura15@jourrapide.com"
},
{
"EmployeeID": 10002,
"Employees": "Zachery Van",
"Designation": "CFO",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 99,
"EmployeeImg": "usermale",
"CurrentSalary": 55349,
"Address": "5ª Ave. Los Palos Grandes",
"Mail": "zachery109@sample.com"
},
{
"EmployeeID": 10003,
"Employees": "Rose Fuller",
"Designation": "CFO",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 1,
"EmployeeImg": "usermale",
"CurrentSalary": 16477,
"Address": "2817 Milton Dr.",
"Mail": "rose55@rpy.com"
},
{
"EmployeeID": 10004,
"Employees": "Jack Bergs",
"Designation": "Manager",
"Location": "Mexico",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 36,
"EmployeeImg": "usermale",
"CurrentSalary": 49040,
"Address": "2, rue du Commerce",
"Mail": "jack30@sample.com"
},
{
"EmployeeID": 10005,
"Employees": "Vinet Bergs",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 39,
"EmployeeImg": "usermale",
"CurrentSalary": 5495,
"Address": "Rua da Panificadora, 12",
"Mail": "vinet32@jourrapide.com"
},
{
"EmployeeID": 10006,
"Employees": "Buchanan Van",
"Designation": "Designer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 42182,
"Address": "24, place Kléber",
"Mail": "buchanan18@mail.com"
},
{
"EmployeeID": 10007,
"Employees": "Dodsworth Nancy",
"Designation": "Project Lead",
"Location": "USA",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 35776,
"Address": "Rua do Paço, 67",
"Mail": "dodsworth84@mail.com"
},
{
"EmployeeID": 10008,
"Employees": "Laura Jack",
"Designation": "Developer",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 89,
"EmployeeImg": "usermale",
"CurrentSalary": 25108,
"Address": "Rua da Panificadora, 12",
"Mail": "laura82@mail.com"
},
{
"EmployeeID": 10009,
"Employees": "Anne Fuller",
"Designation": "Program Directory",
"Location": "Mexico",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 0,
"Software": 19,
"EmployeeImg": "userfemale",
"CurrentSalary": 32568,
"Address": "Gran Vía, 1",
"Mail": "anne97@jourrapide.com"
},
{
"EmployeeID": 10010,
"Employees": "Buchanan Andrew",
"Designation": "Designer",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 62,
"EmployeeImg": "userfemale",
"CurrentSalary": 12320,
"Address": "P.O. Box 555",
"Mail": "buchanan50@jourrapide.com"
},
{
"EmployeeID": 10011,
"Employees": "Andrew Janet",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 20890,
"Address": "Starenweg 5",
"Mail": "andrew63@mail.com"
},
{
"EmployeeID": 10012,
"Employees": "Margaret Tamer",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 7,
"EmployeeImg": "userfemale",
"CurrentSalary": 22337,
"Address": "Magazinweg 7",
"Mail": "margaret26@mail.com"
},
{
"EmployeeID": 10013,
"Employees": "Tamer Fuller",
"Designation": "CFO",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 89181,
"Address": "Taucherstraße 10",
"Mail": "tamer40@arpy.com"
},
{
"EmployeeID": 10014,
"Employees": "Tamer Anne",
"Designation": "CFO",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 18,
"EmployeeImg": "usermale",
"CurrentSalary": 20998,
"Address": "Taucherstraße 10",
"Mail": "tamer68@arpy.com"
},
{
"EmployeeID": 10015,
"Employees": "Anton Davolio",
"Designation": "Project Lead",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 4,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 48232,
"Address": "Luisenstr. 48",
"Mail": "anton46@mail.com"
},
{
"EmployeeID": 10016,
"Employees": "Buchanan Buchanan",
"Designation": "System Analyst",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 19,
"EmployeeImg": "usermale",
"CurrentSalary": 43041,
"Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
"Mail": "buchanan68@mail.com"
},
{
"EmployeeID": 10017,
"Employees": "King Buchanan",
"Designation": "Program Directory",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 44,
"EmployeeImg": "userfemale",
"CurrentSalary": 25259,
"Address": "Magazinweg 7",
"Mail": "king80@jourrapide.com"
},
{
"EmployeeID": 10018,
"Employees": "Rose Michael",
"Designation": "Project Lead",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 31,
"EmployeeImg": "userfemale",
"CurrentSalary": 91156,
"Address": "Fauntleroy Circus",
"Mail": "rose75@mail.com"
},
{
"EmployeeID": 10019,
"Employees": "King Bergs",
"Designation": "Developer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 2,
"Software": 29,
"EmployeeImg": "userfemale",
"CurrentSalary": 28826,
"Address": "2817 Milton Dr.",
"Mail": "king57@jourrapide.com"
},
{
"EmployeeID": 10020,
"Employees": "Davolio Fuller",
"Designation": "Designer",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 3,
"Software": 35,
"EmployeeImg": "userfemale",
"CurrentSalary": 71035,
"Address": "Gran Vía, 1",
"Mail": "davolio29@arpy.com"
},
{
"EmployeeID": 10021,
"Employees": "Rose Rose",
"Designation": "CFO",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 38,
"EmployeeImg": "usermale",
"CurrentSalary": 68123,
"Address": "Rua do Mercado, 12",
"Mail": "rose54@arpy.com"
},
{
"EmployeeID": 10022,
"Employees": "Andrew Michael",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 2,
"Software": 61,
"EmployeeImg": "userfemale",
"CurrentSalary": 75470,
"Address": "2, rue du Commerce",
"Mail": "andrew88@jourrapide.com"
},
{
"EmployeeID": 10023,
"Employees": "Davolio Kathryn",
"Designation": "Manager",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 25,
"EmployeeImg": "usermale",
"CurrentSalary": 25234,
"Address": "Hauptstr. 31",
"Mail": "davolio42@sample.com"
},
{
"EmployeeID": 10024,
"Employees": "Anne Fleet",
"Designation": "System Analyst",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 8341,
"Address": "59 rue de lAbbaye",
"Mail": "anne86@arpy.com"
},
{
"EmployeeID": 10025,
"Employees": "Margaret Andrew",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 51,
"EmployeeImg": "userfemale",
"CurrentSalary": 84975,
"Address": "P.O. Box 555",
"Mail": "margaret41@arpy.com"
},
{
"EmployeeID": 10026,
"Employees": "Kathryn Laura",
"Designation": "Project Lead",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 48,
"EmployeeImg": "usermale",
"CurrentSalary": 97282,
"Address": "Avda. Azteca 123",
"Mail": "kathryn82@rpy.com"
},
{
"EmployeeID": 10027,
"Employees": "Michael Michael",
"Designation": "Developer",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 16,
"EmployeeImg": "usermale",
"CurrentSalary": 4184,
"Address": "Rua do Paço, 67",
"Mail": "michael58@jourrapide.com"
},
{
"EmployeeID": 10028,
"Employees": "Leverling Vinet",
"Designation": "Project Lead",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 57,
"EmployeeImg": "userfemale",
"CurrentSalary": 38370,
"Address": "59 rue de lAbbaye",
"Mail": "leverling102@sample.com"
},
{
"EmployeeID": 10029,
"Employees": "Rose Jack",
"Designation": "Developer",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 46,
"EmployeeImg": "userfemale",
"CurrentSalary": 84790,
"Address": "Rua do Mercado, 12",
"Mail": "rose108@jourrapide.com"
},
{
"EmployeeID": 10030,
"Employees": "Vinet Van",
"Designation": "Developer",
"Location": "USA",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 40,
"EmployeeImg": "usermale",
"CurrentSalary": 71005,
"Address": "Gran Vía, 1",
"Mail": "vinet90@jourrapide.com"
}
]Cell data binding
The Spreadsheet control can bind the data to individual cell in a sheet . To achive this you can use the value property.
Refer to the following code example for cell data binding.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RowsDirective, CellsDirective, RowDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component {
spreadsheet;
render() {
return (<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }}>
<SheetsDirective>
<SheetDirective selectedRange='D13' name='PriceDetails'>
<RowsDirective>
<RowDirective>
<CellsDirective>
<CellDirective value='Item Name'></CellDirective>
<CellDirective value='Quantity'></CellDirective>
<CellDirective value='Price'></CellDirective>
<CellDirective value='Amount'></CellDirective>
<CellDirective value='Stock Detail'></CellDirective>
<CellDirective value='Website'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective value='Casual Shoes'></CellDirective>
<CellDirective value='10'></CellDirective>
<CellDirective value='$20'></CellDirective>
<CellDirective value='$200'></CellDirective>
<CellDirective value='OUT OF STOCK'></CellDirective>
<CellDirective value='Amazon'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective value='Sports Shoes'></CellDirective>
<CellDirective value='20'></CellDirective>
<CellDirective value='$30'></CellDirective>
<CellDirective value='$600'></CellDirective>
<CellDirective value='IN STOCK'></CellDirective>
<CellDirective value='Overstack'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective value='Formal Shoes'></CellDirective>
<CellDirective value='20'></CellDirective>
<CellDirective value='$15'></CellDirective>
<CellDirective value='$300'></CellDirective>
<CellDirective value='IN STOCK'></CellDirective>
<CellDirective value='AliExpress'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective value='Sandals & Floaters'></CellDirective>
<CellDirective value='15'></CellDirective>
<CellDirective value='$20'></CellDirective>
<CellDirective value='$300'></CellDirective>
<CellDirective value='OUT OF STOCK'></CellDirective>
<CellDirective value='AliBaba'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective value='Flip-Flops & Slippers'></CellDirective>
<CellDirective value='30'></CellDirective>
<CellDirective value='$10'></CellDirective>
<CellDirective value='$300'></CellDirective>
<CellDirective value='IN STOCK'></CellDirective>
<CellDirective value='Taobao'></CellDirective>
</CellsDirective>
</RowDirective>
</RowsDirective>
<ColumnsDirective>
<ColumnDirective width={110}></ColumnDirective>
<ColumnDirective width={115}></ColumnDirective>
<ColumnDirective width={110}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={110}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RowsDirective, CellsDirective, RowDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component<{}, {}> {
spreadsheet: SpreadsheetComponent;
render() {
return (<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
<SheetsDirective>
<SheetDirective selectedRange='D13' name='PriceDetails'>
<RowsDirective>
<RowDirective>
<CellsDirective>
<CellDirective value='Item Name' ></CellDirective>
<CellDirective value='Quantity' ></CellDirective>
<CellDirective value='Price' ></CellDirective>
<CellDirective value='Amount' ></CellDirective>
<CellDirective value='Stock Detail' ></CellDirective>
<CellDirective value='Website' ></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective value='Casual Shoes' ></CellDirective>
<CellDirective value='10' ></CellDirective>
<CellDirective value='$20' ></CellDirective>
<CellDirective value='$200' ></CellDirective>
<CellDirective value='OUT OF STOCK' ></CellDirective>
<CellDirective value='Amazon'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective value='Sports Shoes' ></CellDirective>
<CellDirective value='20' ></CellDirective>
<CellDirective value='$30' ></CellDirective>
<CellDirective value='$600'></CellDirective>
<CellDirective value='IN STOCK'></CellDirective>
<CellDirective value='Overstack'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective value='Formal Shoes' ></CellDirective>
<CellDirective value='20' ></CellDirective>
<CellDirective value='$15' ></CellDirective>
<CellDirective value='$300'></CellDirective>
<CellDirective value='IN STOCK'></CellDirective>
<CellDirective value='AliExpress'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective value='Sandals & Floaters' ></CellDirective>
<CellDirective value='15' ></CellDirective>
<CellDirective value='$20' ></CellDirective>
<CellDirective value='$300' ></CellDirective>
<CellDirective value='OUT OF STOCK' ></CellDirective>
<CellDirective value='AliBaba'></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective value='Flip-Flops & Slippers' ></CellDirective>
<CellDirective value='30' ></CellDirective>
<CellDirective value='$10' ></CellDirective>
<CellDirective value='$300'></CellDirective>
<CellDirective value='IN STOCK' ></CellDirective>
<CellDirective value='Taobao'></CellDirective>
</CellsDirective>
</RowDirective>
</RowsDirective>
<ColumnsDirective>
<ColumnDirective width={110}></ColumnDirective>
<ColumnDirective width={115}></ColumnDirective>
<ColumnDirective width={110}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={110}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Default data source
*/
export let defaultData = [
{ 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
{ 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
{ 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
{ 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
{ 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
{ 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
{ 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
{ 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
{ 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
];
/**
* Grid datasource
*/
export function getTradeData(dataCount) {
let employees = [
'Michael', 'Kathryn', 'Tamer', 'Martin', 'Davolio', 'Nancy', 'Fuller', 'Leverling', 'Peacock',
'Margaret', 'Buchanan', 'Janet', 'Andrew', 'Callahan', 'Laura', 'Dodsworth', 'Anne',
'Bergs', 'Vinet', 'Anton', 'Fleet', 'Zachery', 'Van', 'King', 'Jack', 'Rose'
];
let designation = ['Manager', 'CFO', 'Designer', 'Developer', 'Program Directory', 'System Analyst', 'Project Lead'];
let mail = ['sample.com', 'arpy.com', 'rpy.com', 'mail.com', 'jourrapide.com'];
let location = ['UK', 'USA', 'Sweden', 'France', 'Canada', 'Argentina', 'Austria', 'Germany', 'Mexico'];
let status = ['Active', 'Inactive'];
let trustworthiness = ['Perfect', 'Sufficient', 'Insufficient'];
let tradeData = [];
let address = ['59 rue de lAbbaye', 'Luisenstr. 48', 'Rua do Paço, 67', '2, rue du Commerce', 'Boulevard Tirou, 255',
'Rua do mailPaço, 67', 'Hauptstr. 31', 'Starenweg 5', 'Rua do Mercado, 12',
'Carrera 22 con Ave. Carlos Soublette #8-35', 'Kirchgasse 6',
'Sierras de Granada 9993', 'Mehrheimerstr. 369', 'Rua da Panificadora, 12', '2817 Milton Dr.', 'Kirchgasse 6',
'Åkergatan 24', '24, place Kléber', 'Torikatu 38', 'Berliner Platz 43', '5ª Ave. Los Palos Grandes', '1029 - 12th Ave. S.',
'Torikatu 38', 'P.O. Box 555', '2817 Milton Dr.', 'Taucherstraße 10', '59 rue de lAbbaye', 'Via Ludovico il Moro 22',
'Avda. Azteca 123', 'Heerstr. 22', 'Berguvsvägen 8', 'Magazinweg 7', 'Berguvsvägen 8', 'Gran Vía, 1', 'Gran Vía, 1',
'Carrera 52 con Ave. Bolívar #65-98 Llano Largo', 'Magazinweg 7', 'Taucherstraße 10', 'Taucherstraße 10',
'Av. Copacabana, 267', 'Strada Provinciale 124', 'Fauntleroy Circus', 'Av. dos Lusíadas, 23',
'Rua da Panificadora, 12', 'Av. Inês de Castro, 414', 'Avda. Azteca 123', '2817 Milton Dr.'];
let employeeimg = ['usermale', 'userfemale'];
if (typeof dataCount === 'string') {
dataCount = parseInt(dataCount, 10);
}
for (let i = 1; i <= dataCount; i++) {
let code = 10000;
tradeData.push({
'EmployeeID': code + i,
'Employees': employees[Math.floor(Math.random() * employees.length)] + ' ' + employees[Math.floor(Math.random() * employees.length)],
'Designation': designation[Math.floor(Math.random() * designation.length)],
'Location': location[Math.floor(Math.random() * location.length)],
'Status': status[Math.floor(Math.random() * status.length)],
'Trustworthiness': trustworthiness[Math.floor(Math.random() * trustworthiness.length)],
'Rating': Math.floor(Math.random() * 5),
'Software': Math.floor(Math.random() * 100),
'EmployeeImg': employeeimg[Math.floor(Math.random() * employeeimg.length)],
'CurrentSalary': Math.floor((Math.random() * 100000)),
'Address': address[Math.floor(Math.random() * address.length)],
});
let employee = 'Employees';
let emp = tradeData[i - 1][employee];
let sName = emp.substr(0, emp.indexOf(' ')).toLowerCase();
let empmail = 'Mail';
tradeData[i - 1][empmail] = sName + (Math.floor(Math.random() * 100) + 10) + '@' + mail[Math.floor(Math.random() * mail.length)];
}
return tradeData;
}
export let tradeData = [
{
"EmployeeID": 10001,
"Employees": "Laura Nancy",
"Designation": "Designer",
"Location": "France",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 69,
"EmployeeImg": "usermale",
"CurrentSalary": 84194,
"Address": "Taucherstraße 10",
"Mail": "laura15@jourrapide.com"
},
{
"EmployeeID": 10002,
"Employees": "Zachery Van",
"Designation": "CFO",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 99,
"EmployeeImg": "usermale",
"CurrentSalary": 55349,
"Address": "5ª Ave. Los Palos Grandes",
"Mail": "zachery109@sample.com"
},
{
"EmployeeID": 10003,
"Employees": "Rose Fuller",
"Designation": "CFO",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 1,
"EmployeeImg": "usermale",
"CurrentSalary": 16477,
"Address": "2817 Milton Dr.",
"Mail": "rose55@rpy.com"
},
{
"EmployeeID": 10004,
"Employees": "Jack Bergs",
"Designation": "Manager",
"Location": "Mexico",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 36,
"EmployeeImg": "usermale",
"CurrentSalary": 49040,
"Address": "2, rue du Commerce",
"Mail": "jack30@sample.com"
},
{
"EmployeeID": 10005,
"Employees": "Vinet Bergs",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 39,
"EmployeeImg": "usermale",
"CurrentSalary": 5495,
"Address": "Rua da Panificadora, 12",
"Mail": "vinet32@jourrapide.com"
},
{
"EmployeeID": 10006,
"Employees": "Buchanan Van",
"Designation": "Designer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 42182,
"Address": "24, place Kléber",
"Mail": "buchanan18@mail.com"
},
{
"EmployeeID": 10007,
"Employees": "Dodsworth Nancy",
"Designation": "Project Lead",
"Location": "USA",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 35776,
"Address": "Rua do Paço, 67",
"Mail": "dodsworth84@mail.com"
},
{
"EmployeeID": 10008,
"Employees": "Laura Jack",
"Designation": "Developer",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 89,
"EmployeeImg": "usermale",
"CurrentSalary": 25108,
"Address": "Rua da Panificadora, 12",
"Mail": "laura82@mail.com"
},
{
"EmployeeID": 10009,
"Employees": "Anne Fuller",
"Designation": "Program Directory",
"Location": "Mexico",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 0,
"Software": 19,
"EmployeeImg": "userfemale",
"CurrentSalary": 32568,
"Address": "Gran Vía, 1",
"Mail": "anne97@jourrapide.com"
},
{
"EmployeeID": 10010,
"Employees": "Buchanan Andrew",
"Designation": "Designer",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 62,
"EmployeeImg": "userfemale",
"CurrentSalary": 12320,
"Address": "P.O. Box 555",
"Mail": "buchanan50@jourrapide.com"
},
{
"EmployeeID": 10011,
"Employees": "Andrew Janet",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 20890,
"Address": "Starenweg 5",
"Mail": "andrew63@mail.com"
},
{
"EmployeeID": 10012,
"Employees": "Margaret Tamer",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 7,
"EmployeeImg": "userfemale",
"CurrentSalary": 22337,
"Address": "Magazinweg 7",
"Mail": "margaret26@mail.com"
},
{
"EmployeeID": 10013,
"Employees": "Tamer Fuller",
"Designation": "CFO",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 89181,
"Address": "Taucherstraße 10",
"Mail": "tamer40@arpy.com"
},
{
"EmployeeID": 10014,
"Employees": "Tamer Anne",
"Designation": "CFO",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 18,
"EmployeeImg": "usermale",
"CurrentSalary": 20998,
"Address": "Taucherstraße 10",
"Mail": "tamer68@arpy.com"
},
{
"EmployeeID": 10015,
"Employees": "Anton Davolio",
"Designation": "Project Lead",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 4,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 48232,
"Address": "Luisenstr. 48",
"Mail": "anton46@mail.com"
},
{
"EmployeeID": 10016,
"Employees": "Buchanan Buchanan",
"Designation": "System Analyst",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 19,
"EmployeeImg": "usermale",
"CurrentSalary": 43041,
"Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
"Mail": "buchanan68@mail.com"
},
{
"EmployeeID": 10017,
"Employees": "King Buchanan",
"Designation": "Program Directory",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 44,
"EmployeeImg": "userfemale",
"CurrentSalary": 25259,
"Address": "Magazinweg 7",
"Mail": "king80@jourrapide.com"
},
{
"EmployeeID": 10018,
"Employees": "Rose Michael",
"Designation": "Project Lead",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 31,
"EmployeeImg": "userfemale",
"CurrentSalary": 91156,
"Address": "Fauntleroy Circus",
"Mail": "rose75@mail.com"
},
{
"EmployeeID": 10019,
"Employees": "King Bergs",
"Designation": "Developer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 2,
"Software": 29,
"EmployeeImg": "userfemale",
"CurrentSalary": 28826,
"Address": "2817 Milton Dr.",
"Mail": "king57@jourrapide.com"
},
{
"EmployeeID": 10020,
"Employees": "Davolio Fuller",
"Designation": "Designer",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 3,
"Software": 35,
"EmployeeImg": "userfemale",
"CurrentSalary": 71035,
"Address": "Gran Vía, 1",
"Mail": "davolio29@arpy.com"
},
{
"EmployeeID": 10021,
"Employees": "Rose Rose",
"Designation": "CFO",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 38,
"EmployeeImg": "usermale",
"CurrentSalary": 68123,
"Address": "Rua do Mercado, 12",
"Mail": "rose54@arpy.com"
},
{
"EmployeeID": 10022,
"Employees": "Andrew Michael",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 2,
"Software": 61,
"EmployeeImg": "userfemale",
"CurrentSalary": 75470,
"Address": "2, rue du Commerce",
"Mail": "andrew88@jourrapide.com"
},
{
"EmployeeID": 10023,
"Employees": "Davolio Kathryn",
"Designation": "Manager",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 25,
"EmployeeImg": "usermale",
"CurrentSalary": 25234,
"Address": "Hauptstr. 31",
"Mail": "davolio42@sample.com"
},
{
"EmployeeID": 10024,
"Employees": "Anne Fleet",
"Designation": "System Analyst",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 8341,
"Address": "59 rue de lAbbaye",
"Mail": "anne86@arpy.com"
},
{
"EmployeeID": 10025,
"Employees": "Margaret Andrew",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 51,
"EmployeeImg": "userfemale",
"CurrentSalary": 84975,
"Address": "P.O. Box 555",
"Mail": "margaret41@arpy.com"
},
{
"EmployeeID": 10026,
"Employees": "Kathryn Laura",
"Designation": "Project Lead",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 48,
"EmployeeImg": "usermale",
"CurrentSalary": 97282,
"Address": "Avda. Azteca 123",
"Mail": "kathryn82@rpy.com"
},
{
"EmployeeID": 10027,
"Employees": "Michael Michael",
"Designation": "Developer",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 16,
"EmployeeImg": "usermale",
"CurrentSalary": 4184,
"Address": "Rua do Paço, 67",
"Mail": "michael58@jourrapide.com"
},
{
"EmployeeID": 10028,
"Employees": "Leverling Vinet",
"Designation": "Project Lead",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 57,
"EmployeeImg": "userfemale",
"CurrentSalary": 38370,
"Address": "59 rue de lAbbaye",
"Mail": "leverling102@sample.com"
},
{
"EmployeeID": 10029,
"Employees": "Rose Jack",
"Designation": "Developer",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 46,
"EmployeeImg": "userfemale",
"CurrentSalary": 84790,
"Address": "Rua do Mercado, 12",
"Mail": "rose108@jourrapide.com"
},
{
"EmployeeID": 10030,
"Employees": "Vinet Van",
"Designation": "Developer",
"Location": "USA",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 40,
"EmployeeImg": "usermale",
"CurrentSalary": 71005,
"Address": "Gran Vía, 1",
"Mail": "vinet90@jourrapide.com"
}
];/**
* Default data source
*/
export let defaultData: Object[] = [
{ 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
{ 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
{ 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
{ 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
{ 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
{ 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
{ 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
{ 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
{ 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
];
/**
* Grid datasource
*/
export function getTradeData(dataCount?: number): object {
let employees: string[] = [
'Michael', 'Kathryn', 'Tamer', 'Martin', 'Davolio', 'Nancy', 'Fuller', 'Leverling', 'Peacock',
'Margaret', 'Buchanan', 'Janet', 'Andrew', 'Callahan', 'Laura', 'Dodsworth', 'Anne',
'Bergs', 'Vinet', 'Anton', 'Fleet', 'Zachery', 'Van', 'King', 'Jack', 'Rose'];
let designation: string[] = ['Manager', 'CFO', 'Designer', 'Developer', 'Program Directory', 'System Analyst', 'Project Lead'];
let mail: string[] = ['sample.com', 'arpy.com', 'rpy.com', 'mail.com', 'jourrapide.com'];
let location: string[] = ['UK', 'USA', 'Sweden', 'France', 'Canada', 'Argentina', 'Austria', 'Germany', 'Mexico'];
let status: string[] = ['Active', 'Inactive'];
let trustworthiness: string[] = ['Perfect', 'Sufficient', 'Insufficient'];
let tradeData: Object[] = [];
let address: string[] = ['59 rue de lAbbaye', 'Luisenstr. 48', 'Rua do Paço, 67', '2, rue du Commerce', 'Boulevard Tirou, 255',
'Rua do mailPaço, 67', 'Hauptstr. 31', 'Starenweg 5', 'Rua do Mercado, 12',
'Carrera 22 con Ave. Carlos Soublette #8-35', 'Kirchgasse 6',
'Sierras de Granada 9993', 'Mehrheimerstr. 369', 'Rua da Panificadora, 12', '2817 Milton Dr.', 'Kirchgasse 6',
'Åkergatan 24', '24, place Kléber', 'Torikatu 38', 'Berliner Platz 43', '5ª Ave. Los Palos Grandes', '1029 - 12th Ave. S.',
'Torikatu 38', 'P.O. Box 555', '2817 Milton Dr.', 'Taucherstraße 10', '59 rue de lAbbaye', 'Via Ludovico il Moro 22',
'Avda. Azteca 123', 'Heerstr. 22', 'Berguvsvägen 8', 'Magazinweg 7', 'Berguvsvägen 8', 'Gran Vía, 1', 'Gran Vía, 1',
'Carrera 52 con Ave. Bolívar #65-98 Llano Largo', 'Magazinweg 7', 'Taucherstraße 10', 'Taucherstraße 10',
'Av. Copacabana, 267', 'Strada Provinciale 124', 'Fauntleroy Circus', 'Av. dos Lusíadas, 23',
'Rua da Panificadora, 12', 'Av. Inês de Castro, 414', 'Avda. Azteca 123', '2817 Milton Dr.'];
let employeeimg: string[] = ['usermale', 'userfemale'];
if (typeof dataCount === 'string') {
dataCount = parseInt(dataCount, 10);
}
for (let i: number = 1; i <= dataCount; i++) {
let code: any = 10000;
tradeData.push({
'EmployeeID': code + i,
'Employees':
employees[Math.floor(Math.random() * employees.length)] + ' ' + employees[Math.floor(Math.random() * employees.length)],
'Designation': designation[Math.floor(Math.random() * designation.length)],
'Location': location[Math.floor(Math.random() * location.length)],
'Status': status[Math.floor(Math.random() * status.length)],
'Trustworthiness': trustworthiness[Math.floor(Math.random() * trustworthiness.length)],
'Rating': Math.floor(Math.random() * 5),
'Software': Math.floor(Math.random() * 100),
'EmployeeImg': employeeimg[Math.floor(Math.random() * employeeimg.length)],
'CurrentSalary': Math.floor((Math.random() * 100000)),
'Address': address[Math.floor(Math.random() * address.length)],
});
let employee: string = 'Employees';
let emp: string = tradeData[i - 1][employee];
let sName: string = emp.substr(0, emp.indexOf(' ')).toLowerCase();
let empmail: string = 'Mail';
tradeData[i - 1][empmail] = sName + (Math.floor(Math.random() * 100) + 10) + '@' + mail[Math.floor(Math.random() * mail.length)];
}
return tradeData;
}
export let tradeData: Object[] = [
{
"EmployeeID": 10001,
"Employees": "Laura Nancy",
"Designation": "Designer",
"Location": "France",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 69,
"EmployeeImg": "usermale",
"CurrentSalary": 84194,
"Address": "Taucherstraße 10",
"Mail": "laura15@jourrapide.com"
},
{
"EmployeeID": 10002,
"Employees": "Zachery Van",
"Designation": "CFO",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 99,
"EmployeeImg": "usermale",
"CurrentSalary": 55349,
"Address": "5ª Ave. Los Palos Grandes",
"Mail": "zachery109@sample.com"
},
{
"EmployeeID": 10003,
"Employees": "Rose Fuller",
"Designation": "CFO",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 1,
"EmployeeImg": "usermale",
"CurrentSalary": 16477,
"Address": "2817 Milton Dr.",
"Mail": "rose55@rpy.com"
},
{
"EmployeeID": 10004,
"Employees": "Jack Bergs",
"Designation": "Manager",
"Location": "Mexico",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 36,
"EmployeeImg": "usermale",
"CurrentSalary": 49040,
"Address": "2, rue du Commerce",
"Mail": "jack30@sample.com"
},
{
"EmployeeID": 10005,
"Employees": "Vinet Bergs",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 39,
"EmployeeImg": "usermale",
"CurrentSalary": 5495,
"Address": "Rua da Panificadora, 12",
"Mail": "vinet32@jourrapide.com"
},
{
"EmployeeID": 10006,
"Employees": "Buchanan Van",
"Designation": "Designer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 42182,
"Address": "24, place Kléber",
"Mail": "buchanan18@mail.com"
},
{
"EmployeeID": 10007,
"Employees": "Dodsworth Nancy",
"Designation": "Project Lead",
"Location": "USA",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 35776,
"Address": "Rua do Paço, 67",
"Mail": "dodsworth84@mail.com"
},
{
"EmployeeID": 10008,
"Employees": "Laura Jack",
"Designation": "Developer",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 89,
"EmployeeImg": "usermale",
"CurrentSalary": 25108,
"Address": "Rua da Panificadora, 12",
"Mail": "laura82@mail.com"
},
{
"EmployeeID": 10009,
"Employees": "Anne Fuller",
"Designation": "Program Directory",
"Location": "Mexico",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 0,
"Software": 19,
"EmployeeImg": "userfemale",
"CurrentSalary": 32568,
"Address": "Gran Vía, 1",
"Mail": "anne97@jourrapide.com"
},
{
"EmployeeID": 10010,
"Employees": "Buchanan Andrew",
"Designation": "Designer",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 1,
"Software": 62,
"EmployeeImg": "userfemale",
"CurrentSalary": 12320,
"Address": "P.O. Box 555",
"Mail": "buchanan50@jourrapide.com"
},
{
"EmployeeID": 10011,
"Employees": "Andrew Janet",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 20890,
"Address": "Starenweg 5",
"Mail": "andrew63@mail.com"
},
{
"EmployeeID": 10012,
"Employees": "Margaret Tamer",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 4,
"Software": 7,
"EmployeeImg": "userfemale",
"CurrentSalary": 22337,
"Address": "Magazinweg 7",
"Mail": "margaret26@mail.com"
},
{
"EmployeeID": 10013,
"Employees": "Tamer Fuller",
"Designation": "CFO",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 78,
"EmployeeImg": "usermale",
"CurrentSalary": 89181,
"Address": "Taucherstraße 10",
"Mail": "tamer40@arpy.com"
},
{
"EmployeeID": 10014,
"Employees": "Tamer Anne",
"Designation": "CFO",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 18,
"EmployeeImg": "usermale",
"CurrentSalary": 20998,
"Address": "Taucherstraße 10",
"Mail": "tamer68@arpy.com"
},
{
"EmployeeID": 10015,
"Employees": "Anton Davolio",
"Designation": "Project Lead",
"Location": "France",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 4,
"Software": 8,
"EmployeeImg": "userfemale",
"CurrentSalary": 48232,
"Address": "Luisenstr. 48",
"Mail": "anton46@mail.com"
},
{
"EmployeeID": 10016,
"Employees": "Buchanan Buchanan",
"Designation": "System Analyst",
"Location": "Austria",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 19,
"EmployeeImg": "usermale",
"CurrentSalary": 43041,
"Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
"Mail": "buchanan68@mail.com"
},
{
"EmployeeID": 10017,
"Employees": "King Buchanan",
"Designation": "Program Directory",
"Location": "Sweden",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 44,
"EmployeeImg": "userfemale",
"CurrentSalary": 25259,
"Address": "Magazinweg 7",
"Mail": "king80@jourrapide.com"
},
{
"EmployeeID": 10018,
"Employees": "Rose Michael",
"Designation": "Project Lead",
"Location": "Canada",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 31,
"EmployeeImg": "userfemale",
"CurrentSalary": 91156,
"Address": "Fauntleroy Circus",
"Mail": "rose75@mail.com"
},
{
"EmployeeID": 10019,
"Employees": "King Bergs",
"Designation": "Developer",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 2,
"Software": 29,
"EmployeeImg": "userfemale",
"CurrentSalary": 28826,
"Address": "2817 Milton Dr.",
"Mail": "king57@jourrapide.com"
},
{
"EmployeeID": 10020,
"Employees": "Davolio Fuller",
"Designation": "Designer",
"Location": "Canada",
"Status": "Inactive",
"Trustworthiness": "Sufficient",
"Rating": 3,
"Software": 35,
"EmployeeImg": "userfemale",
"CurrentSalary": 71035,
"Address": "Gran Vía, 1",
"Mail": "davolio29@arpy.com"
},
{
"EmployeeID": 10021,
"Employees": "Rose Rose",
"Designation": "CFO",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 38,
"EmployeeImg": "usermale",
"CurrentSalary": 68123,
"Address": "Rua do Mercado, 12",
"Mail": "rose54@arpy.com"
},
{
"EmployeeID": 10022,
"Employees": "Andrew Michael",
"Designation": "Program Directory",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 2,
"Software": 61,
"EmployeeImg": "userfemale",
"CurrentSalary": 75470,
"Address": "2, rue du Commerce",
"Mail": "andrew88@jourrapide.com"
},
{
"EmployeeID": 10023,
"Employees": "Davolio Kathryn",
"Designation": "Manager",
"Location": "Germany",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 25,
"EmployeeImg": "usermale",
"CurrentSalary": 25234,
"Address": "Hauptstr. 31",
"Mail": "davolio42@sample.com"
},
{
"EmployeeID": 10024,
"Employees": "Anne Fleet",
"Designation": "System Analyst",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 3,
"Software": 0,
"EmployeeImg": "userfemale",
"CurrentSalary": 8341,
"Address": "59 rue de lAbbaye",
"Mail": "anne86@arpy.com"
},
{
"EmployeeID": 10025,
"Employees": "Margaret Andrew",
"Designation": "System Analyst",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 51,
"EmployeeImg": "userfemale",
"CurrentSalary": 84975,
"Address": "P.O. Box 555",
"Mail": "margaret41@arpy.com"
},
{
"EmployeeID": 10026,
"Employees": "Kathryn Laura",
"Designation": "Project Lead",
"Location": "Austria",
"Status": "Active",
"Trustworthiness": "Insufficient",
"Rating": 3,
"Software": 48,
"EmployeeImg": "usermale",
"CurrentSalary": 97282,
"Address": "Avda. Azteca 123",
"Mail": "kathryn82@rpy.com"
},
{
"EmployeeID": 10027,
"Employees": "Michael Michael",
"Designation": "Developer",
"Location": "UK",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 4,
"Software": 16,
"EmployeeImg": "usermale",
"CurrentSalary": 4184,
"Address": "Rua do Paço, 67",
"Mail": "michael58@jourrapide.com"
},
{
"EmployeeID": 10028,
"Employees": "Leverling Vinet",
"Designation": "Project Lead",
"Location": "Germany",
"Status": "Inactive",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 57,
"EmployeeImg": "userfemale",
"CurrentSalary": 38370,
"Address": "59 rue de lAbbaye",
"Mail": "leverling102@sample.com"
},
{
"EmployeeID": 10029,
"Employees": "Rose Jack",
"Designation": "Developer",
"Location": "UK",
"Status": "Active",
"Trustworthiness": "Perfect",
"Rating": 0,
"Software": 46,
"EmployeeImg": "userfemale",
"CurrentSalary": 84790,
"Address": "Rua do Mercado, 12",
"Mail": "rose108@jourrapide.com"
},
{
"EmployeeID": 10030,
"Employees": "Vinet Van",
"Designation": "Developer",
"Location": "USA",
"Status": "Active",
"Trustworthiness": "Sufficient",
"Rating": 0,
"Software": 40,
"EmployeeImg": "usermale",
"CurrentSalary": 71005,
"Address": "Gran Vía, 1",
"Mail": "vinet90@jourrapide.com"
}
]The cell data binding also supports formula, style, number format, and more.
Dynamic data binding and Datasource change event
You can dynamically change the datasource of the spreadsheet by changing the dataSource property of the range object of the sheet. The dataSourceChanged event handler will be triggered when editing, inserting, and deleting a row in the datasource range. This event will be triggered with a parameter named action which indicates the edit, add and delete actions for the respective ones.
The following table defines the arguments of the dataSourceChanged event.
| Property | Type | Description |
|---|---|---|
| action | string | Indicates the type of action such as edit, add, and delete performed in the datasource range. |
| data | object[] | Modified data for edit action; New data for add action; Deleted data for delete action. |
| rangeIndex | number | Specifies the range index of the datasource. |
| sheetIndex | number | Specifies the sheet index of the datasource. |
For
addaction, the value for all the fields will benullin the data. In the case that you do not want the primary key field to be null which needs to be updated in the backend service, you can useeditaction after updating the primary key field to update in the backend service.
For inserting a row at the end of the datasource range, you should insert a row below at the end of the range to trigger thedataSourceChangedevent with actionadd.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData, itemData } from './datasource';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component {
spreadsheet;
dataSourceChanged(args) {
this.appendElement("Data source changed with" + "<b> " + args.action + "</b> action<hr>");
}
btnClick() {
this.spreadsheet.sheets[0].ranges[0].dataSource = itemData;
}
clearBtnClick() {
document.getElementById('EventLog').innerHTML = "";
}
appendElement(html) {
var span = document.createElement("span");
span.innerHTML = html;
var log = document.getElementById('EventLog');
log.insertBefore(span, log.firstChild);
}
render() {
return (<div>
<div>
<button id="changeDataBtn" className='e-btn' onClick={this.btnClick.bind(this)}>Change Datasource</button>
<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} dataSourceChanged={this.dataSourceChanged.bind(this)}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={defaultData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
</div>
<div>
<h4><b>Event Trace</b></h4>
<div id="evt">
<div style={{ height: "173px", overflow: "auto", width: "250px" }}>
<span id="EventLog"></span>
</div>
<button id="clearBtn" className='e-btn' onClick={this.clearBtnClick.bind(this)}>Clear</button>
</div>
</div>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData, itemData } from './datasource';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component<{}, {}> {
spreadsheet: SpreadsheetComponent;
dataSourceChanged(args) {
this.appendElement("Data source changed with" + "<b> " + args.action + "</b> action<hr>");
}
btnClick() {
this.spreadsheet.sheets[0].ranges[0].dataSource = itemData;
}
clearBtnClick() {
document.getElementById('EventLog').innerHTML = "";
}
appendElement(html) {
var span = document.createElement("span");
span.innerHTML = html;
var log = document.getElementById('EventLog');
log.insertBefore(span, log.firstChild);
}
render() {
return (<div>
<div>
<button id="changeDataBtn" className='e-btn' onClick={this.btnClick.bind(this)}>Change Datasource</button>
<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} dataSourceChanged={this.dataSourceChanged.bind(this)}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={defaultData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
</div>
<div>
<h4><b>Event Trace</b></h4>
<div id="evt">
<div style={{ height: "173px", overflow: "auto", width: "250px" }}>
<span id="EventLog" ></span>
</div>
<button id="clearBtn" className='e-btn' onClick={this.clearBtnClick.bind(this)}>Clear</button>
</div>
</div>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Default data source
*/
export let defaultData = [{
OrderID: 10248,
CustomerID: 'VINET',
EmployeeID: 5,
ShipName: 'Vins et alcools Chevalier',
ShipCity: 'Reims',
ShipAddress: '59 rue de lAbbaye'
},
{
OrderID: 10249,
CustomerID: 'TOMSP',
EmployeeID: 6,
ShipName: 'Toms Spezialitäten',
ShipCity: 'Münster',
ShipAddress: 'Luisenstr. 48'
},
{
OrderID: 10250,
CustomerID: 'HANAR',
EmployeeID: 4,
ShipName: 'Hanari Carnes',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua do Paço, 67'
},
{
OrderID: 10251,
CustomerID: 'VICTE',
EmployeeID: 3,
ShipName: 'Victuailles en stock',
ShipCity: 'Lyon',
ShipAddress: '2, rue du Commerce'
},
{
OrderID: 10252,
CustomerID: 'SUPRD',
EmployeeID: 4,
ShipName: 'Suprêmes délices',
ShipCity: 'Charleroi',
ShipAddress: 'Boulevard Tirou, 255'
}];
export let itemData = [{
'Item Name': 'Casual Shoes',
Date: '02/14/2019',
Time: '11:34:32 AM',
Quantity: 10,
Price: 20,
Amount: '=D2*E2',
Discount: 1,
Profit: 10
},
{
'Item Name': 'Sports Shoes',
Date: '06/11/2019',
Time: '05:56:32 AM',
Quantity: 20,
Price: 30,
Amount: '=D3*E3',
Discount: 5,
Profit: 50
},
{
'Item Name': 'Formal Shoes',
Date: '07/27/2019',
Time: '03:32:44 AM',
Quantity: 20,
Price: 15,
Amount: '=D4*E4',
Discount: 7,
Profit: 27
},
{
'Item Name': 'Sandals & Floaters',
Date: '11/21/2019',
Time: '06:23:54 AM',
Quantity: 15,
Price: 20,
Amount: '=D5*E5',
Discount: 11,
Profit: 67
},
{
'Item Name': 'Flip- Flops & Slippers',
Date: '06/23/2019',
Time: '12:43:59 AM',
Quantity: 30,
Price: 10,
Amount: '=D6*E6',
Discount: 10,
Profit: 70
},
{
'Item Name': 'Sneakers',
Date: '07/22/2019',
Time: '10:55:53 AM',
Quantity: 40,
Price: 20,
Amount: '=D7*E7',
Discount: 13,
Profit: 66
},
{
'Item Name': 'Running Shoes',
Date: '02/04/2019',
Time: '03:44:34 AM',
Quantity: 20,
Price: 10,
Amount: '=D8*E8',
Discount: 3,
Profit: 14
},
{
'Item Name': 'Loafers',
Date: '11/30/2019',
Time: '03:12:52 AM',
Quantity: 31,
Price: 10,
Amount: '=D9*E9',
Discount: 6,
Profit: 29
},
{
'Item Name': 'Cricket Shoes',
Date: '07/09/2019',
Time: '11:32:14 AM',
Quantity: 41,
Price: 30,
Amount: '=D10*E10',
Discount: 12,
Profit: 166
},
{
'Item Name': 'T-Shirts',
Date: '10/31/2019',
Time: '12:01:44 AM',
Quantity: 50,
Price: 10,
Amount: '=D11*E11',
Discount: 9,
Profit: 55
}
];/**
* Default data source
*/
export let defaultData: Object[] = [{
OrderID: 10248,
CustomerID: 'VINET',
EmployeeID: 5,
ShipName: 'Vins et alcools Chevalier',
ShipCity: 'Reims',
ShipAddress: '59 rue de lAbbaye'
},
{
OrderID: 10249,
CustomerID: 'TOMSP',
EmployeeID: 6,
ShipName: 'Toms Spezialitäten',
ShipCity: 'Münster',
ShipAddress: 'Luisenstr. 48'
},
{
OrderID: 10250,
CustomerID: 'HANAR',
EmployeeID: 4,
ShipName: 'Hanari Carnes',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua do Paço, 67'
},
{
OrderID: 10251,
CustomerID: 'VICTE',
EmployeeID: 3,
ShipName: 'Victuailles en stock',
ShipCity: 'Lyon',
ShipAddress: '2, rue du Commerce'
},
{
OrderID: 10252,
CustomerID: 'SUPRD',
EmployeeID: 4,
ShipName: 'Suprêmes délices',
ShipCity: 'Charleroi',
ShipAddress: 'Boulevard Tirou, 255'
}];
export let itemData : Object[] = [{
'Item Name': 'Casual Shoes',
Date: '02/14/2019',
Time: '11:34:32 AM',
Quantity: 10,
Price: 20,
Amount: '=D2*E2',
Discount: 1,
Profit: 10
},
{
'Item Name': 'Sports Shoes',
Date: '06/11/2019',
Time: '05:56:32 AM',
Quantity: 20,
Price: 30,
Amount: '=D3*E3',
Discount: 5,
Profit: 50
},
{
'Item Name': 'Formal Shoes',
Date: '07/27/2019',
Time: '03:32:44 AM',
Quantity: 20,
Price: 15,
Amount: '=D4*E4',
Discount: 7,
Profit: 27
},
{
'Item Name': 'Sandals & Floaters',
Date: '11/21/2019',
Time: '06:23:54 AM',
Quantity: 15,
Price: 20,
Amount: '=D5*E5',
Discount: 11,
Profit: 67
},
{
'Item Name': 'Flip- Flops & Slippers',
Date: '06/23/2019',
Time: '12:43:59 AM',
Quantity: 30,
Price: 10,
Amount: '=D6*E6',
Discount: 10,
Profit: 70
},
{
'Item Name': 'Sneakers',
Date: '07/22/2019',
Time: '10:55:53 AM',
Quantity: 40,
Price: 20,
Amount: '=D7*E7',
Discount: 13,
Profit: 66
},
{
'Item Name': 'Running Shoes',
Date: '02/04/2019',
Time: '03:44:34 AM',
Quantity: 20,
Price: 10,
Amount: '=D8*E8',
Discount: 3,
Profit: 14
},
{
'Item Name': 'Loafers',
Date: '11/30/2019',
Time: '03:12:52 AM',
Quantity: 31,
Price: 10,
Amount: '=D9*E9',
Discount: 6,
Profit: 29
},
{
'Item Name': 'Cricket Shoes',
Date: '07/09/2019',
Time: '11:32:14 AM',
Quantity: 41,
Price: 30,
Amount: '=D10*E10',
Discount: 12,
Profit: 166
},
{
'Item Name': 'T-Shirts',
Date: '10/31/2019',
Time: '12:01:44 AM',
Quantity: 50,
Price: 10,
Amount: '=D11*E11',
Discount: 9,
Profit: 55
}
];Note
You can refer to our React Spreadsheet feature tour page for its groundbreaking feature representations. You can also explore our React Spreadsheet example to knows how to present and manipulate data.