Data Grid Search
The search functionality filters rows by keyword matching. Search operations can be modified or cancelled as needed. This section outlines the available methods and events for customizing search behavior.
What's new with Version 13
- Numeric terms:
search(0)searches for0- Performance: considerably faster on large worksheets; the displayed label is only resolved for cells that can present one
- View state: the search term is personal and never persisted or synchronized
Documentation
Methods
Methods for implementing and managing search functionality:
| Method | Description |
|---|---|
search |
search(terms: String) : voidSearch for rows that contain the specified terms. |
resetSearch |
resetSearch() : voidReset the search terms and show all rows again. |
showSearch |
showSearch() : voidShow the search input box. |
hideSearch |
hideSearch() : voidHide the search input box. |
Events
Events allow developers to tailor the search functionality using specific events. These events can alter or halt the search process, providing enhanced oversight of the search mechanism and enabling intricate and targeted filtering according to diverse criteria.
| Event | Description |
|---|---|
onbeforesearch |
onbeforesearch(worksheet: Object, terms: String, results: Array, search: Object)Triggered before the search. Can be used to cancel or intercept and customize the search process. |
onsearchstart |
onsearchstart(worksheet: Object, terms: String)Triggered before all search events. |
onsearchrow |
onsearchrow(worksheet: Object, rowNumber: number, terms: String)Helps to customize the search process. |
onsearch |
onsearch(worksheet: Object, terms: String, results: Array, search: Object)Triggered after the search process is completed. |
Initial Settings
Properties available to configure the spreadsheet at initialization:
| Property | Description |
|---|---|
search: boolean |
Enable or disable search. |
Examples
Data Grid with Search and Pagination
The example below demonstrates a basic data grid with search functionality and pagination.
<html>
<script src="https://jspreadsheet.com/v13/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v13/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<p><input type='button' value='Search for APP' id="btn1" /></p>
<script>
// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('MGIxNjVkYzg5ODhlY2ZiZDEzNjhkMWU3NTE1MWM0MGY0MDkxZDA2OTFiZDUyZjY3NTc3ZDlmZTkyODdjNWViMDYxZTg4M2E0MzFjOGQ5YzFhNTM0NmM0ZTdmNmIwNGQ1ZTgzZTkzNmFiN2Y2MjY5MGJmNDExYzIxY2YxZWVmM2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpreE9UWXdPREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
// Create the spreadsheet
let worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
csv: '/tests/demo.csv',
csvHeaders: true,
search: true,
pagination: 10,
paginationOptions: [10,25,50,100],
columns: [
{ type:'text', width:80 },
{ type:'text', width:100 },
{ type:'text', width:100 },
{ type:'text', width:200 },
{ type:'text', width:100 },
],
}]
});
document.getElementById("btn1").onclick = () => worksheets[0].search('app');
</script>
</html>
import React, {useRef} from "react";
import { Spreadsheet, Worksheet,jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('MGIxNjVkYzg5ODhlY2ZiZDEzNjhkMWU3NTE1MWM0MGY0MDkxZDA2OTFiZDUyZjY3NTc3ZDlmZTkyODdjNWViMDYxZTg4M2E0MzFjOGQ5YzFhNTM0NmM0ZTdmNmIwNGQ1ZTgzZTkzNmFiN2Y2MjY5MGJmNDExYzIxY2YxZWVmM2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpreE9UWXdPREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Columns
const columns = [
{type: 'text', width: 80},
{type: 'text', width: 100},
{type: 'text', width: 100},
{type: 'text', width: 200},
{type: 'text', width: 100},
]
// Render component
return (
<>
<Spreadsheet ref={spreadsheet}>
<Worksheet
columns={columns}
csv="/tests/demo.csv"
csvHeaders
search
pagination="10"
paginationOptions={[10, 25, 50, 100]}/>
</Spreadsheet>
<input type={'button'} value={'Search for APP'} onClick={() => spreadsheet.current[0].search('app')}/>
</>
);
}
<template>
<Spreadsheet ref="spreadsheet">
<Worksheet :columns="columns" csv="/tests/demo.csv" csvHeaders search :pagination="10" :paginationOptions="[10,25,50,100]" />
</Spreadsheet>
<input type='button' value='Search for APP' @click="search" />
</template>
<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('MGIxNjVkYzg5ODhlY2ZiZDEzNjhkMWU3NTE1MWM0MGY0MDkxZDA2OTFiZDUyZjY3NTc3ZDlmZTkyODdjNWViMDYxZTg4M2E0MzFjOGQ5YzFhNTM0NmM0ZTdmNmIwNGQ1ZTgzZTkzNmFiN2Y2MjY5MGJmNDExYzIxY2YxZWVmM2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpreE9UWXdPREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
search() {
this.$refs.spreadsheet.current[0].search('app');
},
},
data() {
const columns = [
{ type:'text', width:80 },
{ type:'text', width:100 },
{ type:'text', width:100 },
{ type:'text', width:200 },
{ type:'text', width:100 },
];
return {
columns,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('MGIxNjVkYzg5ODhlY2ZiZDEzNjhkMWU3NTE1MWM0MGY0MDkxZDA2OTFiZDUyZjY3NTc3ZDlmZTkyODdjNWViMDYxZTg4M2E0MzFjOGQ5YzFhNTM0NmM0ZTdmNmIwNGQ1ZTgzZTkzNmFiN2Y2MjY5MGJmNDExYzIxY2YxZWVmM2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpreE9UWXdPREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
// Create component
@Component({
standalone: true,
selector: "app-root",
template: `<div #spreadsheet></div>
<input type='button' value='Search for APP' (click)="this.worksheets[0].search('app')" />`,
})
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, {
csv: '/tests/demo.csv',
csvHeaders: true,
search: true,
pagination: 10,
paginationOptions: [10,25,50,100],
columns: [
{ type:'text', width:80 },
{ type:'text', width:100 },
{ type:'text', width:100 },
{ type:'text', width:200 },
{ type:'text', width:100 },
],
});
}
}
Custom Local Search
Develop a custom method for row search within your data grid.
<html>
<script src="https://jspreadsheet.com/v13/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v13/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<script>
// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('MGIxNjVkYzg5ODhlY2ZiZDEzNjhkMWU3NTE1MWM0MGY0MDkxZDA2OTFiZDUyZjY3NTc3ZDlmZTkyODdjNWViMDYxZTg4M2E0MzFjOGQ5YzFhNTM0NmM0ZTdmNmIwNGQ1ZTgzZTkzNmFiN2Y2MjY5MGJmNDExYzIxY2YxZWVmM2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpreE9UWXdPREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
csv: '/tests/demo.csv',
csvHeaders: true,
search: true,
pagination: 10,
paginationOptions: [10,25,50,100],
defaultColWidth: 120,
}],
oncreatecell: function(worksheet, td, col, row) {
// JSS is creating a cell that should be highlighted
if (worksheet.highlight && worksheet.highlight[row] && worksheet.highlight[row][col]) {
td.classList.add('jss_highlight');
}
},
onsearchstart: function(worksheet) {
// Reset any potential previous highlighted cells
if (worksheet.highlight) {
for (let j = 0; j < worksheet.highlight.length; j++) {
if (worksheet.highlight[j]) {
for (let i = 0; i < worksheet.highlight[j].length; i++) {
if (worksheet.records[j][i] && worksheet.records[j][i].element) {
worksheet.records[j][i].element.classList.remove('jss_highlight');
}
}
}
}
}
// Reset the highlighted and restart the search
worksheet.highlight = [];
},
onsearchrow: function(worksheet, row, terms) {
// Search for the term
terms = new RegExp(terms, 'gi');
// Value
let value = null;
// Result
let test = false;
// Get the values from the rows
for (let col = 0; col < worksheet.options.columns.length; col++) {
// Get the information from cell
value = '' + worksheet.getValueFromCoords(col,row,true);
// If find the term
if (value.match(terms)) {
// Highlight cell
if (worksheet.records[row][col].element) {
worksheet.records[row][col].element.classList.add('jss_highlight');
}
// Highlighted cells container
if (! worksheet.highlight[row]) {
worksheet.highlight[row] = [];
}
worksheet.highlight[row][col] = true;
// Add to the result
test = true;
}
}
// Search
return test;
}
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('MGIxNjVkYzg5ODhlY2ZiZDEzNjhkMWU3NTE1MWM0MGY0MDkxZDA2OTFiZDUyZjY3NTc3ZDlmZTkyODdjNWViMDYxZTg4M2E0MzFjOGQ5YzFhNTM0NmM0ZTdmNmIwNGQ1ZTgzZTkzNmFiN2Y2MjY5MGJmNDExYzIxY2YxZWVmM2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpreE9UWXdPREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
const oncreatecell = (worksheet, td, col, row) => {
// JSS is creating a cell that should be highlighted
if (worksheet.highlight && worksheet.highlight[row] && worksheet.highlight[row][col]) {
td.classList.add('jss_highlight');
}
}
const onsearchstart = (worksheet) => {
// Reset any potential previous highlighted cells
if (worksheet.highlight) {
for (let j = 0; j < worksheet.highlight.length; j++) {
if (worksheet.highlight[j]) {
for (let i = 0; i < worksheet.highlight[j].length; i++) {
if (worksheet.records[j][i] && worksheet.records[j][i].element) {
worksheet.records[j][i].element.classList.remove('jss_highlight');
}
}
}
}
}
// Reset the highlighted and restart the search
worksheet.highlight = [];
}
const onsearchrow = (worksheet, row, terms) => {
// Search for the term
terms = new RegExp(terms, 'gi');
// Value
let value = null;
// Result
let test = false;
// Get the values from the rows
for (let col = 0; col < worksheet.options.columns.length; col++) {
// Get the information from cell
value = '' + worksheet.getValueFromCoords(col,row,true);
// If find the term
if (value.match(terms)) {
// Highlight cell
if (worksheet.records[row][col].element) {
worksheet.records[row][col].element.classList.add('jss_highlight');
}
// Highlighted cells container
if (! worksheet.highlight[row]) {
worksheet.highlight[row] = [];
}
worksheet.highlight[row][col] = true;
// Add to the result
test = true;
}
}
// Search
return test;
}
// Render component
return (
<>
<Spreadsheet ref={spreadsheet} oncreatecell={oncreatecell}
onsearchstart={onsearchstart} onsearchrow={onsearchrow}>
<Worksheet
csv="/tests/demo.csv"
csvHeaders
search
pagination="10"
paginationOptions={[10,25,50,100]}
defaultColWidth="120" />
</Spreadsheet>
<input type='button' value='Search for APP' onClick={() => spreadsheet.current[0].search('app')} />
</>
);
}
<template>
<Spreadsheet ref="spreadsheet" :oncreatecell="oncreatecell"
:onsearchstart="onsearchstart" :onsearchrow="onsearchrow">
<Worksheet defaultColWidth="120" :csv="/tests/demo.csv" csvHeaders
search :pagination="10" :paginationOptions="[10,25,50,100]" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('MGIxNjVkYzg5ODhlY2ZiZDEzNjhkMWU3NTE1MWM0MGY0MDkxZDA2OTFiZDUyZjY3NTc3ZDlmZTkyODdjNWViMDYxZTg4M2E0MzFjOGQ5YzFhNTM0NmM0ZTdmNmIwNGQ1ZTgzZTkzNmFiN2Y2MjY5MGJmNDExYzIxY2YxZWVmM2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpreE9UWXdPREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
search() {
this.$refs.spreadsheet.current[0].search('app');
},
oncreatecell(worksheet, td, col, row) {
// JSS is creating a cell that should be highlighted
if (worksheet.highlight && worksheet.highlight[row] && worksheet.highlight[row][col]) {
td.classList.add('jss_highlight');
}
},
onsearchstart(worksheet) {
// Reset any potential previous highlighted cells
if (worksheet.highlight) {
for (let j = 0; j < worksheet.highlight.length; j++) {
if (worksheet.highlight[j]) {
for (let i = 0; i < worksheet.highlight[j].length; i++) {
if (worksheet.records[j][i] && worksheet.records[j][i].element) {
worksheet.records[j][i].element.classList.remove('jss_highlight');
}
}
}
}
}
// Reset the highlighted and restart the search
worksheet.highlight = [];
},
onsearchrow(worksheet, row, terms) {
// Search for the term
let regex = new RegExp(terms, 'gi');
// Value
let value = null;
// Result
let test = false;
// Get the values from the rows
for (let col = 0; col < worksheet.options.columns.length; col++) {
// Get the information from cell
value = '' + worksheet.getValueFromCoords(col,row,true);
// If find the term
if (value.match(regex)) {
// Highlight cell
if (worksheet.records[row][col].element) {
worksheet.records[row][col].element.classList.add('jss_highlight');
}
// Highlighted cells container
if (! worksheet.highlight[row]) {
worksheet.highlight[row] = [];
}
worksheet.highlight[row][col] = true;
// Add to the result
test = true;
}
}
// Search
return test;
}
},
data() {
const columns = [
{ type:'text', width:80 },
{ type:'text', width:100 },
{ type:'text', width:100 },
{ type:'text', width:200 },
{ type:'text', width:100 },
];
return {
columns,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('MGIxNjVkYzg5ODhlY2ZiZDEzNjhkMWU3NTE1MWM0MGY0MDkxZDA2OTFiZDUyZjY3NTc3ZDlmZTkyODdjNWViMDYxZTg4M2E0MzFjOGQ5YzFhNTM0NmM0ZTdmNmIwNGQ1ZTgzZTkzNmFiN2Y2MjY5MGJmNDExYzIxY2YxZWVmM2MsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpreE9UWXdPREEyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
// Create component
@Component({
standalone: true,
selector: "app-root",
template: `<div #spreadsheet></div>`,
})
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: [{
csv: '/tests/demo.csv',
csvHeaders: true,
search: true,
pagination: 10,
paginationOptions: [10,25,50,100],
defaultColWidth: 120,
}],
oncreatecell: function(worksheet, td, col, row) {
// JSS is creating a cell that should be highlighted
if (worksheet.highlight && worksheet.highlight[row] && worksheet.highlight[row][col]) {
td.classList.add('jss_highlight');
}
},
onsearchstart: function(worksheet) {
// Reset any potential previous highlighted cells
if (worksheet.highlight) {
for (let j = 0; j < worksheet.highlight.length; j++) {
if (worksheet.highlight[j]) {
for (let i = 0; i < worksheet.highlight[j].length; i++) {
if (worksheet.records[j][i] && worksheet.records[j][i].element) {
worksheet.records[j][i].element.classList.remove('jss_highlight');
}
}
}
}
}
// Reset the highlighted and restart the search
worksheet.highlight = [];
},
onsearchrow: function(worksheet, row, terms) {
// Search for the term
let regex = new RegExp(terms, 'gi');
// Value
let value = null;
// Result
let test = false;
// Get the values from the rows
for (let col = 0; col < worksheet.options.columns.length; col++) {
// Get the information from cell
value = '' + worksheet.getValueFromCoords(col,row,true);
// If find the term
if (value.match(regex)) {
// Highlight cell
if (worksheet.records[row][col].element) {
worksheet.records[row][col].element.classList.add('jss_highlight');
}
// Highlighted cells container
if (! worksheet.highlight[row]) {
worksheet.highlight[row] = [];
}
worksheet.highlight[row][col] = true;
// Add to the result
test = true;
}
}
// Search
return test;
}
});
}
}
See Also
- Data Grid Filters - Filter columns with custom rules
- Data Grid Pagination - Paginate search results
- Advance Search and Replace Extension - Advanced search plugin with replace functionality