Search

The Advanced Search and Replace extension for Jspreadsheet spreadsheets and data grids 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 spreadsheets and data grids, enabling you to modify and update your data quickly and easily.

Documentation

Methods

Method	Description
search(object?)	Opens the search modal programmatically. Specify the target worksheet instance, or if no instance is provided, the function uses the currently active worksheet by default. An alert displays if no spreadsheet is in focus. `search(worksheet?: object) => void`

Events

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

Installation

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

Data Grid Search Extension

Click the search icon in the toolbar to open the search and replace features.

<html>
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/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" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/style.min.css" type="text/css" />

<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/search/dist/index.min.js"></script>

<div id="spreadsheet"></div>

<p><input type="button" value="Open Search Modal" id="btn1" /></p>

<script>
// Set the license for both plugin and the spreadsheet
jspreadsheet.setLicense('NWQ1YmVlM2NkYmNiM2Q2MTI2MTZiOTgyMTdmYjkzZGRjMmFmNGI3OGY3YmQ4OTQ2NjkyNGY0NzliY2IwZDFjZGQ2ZGVmM2Q4MjMxODE5MzY1YTA2MjY0MTIzOWU5OWI3ZTRkNWRlYTNlNDkxNDYwNDI2NDVmMDg5Mzk2MDE1M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU9ETXhOVGcwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Set the extensions
jspreadsheet.setExtensions({ search });

// Create the spreadsheet
let 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' }
        ]
    }],
});

document.getElementById("btn1").onclick = () => search(worksheets[0])
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import studio from '@lemonadejs/studio';
import search from "@jspreadsheet/search";

import '@lemonadejs/studio/dist/style.css';
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
import "@jsuites/css/dist/style.css";

// Set the license
const license = 'NWQ1YmVlM2NkYmNiM2Q2MTI2MTZiOTgyMTdmYjkzZGRjMmFmNGI3OGY3YmQ4OTQ2NjkyNGY0NzliY2IwZDFjZGQ2ZGVmM2Q4MjMxODE5MzY1YTA2MjY0MTIzOWU5OWI3ZTRkNWRlYTNlNDkxNDYwNDI2NDVmMDg5Mzk2MDE1M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU9ETXhOVGcwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';

// Define the extensions
const extensions = { search };

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license} extensions={extensions}>
                <Worksheet
                    minDimensions={[5, 5]}
                    csv={"/tests/demo.csv"}
                    tableWidth={"700px"}
                    tableHeight={"400px"}
                    tableOverflow
                />
            </Spreadsheet>
            <input type="button" value="Open search modal"
                onClick={() => search(spreadsheet.current[0])}/>>
        </>
    );
}

<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 studio from '@lemonadejs/studio';

import '@lemonadejs/studio/dist/style.css';
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
import "@jsuites/css/dist/style.css";

// Set the license
const license = 'NWQ1YmVlM2NkYmNiM2Q2MTI2MTZiOTgyMTdmYjkzZGRjMmFmNGI3OGY3YmQ4OTQ2NjkyNGY0NzliY2IwZDFjZGQ2ZGVmM2Q4MjMxODE5MzY1YTA2MjY0MTIzOWU5OWI3ZTRkNWRlYTNlNDkxNDYwNDI2NDVmMDg5Mzk2MDE1M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU9ETXhOVGcwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';

// 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>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import search from "@jspreadsheet/search";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NWQ1YmVlM2NkYmNiM2Q2MTI2MTZiOTgyMTdmYjkzZGRjMmFmNGI3OGY3YmQ4OTQ2NjkyNGY0NzliY2IwZDFjZGQ2ZGVmM2Q4MjMxODE5MzY1YTA2MjY0MTIzOWU5OWI3ZTRkNWRlYTNlNDkxNDYwNDI2NDVmMDg5Mzk2MDE1M2YsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU9ETXhOVGcwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Extensions
jspreadsheet.setExtensions({ search });

@Component({
    standalone: true,
    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],
                csv: "https://jspreadsheet.com/tests/demo.csv",
                tableOverflow: true,
                tableWidth: "700px",
                tableHeight: "400px",
            }]
        });
    }
}

Edit this page on GitHub