Advance Search and Replace
Introducing the Advanced Search and Replace extension for JSS spreadsheets and data grids. This powerful extension enhances your data editing experience by incorporating search and replace functionality similar to other spreadsheet software. Seamlessly search for specific data patterns and efficiently replace them throughout your JSS spreadsheets and data grids, empowering you to modify and update your data with ease quickly.Documentation
Methods
Methods that can be used with the advanced search extensionMethod | Description |
---|---|
search(object?) | To open the search modal programmatically, you must specify the target worksheet instance or if no instance is provided, the function will use the currently active worksheet by default. However, an alert will be displayed to notify the user if no spreadsheet is in focus.search(worksheet?: object) => void |
Events
Events that can be used with the advanced search extensionEvent | Description |
---|---|
onsearch | After the search process is completed.onbeforesearch(worksheet: Object, terms: String, rowNumber: Array, search: Object) |
Installation
Please choose one of the following optionsUsing NPM
npm install @jspreadsheet/search
Using a CDN
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/search/dist/index.min.js"></script>
Examples
Enable the search and replace extension
Click in the search icon in the toolbar to open the search and replace features.JavaScript example
<html> <script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" /> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/search/dist/index.min.js"></script> <div id="spreadsheet"></div> <input type="button" value="Open search modal" onclick="search(worksheets[0])" /> <script> // Set the license for both plugin and the spreadsheet jspreadsheet.setLicense('MjZlNmVhZDNkOGQ5MmE5YjNkNDgxYWI4MzJkYjliZDlhYzliNGNmNGQ0MzYxMDhjOWMwYjVhYWZlN2RhMTkwYzBmMjhiNzhmOTFmYTA5YWU5OWVmMzAzMjgxYWFhZDUyMTA1MjUyMWIyNTYyMDBiODYzMmVhODJjOTIwMGYxMTYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TkRJeE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // Set the extensions jspreadsheet.setExtensions({ search }); // Create the spreadsheet var worksheets = jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ csv: '/tests/demo.csv', tableOverflow: true, tableWidth: '700px', tableHeight: '400px', columns: [ { width: '80px' }, { width: '200px' }, { width: '100px' }, { width: '200px' }, { width: '100px' } ] }], }); </script> </html>
See this example on Codesandbox
React example
import React, { useRef } from "react"; import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react"; import search from "@jspreadsheet/search"; import "/node_modules/@jsuites/css/dist/style.css"; // Set the license const license = 'MjZlNmVhZDNkOGQ5MmE5YjNkNDgxYWI4MzJkYjliZDlhYzliNGNmNGQ0MzYxMDhjOWMwYjVhYWZlN2RhMTkwYzBmMjhiNzhmOTFmYTA5YWU5OWVmMzAzMjgxYWFhZDUyMTA1MjUyMWIyNTYyMDBiODYzMmVhODJjOTIwMGYxMTYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TkRJeE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'; // Define the extensions const extensions = { search }; export default function App() { // Worksheets let worksheets: jspreadsheet.worksheetInstance = []; // Spreadsheet array of worksheets const spreadsheet = useRef(worksheets); // Render component return ( <> <Spreadsheet ref={spreadsheet} license={license} extensions={extensions}> <Worksheet csv="demo.csv" tableWidth="700px" tableHeight="400px" tableOverflow /> </Spreadsheet> <input type="button" value="Open search modal" onClick={() => search(spreadsheet.current[0])}/> </> ); }
See this example on Codesandbox
Vue example
<template> <Spreadsheet ref="spreadsheet" :license="license" :extensions="extensions" :worksheets="worksheets" /> <input type="button" value="Open search modal" @click="modal" /> </template> <script> import { Spreadsheet, Worksheet } from "@jspreadsheet/vue"; import search from "@jspreadsheet/search"; import "/node_modules/@jsuites/css/dist/style.css"; // Set the license const license = 'MjZlNmVhZDNkOGQ5MmE5YjNkNDgxYWI4MzJkYjliZDlhYzliNGNmNGQ0MzYxMDhjOWMwYjVhYWZlN2RhMTkwYzBmMjhiNzhmOTFmYTA5YWU5OWVmMzAzMjgxYWFhZDUyMTA1MjUyMWIyNTYyMDBiODYzMmVhODJjOTIwMGYxMTYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TkRJeE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'; // Extensions const extensions = { search }; export default { components: { Spreadsheet, Worksheet, }, methods: { modal() { search(this.$refs.spreadsheet.current[0]); } }, data() { const worksheets: [{ csv: "/tests/demo.csv", tableOverflow: "true", tableWidth: "700px", tableHeight: "400px", }], return { worksheets, license, search, }; } } </script>
Angular example
import { Component, ViewChild, ElementRef } from "@angular/core"; import * as jspreadsheet from "jspreadsheet"; import * as search from "@jspreadsheet/search"; import "/node_modules/jsuites/dist/jsuites.css"; import "/node_modules/@jsuites/css/dist/style.css"; import "/node_modules/jspreadsheet/dist/jspreadsheet.css"; // Set your JSS license key (The following key only works for one day) const license = 'MjZlNmVhZDNkOGQ5MmE5YjNkNDgxYWI4MzJkYjliZDlhYzliNGNmNGQ0MzYxMDhjOWMwYjVhYWZlN2RhMTkwYzBmMjhiNzhmOTFmYTA5YWU5OWVmMzAzMjgxYWFhZDUyMTA1MjUyMWIyNTYyMDBiODYzMmVhODJjOTIwMGYxMTYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOakl6TkRJeE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'; // Extensions jspreadsheet.setExtensions({ search }); @Component({ selector: "app-root", template: `<div #spreadsheet></div> <input type="button" value="Open search modal" onclick="search(this.worksheets[0])" />` }) export class AppComponent { @ViewChild("spreadsheet") spreadsheet: ElementRef; // Worksheets worksheets: jspreadsheet.worksheetInstance[]; // Create a new data grid ngAfterViewInit() { // Create spreadsheet this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, { worksheets: [{ minDimensions: [10, 10], worksheets: [{ csv: "/tests/demo.csv", tableOverflow: "true", tableWidth: "700px", tableHeight: "400px", }] }] }); } }