You can edit the contents of a cell directly in the cell or by typing in the formula bar. By default, the editing feature is enabled in the spreadsheet. Use the allowEditing
property to enable or disable the editing feature.
To get start quickly with Editing, you can check on this video:
You can start editing by one of the following ways,
F2
key to edit the active cell.BACKSPACE
or SPACE
key to clear the cell content and start the edit mode.startEdit
method.If the cell is in editable state, you can save the edited cell by one of the following ways,
Enter
or Tab
keys to save the edited cell content.endEdit
method.To cancel the editing without saving the changes, you can use one of the following ways,
ESCAPE
key, this will remove the editable state and update the unchanged cell content.closeEdit
method.The following sample shows how to prevent the editing and cell save. Here E
column prevent the editing by using cancel argument as true in cellEdit
event. In D
column, prevent saving the edited changes by using cancel argument as true in beforeCellSave
and use closeEdit
method 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 {
constructor() {
super(...arguments);
this.styles = { fontWeight: 'bold' };
}
oncreated() {
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:E1');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:A10');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'C2:C10');
this.spreadsheet.numberFormat('$#,##0.00', 'D2:D10');
this.spreadsheet.numberFormat('$#,##0.00', 'E2:E11');
}
;
// Triggers before going to the editing mode.
oncellEdit(args) {
// Preventing the editing in 5th(Amount) column.
if (args.address.includes('E')) {
args.cancel = true;
}
}
;
// Trigger before saving the edited cell content.
onbeforeCellSave(args) {
// Prevent saving the edited changes in 4th(Rate) column.
if (args.address.includes('D')) {
args.cancel = true;
// Manually removes the editable state without saving the changes. Use `endEdit` method if you want to save the changes.
this.spreadsheet.closeEdit();
}
}
render() {
return (<div> <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.oncreated.bind(this)} showSheetTabs={false} cellEdit={this.oncellEdit.bind(this)} beforeCellSave={this.onbeforeCellSave.bind(this)}>
<SheetsDirective>
<SheetDirective selectedRange={"C7"}>
<RowsDirective>
<RowDirective index={10}>
<CellsDirective>
<CellDirective index={3} value={'Total Amount'} style={this.styles}></CellDirective>
<CellDirective formula={'=SUM(E2:E10'}>
</CellDirective>
</CellsDirective>
</RowDirective>
</RowsDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={120} index={1}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
/**
* Editing data source
*/
export let data = [
{
'Item Code': 'I231',
'Item Name': 'Chinese Combo Noodle',
'Quantity': 2,
'Rate': 125,
'Amount': '=PRODUCT(C2,D2)'
},
{
'Item Code': 'I245',
'Item Name': 'Chinese Combo Rice',
'Quantity': 3,
'Rate': 125,
'Amount': '=PRODUCT(C3,D3)'
},
{
'Item Code': 'I237',
'Item Name': 'Amritsari Chola',
'Quantity': 2,
'Rate': 225,
'Amount': '=PRODUCT(C4,D4)'
},
{
'Item Code': 'I291',
'Item Name': 'Asian Mixed Entree Platt',
'Quantity': 3,
'Rate': 165,
'Amount': '=PRODUCT(C5,D5)'
},
{
'Item Code': 'I268',
'Item Name': 'Chinese Combo Chicken',
'Quantity': 3,
'Rate': 125,
'Amount': '=PRODUCT(C6,D6)'
},
{
'Item Code': 'I251',
'Item Name': 'Chivas Regal',
'Quantity': 1,
'Rate': 325,
'Amount': '=PRODUCT(C7,D7)'
},
{
'Item Code': 'I256',
'Item Name': 'Chicken Drumsticks',
'Quantity': 2,
'Rate': 180,
'Amount': '=PRODUCT(C8,D8)'
},
{
'Item Code': 'I232',
'Item Name': 'Manchow Soup',
'Quantity': 2,
'Rate': 160,
'Amount': '=PRODUCT(C9,D9)'
},
{
'Item Code': 'I290',
'Item Name': 'Schezuan Chicken',
'Quantity': 3,
'Rate': 180,
'Amount': '=PRODUCT(C10,D10)'
}
];
<!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.1.58/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';
export default class App extends React.Component<{}, {}> {
public spreadsheet: SpreadsheetComponent;
public styles: CellStyleModel = {fontWeight: 'bold'};
public oncreated(): void{
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:E1');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:A10');
this.spreadsheet.cellFormat({ textAlign: 'center' }, 'C2:C10');
this.spreadsheet.numberFormat('$#,##0.00', 'D2:D10');
this.spreadsheet.numberFormat('$#,##0.00', 'E2:E11');
};
// Triggers before going to the editing mode.
public oncellEdit(args: CellEditEventArgs): void{
// Preventing the editing in 5th(Amount) column.
if (args.address.includes('E')) { args.cancel = true; }
};
// Trigger before saving the edited cell content.
public onbeforeCellSave(args: CellEditEventArgs): void{
// Prevent saving the edited changes in 4th(Rate) column.
if (args.address.includes('D')) {
args.cancel = true;
// Manually removes the editable state without saving the changes. Use `endEdit` method if you want to save the changes.
this.spreadsheet.closeEdit();
}
}
render() {
return ( <div> <SpreadsheetComponent
ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.oncreated.bind(this)} showSheetTabs={false} cellEdit={this.oncellEdit.bind(this)} beforeCellSave={this.onbeforeCellSave.bind(this)} >
<SheetsDirective>
<SheetDirective selectedRange={"C7"}>
<RowsDirective>
<RowDirective index={10}>
<CellsDirective>
<CellDirective index={3} value={'Total Amount'} style={this.styles}></CellDirective>
<CellDirective formula={'=SUM(E2:E10'}>
</CellDirective>
</CellsDirective>
</RowDirective>
</RowsDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={120} index={1}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
/**
* Editing data source
*/
export let data: Object[] = [
{
'Item Code': 'I231',
'Item Name': 'Chinese Combo Noodle',
'Quantity': 2,
'Rate': 125,
'Amount': '=PRODUCT(C2,D2)'
},
{
'Item Code': 'I245',
'Item Name': 'Chinese Combo Rice',
'Quantity': 3,
'Rate': 125,
'Amount': '=PRODUCT(C3,D3)'
},
{
'Item Code': 'I237',
'Item Name': 'Amritsari Chola',
'Quantity': 2,
'Rate': 225,
'Amount': '=PRODUCT(C4,D4)'
},
{
'Item Code': 'I291',
'Item Name': 'Asian Mixed Entree Platt',
'Quantity': 3,
'Rate': 165,
'Amount': '=PRODUCT(C5,D5)'
},
{
'Item Code': 'I268',
'Item Name': 'Chinese Combo Chicken',
'Quantity': 3,
'Rate': 125,
'Amount': '=PRODUCT(C6,D6)'
},
{
'Item Code': 'I251',
'Item Name': 'Chivas Regal',
'Quantity': 1,
'Rate': 325,
'Amount': '=PRODUCT(C7,D7)'
},
{
'Item Code': 'I256',
'Item Name': 'Chicken Drumsticks',
'Quantity': 2,
'Rate': 180,
'Amount': '=PRODUCT(C8,D8)'
},
{
'Item Code': 'I232',
'Item Name': 'Manchow Soup',
'Quantity': 2,
'Rate': 160,
'Amount': '=PRODUCT(C9,D9)'
},
{
'Item Code': 'I290',
'Item Name': 'Schezuan Chicken',
'Quantity': 3,
'Rate': 180,
'Amount': '=PRODUCT(C10,D10)'
}
];
You can refer to our React Spreadsheet feature tour page for its groundbreaking feature representations. You can also explore our React Spreadsheet example to knows how to present and manipulate data.