Back to Examples

Create a javascript spreadsheet

There are a few different ways to load data to your javascript spreadsheet shown in the next four examples below

Based on a external CSV file

The example below helps you to create a javascript spreadsheet table based on a remote CSV file, including the headers.

<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="spreadsheet"></div>

<p><button id='download'>Export my spreadsheet as CSV</button></p>

<script>
let spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    csv: '/jspreadsheet/arts.csv',
    csvHeaders: true,
    tableOverflow: true,
    columns: [
        { type:'text', width:300 },
        { type:'text', width:80 },
        { type:'dropdown', width:120, source:['England','Wales','Northern Ireland','Scotland'] },
        { type:'text', width:120 },
        { type:'text', width:120 },
    ],
    license: 'OTAxNDdlYWIzZWZkMjEyZDAxMWFkNzBmNjFlM2Y2MjZjMWU2OGExNjVjNzFiYmU2YTI2ZjRlOTI0MWI2MGFiZmI2ZWNmYTBkYjE2ZDFiNjg2NWNkMDY0N2ZmMTBjYzI3Njg2OWFlZGRjN2IwZDEyNGY5ZjRjZDE1MjhiMzc1MmYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFek5qWTJPVE00TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
});

document.getElementById('download').onclick = function () {
    spreadsheet.download();
}
</script>
</html>

Based on an external JSON file

In a similar way, you can create a table based on an external JSON file format by using the url: directive as below.

<html>
<script src="https://jspreadsheet.com/v7/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v7/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" />

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

<script>
jspreadsheet(document.getElementById('spreadsheet'), {
    jspreadsheet(document.getElementById('spreadsheet'), {
        url: '/v3/test.json',
        columns: [
            { type:'text', width:300 },
            { type:'text', width:100 },
         ],
        license: 'OTAxNDdlYWIzZWZkMjEyZDAxMWFkNzBmNjFlM2Y2MjZjMWU2OGExNjVjNzFiYmU2YTI2ZjRlOTI0MWI2MGFiZmI2ZWNmYTBkYjE2ZDFiNjg2NWNkMDY0N2ZmMTBjYzI3Njg2OWFlZGRjN2IwZDEyNGY5ZjRjZDE1MjhiMzc1MmYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFek5qWTJPVE00TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
    });
});
</script>
</html>

Based on an JSON object

The data directive can be used to define a JSON object. In this case you can define by the name directive the order of the columns.

<html>
<script src="https://jspreadsheet.com/v7/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v7/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" />

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

<script>
    jspreadsheet(document.getElementById('spreadsheet'), {
        data:[
            {
                name:'Jorge',
                id:'3',
                age:'40',
                gender:'Male'
            },
            {
                name:'Cosme Sergio',
                id:'4',
                age:'48',
                gender:'Male'
            },
            {
                name:'Jorgina Santos',
                id:'5',
                age:'32',
                gender:'Female'
            },
        ],
        columns: [
            {
                type:'text',
                width:'300',
                name:'id'
            },
            {
                type:'text',
                width:'200',
                name:'name'
            },
            {
                type:'text',
                width:'100',
                name:'age'
            },
            {
                type:'hidden',
                name:'gender'
            },
        ],
        license: 'OTAxNDdlYWIzZWZkMjEyZDAxMWFkNzBmNjFlM2Y2MjZjMWU2OGExNjVjNzFiYmU2YTI2ZjRlOTI0MWI2MGFiZmI2ZWNmYTBkYjE2ZDFiNjg2NWNkMDY0N2ZmMTBjYzI3Njg2OWFlZGRjN2IwZDEyNGY5ZjRjZDE1MjhiMzc1MmYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFek5qWTJPVE00TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
    });
</script>
</html>

Importing from a XSLX file

The following example imports the data from a XSLX file using a third party library, slightly customized in order to improve the CSS parser.

IMPORTANT: This is an experimental implementation and there is no guarantee your spreadsheet will be correctly parsed.

<html>
<script src="https://jspreadsheet.com/v7/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v7/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" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/jszip.js"></script>
<script src="https://bossanova.uk/jspreadsheet/v3/xlsx.js"></script>

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

<script>
jspreadsheet.fromSpreadsheet('/jspreadsheet.com/list.xlsx', function(result) {
    if (! result.length) {
        console.error('Jspreadsheet: Something went wrong.');
    } else {
        for (let i = 0; i < result.length; i++) {
            let options = result[i];
            options.license = 'OTAxNDdlYWIzZWZkMjEyZDAxMWFkNzBmNjFlM2Y2MjZjMWU2OGExNjVjNzFiYmU2YTI2ZjRlOTI0MWI2MGFiZmI2ZWNmYTBkYjE2ZDFiNjg2NWNkMDY0N2ZmMTBjYzI3Njg2OWFlZGRjN2IwZDEyNGY5ZjRjZDE1MjhiMzc1MmYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFek5qWTJPVE00TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
            options.tabs = true;
            jspreadsheet(document.getElementById('spreadsheet'), options);
        }
    }
});
</script>
</html>

NOTE : This example is based on a customized version of the free version of Sheetjs. There is no garantee in the use of this library. Please consider purchase their professional version.

Edit this page on GitHub