Pagination
Jspreadsheet pagination enables efficient handling of large datasets by dividing data into manageable pages. Configure page size, navigation behavior, and search functionality while maintaining programmatic control through events and methods.
What's new with Version 13
- Validation:
page(n)clamps pages beyond the last to the last page and refuses invalid input withfalse;whichPage(y)returnsnullfor a row outside the current results- View state: the current page is personal and never persisted or synchronized
Documentation
Methods
The following methods provide programmatic control over pagination:
| Method | Description |
|---|---|
page |
worksheet.page(pageNumber: Number | null) : void | falseGo to the page number (0-based). null or -1 goes to the last page, and a number beyond the last page is limited to it. Returns false when the page number is invalid or onbeforechangepage cancels the change. |
whichPage |
worksheet.whichPage(rowNumber?: Number) : number | null | falseGet the current page number, or find which page contains a specific row number. Returns null when the row does not exist or is excluded by the active search or filter, and false when pagination is not enabled. |
quantityOfPages |
worksheet.quantityOfPages() : number | falseGet the total number of pages, counted over the active search or filter results. Returns false when pagination is not enabled. |
Events
The following events are triggered during pagination and search operations:
| Event | Description |
|---|---|
onbeforesearch |
onbeforesearch(worksheet: Object, query: String, results: Number[] | null) => Number[] | false | voidTriggered before the search results are applied. Return an array of row numbers to replace the results, or false to cancel the search. |
onsearch |
onsearch(worksheet: Object, query: String, results: Number[] | null) => voidTriggered after the search is applied. results is null when the query is empty and the search was reset. |
onbeforechangepage |
onbeforechangepage(worksheet: Object, newPage: Number, previousPage: Number, quantityPerPage: Number)Triggered before page changes. Can cancel the action by returning false. |
onchangepage |
onchangepage(worksheet: Object, newPage: Number, previousPage: Number, quantityPerPage: Number)Triggered after the page has changed. |
Initial Settings
Configure pagination and search functionality during spreadsheet initialization:
| Property | Description |
|---|---|
search: boolean |
Worksheet option. Enable or disable the search feature. Default: false |
pagination: number |
Worksheet option. Number of rows to display per page. Omitted or 0 disables pagination. |
paginationOptions: array |
Worksheet option. Array of options for users to select rows per page. Can include numbers or objects with text/value properties. |
Translations
Customize pagination controls for different languages using the jspreadsheet.setDictionary method:
jspreadsheet.setDictionary({
'Search': 'Pesquisar',
'Show': 'Exibir',
'entries': 'entradas',
'Showing {0} to {1} of {2} entries': 'Mostrando {0} até {1} de {2} entradas'
});
Examples
Data Grid Search and Pagination
This example demonstrates enabling search and pagination features with custom dictionary translations.
<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"/>
<input type='button' value='Go to the second page' id="btn2"/></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('YmY5OTJmYzg4Y2UzZmQ2NjZmNjZmNzllYjY5OWQ0NDZhNGQ2NDQ2MDMwM2UyNjY0ZGZlYzhhYmQ5NjYyZWU2YzIyZTUwZDJjNWMzYTQ5OWMxNzNkZTdkYmQxNWQ4YjE5NmUwY2VhODhjODkzNThkN2UzYWNlYjJhZDcyY2U3YTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek5qa3hPRFE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
jspreadsheet.setDictionary({
'Search': 'Pesquisar',
'Show': 'Mostrar',
'entries': 'registros',
'Showing {0} to {1} of {2} entries': 'Mostrando {0} até {1} de {2} registros',
});
// Create the spreadsheet
let spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
csv: '/tests/demo.csv',
csvHeaders: true,
search: true,
pagination: 10,
paginationOptions: [10,25,50,100,{ text: 'All', value: 999999 }],
columns: [
{ type:'text', width:80 },
{ type:'text', width:200 },
{ type:'text', width:100 },
{ type:'text', width:200 },
{ type:'text', width:100 },
],
}],
onchangepage: function(worksheet, pageNumber, oldPage) {
console.log('New page: ' + pageNumber);
}
});
document.getElementById("btn1").onclick = () => spreadsheet[0].search('app');
document.getElementById("btn2").onclick = () => spreadsheet[0].page(1);
</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('YmY5OTJmYzg4Y2UzZmQ2NjZmNjZmNzllYjY5OWQ0NDZhNGQ2NDQ2MDMwM2UyNjY0ZGZlYzhhYmQ5NjYyZWU2YzIyZTUwZDJjNWMzYTQ5OWMxNzNkZTdkYmQxNWQ4YjE5NmUwY2VhODhjODkzNThkN2UzYWNlYjJhZDcyY2U3YTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek5qa3hPRFE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
const dictionary = {
'Search': 'Pesquisar',
'Show': 'Mostrar',
'entries': 'registros',
'Showing {0} to {1} of {2} entries': 'Mostrando {0} até {1} de {2} registros',
};
export default function App() {
const spreadsheet = useRef();
const columns = [
{ type: "text", width: 80 },
{ type: "text", width: 200 },
{ type: "text", width: 100 },
{ type: "text", width: 200 },
{ type: "text", width: 100 },
];
const onchangepage = (worksheet, pageNumber, oldPage) => {
console.log("New page:", pageNumber);
};
const searchApp = () => {
spreadsheet.current[0].search("app");
};
const goToSecondPage = () => {
spreadsheet.current[0].page(1);
};
return (
<div>
<Spreadsheet
ref={spreadsheet}
dictionary={dictionary}
onchangepage={onchangepage}
>
<Worksheet
columns={columns}
csv="/data.csv"
csvHeaders={true}
search={true}
pagination={10}
paginationOptions={[10, 25, 50, 100, { text: 'All', value: 999999 }]}
/>
</Spreadsheet>
<p>
<button onClick={searchApp}>Search for APP</button>
<button onClick={goToSecondPage}>Go to the second page</button>
</p>
</div>
);
}
<template>
<div>
<Spreadsheet ref="spreadsheet" :dictionary="dictionary" :onchangepage="onchangepage">
<Worksheet :columns="columns" csv="/tests/demo.csv" :csvHeaders="true" :search="true" :pagination="10" :paginationOptions="[10, 25, 50, 100, { text: 'All', value: 999999 }]" />
</Spreadsheet>
<p>
<button @click="searchApp">Search for APP</button>
<button @click="goToSecondPage">Go to the second page</button>
</p>
</div>
</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('YmY5OTJmYzg4Y2UzZmQ2NjZmNjZmNzllYjY5OWQ0NDZhNGQ2NDQ2MDMwM2UyNjY0ZGZlYzhhYmQ5NjYyZWU2YzIyZTUwZDJjNWMzYTQ5OWMxNzNkZTdkYmQxNWQ4YjE5NmUwY2VhODhjODkzNThkN2UzYWNlYjJhZDcyY2U3YTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek5qa3hPRFE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
return {
dictionary: {
'Search': 'Pesquisar',
'Show': 'Mostrar',
'entries': 'registros',
'Showing {0} to {1} of {2} entries': 'Mostrando {0} até {1} de {2} registros',
},
columns: [
{ type: "text", width: 80 },
{ type: "text", width: 200 },
{ type: "text", width: 100 },
{ type: "text", width: 200 },
{ type: "text", width: 100 },
],
};
},
methods: {
onchangepage(worksheet, pageNumber, oldPage) {
console.log("New page: " + pageNumber);
},
searchApp() {
this.$refs.spreadsheet.current[0].search("app");
},
goToSecondPage() {
this.$refs.spreadsheet.current[0].page(1);
},
}
};
</script>
import { Component, ViewChild, ElementRef } from '@angular/core';
import jspreadsheet from 'jspreadsheet';
import 'jspreadsheet/dist/jspreadsheet.css';
import 'jsuites/dist/jsuites.css';
jspreadsheet.setLicense('YmY5OTJmYzg4Y2UzZmQ2NjZmNjZmNzllYjY5OWQ0NDZhNGQ2NDQ2MDMwM2UyNjY0ZGZlYzhhYmQ5NjYyZWU2YzIyZTUwZDJjNWMzYTQ5OWMxNzNkZTdkYmQxNWQ4YjE5NmUwY2VhODhjODkzNThkN2UzYWNlYjJhZDcyY2U3YTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek5qa3hPRFE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
jspreadsheet.setDictionary({
'Search': 'Pesquisar',
'Show': 'Mostrar',
'entries': 'registros',
'Showing {0} to {1} of {2} entries': 'Mostrando {0} até {1} de {2} registros',
});
@Component({
standalone: true,
selector: 'app-root',
template: `
<div #spreadsheet></div>
<input type="button" value="Search for APP" (click)="searchApp()" />
<input type="button" value="Go to the second page" (click)="goToSecondPage()" />
`,
})
export class AppComponent {
@ViewChild('spreadsheet', { static: true }) spreadsheet!: ElementRef;
worksheets: any[] = [];
ngAfterViewInit() {
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [
{
csv: '/assets/demo.csv',
csvHeaders: true,
search: true,
pagination: 10,
paginationOptions: [10, 25, 50, 100],
columns: [
{ type: 'text', width: 80 },
{ type: 'text', width: 200 },
{ type: 'text', width: 100 },
{ type: 'text', width: 200 },
{ type: 'text', width: 100 },
],
},
],
onchangepage: (worksheet: any, pageNumber: any, oldPage: any) => {
console.log('New page:', pageNumber);
},
});
}
searchApp() {
this.worksheets[0].search('app');
}
goToSecondPage() {
this.worksheets[0].page(1);
}
}
Updating Page Size
This example demonstrates programmatically updating the number of rows displayed per page.
<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='Update to 50 rows per page' 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('YmY5OTJmYzg4Y2UzZmQ2NjZmNjZmNzllYjY5OWQ0NDZhNGQ2NDQ2MDMwM2UyNjY0ZGZlYzhhYmQ5NjYyZWU2YzIyZTUwZDJjNWMzYTQ5OWMxNzNkZTdkYmQxNWQ4YjE5NmUwY2VhODhjODkzNThkN2UzYWNlYjJhZDcyY2U3YTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek5qa3hPRFE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
// Create the spreadsheet
let spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
csv: '/tests/demo.csv',
csvHeaders: true,
search: true,
pagination: 10,
columns: [
{ type:'text', width:80 },
{ type:'text', width:200 },
{ type:'text', width:100 },
{ type:'text', width:200 },
{ type:'text', width:100 },
],
}]
});
document.getElementById("btn1").onclick = () => {
// Update rows per page
spreadsheet[0].options.pagination = 50;
// Refresh to current page to apply new page size
spreadsheet[0].page(spreadsheet[0].whichPage());
}
</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('YmY5OTJmYzg4Y2UzZmQ2NjZmNjZmNzllYjY5OWQ0NDZhNGQ2NDQ2MDMwM2UyNjY0ZGZlYzhhYmQ5NjYyZWU2YzIyZTUwZDJjNWMzYTQ5OWMxNzNkZTdkYmQxNWQ4YjE5NmUwY2VhODhjODkzNThkN2UzYWNlYjJhZDcyY2U3YTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek5qa3hPRFE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
export default function App() {
const spreadsheet = useRef();
const columns = [
{ type: "text", width: 80 },
{ type: "text", width: 200 },
{ type: "text", width: 100 },
{ type: "text", width: 200 },
{ type: "text", width: 100 },
];
const updatePageSize = () => {
// Update rows per page
spreadsheet.current[0].options.pagination = 50;
// Refresh to current page to apply new page size
spreadsheet.current[0].page(spreadsheet.current[0].whichPage());
};
return (
<div>
<Spreadsheet ref={spreadsheet}>
<Worksheet
columns={columns}
csv="/tests/demo.csv"
csvHeaders={true}
search={true}
pagination={10}
/>
</Spreadsheet>
<p>
<button onClick={updatePageSize}>Update to 50 rows per page</button>
</p>
</div>
);
}
<template>
<div>
<Spreadsheet ref="spreadsheet">
<Worksheet :columns="columns" csv="/tests/demo.csv" :csvHeaders="true" :search="true" :pagination="10" />
</Spreadsheet>
<p><button @click="updatePageSize">Update to 50 rows per page</button></p>
</div>
</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('YmY5OTJmYzg4Y2UzZmQ2NjZmNjZmNzllYjY5OWQ0NDZhNGQ2NDQ2MDMwM2UyNjY0ZGZlYzhhYmQ5NjYyZWU2YzIyZTUwZDJjNWMzYTQ5OWMxNzNkZTdkYmQxNWQ4YjE5NmUwY2VhODhjODkzNThkN2UzYWNlYjJhZDcyY2U3YTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek5qa3hPRFE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
return {
columns: [
{ type: "text", width: 80 },
{ type: "text", width: 200 },
{ type: "text", width: 100 },
{ type: "text", width: 200 },
{ type: "text", width: 100 },
],
};
},
methods: {
updatePageSize() {
// Update rows per page
this.$refs.spreadsheet.current[0].options.pagination = 50;
// Refresh to current page to apply new page size
this.$refs.spreadsheet.current[0].page(this.$refs.spreadsheet.current[0].whichPage());
},
}
};
</script>
import { Component, ViewChild, ElementRef } from '@angular/core';
import jspreadsheet from 'jspreadsheet';
import 'jspreadsheet/dist/jspreadsheet.css';
import 'jsuites/dist/jsuites.css';
jspreadsheet.setLicense('YmY5OTJmYzg4Y2UzZmQ2NjZmNjZmNzllYjY5OWQ0NDZhNGQ2NDQ2MDMwM2UyNjY0ZGZlYzhhYmQ5NjYyZWU2YzIyZTUwZDJjNWMzYTQ5OWMxNzNkZTdkYmQxNWQ4YjE5NmUwY2VhODhjODkzNThkN2UzYWNlYjJhZDcyY2U3YTMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprek5qa3hPRFE1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');
@Component({
standalone: true,
selector: 'app-root',
template: `
<div #spreadsheet></div>
<input type="button" value="Update to 50 rows per page" (click)="updatePageSize()" />
`,
})
export class AppComponent {
@ViewChild('spreadsheet', { static: true }) spreadsheet!: ElementRef;
worksheets: any[] = [];
ngAfterViewInit() {
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [
{
csv: '/assets/demo.csv',
csvHeaders: true,
search: true,
pagination: 10,
columns: [
{ type: 'text', width: 80 },
{ type: 'text', width: 200 },
{ type: 'text', width: 100 },
{ type: 'text', width: 200 },
{ type: 'text', width: 100 },
],
},
],
});
}
updatePageSize() {
// Update rows per page
this.worksheets[0].options.pagination = 50;
// Refresh to current page to apply new page size
this.worksheets[0].page(this.worksheets[0].whichPage());
}
}
See Also
- Data Grid Search - Search functionality in Jspreadsheet
- Data Grid Filters - Filter large datasets before pagination
- Spreadsheet Events - Handle page change events