Spreadsheet is a tabular format consisting of rows and columns. The intersection point of rows and columns are called as cells. The list of operations that you can perform in rows and columns are,
You can insert rows or columns anywhere in a spreadsheet. Use the allowInsert property to enable or disable the insert option in Spreadsheet.
The rows can be inserted in the following ways,
insertRow method, you can insert the rows once the component is loaded.The following code example shows the options for inserting rows in the spreadsheet.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.rowsModel = [{
index: 9,
cells: [{ value: '' }, { value: '8' }, { value: 'Northwoods Cranberry Sauce' }, { value: '3' }, { value: '12 - 12 oz jars' },
{ value: '40.00' }, { value: '6' }, { value: 'false' }]
},
{
cells: [{ value: '' }, { value: '9' }, { value: 'Mishi Kobe Niku' }, { value: '4' }, { value: '18 - 500 g pkgs.' }, { value: '97.00' }, { value: '29' }, { value: 'true' }]
}];
}
created() {
// Applies style formatting before inserting the rows
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'B1:H1');
// inserting a empty row at 0th index
this.spreadsheet.insertRow();
// inserting 2 rows at the 9th index with data
this.spreadsheet.insertRow(this.rowsModel);
// Applies style formatting after the rows are inserted
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'B3:B12');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D3:D12');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'F3:H12');
}
;
render() {
return (<div> <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.created.bind(this)} showSheetTabs={false} showRibbon={false} showFormulaBar={false}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={data} startCell={"B1"}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={20}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={220}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={140}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Insert row data source
*/
export let data = [
{
'Product Id': 1, 'Product Name': 'Chai', 'Supplier Id': 1, 'Quantity Per Unit': '10 boxes x 20 bags', 'Unit Price': 18.00, 'Units In Stock': 39, 'Discontinued': false
},
{
'Product Id': 2, 'Product Name': 'Chang', 'Supplier Id': 1, 'Quantity Per Unit': '24 - 12 oz bottles', 'Unit Price': 19.00, 'Units In Stock': 17, 'Discontinued': true
},
{
'Product Id': 3, 'Product Name': 'Aniseed Syrup', 'Supplier Id': 1, 'Quantity Per Unit': '12 - 550 ml bottles', 'Unit Price': 10.00, 'Units In Stock': 13, 'Discontinued': false
},
{
'Product Id': 4, 'Product Name': 'Chef Anton\'s Cajun Seasoning', 'Supplier Id': 2, 'Quantity Per Unit': '48 - 6 oz jars', 'Unit Price': 22.00, 'Units In Stock': 53, 'Discontinued': true
},
{
'Product Id': 5, 'Product Name': 'Chef Anton\'s Gumbo Mix', 'Supplier Id': 2, 'Quantity Per Unit': '36 boxes', 'Unit Price': 21.35, 'Units In Stock': 0, 'Discontinued': true
},
{
'Product Id': 6, 'Product Name': 'Grandma\'s Boysenberry Spread', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 8 oz jars', 'Unit Price': 25.00, 'Units In Stock': 120, 'Discontinued': false
},
{
'Product Id': 7, 'Product Name': 'Uncle Bob\'s Organic Dried Pears', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 1 lb pkgs.', 'Unit Price': 30.00, 'Units In Stock': 15, 'Discontinued': true
},
{
'Product Id': 10, 'Product Name': 'Queso Cabrales', 'Supplier Id': 5, 'Quantity Per Unit': '1 kg pkg.', 'Unit Price': 21.00, 'Units In Stock': 22, 'Discontinued': false
}
];<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Spreadsheet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
body {
overflow: hidden;
}
.customClass.e-cell {
background-color: red;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellDirective, CellsDirective, protectSheet, ProtectSettings, Row, RowModel } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component<{}, {}> {
public spreadsheet: SpreadsheetComponent;
public rowsModel: RowModel[] = [{
index: 9, // Need to specify the index for the first row collection, the specified rows will be inserted in this index.
cells: [{ value: '' }, { value: '8' }, { value: 'Northwoods Cranberry Sauce' }, { value: '3' }, { value: '12 - 12 oz jars' },
{ value: '40.00' }, { value: '6' }, { value: 'false' }]
},
{
cells: [{ value: '' }, { value: '9' }, { value: 'Mishi Kobe Niku' }, { value: '4' }, { value: '18 - 500 g pkgs.' }, { value: '97.00' }, { value: '29' }, { value: 'true' }]
}];
public created(): void{
// Applies style formatting before inserting the rows
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'B1:H1');
// inserting a empty row at 0th index
this.spreadsheet.insertRow();
// inserting 2 rows at the 9th index with data
this.spreadsheet.insertRow(this.rowsModel);
// Applies style formatting after the rows are inserted
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'B3:B12');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D3:D12');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'F3:H12');
};
render() {
return ( <div> <SpreadsheetComponent
ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.created.bind(this)} showSheetTabs={false} showRibbon={false} showFormulaBar={false} >
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={data} startCell={"B1"}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={20}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={220}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={140}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Insert row data source
*/
export let data: Object[] = [
{
'Product Id': 1, 'Product Name': 'Chai', 'Supplier Id': 1, 'Quantity Per Unit': '10 boxes x 20 bags', 'Unit Price': 18.00, 'Units In Stock': 39, 'Discontinued': false
},
{
'Product Id': 2, 'Product Name': 'Chang', 'Supplier Id': 1, 'Quantity Per Unit': '24 - 12 oz bottles', 'Unit Price': 19.00, 'Units In Stock': 17, 'Discontinued': true
},
{
'Product Id': 3, 'Product Name': 'Aniseed Syrup', 'Supplier Id': 1, 'Quantity Per Unit': '12 - 550 ml bottles', 'Unit Price': 10.00, 'Units In Stock': 13, 'Discontinued': false
},
{
'Product Id': 4, 'Product Name': 'Chef Anton\'s Cajun Seasoning', 'Supplier Id': 2, 'Quantity Per Unit': '48 - 6 oz jars', 'Unit Price': 22.00, 'Units In Stock': 53, 'Discontinued': true
},
{
'Product Id': 5, 'Product Name': 'Chef Anton\'s Gumbo Mix', 'Supplier Id': 2, 'Quantity Per Unit': '36 boxes', 'Unit Price': 21.35, 'Units In Stock': 0, 'Discontinued': true
},
{
'Product Id': 6, 'Product Name': 'Grandma\'s Boysenberry Spread', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 8 oz jars', 'Unit Price': 25.00, 'Units In Stock': 120, 'Discontinued': false
},
{
'Product Id': 7, 'Product Name': 'Uncle Bob\'s Organic Dried Pears', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 1 lb pkgs.', 'Unit Price': 30.00, 'Units In Stock': 15, 'Discontinued': true
},
{
'Product Id': 10, 'Product Name': 'Queso Cabrales', 'Supplier Id': 5, 'Quantity Per Unit': '1 kg pkg.', 'Unit Price': 21.00, 'Units In Stock': 22, 'Discontinued': false
}];The columns can be inserted in the following ways,
insertColumn method, you can insert the columns once the component is loaded.The following code example shows the options for inserting columns in the spreadsheet.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, getCellAddress } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.cellsModel = [{ value: 'Unit Price', style: { fontWeight: 'bold', textAlign: 'center' } }, { value: '18.00' },
{ value: '19.00' }, { value: '10.00' }, { value: '22.00' }, { value: '21.35' }, { value: '25.00' }, { value: '30.00' },
{ value: '21.00' }, { value: '40.00' }, { value: '97.00' }];
}
created() {
// Applies style formatting before inserting the column
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A2:G2');
// inserting a empty column at 0th index
this.spreadsheet.insertColumn();
// inserting 1 column at the 5th index with column model
this.spreadsheet.insertColumn([{ index: 5, width: 90 }]);
let rowIndex = 1;
// Updating the 5th column data
this.cellsModel.forEach((cell) => {
this.spreadsheet.updateCell(cell, getCellAddress(rowIndex, 5));
rowIndex++;
});
// Applies style formatting after the columns are inserted
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'B3:B12');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D3:D12');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'F3:H12');
}
;
render() {
return (<div> <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.created.bind(this)} showSheetTabs={false} showRibbon={false} showFormulaBar={false}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={data} startCell={"A2"}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={220}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={140}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Insert column data source
*/
export let data = [
{
'Product Id': 1, 'Product Name': 'Chai', 'Supplier Id': 1, 'Quantity Per Unit': '10 boxes x 20 bags', 'Units In Stock': 39, 'Discontinued': true
},
{
'Product Id': 2, 'Product Name': 'Chang', 'Supplier Id': 1, 'Quantity Per Unit': '24 - 12 oz bottles', 'Units In Stock': 17, 'Discontinued': true
},
{
'Product Id': 3, 'Product Name': 'Aniseed Syrup', 'Supplier Id': 1, 'Quantity Per Unit': '12 - 550 ml bottles', 'Units In Stock': 13, 'Discontinued': true
},
{
'Product Id': 4, 'Product Name': 'Chef Anton\'s Cajun Seasoning', 'Supplier Id': 2, 'Quantity Per Unit': '48 - 6 oz jars', 'Units In Stock': 53, 'Discontinued': true
},
{
'Product Id': 5, 'Product Name': 'Chef Anton\'s Gumbo Mix', 'Supplier Id': 2, 'Quantity Per Unit': '36 boxes', 'Units In Stock': 0, 'Discontinued': true
},
{
'Product Id': 6, 'Product Name': 'Grandma\'s Boysenberry Spread', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 8 oz jars', 'Units In Stock': 120, 'Discontinued': false
},
{
'Product Id': 7, 'Product Name': 'Uncle Bob\'s Organic Dried Pears', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 1 lb pkgs.', 'Units In Stock': 15, 'Discontinued': false
},
{
'Product Id': 8, 'Product Name': 'Queso Cabrales', 'Supplier Id': 5, 'Quantity Per Unit': '1 kg pkg.', 'Units In Stock': 22, 'Discontinued': false
},
{
'Product Id': 9, 'Product Name': 'Northwoods Cranberry Sauce', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 12 oz jars', 'Units In Stock': 6, 'Discontinued': false
},
{
'Product Id': 10, 'Product Name': 'Mishi Kobe Niku', 'Supplier Id': 4, 'Quantity Per Unit': '18 - 500 g pkgs.', 'Units In Stock': 29, 'Discontinued': true
}
];<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Spreadsheet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
body {
overflow: hidden;
}
.customClass.e-cell {
background-color: red;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellDirective, CellsDirective, protectSheet, ProtectSettings, Row, RowModel, CellModel, getCellAddress } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component<{}, {}> {
public spreadsheet: SpreadsheetComponent;
public cellsModel: CellModel[] = [{ value: 'Unit Price', style: { fontWeight: 'bold', textAlign: 'center' } }, { value: '18.00' },
{ value: '19.00' }, { value: '10.00' }, { value: '22.00' }, { value: '21.35' }, { value: '25.00' }, { value: '30.00' },
{ value: '21.00' }, { value: '40.00' }, { value: '97.00' }];
public created(): void{
// Applies style formatting before inserting the column
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A2:G2');
// inserting a empty column at 0th index
this.spreadsheet.insertColumn();
// inserting 1 column at the 5th index with column model
this.spreadsheet.insertColumn([{ index: 5, width: 90 }]);
let rowIndex: number = 1;
// Updating the 5th column data
this.cellsModel.forEach((cell: CellModel): void => {
this.spreadsheet.updateCell(cell, getCellAddress(rowIndex, 5)); rowIndex++;
});
// Applies style formatting after the columns are inserted
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'B3:B12');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D3:D12');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'F3:H12');
};
render() {
return ( <div> <SpreadsheetComponent
ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.created.bind(this)} showSheetTabs={false} showRibbon={false} showFormulaBar={false} >
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={data} startCell={"A2"}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={220}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={140}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Insert column data source
*/
export let data: Object[] = [
{
'Product Id': 1, 'Product Name': 'Chai', 'Supplier Id': 1, 'Quantity Per Unit': '10 boxes x 20 bags', 'Units In Stock': 39, 'Discontinued': true
},
{
'Product Id': 2, 'Product Name': 'Chang', 'Supplier Id': 1, 'Quantity Per Unit': '24 - 12 oz bottles', 'Units In Stock': 17, 'Discontinued': true
},
{
'Product Id': 3, 'Product Name': 'Aniseed Syrup', 'Supplier Id': 1, 'Quantity Per Unit': '12 - 550 ml bottles', 'Units In Stock': 13, 'Discontinued': true
},
{
'Product Id': 4, 'Product Name': 'Chef Anton\'s Cajun Seasoning', 'Supplier Id': 2, 'Quantity Per Unit': '48 - 6 oz jars', 'Units In Stock': 53, 'Discontinued': true
},
{
'Product Id': 5, 'Product Name': 'Chef Anton\'s Gumbo Mix', 'Supplier Id': 2, 'Quantity Per Unit': '36 boxes', 'Units In Stock': 0, 'Discontinued': true
},
{
'Product Id': 6, 'Product Name': 'Grandma\'s Boysenberry Spread', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 8 oz jars', 'Units In Stock': 120, 'Discontinued': false
},
{
'Product Id': 7, 'Product Name': 'Uncle Bob\'s Organic Dried Pears', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 1 lb pkgs.', 'Units In Stock': 15, 'Discontinued': false
},
{
'Product Id': 8, 'Product Name': 'Queso Cabrales', 'Supplier Id': 5, 'Quantity Per Unit': '1 kg pkg.', 'Units In Stock': 22, 'Discontinued': false
},
{
'Product Id': 9, 'Product Name': 'Northwoods Cranberry Sauce', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 12 oz jars', 'Units In Stock': 6, 'Discontinued': false
},
{
'Product Id': 10, 'Product Name': 'Mishi Kobe Niku', 'Supplier Id': 4, 'Quantity Per Unit': '18 - 500 g pkgs.', 'Units In Stock': 29, 'Discontinued': true
}];Delete support provides an option for deleting the rows and columns in the spreadsheet. Use allowDelete property to enable or disable the delete option in Spreadsheet.
The rows and columns can be deleted dynamically in the following ways,
delete method, you can delete the loaded rows and columns.The following code example shows the delete operation of rows and columns in the spreadsheet.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component {
created() {
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
// deleting the rows from 8th to 10th index. To delete row, the third argument of enum type is passed as 'Row', the last argument specifies the sheet name or index in which the delete operation will perform. By default,active sheet will be considered. It is applicable only for model type Row and Column.
this.spreadsheet.delete(8, 10, 'Row', 0); // startIndex, endIndex, Row, sheet index
// deleting the 2nd and 5th indexed columns
this.spreadsheet.delete(2, 2, 'Column', 'Sheet2');
this.spreadsheet.delete(5, 5, 'Column');
this.spreadsheet.delete(0, 0, "Sheet"); // delete the first sheet. sheet index starts from 0
// Applies style formatting after deleted the rows and columns
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:A8');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:G8');
}
;
render() {
return (<div> <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.created.bind(this)} showRibbon={false} showFormulaBar={false} allowDelete={true}>
<SheetsDirective>
<SheetDirective name={"Sheet1"}>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={220}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={140}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
<SheetDirective name={"Sheet2"}>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={220}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={140}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Delete row column data source
*/
export let data = [
{
'Product Id': 1, 'Product Name': 'Chai', 'Supplier Id': 1, 'Quantity Per Unit': '10 boxes x 20 bags', 'Unit Price': 18.00, 'Units In Stock': 39, 'Discontinued': true
},
{
'Product Id': 2, 'Product Name': 'Chang', 'Supplier Id': 1, 'Quantity Per Unit': '24 - 12 oz bottles', 'Unit Price': 19.00, 'Units In Stock': 17, 'Discontinued': true
},
{
'Product Id': 3, 'Product Name': 'Aniseed Syrup', 'Supplier Id': 1, 'Quantity Per Unit': '12 - 550 ml bottles', 'Unit Price': 10.00, 'Units In Stock': 13, 'Discontinued': true
},
{
'Product Id': 4, 'Product Name': 'Chef Anton\'s Cajun Seasoning', 'Supplier Id': 2, 'Quantity Per Unit': '48 - 6 oz jars', 'Unit Price': 22.00, 'Units In Stock': 53, 'Discontinued': true
},
{
'Product Id': 5, 'Product Name': 'Chef Anton\'s Gumbo Mix', 'Supplier Id': 2, 'Quantity Per Unit': '36 boxes', 'Unit Price': 21.35, 'Units In Stock': 0, 'Discontinued': true
},
{
'Product Id': 6, 'Product Name': 'Grandma\'s Boysenberry Spread', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 8 oz jars', 'Unit Price': 25.00, 'Units In Stock': 120, 'Discontinued': false
},
{
'Product Id': 7, 'Product Name': 'Uncle Bob\'s Organic Dried Pears', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 1 lb pkgs.', 'Unit Price': 30.00, 'Units In Stock': 15, 'Discontinued': false
},
{
'Product Id': 8, 'Product Name': 'Queso Cabrales', 'Supplier Id': 5, 'Quantity Per Unit': '1 kg pkg.', 'Unit Price': 21.00, 'Units In Stock': 22, 'Discontinued': false
},
{
'Product Id': 9, 'Product Name': 'Northwoods Cranberry Sauce', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 12 oz jars', 'Unit Price': 40.00, 'Units In Stock': 6, 'Discontinued': false
},
{
'Product Id': 10, 'Product Name': 'Mishi Kobe Niku', 'Supplier Id': 4, 'Quantity Per Unit': '18 - 500 g pkgs.', 'Unit Price': 97.00, 'Units In Stock': 29, 'Discontinued': true
}
];<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Spreadsheet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
body {
overflow: hidden;
}
.customClass.e-cell {
background-color: red;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellDirective, CellsDirective, protectSheet, ProtectSettings } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component<{}, {}> {
public spreadsheet: SpreadsheetComponent;
public created(): void{
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
// deleting the rows from 8th to 10th index. To delete row, the third argument of enum type is passed as 'Row', the last argument specifies the sheet name or index in which the delete operation will perform. By default,active sheet will be considered. It is applicable only for model type Row and Column.
this.spreadsheet.delete(8, 10, 'Row', 0); // startIndex, endIndex, Row, sheet index
// deleting the 2nd and 5th indexed columns
this.spreadsheet.delete(2, 2, 'Column', 'Sheet2');
this.spreadsheet.delete(5, 5, 'Column');
this.spreadsheet.delete(0, 0, "Sheet"); // delete the first sheet. sheet index starts from 0
// Applies style formatting after deleted the rows and columns
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:A8');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:G8');
};
render() {
return ( <div> <SpreadsheetComponent
ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.created.bind(this)} showRibbon={false} showFormulaBar={false} allowDelete={true} >
<SheetsDirective>
<SheetDirective name={"Sheet1"}>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={220}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={140}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
<SheetDirective name={"Sheet2"}>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={220}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={140}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Delete row column data source
*/
export let data: Object[] = [
{
'Product Id': 1, 'Product Name': 'Chai', 'Supplier Id': 1, 'Quantity Per Unit': '10 boxes x 20 bags', 'Unit Price': 18.00, 'Units In Stock': 39, 'Discontinued': true
},
{
'Product Id': 2, 'Product Name': 'Chang', 'Supplier Id': 1, 'Quantity Per Unit': '24 - 12 oz bottles', 'Unit Price': 19.00, 'Units In Stock': 17, 'Discontinued': true
},
{
'Product Id': 3, 'Product Name': 'Aniseed Syrup', 'Supplier Id': 1, 'Quantity Per Unit': '12 - 550 ml bottles', 'Unit Price': 10.00, 'Units In Stock': 13, 'Discontinued': true
},
{
'Product Id': 4, 'Product Name': 'Chef Anton\'s Cajun Seasoning', 'Supplier Id': 2, 'Quantity Per Unit': '48 - 6 oz jars', 'Unit Price': 22.00, 'Units In Stock': 53, 'Discontinued': true
},
{
'Product Id': 5, 'Product Name': 'Chef Anton\'s Gumbo Mix', 'Supplier Id': 2, 'Quantity Per Unit': '36 boxes', 'Unit Price': 21.35, 'Units In Stock': 0, 'Discontinued': true
},
{
'Product Id': 6, 'Product Name': 'Grandma\'s Boysenberry Spread', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 8 oz jars', 'Unit Price': 25.00, 'Units In Stock': 120, 'Discontinued': false
},
{
'Product Id': 7, 'Product Name': 'Uncle Bob\'s Organic Dried Pears', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 1 lb pkgs.', 'Unit Price': 30.00, 'Units In Stock': 15, 'Discontinued': false
},
{
'Product Id': 8, 'Product Name': 'Queso Cabrales', 'Supplier Id': 5, 'Quantity Per Unit': '1 kg pkg.', 'Unit Price': 21.00, 'Units In Stock': 22, 'Discontinued': false
},
{
'Product Id': 9, 'Product Name': 'Northwoods Cranberry Sauce', 'Supplier Id': 3, 'Quantity Per Unit': '12 - 12 oz jars', 'Unit Price': 40.00, 'Units In Stock': 6, 'Discontinued': false
},
{
'Product Id': 10, 'Product Name': 'Mishi Kobe Niku', 'Supplier Id': 4, 'Quantity Per Unit': '18 - 500 g pkgs.', 'Unit Price': 97.00, 'Units In Stock': 29, 'Discontinued': true
}];The following features have some limitations in Insert/Delete:
You can show or hide the rows and columns in the spreadsheet through property binding, method, and context menu.
The rows can be hidden or shown through the following ways,
hidden property in row, you can hide/show the rows at initial load.hideRow method, you can hide the rows by specifying the start and end row index, set the last argument hide as false to unhide the hidden rows.The columns can be hidden or shown through following ways,
hidden property in columns, you can hide/show the columns at initial load.hideColumn method, you can hide the columns by specifying the start and end column index, set the last argument hide as false to unhide the hidden columns.The following code example shows the hide/show rows and columns operation in the spreadsheet.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component {
created() {
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
// Unhide the 2nd index hidden column
this.spreadsheet.hideColumn(1, 1, false);
// Unhide the 3rd index hidden row
this.spreadsheet.hideRow(3, 3, false);
// Hiding the 6th index column
this.spreadsheet.hideColumn(6);
// Hiding the 8th and 9th index row
this.spreadsheet.hideRow(8, 9);
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:H11');
}
;
render() {
return (<div> <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.created.bind(this)} showSheetTabs={false} showRibbon={false} showFormulaBar={false}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<RowsDirective>
<RowDirective index={2} hidden={true}></RowDirective>
<RowDirective hidden={true}></RowDirective>
</RowsDirective>
<ColumnsDirective>
<ColumnDirective width={150}></ColumnDirective>
<ColumnDirective width={100} hidden={true}></ColumnDirective>
<ColumnDirective width={100} hidden={true}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Hide/show data source
*/
export let data = [
{ '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 }
];<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Spreadsheet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
body {
overflow: hidden;
}
.customClass.e-cell {
background-color: red;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellDirective, CellsDirective, protectSheet, ProtectSettings, Row, RowModel } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component<{}, {}> {
public spreadsheet: SpreadsheetComponent;
public created(): void{
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
// Unhide the 2nd index hidden column
this.spreadsheet.hideColumn(1, 1, false);
// Unhide the 3rd index hidden row
this.spreadsheet.hideRow(3, 3, false);
// Hiding the 6th index column
this.spreadsheet.hideColumn(6);
// Hiding the 8th and 9th index row
this.spreadsheet.hideRow(8, 9);
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:H11');
};
render() {
return ( <div> <SpreadsheetComponent
ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.created.bind(this)} showSheetTabs={false} showRibbon={false} showFormulaBar={false} >
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<RowsDirective>
<RowDirective index={2} hidden={true}></RowDirective>
<RowDirective hidden={true}></RowDirective>
</RowsDirective>
<ColumnsDirective>
<ColumnDirective width={150}></ColumnDirective>
<ColumnDirective width={100} hidden={true}></ColumnDirective>
<ColumnDirective width={100} hidden={true}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
<ColumnDirective width={80}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Hide/show data source
*/
export let data: 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 }
];You can change the size of rows and columns in the spreadsheet by using setRowsHeight and setColumnsWidth methods.
You can change the height of single or multiple rows by using the setRowsHeight method.
You can provide the following type of ranges to the method:
['2:2']['1:100']['1:10', '15:25', '30:40'][Sheet1!1:50, 'Sheet2!1:50', 'Sheet3!1:50']The following code example shows how to change the height for single/multiple rows in the spreadsheet.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './datasource';
export default class App extends React.Component {
created(args) {
// To change height for single row
this.spreadsheet.setRowsHeight(40, ['2']);
// To change height for multiple rows
this.spreadsheet.setRowsHeight(40, ['4:8', '10:12']);
}
render() {
return (<SpreadsheetComponent ref={(ssObj) => {
this.spreadsheet = ssObj;
}} created={this.created.bind(this)}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={defaultData}></RangeDirective>
</RangesDirective>
</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"
}
];<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Spreadsheet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
body {
overflow: hidden;
}
.customClass.e-cell {
background-color: red;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
SpreadsheetComponent,
SheetsDirective,
SheetDirective,
RangesDirective,
} from '@syncfusion/ej2-react-spreadsheet';
import {
RangeDirective,
ColumnsDirective,
ColumnDirective,
} from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './datasource';
export default class App extends React.Component<{}, {}> {
public spreadsheet: SpreadsheetComponent;
public created(args): void {
// To change height for single row
this.spreadsheet.setRowsHeight(40, ['2']);
// To change height for multiple rows
this.spreadsheet.setRowsHeight(40, ['4:8', '10:12']);
}
render() {
return (
<SpreadsheetComponent
ref={(ssObj) => {
this.spreadsheet = ssObj;
}}
created={this.created.bind(this)}
>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={defaultData}></RangeDirective>
</RangesDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* 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"
}
]You can change the width of single or multiple columns by using the setColumnsWidth method.
You can provide the following type of ranges to the method:
['F:F']['A:F']['A:C', 'G:I', 'K:M'][Sheet1!A:H, 'Sheet2!A:H', 'Sheet3!A:H']The following code example shows how to change the width for single/multiple columns in the spreadsheet.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './datasource';
export default class App extends React.Component {
created(args) {
// To change width of single column
this.spreadsheet.setColumnsWidth(100, ['F']);
// To change width of multiple columns
this.spreadsheet.setColumnsWidth(120, ['A:C', 'G:I', 'K:M']);
}
render() {
return (<SpreadsheetComponent ref={(ssObj) => {
this.spreadsheet = ssObj;
}} created={this.created.bind(this)}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={defaultData}></RangeDirective>
</RangesDirective>
</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"
}
];<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Spreadsheet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
body {
overflow: hidden;
}
.customClass.e-cell {
background-color: red;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
SpreadsheetComponent,
SheetsDirective,
SheetDirective,
RangesDirective,
} from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './datasource';
export default class App extends React.Component<{}, {}> {
public spreadsheet: SpreadsheetComponent;
public created(args): void {
// To change width of single column
this.spreadsheet.setColumnsWidth(100, ['F']);
// To change width of multiple columns
this.spreadsheet.setColumnsWidth(120, ['A:C', 'G:I', 'K:M']);
}
render() {
return (
<SpreadsheetComponent
ref={(ssObj) => {
this.spreadsheet = ssObj;
}}
created={this.created.bind(this)}
>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={defaultData}></RangeDirective>
</RangesDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* 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[