This section is dedicated to the methods, events and settings related to data and its operations.
Loading the data
Formats
There are various methods for creating a new spreadsheet and loading data into it, including:
From an existing HTML table;
Loading data from a CSV file;
Loading data from a JSON string or remote JSON file;
Loading data from a JavaScript Array;
Loading data from an XLSX file;
Cell binding
When an array is declared as the data source in JSS, a reference to the data is retained. This allows for any modifications made in the data grid to be instantly reflected in the original data source.
Nested objects JSS supports the use of nested objects, and you must specify the path to the desired property in the column definitions using the property name, as shown below.
Example
The variable data is defined as a reference to an array, which means that any changes made in the following data grid will automatically update the original variable's value.
Sheet1
Search:
Full name
Number
City
1
Jorge
201
New York
2
Paul
1
New Jersey
<html><scriptsrc="https://jspreadsheet.com/v10/jspreadsheet.js"></script><scriptsrc="https://jsuites.net/v5/jsuites.js"></script><linkrel="stylesheet"href="https://jspreadsheet.com/v10/jspreadsheet.css"type="text/css" /><linkrel="stylesheet"href="https://jsuites.net/v5/jsuites.css"type="text/css" /><divid='spreadsheet'></div><divid='console'></div><inputtype='button'id='showonconsole'value='console.log on data'/><script>// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZjE4OTFmNzY1MTJkNTZhNTJlYjVkNzU1ZmE2MWFiOTI2ODc4MjdkYzUxYzk3OTFjNzFhNjgzYzNjNjhlZjg0ODI1ZjhjOGMyNDNmZTBjZjZjMzU0NTNhMmE4MjNlNDRhMWZmNmQyMmVkOGNmMzc2YTEwNTM4ZmE5NzIzMTkwNjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EZ3pNVFF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
let data = [
{
name: 'Jorge',
address: {
number: '201',
city: 'New York'
}
},
{
name: 'Paul',
address: {
number: '1',
city: 'New Jersey'
}
},
];
// Create the data gridjspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
// Data pass as a referencedata: data,
columns: [{
// Path to the data property for this columnname: 'name',
title: 'Full name',
type: 'text',
width: '200px',
},
{
// Path to the data property for this columnname: 'address.number',
title: 'Number',
type: 'text',
width: '200px',
},
{
// Path to the data property for this columnname: 'address.city',
title: 'City',
type: 'text',
width: '300px',
}]
}]
});
document.getElementById('showonconsole').onclick = function () { document.getElementById('console').innerHTML = JSON.stringify(data) }
</script></html>
importReact, { useRef } from"react";
import { Spreadsheet, Worksheet } from"@jspreadsheet/react";
const license = 'ZjE4OTFmNzY1MTJkNTZhNTJlYjVkNzU1ZmE2MWFiOTI2ODc4MjdkYzUxYzk3OTFjNzFhNjgzYzNjNjhlZjg0ODI1ZjhjOGMyNDNmZTBjZjZjMzU0NTNhMmE4MjNlNDRhMWZmNmQyMmVkOGNmMzc2YTEwNTM4ZmE5NzIzMTkwNjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EZ3pNVFF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
exportdefaultfunctionApp() {
// Spreadsheet array of worksheetsconst spreadsheet = useRef();
// Consoleconstconsole = useRef();
// Dataconst data = [
{
name: 'Jorge',
address: {
number: '201',
city: 'New York'
}
},
{
name: 'Paul',
address: {
number: '1',
city: 'New Jersey'
}
}
];
// Columnsconst columns = [
{
// Path to the data property for this columnname: 'name',
title: 'Full name',
type: 'text',
width: '200px',
},
{
// Path to the data property for this columnname: 'address.number',
title: 'Number',
type: 'text',
width: '200px',
},
{
// Path to the data property for this columnname: 'address.city',
title: 'City',
type: 'text',
width: '300px',
}
];
// Render data grid componentreturn (
<><Spreadsheetref={spreadsheet}license={license}><Worksheetdata={data}columns={columns} /></Spreadsheet><divref={console}></div><inputtype='button'onClick={() => console.current.innerText = JSON.stringify(data)} />
</>
);
}
<template><Spreadsheetref="spreadsheet":license="license"><Worksheet:data="data":columns="data" /></Spreadsheet><divref="log"></div><inputtype='button' @click="get" /></template><script>import { ref } from'vue';
import { Spreadsheet, Worksheet } from"@jspreadsheet/vue";
const license = 'ZjE4OTFmNzY1MTJkNTZhNTJlYjVkNzU1ZmE2MWFiOTI2ODc4MjdkYzUxYzk3OTFjNzFhNjgzYzNjNjhlZjg0ODI1ZjhjOGMyNDNmZTBjZjZjMzU0NTNhMmE4MjNlNDRhMWZmNmQyMmVkOGNmMzc2YTEwNTM4ZmE5NzIzMTkwNjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EZ3pNVFF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
// Dataconst data = [
{
name: 'Jorge',
address: {
number: '201',
city: 'New York'
}
},
{
name: 'Paul',
address: {
number: '1',
city: 'New Jersey'
}
}
];
exportdefault {
components: {
Spreadsheet,
Worksheet,
},
methods: {
get() {
this.$refs.log.value.innerText = JSON.stringify(data)
}
},
data() {
// Columnsconst columns = [
{
// Path to the data property for this columnname: 'name',
title: 'Full name',
type: 'text',
width: '200px',
},
{
// Path to the data property for this columnname: 'address.number',
title: 'Number',
type: 'text',
width: '200px',
},
{
// Path to the data property for this columnname: 'address.city',
title: 'City',
type: 'text',
width: '300px',
}
];
return {
data,
options,
license,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from"@angular/core";
import jspreadsheet from"jspreadsheet";
import"jspreadsheet/dist/jspreadsheet.css"import"jsuites/dist/jsuites.css"// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZjE4OTFmNzY1MTJkNTZhNTJlYjVkNzU1ZmE2MWFiOTI2ODc4MjdkYzUxYzk3OTFjNzFhNjgzYzNjNjhlZjg0ODI1ZjhjOGMyNDNmZTBjZjZjMzU0NTNhMmE4MjNlNDRhMWZmNmQyMmVkOGNmMzc2YTEwNTM4ZmE5NzIzMTkwNjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EZ3pNVFF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Dataconst data = [
{
name: 'Jorge',
address: {
number: '201',
city: 'New York'
}
},
{
name: 'Paul',
address: {
number: '1',
city: 'New Jersey'
}
},
];
// Create component@Component({
selector: "app-root",
template: `<div #spreadsheet></div>
<div #log></div>
<input type='button' (click)="get()" />`,
})
exportclassAppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
@ViewChild("log") log: ElementRef;
// Worksheetsworksheets: jspreadsheet.worksheetInstance[];
// Create a new data gridngAfterViewInit() {
// Create spreadsheetthis.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
// Data pass as a referencedata: data,
columns: [{
// Path to the data property for this columnname: 'name',
title: 'Full name',
type: 'text',
width: '200px',
},
{
// Path to the data property for this columnname: 'address.number',
title: 'Number',
type: 'text',
width: '200px',
},
{
// Path to the data property for this columnname: 'address.city',
title: 'City',
type: 'text',
width: '300px',
}]
}]
});
},
get() {
this.log.nativeElement.innerText = JSON.stringify(data);
}
}
Advanced loading
Advanced loading allows for additional options to be specified during data loading, such as:
The ability to assign unique IDs to each row;
To selectively load only a portion of the data (e.g. loading only rows 10, 11, and 12).
// Loading partial data means, all non-specified rows would be set as blank.
table.setData([
{ id: 1000, row: 10, data:[1,2,3] },
{ id: 2000, row: 11, data:[4,5,6] },
{ id: 2001, row: 12, data:[7,8,9] },
]);
Documentation
Methods
Methods to help the data management on your grid or spreadsheet.
Method
Description
Read methods
getValue
Get the value of a cell name. @param {string} cellName - The string to represent a cell name, for example A1, B1... @param {boolean} Get the raw data (false). Get the processed data (true) getValue(cellName: String, processed: Boolean) => any
getValueFromCoords
Get the value of a cell from its coordinates. getValueFromCoords(x: Number, y: Number, processed: Boolean) => any
getData
Extract the data from the spreadsheet. @param {boolean} Get the data from the highlighted cells only. @param {boolean} Get the raw data (false). Get the processed data (true). @param {string} Delimiter for exporting. Default \t getData(highlighted?: Boolean, processed?: Boolean, delimiter?: String, asJson?: Boolean) => []]
getDataFromRange
Get the data from a Excel like string range. getDataFromRange(range: String, processed: Boolean) => []]
getRowData
Get the data from one row by its number starting on zero. getRowData(rowNumber: Number, processed: Boolean) => []]
getColumnData
Get the data from one column by its number starting on zero. getColumnData(colNumber: Number, processed: Boolean) => []
Write methods
setValue
Set the value of a cell or multiple cells. @param {string|object[]} cellName - The string to represent a cell name, such as A1,B1, etc. @param {value?} - The cell new value @param {boolean?} - Force update values on read-only cells. setValue(cellName: String|object[], value: String|Number, force: Boolean) => void
setValueFromCoords
Set the value of a cell from its coordinates setValueFromCoords(x: Number, y: Number, value: String|Number, force: Boolean) => void
setData
Update the data from the data JavaScript data grid. setData(data: [[]]) => void
loadData
Reset the data from the JavaScript data grid and do not call any events. loadData(data: [[]]) => void
setRowData
Set the data for one row by its number starting on zero. @param {number} row number. @param {number[]|string[]} The new data. @param {boolean} Force update on readonly cells. setRowData(rowNumber: Number, data: [], force: Boolean) => void
setColumnData
Set the data for one column by its number starting on zero. @param {number} column number. @param {number[]|string[]} The new data. @param {boolean} Force update on readonly cells. setColumnData(columnNumber: Number, data: [], force: Boolean) => void
Operation methods
download
Download the data from a worksheet in a CSV format. @param {boolean} Include the headers @param {boolean} Returns the raw data when false or Returns the processed data and formulas when true. download(includeHeaders: Boolean, processed: Boolean) => void
copy
Copy the selected cells @param {boolean} Clear the data before pasting. copy(cut: Boolean) => void
paste
Paste the data to the current cursor position paste(x: Number, y: Number, data: String|String[[]]) => void
Events
Events related to operations with the spreadsheet data.
Event
Description
onbeforechange
onbeforechange(worksheet: Object, cell: DOMElement, x: Number, y: Number, value: Value) => void Before changing the cell value. This can be used to intercept, change or cancel the user action.
onchange
onchange(worksheet: Object, cell:DOMElement, x: Number, y: Number, newValue: Any, oldValue: Any) After a new value is updated.
onafterchanges
onafterchanges(worksheet: Object, records: Array) An array of cells affected.
oncopy
oncopy(worksheet: Object, highlighted: Boolean, str: String, cut: boolean) The data copied to the clipboard.
onbeforepaste (Updated)
onbeforepaste(worksheet: Object, data: Array, x: Number, y: Number, properties: Object[]) This happens before pasting the data in the spreadsheet, can be used to intercept, change or cancel the user action.
onpaste
onpaste(worksheet: Object, records: []) After the paste action.
Initial Settings
Settings can be used during the data grid initialization.
import { Component, ViewChild, ElementRef } from"@angular/core";
import jspreadsheet from"jspreadsheet";
import"jspreadsheet/dist/jspreadsheet.css"import"jsuites/dist/jsuites.css"// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZjE4OTFmNzY1MTJkNTZhNTJlYjVkNzU1ZmE2MWFiOTI2ODc4MjdkYzUxYzk3OTFjNzFhNjgzYzNjNjhlZjg0ODI1ZjhjOGMyNDNmZTBjZjZjMzU0NTNhMmE4MjNlNDRhMWZmNmQyMmVkOGNmMzc2YTEwNTM4ZmE5NzIzMTkwNjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EZ3pNVFF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Create component@Component({
selector: "app-root",
template: `<div #spreadsheet></div>
<input type='button' value='Update multiple cells' (click)="update()" />`,
})
exportclassAppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheetsworksheets: jspreadsheet.worksheetInstance[];
// Create a new data gridngAfterViewInit() {
// Create spreadsheetthis.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
minDimensions: [10,10],
}]
});
}
update() {
let records = [
{
x: 0,
y: 0,
value: 'update A1',
},
{
x: 10,
y: 10,
value: 'Another cell',
},
// (...)
];
this.worksheets[0].setValue(records);
}
}
Extensions
Depending on the version of XLSX and the operations included in the file, this extension may be subject to limitations or produce differences in the final render. We are continually working to improve our product, so if you encounter any such limitations, please don't hesitate to contact us at contact@jspreadsheet.com for assistance.
Create from a XSLX file
This feature requires an extension that is part of the Premium and Enterprise license.
<divid="spreadsheet"></div><script>
jspreadsheet.setLicense('ZjE4OTFmNzY1MTJkNTZhNTJlYjVkNzU1ZmE2MWFiOTI2ODc4MjdkYzUxYzk3OTFjNzFhNjgzYzNjNjhlZjg0ODI1ZjhjOGMyNDNmZTBjZjZjMzU0NTNhMmE4MjNlNDRhMWZmNmQyMmVkOGNmMzc2YTEwNTM4ZmE5NzIzMTkwNjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EZ3pNVFF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Bind the XSLX parser to your JSS distribution
jspreadsheet.setExtensions({ parser });
// Create spreadsheet from the XLSX
jspreadsheet.parser({
url: '/tests/Samples/sample.xlsx',
onload: function(config) {
// Create the spreadsheetjspreadsheet(document.getElementById('spreadsheet'), config);
},
});
</script>