A group of cells in a sheet is known as cell range.
To get start quickly with Cell Range, you can check on this video:
Wrap text allows you to display large content as multiple lines in a single cell. By default, the wrap text support is enabled. Use the allowWrap property to enable or disable the wrap text support in spreadsheet.
Wrap text can be applied or removed to a cell or range of cells in the following ways,
wrap property in cell, you can enable or disable wrap text to a cell at initial load.wrap method, you can apply or remove the wrap text once the component is loaded.The following code example shows the wrap text functionality in spreadsheet.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellDirective, CellsDirective } 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 {
oncreated(args) {
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
this.spreadsheet.cellFormat({ verticalAlign: 'middle' }, 'A1:H5');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:B5');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:D5');
// To wrap the cells from E2 to E5 range
this.spreadsheet.wrap('E2:E5');
// To unwrap the H3 cell
this.spreadsheet.wrap('H3', false);
}
render() {
return (<div> <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.oncreated.bind(this)} showFormulaBar={false}>
<SheetsDirective>
<SheetDirective name={"Movie List"}>
<RowsDirective>
<RowDirective height={30}>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective index={7} wrap={true}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective index={7} wrap={true}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective index={7} wrap={true}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective index={7} wrap={true}></CellDirective>
</CellsDirective>
</RowDirective>
</RowsDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100} index={1}></ColumnDirective>
<ColumnDirective width={140}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={150}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Wrap text data source
*/
export let data = [
{
'No': '1',
'Released on': 1994,
'Title': 'Forrest Gump',
'Rating': '5 Stars',
'Casts': 'Tom Hanks, Robin Wright, Gary Sinise',
'Directed By': 'Robert Zemeckis',
'Genre': 'Drama',
'Comments': 'Based on the 1986 novel of the same name by Winston Groom'
},
{
'No': '2',
'Released on': 1946,
'Title': 'It’s a Wonderful Life',
'Rating': '2 Stars',
'Casts': 'James Stewart, Donna Reed, Lionel Barrymore',
'Directed By': 'Frank Capra',
'Genre': 'Drama',
'Comments': 'Colorized version'
},
{
'No': '3',
'Released on': 1988,
'Title': 'Big',
'Rating': '4 Stars',
'Casts': 'Tom Hanks, Elizabeth Perkins, Robert Loggia',
'Directed By': 'Penny Marshall',
'Genre': 'Comedy',
'Comments': 'A thirteen-year-old boy wishes to be big, and his wish comes true.'
},
{
'No': '4',
'Released on': 1954,
'Title': 'Rear Window',
'Rating': '4 Stars',
'Casts': 'James Stewart, Grace Kelly, Wendell Corey',
'Directed By': 'Alfred Hitchcock',
'Genre': 'Suspense',
'Comments': 'Truly suspenseful and masterfully crafted'
}
];<!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 } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
import { CellStyleModel, getRangeIndexes } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
import { addClass, removeClass } from '@syncfusion/ej2-base';
export default class App extends React.Component<{}, {}> {
public spreadsheet: SpreadsheetComponent;
public oncreated(args): void{
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
this.spreadsheet.cellFormat({ verticalAlign: 'middle' }, 'A1:H5');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:B5');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:D5');
// To wrap the cells from E2 to E5 range
this.spreadsheet.wrap('E2:E5');
// To unwrap the H3 cell
this.spreadsheet.wrap('H3', false);
}
render() {
return ( <div> <SpreadsheetComponent
ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.oncreated.bind(this)} showFormulaBar={false} >
<SheetsDirective>
<SheetDirective name={"Movie List"}>
<RowsDirective>
<RowDirective height={30}>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective index={7} wrap={true}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective index={7} wrap={true}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective index={7} wrap={true}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective>
<CellsDirective>
<CellDirective index={7} wrap={true}></CellDirective>
</CellsDirective>
</RowDirective>
</RowsDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100} index={1}></ColumnDirective>
<ColumnDirective width={140}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={150}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Wrap text data source
*/
export let data: Object[] = [
{
'No': '1',
'Released on': 1994,
'Title': 'Forrest Gump',
'Rating': '5 Stars',
'Casts': 'Tom Hanks, Robin Wright, Gary Sinise',
'Directed By': 'Robert Zemeckis',
'Genre': 'Drama',
'Comments': 'Based on the 1986 novel of the same name by Winston Groom'
},
{
'No': '2',
'Released on': 1946,
'Title': 'It’s a Wonderful Life',
'Rating': '2 Stars',
'Casts': 'James Stewart, Donna Reed, Lionel Barrymore',
'Directed By': 'Frank Capra',
'Genre': 'Drama',
'Comments': 'Colorized version'
},
{
'No': '3',
'Released on': 1988,
'Title': 'Big',
'Rating': '4 Stars',
'Casts': 'Tom Hanks, Elizabeth Perkins, Robert Loggia',
'Directed By': 'Penny Marshall',
'Genre': 'Comedy',
'Comments': 'A thirteen-year-old boy wishes to be big, and his wish comes true.'
},
{
'No': '4',
'Released on': 1954,
'Title': 'Rear Window',
'Rating': '4 Stars',
'Casts': 'James Stewart, Grace Kelly, Wendell Corey',
'Directed By': 'Alfred Hitchcock',
'Genre': 'Suspense',
'Comments': 'Truly suspenseful and masterfully crafted'
}
];The following features have some limitations in wrap text:
Merge cells allows users to span two or more cells in the same row or column into a single cell. When cells with multiple values are merged, top-left most cell data will be the data for the merged cell. By default, the merge cells option is enabled. Use allowMerge property to enable or disable the merge cells option in spreadsheet.
You can merge the range of cells in the following ways,
rowSpan and colSpan property in cell to merge the number of cells at initial load.merge method to merge the range of cells, once the component is loaded.The available merge options in spreadsheet are,
| Type | Action |
|---|---|
| Merge All | Combines all the cells in a range in to a single cell (default). |
| Merge Horizontally | Combines cells in a range as row-wise. |
| Merge Vertically | Combines cells in a range as column-wise. |
| UnMerge | Splits the merged cells into multiple cells. |
The following code example shows the merge cells operation in spreadsheet.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { getRangeIndexes } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.boldRight = { fontWeight: 'bold', textAlign: 'right' };
this.bold = { fontWeight: 'bold' };
}
updateCollection() {
let cell = this.spreadsheet.getActiveSheet().activeCell;
let cellIdx = getRangeIndexes(cell);
let Element = this.spreadsheet.getCell(cellIdx[0], cellIdx[1]);
if (!Element.classList.contains("customClass")) {
Element.classList.add('customClass'); // To add the custom class in active cell element
this.spreadsheet.updateUndoRedoCollection({ eventArgs: { class: 'customClass', rowIdx: cellIdx[0], colIdx: cellIdx[1], action: 'customCSS' } }); // To update the undo redo collection
}
}
oncreated() {
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:S1');
this.spreadsheet.numberFormat('h:mm AM/PM', 'C1:S1');
this.spreadsheet.cellFormat({ verticalAlign: 'middle' }, 'A1:S11');
// Merging the `K4:M4` cells using method
this.spreadsheet.merge('K4:M4');
// Merging the 5th and 6th row cells across 11th, 12th and 13th column
this.spreadsheet.merge('K5:M6', 'Vertically');
// Merging the 18th and 19th column cells across 2nd, 3rd and 4th row
this.spreadsheet.merge('N4:O6', 'Horizontally');
}
render() {
return (<div>
<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.oncreated.bind(this)} showFormulaBar={false}>
<SheetsDirective>
<SheetDirective name={"Merge Cells"}>
<RowsDirective>
<RowDirective height={35}></RowDirective>
<RowDirective height={35}>
<CellsDirective>
<CellDirective index={1} rowSpan={2}></CellDirective>
<CellDirective colSpan={2}></CellDirective>
<CellDirective index={6} colSpan={3}></CellDirective>
<CellDirective index={10} rowSpan={2} colSpan={3}></CellDirective>
<CellDirective index={13} colSpan={2}></CellDirective>
<CellDirective index={17} colSpan={2}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={35}>
<CellsDirective>
<CellDirective index={3} colSpan={3}></CellDirective>
<CellDirective index={6} colSpan={4}></CellDirective>
<CellDirective index={13} colSpan={3}></CellDirective>
<CellDirective index={17} colSpan={2}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={35}>
<CellsDirective>
<CellDirective index={2} colSpan={3}></CellDirective>
<CellDirective index={5} colSpan={2}></CellDirective>
<CellDirective index={7} colSpan={3}></CellDirective>
<CellDirective index={15} colSpan={2}></CellDirective>
<CellDirective index={17} colSpan={2}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={35}>
<CellsDirective>
<CellDirective index={2} colSpan={3}></CellDirective>
<CellDirective index={6} colSpan={4}></CellDirective>
<CellDirective index={16} colSpan={2}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={35}>
<CellsDirective>
<CellDirective index={2} colSpan={4}></CellDirective>
<CellDirective index={7} colSpan={3}></CellDirective>
<CellDirective index={15} colSpan={2}></CellDirective>
<CellDirective index={17} colSpan={2}></CellDirective>
</CellsDirective>
</RowDirective>
</RowsDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={150}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Merge cells data source
*/
export let data = [
{
'Employee ID': 10001,
'Employee Name': 'Davolio',
'9:00 AM': 'Analysis Tasks',
'9:30 AM': 'Analysis Tasks',
'10:00 AM': 'Team Meeting',
'10:30 AM': 'Testing',
'11:00 AM': 'Development',
'11:30 AM': 'Development',
'12:00 PM': 'Development',
'12:30 PM': 'Support',
'1:00 PM': 'Lunch Break',
'1:30 PM': 'Lunch Break',
'2:00 PM': 'Lunch Break',
'2:30 PM': 'Testing',
'3:00 PM': 'Testing',
'3:30 PM': 'Development',
'4:00 PM': 'Conference',
'4:30 PM': 'Team Meeting',
'5:00 PM': 'Team Meeting'
},
{
'Employee ID': 10002,
'Employee Name': 'Buchanan',
'9:00 AM': 'Task Assign',
'9:30 AM': 'Support',
'10:00 AM': 'Support',
'10:30 AM': 'Support',
'11:00 AM': 'Testing',
'11:30 AM': 'Testing',
'12:00 PM': 'Testing',
'12:30 PM': 'Testing',
'1:00 PM': 'Lunch Break',
'1:30 PM': 'Lunch Break',
'2:00 PM': 'Lunch Break',
'2:30 PM': 'Development',
'3:00 PM': 'Development',
'3:30 PM': 'Check Mail',
'4:00 PM': 'Check Mail',
'4:30 PM': 'Team Meeting',
'5:00 PM': 'Team Meeting'
},
{
'Employee ID': 10003,
'Employee Name': 'Fuller',
'9:00 AM': 'Check Mail',
'9:30 AM': 'Check Mail',
'10:00 AM': 'Check Mail',
'10:30 AM': 'Analysis Tasks',
'11:00 AM': 'Analysis Tasks',
'11:30 AM': 'Support',
'12:00 PM': 'Support',
'12:30 PM': 'Support',
'1:00 PM': 'Lunch Break',
'1:30 PM': 'Lunch Break',
'2:00 PM': 'Lunch Break',
'2:30 PM': 'Development',
'3:00 PM': 'Development',
'3:30 PM': 'Team Meeting',
'4:00 PM': 'Team Meeting',
'4:30 PM': 'Development',
'5:00 PM': 'Development'
},
{
'Employee ID': 10004,
'Employee Name': 'Leverling',
'9:00 AM': 'Testing',
'9:30 AM': 'Check Mail',
'10:00 AM': 'Check Mail',
'10:30 AM': 'Support',
'11:00 AM': 'Testing',
'11:30 AM': 'Testing',
'12:00 PM': 'Testing',
'12:30 PM': 'Testing',
'1:00 PM': 'Lunch Break',
'1:30 PM': 'Lunch Break',
'2:00 PM': 'Lunch Break',
'2:30 PM': 'Development',
'3:00 PM': 'Development',
'3:30 PM': 'Check Mail',
'4:00 PM': 'Conference',
'4:30 PM': 'Conference',
'5:00 PM': 'Team Meeting'
},
{
'Employee ID': 10005,
'Employee Name': 'Peacock',
'9:00 AM': 'Task Assign',
'9:30 AM': 'Task Assign',
'10:00 AM': 'Task Assign',
'10:30 AM': 'Task Assign',
'11:00 AM': 'Check Mail',
'11:30 AM': 'Support',
'12:00 PM': 'Support',
'12:30 PM': 'Support',
'1:00 PM': 'Lunch Break',
'1:30 PM': 'Lunch Break',
'2:00 PM': 'Lunch Break',
'2:30 PM': 'Development',
'3:00 PM': 'Development',
'3:30 PM': 'Team Meeting',
'4:00 PM': 'Team Meeting',
'4:30 PM': 'Testing',
'5:00 PM': 'Testing'
}
];<!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, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
import { CellStyleModel, getRangeIndexes } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
import { addClass, removeClass } from '@syncfusion/ej2-base';
export default class App extends React.Component<{}, {}> {
public spreadsheet: SpreadsheetComponent;
public boldRight: CellStyleModel = { fontWeight: 'bold', textAlign: 'right' };
public bold: CellStyleModel = { fontWeight: 'bold' };
public updateCollection(): void {
let cell = this.spreadsheet.getActiveSheet().activeCell;
let cellIdx = getRangeIndexes(cell);
let Element= this.spreadsheet.getCell(cellIdx[0], cellIdx[1]);
if (!Element.classList.contains("customClass")) {
Element.classList.add('customClass'); // To add the custom class in active cell element
this.spreadsheet.updateUndoRedoCollection({ eventArgs: { class: 'customClass', rowIdx: cellIdx[0], colIdx: cellIdx[1], action: 'customCSS' } }); // To update the undo redo collection
}
}
public oncreated(): void{
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:S1');
this.spreadsheet.numberFormat('h:mm AM/PM', 'C1:S1');
this.spreadsheet.cellFormat({ verticalAlign: 'middle' }, 'A1:S11');
// Merging the `K4:M4` cells using method
this.spreadsheet.merge('K4:M4');
// Merging the 5th and 6th row cells across 11th, 12th and 13th column
this.spreadsheet.merge('K5:M6', 'Vertically');
// Merging the 18th and 19th column cells across 2nd, 3rd and 4th row
this.spreadsheet.merge('N4:O6', 'Horizontally');
}
render() {
return ( <div>
<SpreadsheetComponent
ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.oncreated.bind(this)} showFormulaBar={false}>
<SheetsDirective>
<SheetDirective name={"Merge Cells"}>
<RowsDirective>
<RowDirective height={35}></RowDirective>
<RowDirective height={35}>
<CellsDirective>
<CellDirective index={1} rowSpan={2}></CellDirective>
<CellDirective colSpan={2}></CellDirective>
<CellDirective index={6} colSpan={3}></CellDirective>
<CellDirective index={10} rowSpan={2} colSpan={3}></CellDirective>
<CellDirective index={13} colSpan={2}></CellDirective>
<CellDirective index={17} colSpan={2}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={35}>
<CellsDirective>
<CellDirective index={3} colSpan={3}></CellDirective>
<CellDirective index={6} colSpan={4}></CellDirective>
<CellDirective index={13} colSpan={3}></CellDirective>
<CellDirective index={17} colSpan={2}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={35}>
<CellsDirective>
<CellDirective index={2} colSpan={3}></CellDirective>
<CellDirective index={5} colSpan={2}></CellDirective>
<CellDirective index={7} colSpan={3}></CellDirective>
<CellDirective index={15} colSpan={2}></CellDirective>
<CellDirective index={17} colSpan={2}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={35}>
<CellsDirective>
<CellDirective index={2} colSpan={3}></CellDirective>
<CellDirective index={6} colSpan={4}></CellDirective>
<CellDirective index={16} colSpan={2}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective height={35}>
<CellsDirective>
<CellDirective index={2} colSpan={4}></CellDirective>
<CellDirective index={7} colSpan={3}></CellDirective>
<CellDirective index={15} colSpan={2}></CellDirective>
<CellDirective index={17} colSpan={2}></CellDirective>
</CellsDirective>
</RowDirective>
</RowsDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={90}></ColumnDirective>
<ColumnDirective width={150}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Merge cells data source
*/
export let data: Object[] = [
{
'Employee ID': 10001,
'Employee Name': 'Davolio',
'9:00 AM': 'Analysis Tasks',
'9:30 AM': 'Analysis Tasks',
'10:00 AM': 'Team Meeting',
'10:30 AM': 'Testing',
'11:00 AM': 'Development',
'11:30 AM': 'Development',
'12:00 PM': 'Development',
'12:30 PM': 'Support',
'1:00 PM': 'Lunch Break',
'1:30 PM': 'Lunch Break',
'2:00 PM': 'Lunch Break',
'2:30 PM': 'Testing',
'3:00 PM': 'Testing',
'3:30 PM': 'Development',
'4:00 PM': 'Conference',
'4:30 PM': 'Team Meeting',
'5:00 PM': 'Team Meeting'
},
{
'Employee ID': 10002,
'Employee Name': 'Buchanan',
'9:00 AM': 'Task Assign',
'9:30 AM': 'Support',
'10:00 AM': 'Support',
'10:30 AM': 'Support',
'11:00 AM': 'Testing',
'11:30 AM': 'Testing',
'12:00 PM': 'Testing',
'12:30 PM': 'Testing',
'1:00 PM': 'Lunch Break',
'1:30 PM': 'Lunch Break',
'2:00 PM': 'Lunch Break',
'2:30 PM': 'Development',
'3:00 PM': 'Development',
'3:30 PM': 'Check Mail',
'4:00 PM': 'Check Mail',
'4:30 PM': 'Team Meeting',
'5:00 PM': 'Team Meeting'
},
{
'Employee ID': 10003,
'Employee Name': 'Fuller',
'9:00 AM': 'Check Mail',
'9:30 AM': 'Check Mail',
'10:00 AM': 'Check Mail',
'10:30 AM': 'Analysis Tasks',
'11:00 AM': 'Analysis Tasks',
'11:30 AM': 'Support',
'12:00 PM': 'Support',
'12:30 PM': 'Support',
'1:00 PM': 'Lunch Break',
'1:30 PM': 'Lunch Break',
'2:00 PM': 'Lunch Break',
'2:30 PM': 'Development',
'3:00 PM': 'Development',
'3:30 PM': 'Team Meeting',
'4:00 PM': 'Team Meeting',
'4:30 PM': 'Development',
'5:00 PM': 'Development'
},
{
'Employee ID': 10004,
'Employee Name': 'Leverling',
'9:00 AM': 'Testing',
'9:30 AM': 'Check Mail',
'10:00 AM': 'Check Mail',
'10:30 AM': 'Support',
'11:00 AM': 'Testing',
'11:30 AM': 'Testing',
'12:00 PM': 'Testing',
'12:30 PM': 'Testing',
'1:00 PM': 'Lunch Break',
'1:30 PM': 'Lunch Break',
'2:00 PM': 'Lunch Break',
'2:30 PM': 'Development',
'3:00 PM': 'Development',
'3:30 PM': 'Check Mail',
'4:00 PM': 'Conference',
'4:30 PM': 'Conference',
'5:00 PM': 'Team Meeting'
},
{
'Employee ID': 10005,
'Employee Name': 'Peacock',
'9:00 AM': 'Task Assign',
'9:30 AM': 'Task Assign',
'10:00 AM': 'Task Assign',
'10:30 AM': 'Task Assign',
'11:00 AM': 'Check Mail',
'11:30 AM': 'Support',
'12:00 PM': 'Support',
'12:30 PM': 'Support',
'1:00 PM': 'Lunch Break',
'1:30 PM': 'Lunch Break',
'2:00 PM': 'Lunch Break',
'2:30 PM': 'Development',
'3:00 PM': 'Development',
'3:30 PM': 'Team Meeting',
'4:00 PM': 'Team Meeting',
'4:30 PM': 'Testing',
'5:00 PM': 'Testing'
}
];The following features have some limitations in Merge:
Data Validation is used to restrict the user from entering the invalid data. You can use the allowDataValidation property to enable or disable data validation.
- The default value for
allowDataValidationproperty istrue.
You can apply data validation to restrict the type of data or the values that users enter into a cell.
You can apply data validation by using one of the following ways,
addDataValidation() method programmatically.Clear validation feature is used to remove data validations from the specified ranges or the whole worksheet.
You can clear data validation rule by one of the following ways,
removeDataValidation() method programmatically.Highlight invalid data feature is used to highlight the previously entered invalid values.
You can highlight an invalid data by using one of the following ways,
addInvalidHighlight() method programmatically.Clear highlight feature is used to remove the highlight from invalid cells.
You can clear the highlighted invalid data by using the following ways,
removeInvalidHighlight() method programmatically.import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RowsDirective, RowDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.boldCenter = { fontWeight: 'bold', textAlign: 'center' };
}
oncreated() {
//Add Data validation to range.
this.spreadsheet.addDataValidation({ type: 'TextLength', operator: 'LessThanOrEqualTo', value1: '4' }, 'A2:A5');
this.spreadsheet.addDataValidation({ type: 'WholeNumber', operator: 'NotEqualTo', value1: '1' }, 'B2:B5');
this.spreadsheet.addDataValidation({ type: 'Date', operator: 'NotEqualTo', value1: '04/11/2019' }, 'F2:F5');
this.spreadsheet.addDataValidation({ type: 'Time', operator: 'Between', value1: '10:00:00 AM', value2: '11:00:00 AM' }, 'G2:G5');
this.spreadsheet.addDataValidation({ type: 'Decimal', operator: 'LessThan', value1: '100000.00' }, 'H2:H5');
//Highlight Invalid Data.
this.spreadsheet.addInvalidHighlight('A1:H5');
}
render() {
return (<div>
<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.oncreated.bind(this)} showFormulaBar={false}>
<SheetsDirective>
<SheetDirective name={'PriceDetails'}>
<RowsDirective>
<RowDirective index={0}>
<CellsDirective>
<CellDirective index={0} value={'Seller Name'} style={this.boldCenter}></CellDirective>
<CellDirective index={1} value={'Customer Id'} style={this.boldCenter}></CellDirective>
<CellDirective index={2} value={'Customer Name'} style={this.boldCenter}></CellDirective>
<CellDirective index={3} value={'Product Name'} style={this.boldCenter}></CellDirective>
<CellDirective index={4} value={'Product Price'} style={this.boldCenter}></CellDirective>
<CellDirective index={5} value={'Sales Date'} style={this.boldCenter}></CellDirective>
<CellDirective index={6} value={'Billing Time'} style={this.boldCenter}></CellDirective>
<CellDirective index={7} value={'Total Price'} style={this.boldCenter}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective index={1}>
<CellsDirective>
<CellDirective index={0} value={'John'}></CellDirective>
<CellDirective index={1} value={'1'} validation={{ type: 'WholeNumber', operator: 'NotEqualTo', value1: '1' }}></CellDirective>
<CellDirective index={2} value={'Nash'}></CellDirective>
<CellDirective index={3} value={'Digger'} validation={{ type: 'List', value1: 'Digger, Digger, Cherrypicker' }}></CellDirective>
<CellDirective index={4} value={'50000'} validation={{ type: 'List', value1: '50000,50000,45000' }}></CellDirective>
<CellDirective index={5} value={'04/11/2019'}></CellDirective>
<CellDirective index={6} value={'11:34:32 AM'}></CellDirective>
<CellDirective index={7} value={'1,45,000.00'}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective index={2}>
<CellsDirective>
<CellDirective index={0} value={'Mike'}></CellDirective>
<CellDirective index={1} value={'2'} validation={{ type: 'WholeNumber', operator: 'NotEqualTo', value1: '1' }}></CellDirective>
<CellDirective index={2} value={'Jim'}></CellDirective>
<CellDirective index={3} value={'Cherrypicker'} validation={{ type: 'List', value1: 'Cherrypicker, JCB, Wheelbarrow' }}></CellDirective>
<CellDirective index={4} value={'45000'} validation={{ type: 'List', value1: '45000,90000,40' }}></CellDirective>
<CellDirective index={5} value={'04/11/2019'}></CellDirective>
<CellDirective index={6} value={'11:34:32 AM'}></CellDirective>
<CellDirective index={7} value={'1,45,000.00'}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective index={3}>
<CellsDirective>
<CellDirective index={0} value={'shane'}></CellDirective>
<CellDirective index={1} value={'3'} validation={{ type: 'WholeNumber', operator: 'NotEqualTo', value1: '1' }}></CellDirective>
<CellDirective index={2} value={'Sean'}></CellDirective>
<CellDirective index={3} value={'Kango'} validation={{ type: 'List', value1: 'Kango, Ropes' }}></CellDirective>
<CellDirective index={4} value={'450'} validation={{ type: 'List', value1: '450, 95' }}></CellDirective>
<CellDirective index={5} value={'06/25/2019'}></CellDirective>
<CellDirective index={6} value={'01:30:11 PM'}></CellDirective>
<CellDirective index={7} value={'545.00'}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective index={4}>
<CellsDirective>
<CellDirective index={0} value={'John'}></CellDirective>
<CellDirective index={1} value={'1'} validation={{ type: 'WholeNumber', operator: 'NotEqualTo', value1: '1' }}></CellDirective>
<CellDirective index={2} value={'Nash'}></CellDirective>
<CellDirective index={3} value={'JCB'} validation={{ type: 'List', value1: 'JCB, Ropes, scaffolding' }}></CellDirective>
<CellDirective index={4} value={'90000'} validation={{ type: 'List', value1: '90000, 95, 10000' }}></CellDirective>
<CellDirective index={5} value={'09/22/2019'}></CellDirective>
<CellDirective index={6} value={'12:30:02 PM'}></CellDirective>
<CellDirective index={7} value={'1,00,095.00'}></CellDirective>
</CellsDirective>
</RowDirective>
</RowsDirective>
<ColumnsDirective>
<ColumnDirective width={88}></ColumnDirective>
<ColumnDirective width={88}></ColumnDirective>
<ColumnDirective width={106}></ColumnDirective>
<ColumnDirective width={98}></ColumnDirective>
<ColumnDirective width={88}></ColumnDirective>
<ColumnDirective width={86}></ColumnDirective>
<ColumnDirective width={107}></ColumnDirective>
<ColumnDirective width={81}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
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, RowsDirective, RowDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
import { CellStyleModel, getRangeIndexes } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
import { addClass, removeClass } from '@syncfusion/ej2-base';
export default class App extends React.Component<{}, {}> {
public spreadsheet: SpreadsheetComponent;
public boldCenter: CellStyleModel = { fontWeight: 'bold', textAlign: 'center' };
public oncreated(): void {
//Add Data validation to range.
this.spreadsheet.addDataValidation({ type: 'TextLength' , operator: 'LessThanOrEqualTo' , value1: '4' }, 'A2:A5');
this.spreadsheet.addDataValidation({ type: 'WholeNumber', operator: 'NotEqualTo', value1: '1' }, 'B2:B5');
this.spreadsheet.addDataValidation({ type: 'Date', operator: 'NotEqualTo', value1: '04/11/2019'}, 'F2:F5');
this.spreadsheet.addDataValidation({ type: 'Time', operator: 'Between', value1: '10:00:00 AM', value2: '11:00:00 AM' }, 'G2:G5');
this.spreadsheet.addDataValidation({ type: 'Decimal', operator: 'LessThan', value1: '100000.00'}, 'H2:H5');
//Highlight Invalid Data.
this.spreadsheet.addInvalidHighlight('A1:H5');
}
render() {
return ( <div>
<SpreadsheetComponent
ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.oncreated.bind(this)} showFormulaBar={false}>
<SheetsDirective>
<SheetDirective name={'PriceDetails'}>
<RowsDirective>
<RowDirective index={0}>
<CellsDirective>
<CellDirective index={0} value={'Seller Name'} style={this.boldCenter}></CellDirective>
<CellDirective index={1} value={'Customer Id'} style={this.boldCenter}></CellDirective>
<CellDirective index={2} value={'Customer Name'} style={this.boldCenter}></CellDirective>
<CellDirective index={3} value={'Product Name'} style={this.boldCenter}></CellDirective>
<CellDirective index={4} value={'Product Price'} style={this.boldCenter}></CellDirective>
<CellDirective index={5} value={'Sales Date'} style={this.boldCenter}></CellDirective>
<CellDirective index={6} value={'Billing Time'} style={this.boldCenter}></CellDirective>
<CellDirective index={7} value={'Total Price'} style={this.boldCenter}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective index={1}>
<CellsDirective>
<CellDirective index={0} value={'John'}></CellDirective>
<CellDirective index={1} value={'1'} validation= {{ type: 'WholeNumber', operator: 'NotEqualTo', value1: '1'}}></CellDirective>
<CellDirective index={2} value={'Nash'}></CellDirective>
<CellDirective index={3} value={'Digger'} validation= {{ type: 'List', value1: 'Digger, Digger, Cherrypicker' }}></CellDirective>
<CellDirective index={4} value={'50000'} validation= {{ type: 'List', value1: '50000,50000,45000' }}></CellDirective>
<CellDirective index={5} value={'04/11/2019'}></CellDirective>
<CellDirective index={6} value={'11:34:32 AM'}></CellDirective>
<CellDirective index={7} value={'1,45,000.00'}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective index={2}>
<CellsDirective>
<CellDirective index={0} value={'Mike'}></CellDirective>
<CellDirective index={1} value={'2'} validation= {{ type: 'WholeNumber', operator: 'NotEqualTo', value1: '1'}}></CellDirective>
<CellDirective index={2} value={'Jim'}></CellDirective>
<CellDirective index={3} value={'Cherrypicker'} validation= {{ type: 'List', value1: 'Cherrypicker, JCB, Wheelbarrow' }}></CellDirective>
<CellDirective index={4} value={'45000'} validation= {{ type: 'List', value1: '45000,90000,40' }}></CellDirective>
<CellDirective index={5} value={'04/11/2019'}></CellDirective>
<CellDirective index={6} value={'11:34:32 AM'}></CellDirective>
<CellDirective index={7} value={'1,45,000.00'}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective index={3}>
<CellsDirective>
<CellDirective index={0} value={'shane'}></CellDirective>
<CellDirective index={1} value={'3'} validation= {{ type: 'WholeNumber', operator: 'NotEqualTo', value1: '1'}}></CellDirective>
<CellDirective index={2} value={'Sean'}></CellDirective>
<CellDirective index={3} value={'Kango'} validation= {{ type: 'List', value1: 'Kango, Ropes' }}></CellDirective>
<CellDirective index={4} value={'450'} validation= {{ type: 'List', value1: '450, 95' }}></CellDirective>
<CellDirective index={5} value={'06/25/2019'}></CellDirective>
<CellDirective index={6} value={'01:30:11 PM'}></CellDirective>
<CellDirective index={7} value={'545.00'}></CellDirective>
</CellsDirective>
</RowDirective>
<RowDirective index={4}>
<CellsDirective>
<CellDirective index={0} value={'John'}></CellDirective>
<CellDirective index={1} value={'1'} validation= {{ type: 'WholeNumber', operator: 'NotEqualTo', value1: '1'}}></CellDirective>
<CellDirective index={2} value={'Nash'}></CellDirective>
<CellDirective index={3} value={'JCB'} validation= {{ type: 'List', value1: 'JCB, Ropes, scaffolding' }}></CellDirective>
<CellDirective index={4} value={'90000'} validation= {{ type: 'List', value1: '90000, 95, 10000' }}></CellDirective>
<CellDirective index={5} value={'09/22/2019'}></CellDirective>
<CellDirective index={6} value={'12:30:02 PM'}></CellDirective>
<CellDirective index={7} value={'1,00,095.00'}></CellDirective>
</CellsDirective>
</RowDirective>
</RowsDirective>
<ColumnsDirective>
<ColumnDirective width={88}></ColumnDirective>
<ColumnDirective width={88}></ColumnDirective>
<ColumnDirective width={106}></ColumnDirective>
<ColumnDirective width={98}></ColumnDirective>
<ColumnDirective width={88}></ColumnDirective>
<ColumnDirective width={86}></ColumnDirective>
<ColumnDirective width={107}></ColumnDirective>
<ColumnDirective width={81}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
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"
}
]The following features have some limitations in Data Validation:
Auto Fill is used to fill the cells with data based on adjacent cells. It also follows a pattern from adjacent cells if available. There is no need to enter the repeated data manually. You can use allowAutoFill property to enable/disable the auto fill support. You can also use showFillOptions property to enable/disable the fill option and fillType property to change the default auto fill option which is available in autoFillSettings.
You can do this by one of the following ways,
The available parameters in autoFill() method are,
| Parameter | Type | Description |
|---|---|---|
| fillRange | string |
Specifies the fill range. |
| dataRange | string |
Specifies the data range. |
| direction | AutoFillDirection |
Specifies the direction(“Up”,“Right”,“Down”,“Left”)to be filled. |
| fillType | AutoFillType |
Specifies the fill type(“CopyCells”,“FillSeries”,“FillFormattingOnly”,“FillWithoutFormatting”) for autofill action. |
In Auto Fill we have following options,
- The default auto fill option is “FillSeries” which can be referred from
fillTypeproperty.
To copy the selected cell content to the adjacent cells. You can do this by one of the following ways,
autoFill method to fill the adjacent cells.To fill the series of numbers, characters, or dates based on selected cell content to the adjacent cells with their formats.
You can do this by one of the following ways,
autoFill method to fill the adjacent cells.To fill the cell style and number formatting based on the selected cell content to the adjacent cells without their content.
You can do this by one of the following ways,
autoFill method to fill the adjacent cells.To fill series of numbers, characters, or dates based on the selected cells to the adjacent cells without their formats.
You can do this by one of the following ways,
autoFill method to fill the adjacent cells.In the following sample, you can enable/disable the fill option on the button click event by using the showFillOptions property in autoFillSettings.
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 {
btnClick() {
var showFillOptions = this.spreadsheet.autoFillSettings.showFillOptions;
this.spreadsheet.autoFillSettings.showFillOptions = !showFillOptions; //To change whether fill options need to be shown or not.
}
oncreated(args) {
this.spreadsheet.cellFormat({ backgroundColor: '#357cd2', color: '#fff', fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
this.spreadsheet.autoFill('D4:D11', 'D2:D3', 'Down', 'CopyCells');
this.spreadsheet.autoFill('E4:E11', 'E2:E3', 'Down', 'FillSeries');
this.spreadsheet.autoFill('B4:B11', 'B2:B3', 'Down', 'FillFormattingOnly');
this.spreadsheet.autoFill('C4:C11', 'C2:C3', 'Down', 'FillWithoutFormatting');
}
render() {
return (<div><div>
<button id="changeDataBtn" className='e-btn' onClick={this.btnClick.bind(this)}>Change showFillOptions</button>
<SpreadsheetComponent id='spreadsheet' ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.oncreated.bind(this)} autoFillSettings={this.autoFillSettings}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div></div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));export let data = [
{ '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 },
];<!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%;
}
.e-sheet-panel {
height: 380px;
}
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 { data } from './datasource';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component<{}, {}> {
spreadsheet: SpreadsheetComponent;
autoFillSettings: { fillType: 'FillSeries', showFillOptions: true };
btnClick() {
var showFillOptions = this.spreadsheet.autoFillSettings.showFillOptions;
this.spreadsheet.autoFillSettings.showFillOptions = !showFillOptions; //To change whether fill options need to be shown or not.
}
public oncreated(args): void{
this.spreadsheet.cellFormat({ backgroundColor: '#357cd2', color: '#fff', fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
this.spreadsheet.autoFill('D4:D11','D2:D3', 'Down','CopyCells');
this.spreadsheet.autoFill('E4:E11','E2:E3','Down','FillSeries');
this.spreadsheet.autoFill('B4:B11','B2:B3','Down','FillFormattingOnly');
this.spreadsheet.autoFill('C4:C11','C2:C3','Down','FillWithoutFormatting');
}
render() {
return ( <div><div>
<button id="changeDataBtn" className='e-btn' onClick={this.btnClick.bind(this)}>Change showFillOptions</button>
<SpreadsheetComponent id ='spreadsheet' ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.oncreated.bind(this)} autoFillSettings={this.autoFillSettings}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div></div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));export let data: 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 },
];The following features have some limitations in Autofill:
Clear feature helps you to clear the cell contents (formulas and data), formats (including number formats, conditional formats, and borders) in a spreadsheet. When you apply clear all, both the contents and the formats will be cleared simultaneously.
You can apply clear feature by using one of the following ways,
clear() method to clear the values.Clear has the following types in the spreadsheet,
| Options | Uses |
|---|---|
Clear All |
Used to clear all contents, formats, and hyperlinks. |
Clear Formats |
Used to clear the formats (including number formats, conditional formats, and borders) in a cell. |
Clear Contents |
Used to clear the contents (formulas and data) in a cell. |
Clear Hyperlinks |
Used to clear the hyperlink in a cell. |
Clear the cell contents and formats in the Spreadsheet document by using the clear method. The clear method has type and range as parameters. The following code example shows how to clear the cell contents and formats in the button click event.
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 { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import { getComponent } from '@syncfusion/ej2-base';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.items = [
{
text: "Clear All"
},
{
text: "Clear Formats"
},
{
text: "Clear Contents"
},
{
text: "Clear Hyperlinks"
}
];
}
oncreated(args) {
this.spreadsheet.cellFormat({ fontWeight: 'bold', fontSize: '12pt' }, 'A1:E1');
this.spreadsheet.cellFormat({ color: '#10c469' }, 'B1:B10');
}
itemSelect(args) {
let spreadsheet = getComponent(document.getElementById("spreadsheet"), "spreadsheet");
if (args.item.text === 'Clear All')
spreadsheet.clear({ type: 'Clear All', range: 'D1:D10' }); // Clear the content, formats and hyperlinks applied in the provided range.
if (args.item.text === 'Clear Formats')
spreadsheet.clear({ type: 'Clear Formats', range: 'B1:B10' }); // Clear the formats applied in the provided range
if (args.item.text === 'Clear Contents')
spreadsheet.clear({ type: 'Clear Contents', range: 'A1:A10' }); // Clear the content in the provided range
if (args.item.text === 'Clear Hyperlinks')
spreadsheet.clear({ type: 'Clear Hyperlinks', range: 'F2:F6' }); // Clear the hyperlinks applied in the provided range
}
render() {
return (<div><DropDownButtonComponent id="element" items={this.items} select={this.itemSelect}> Clear </DropDownButtonComponent>
<SpreadsheetComponent id='spreadsheet' ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.oncreated.bind(this)}>
<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> </div>);
}
}
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',
Website: 'https://www.amazon.com/'
},
{
OrderID: 10249,
CustomerID: 'TOMSP',
EmployeeID: 6,
ShipName: 'Toms Spezialitäten',
ShipCity: 'Münster',
Website: 'https://www.overstock.com/'
},
{
OrderID: 10250,
CustomerID: 'HANAR',
EmployeeID: 4,
ShipName: 'Hanari Carnes',
ShipCity: 'Rio de Janeiro',
Website: 'https://www.aliexpress.com/'
},
{
OrderID: 10251,
CustomerID: 'VICTE',
EmployeeID: 3,
ShipName: 'Victuailles en stock',
ShipCity: 'Lyon',
Website: 'http://www.alibaba.com/'
},
{
OrderID: 10252,
CustomerID: 'SUPRD',
EmployeeID: 4,
ShipName: 'Suprêmes délices',
ShipCity: 'Charleroi',
Website: 'https://taobao.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 { data } from './datasource';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import { getComponent } from '@syncfusion/ej2-base';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component<{}, {}> {
spreadsheet: SpreadsheetComponent;
public items: ItemModel[] = [
{
text: "Clear All"
},
{
text: "Clear Formats"
},
{
text: "Clear Contents"
},
{
text: "Clear Hyperlinks"
}
];
public oncreated(args): void{
this.spreadsheet.cellFormat({ fontWeight: 'bold', fontSize: '12pt'}, 'A1:E1');
this.spreadsheet.cellFormat({ color: '#10c469' }, 'B1:B10');
}
public itemSelect(args): void {
let spreadsheet = getComponent(document.getElementById("spreadsheet"), "spreadsheet");
if (args.item.text === 'Clear All')
spreadsheet.clear({ type: 'Clear All', range: 'D1:D10' }); // Clear the content, formats and hyperlinks applied in the provided range.
if (args.item.text === 'Clear Formats')
spreadsheet.clear({ type: 'Clear Formats', range: 'B1:B10' }); // Clear the formats applied in the provided range
if (args.item.text === 'Clear Contents')
spreadsheet.clear({ type: 'Clear Contents', range: 'A1:A10' }); // Clear the content in the provided range
if (args.item.text === 'Clear Hyperlinks')
spreadsheet.clear({ type: 'Clear Hyperlinks', range: 'F2:F6' }); // Clear the hyperlinks applied in the provided range
}
render() {
return ( <div><DropDownButtonComponent id="element" items={this.items} select={this.itemSelect}> Clear </DropDownButtonComponent>
<SpreadsheetComponent id ='spreadsheet' ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.oncreated.bind(this)}>
<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> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Default data source
*/
export