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 extension

Method	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 extension

Event	Description
onsearch	After the search process is completed. `onbeforesearch(worksheet: Object, terms: String, rowNumber: Array, search: Object)`

Installation

Please choose one of the following options

Using 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])}/>
        </>
    );
}