Find and Replace helps you to search for target text and replace the founded text with alternative text within the sheet or workbook. You can use the allowFindAndReplace
property to enable or disable Find and Replace functionality.
- The default value for
allowFindAndReplace
property istrue
.
Find is used to select the matched contents of a cell within sheet or workbook. It is extremely useful when working with large sets of data source.
User Interface:
Find can be done by any of the following ways:
Ctrl + F
key to open the Find dialog.
Search within
: To search the target in a sheet (default) or in an entire workbook.Search by
: It enhance the search, either By Rows (default), or By Columns.Match case
: To find the matched value with case sensitive.Match exact cell contents
: To find the exact matched cell value with entire match cases.
find()
method to perform find operation.Replace is used to change the find contents of a cell within sheet or workbook. Replace All is used to change all the matched contents of a cell within sheet or workbook.
User Interface:
Replace can be done by any of the following ways:
Ctrl + H
key to open the Find and Replace dialog.replace()
method to perform replace operation by passing the argument args.replaceby
as replace
.replace()
method to perform replace all operation by passing the argument args.replaceby
as replaceall
.Go to is used to navigate to a specific cell address in the sheet or workbook.
User Interface:
Ctrl + G
key to open the Go To dialog.goTo()
method to perform Go To operation.In the following sample, searching can be done by following ways:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { budgetData, defaultData } from './datasource';
export default class App extends React.Component {
onDataBound() {
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:D1');
this.spreadsheet.cellFormat({ fontWeight: 'bold' }, 'A11:D11');
}
render() {
return (<SpreadsheetComponent allowFindAndReplace={false} ref={(ssObj) => { this.spreadsheet = ssObj; }} dataBound={this.onDataBound.bind(this)}>
<SheetsDirective>
<SheetDirective name='Price Details'>
<RangesDirective>
<RangeDirective dataSource={defaultData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={92}></ColumnDirective>
<ColumnDirective width={96}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
<SheetDirective name='Budget'>
<RangesDirective>
<RangeDirective dataSource={budgetData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={92}></ColumnDirective>
<ColumnDirective width={96}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
/**
* Default data source
*/
export let defaultData = [
{ 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
{ 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
{ 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
{ 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
{ 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
{ 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
{ 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
{ 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
{ 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
];
export let budgetData = [
{
"Expense Type": "Housing",
"Projected Cost": 7000,
"Actual Cost": 7500,
"Difference": -500,
},
{
"Expense Type": "Transportation",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},
{
"Expense Type": "Insurance",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},
{
"Expense Type": "Food",
"Projected Cost": 2000,
"Actual Cost": 1800,
"Difference": 200,
},
{
"Expense Type": "Pets",
"Projected Cost": 300,
"Actual Cost": 200,
"Difference": 100,
},
{
"Expense Type": "Personel Care",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
}, {
"Expense Type": "Loan",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
}, {
"Expense Type": "Tax",
"Projected Cost": 200,
"Actual Cost": 200,
"Difference": 0,
}, {
"Expense Type": "Savings",
"Projected Cost": 1000,
"Actual Cost": 900,
"Difference": 100,
},
{
"Expense Type": "Total",
"Projected Cost": 13500,
"Actual Cost": 13600,
"Difference": -100,
}
];
<!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, SortDescriptor } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { budgetData, defaultData } from './datasource';
export default class App extends React.Component<{}, {}> {
spreadsheet: SpreadsheetComponent;
public onDataBound(): void {
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:D1');
this.spreadsheet.cellFormat({ fontWeight: 'bold'}, 'A11:D11');
}
render() {
return (<SpreadsheetComponent allowFindAndReplace={false} ref={(ssObj) => { this.spreadsheet = ssObj }} dataBound={this.onDataBound.bind(this)}>
<SheetsDirective>
<SheetDirective name='Price Details'>
<RangesDirective>
<RangeDirective dataSource={defaultData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={92}></ColumnDirective>
<ColumnDirective width={96}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
<SheetDirective name='Budget'>
<RangesDirective>
<RangeDirective dataSource={budgetData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={92}></ColumnDirective>
<ColumnDirective width={96}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
/**
* Default data source
*/
export let defaultData: Object[] = [
{ 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
{ 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
{ 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
{ 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
{ 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
{ 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
{ 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
{ 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
{ 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
{ 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
];
export let budgetData: Object[] = [
{
"Expense Type": "Housing",
"Projected Cost": 7000,
"Actual Cost": 7500,
"Difference": -500,
},
{
"Expense Type": "Transportation",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},
{
"Expense Type": "Insurance",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},
{
"Expense Type": "Food",
"Projected Cost": 2000,
"Actual Cost": 1800,
"Difference": 200,
},
{
"Expense Type": "Pets",
"Projected Cost": 300,
"Actual Cost": 200,
"Difference": 100,
},
{
"Expense Type": "Personel Care",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},{
"Expense Type": "Loan",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},{
"Expense Type": "Tax",
"Projected Cost": 200,
"Actual Cost": 200,
"Difference": 0,
},{
"Expense Type": "Savings",
"Projected Cost": 1000,
"Actual Cost": 900,
"Difference": 100,
},
{
"Expense Type": "Total",
"Projected Cost": 13500,
"Actual Cost": 13600,
"Difference": -100,
}
]
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.