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.

Documentation

Methods

The following methods provide programmatic control over pagination:

Method	Description
`page`	`worksheet.page(pageNumber: Number) : void` Go to the page number.
`whichPage`	`worksheet.whichPage(rowNumber?: Number) : number` Get the current page number, or find which page contains a specific row number.
`quantityOfPages`	`worksheet.quantityOfPages() : number` Get the total number of pages available.

Events

The following events are triggered during pagination and search operations:

Event	Description
`onbeforesearch`	`onbeforesearch(worksheet: Object, terms: String, results: Array, search: Object)` Triggered before search execution. Can be used to cancel or customize the search process.
`onsearch`	`onsearch(worksheet: Object, terms: String, rowNumber: Array, search: Object)` Triggered after the search process is completed.
`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`	Enable or disable the search feature. Default: false
`pagination: number`	Number of rows to display per page. Set to 0 to disable pagination.
`paginationOptions: array`	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/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/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>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NWM2NWYxMmFkYjRhY2Y3ZTMxNzM0OWNjNGRlOTNhZDc1N2IyNWU3YmFmMmMxOGYxMDRlYjg1MjI5NWZkZGYzYmVjNjRmN2Y4YTNmMjk2ZGIyZDRhOTgyYTA5ODdmNjk2MzM3MThjNjg2Nzk3YzY5ODg0MGE0MGUyOGExMmIwM2EsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNRGczTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

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";

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

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";

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

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('NWM2NWYxMmFkYjRhY2Y3ZTMxNzM0OWNjNGRlOTNhZDc1N2IyNWU3YmFmMmMxOGYxMDRlYjg1MjI5NWZkZGYzYmVjNjRmN2Y4YTNmMjk2ZGIyZDRhOTgyYTA5ODdmNjk2MzM3MThjNjg2Nzk3YzY5ODg0MGE0MGUyOGExMmIwM2EsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNRGczTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

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/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/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>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NWM2NWYxMmFkYjRhY2Y3ZTMxNzM0OWNjNGRlOTNhZDc1N2IyNWU3YmFmMmMxOGYxMDRlYjg1MjI5NWZkZGYzYmVjNjRmN2Y4YTNmMjk2ZGIyZDRhOTgyYTA5ODdmNjk2MzM3MThjNjg2Nzk3YzY5ODg0MGE0MGUyOGExMmIwM2EsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNRGczTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

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

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

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";

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

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('NWM2NWYxMmFkYjRhY2Y3ZTMxNzM0OWNjNGRlOTNhZDc1N2IyNWU3YmFmMmMxOGYxMDRlYjg1MjI5NWZkZGYzYmVjNjRmN2Y4YTNmMjk2ZGIyZDRhOTgyYTA5ODdmNjk2MzM3MThjNjg2Nzk3YzY5ODg0MGE0MGUyOGExMmIwM2EsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNRGczTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@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());
  }
}