Spreadsheet with search and pagination

How to create a javascript spreadsheet instance with a modern design including search and pagination using Jspreadsheet Version 7.

<html>
<script src="https://jspreadsheet.com/v7/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<div id="table"></div>

<script>
let table = jspreadsheet(document.getElementById('table'), {
    csv: '/jspreadsheet/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 },
    ],
    license: 'ODdkODc4MjJjNDk0YmY0NjI2NjY2MDNlNTlmNjQyMWQ4ZWRmNWUwOTBmNGJhNTVlOGNmNjU1MTY5ZDVhNmYyNDNhMzBkNzk3ZDc0MzUxYWZkNzlmOTI3NGVlYWM5NDdmOTdmYWJlOWE0NTI0ZjA2YjI3NTU2ZDhmYjNhMTgxOWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZeU1EYzJOak15TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0ltTm9ZWEowY3lJc0ltWnZjbTF6SWl3aVptOXliWFZzWVNJc0luQmhjbk5sY2lJc0luSmxibVJsY2lJc0ltTnZiVzFsYm5Seklpd2lhVzF3YjNKMFpYSWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0lzSW5CeWFXNTBJaXdpYzJobFpYUnpJaXdpWTJ4cFpXNTBJaXdpYzJWeWRtVnlJaXdpYzJoaGNHVnpJaXdpWm05eWJXRjBJbDBzSW1SbGJXOGlPblJ5ZFdWOQ==',
    onchangepage: function(el, pageNumber, oldPage) {
        console.log('New page: ' + pageNumber);
    }
});

function skin(o) {
    if (document.getElementById('table').classList.contains('jexcel_modern')) {
        document.getElementById('table').classList.remove('jexcel_modern');
        o.value = 'Change to the modern theme';
    } else {
        document.getElementById('table').classList.add('jexcel_modern');
        o.value = 'Change to the default theme';
    }
}

document.getElementById("setdefault").onclick = (e) => skin(e.target)
</script>

<p><input type='button' value='Change to the default theme' id="setdefault"></p>
</html>

Related events

Events	Description
onbeforesearch	`onbeforesearch(DOMElement el, String str, Array rowNumbers, Object search)` Action to be executed before the search. It can be used to cancel or to intercept and customize the searching process.
onsearch	`onbeforesearch(DOMElement el, String str, Array rowNumbers, Object search)` After the search process is completed.
onchangepage	`onchangepage(DOMElement el, Number pageNumber, Number oldPage, Number quantityPerPage)` Action to be executed before the page changes. It can cancel the action by returning false.
onpage	`onpage(DOMElement el, Number quantityPerPage, Number oldPage, Number pageNumber)` After the page has changed.

Related methods

Method	Description
page	`table.page(Number pageNumber)` Go to the page number.
whichPage	`table.whichPage()` Return the current page.
quantiyOfPages	`table.quantiyOfPages()` Get the quantity of pages.

Edit this page on GitHub