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: 'MmZhNjRmZDczYzI3NmRjMzJhYTBhMGRkNmYwMGU5YzczNjI2MDZlMDRiNWIzMWM0YWM1NTdkNGJiZTQwMTYzYzQ0NmVmOWYyYmZmZmYwMjM5OTU1NTFiNTliNjUyYzgxNTk4ODkzMGY3NTY1NzNiNmIwMWQxNGE3MWE3MWU3MmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3lPVEExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5',
});
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: 'MmZhNjRmZDczYzI3NmRjMzJhYTBhMGRkNmYwMGU5YzczNjI2MDZlMDRiNWIzMWM0YWM1NTdkNGJiZTQwMTYzYzQ0NmVmOWYyYmZmZmYwMjM5OTU1NTFiNTliNjUyYzgxNTk4ODkzMGY3NTY1NzNiNmIwMWQxNGE3MWE3MWU3MmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3lPVEExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5',
});
});
</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: 'MmZhNjRmZDczYzI3NmRjMzJhYTBhMGRkNmYwMGU5YzczNjI2MDZlMDRiNWIzMWM0YWM1NTdkNGJiZTQwMTYzYzQ0NmVmOWYyYmZmZmYwMjM5OTU1NTFiNTliNjUyYzgxNTk4ODkzMGY3NTY1NzNiNmIwMWQxNGE3MWE3MWU3MmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3lPVEExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5',
});
</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 = 'MmZhNjRmZDczYzI3NmRjMzJhYTBhMGRkNmYwMGU5YzczNjI2MDZlMDRiNWIzMWM0YWM1NTdkNGJiZTQwMTYzYzQ0NmVmOWYyYmZmZmYwMjM5OTU1NTFiNTliNjUyYzgxNTk4ODkzMGY3NTY1NzNiNmIwMWQxNGE3MWE3MWU3MmMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3lPVEExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';
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.