This section is dedicated to the methods, events and settings related to data loading and data management withing the JSS data grids.
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;
Data 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.
Binding
Sort smallest to largest
Sort largest to smallest
Full name
Number
City
1
Jorge
201
New York
2
Paul
1
New Jersey
<html><scriptsrc="https://jspreadsheet.com/v11/jspreadsheet.js"></script><scriptsrc="https://jsuites.net/v5/jsuites.js"></script><linkrel="stylesheet"href="https://jspreadsheet.com/v11/jspreadsheet.css"type="text/css" /><linkrel="stylesheet"href="https://jsuites.net/v5/jsuites.css"type="text/css" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Material+Icons" /><divid='spreadsheet'></div><p><inputtype='button'id='btn1'value='console.log on data'/></p><preid='log'></pre><script>// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NjZkMTNlMjAyMTMwYmMwMWIzMzVjNDk0ZjI2YjkyYTczZWMwNTU5ZTdkNzUwNWFlOTA3NzlhNWVjZDQ5Mjg2NzgwMWE2Mjk2ZTBmOGNiMjc5YWE0YmM5MmJkN2I2NTlhZmVhOTlmYTM3ZTAzNzFhMDI3ODk4ODFlY2U3NjQ1MTksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpReU9UZzJNekUxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
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,
worksheetName: 'Binding',
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('btn1').onclick = function () { document.getElementById('log').innerHTML = JSON.stringify(data) }
</script></html>
importReact, { useRef } from"react";
import { Spreadsheet, Worksheet } from"@jspreadsheet/react";
import"jsuites/dist/jsuites.css";
import"jspreadsheet/dist/jspreadsheet.css";
const license = 'NjZkMTNlMjAyMTMwYmMwMWIzMzVjNDk0ZjI2YjkyYTczZWMwNTU5ZTdkNzUwNWFlOTA3NzlhNWVjZDQ5Mjg2NzgwMWE2Mjk2ZTBmOGNiMjc5YWE0YmM5MmJkN2I2NTlhZmVhOTlmYTM3ZTAzNzFhMDI3ODk4ODFlY2U3NjQ1MTksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpReU9UZzJNekUxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
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";
import"jsuites/dist/jsuites.css";
import"jspreadsheet/dist/jspreadsheet.css";
const license = 'NjZkMTNlMjAyMTMwYmMwMWIzMzVjNDk0ZjI2YjkyYTczZWMwNTU5ZTdkNzUwNWFlOTA3NzlhNWVjZDQ5Mjg2NzgwMWE2Mjk2ZTBmOGNiMjc5YWE0YmM5MmJkN2I2NTlhZmVhOTlmYTM3ZTAzNzFhMDI3ODk4ODFlY2U3NjQ1MTksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpReU9UZzJNekUxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
// 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('NjZkMTNlMjAyMTMwYmMwMWIzMzVjNDk0ZjI2YjkyYTczZWMwNTU5ZTdkNzUwNWFlOTA3NzlhNWVjZDQ5Mjg2NzgwMWE2Mjk2ZTBmOGNiMjc5YWE0YmM5MmJkN2I2NTlhZmVhOTlmYTM3ZTAzNzFhMDI3ODk4ODFlY2U3NjQ1MTksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpReU9UZzJNekUxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Dataconst data = [
{
name: 'Jorge',
address: {
number: '201',
city: 'New York'
}
},
{
name: 'Paul',
address: {
number: '1',
city: 'New Jersey'
}
},
];
// Create component@Component({
standalone: true,
selector: "app-root",
template: `<div #spreadsheet></div>
<div #log></div>
<input type='button' value="log on data" (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.
Read Methods
Method
Description
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, raw: Boolean) => any
getData
Extract the data from the spreadsheet. @param {boolean|number[]} 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|Number[], processed?: Boolean, delimiter?: String, asJson?: Boolean, includeFilteredRows?: 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) => []
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
Write Methods
Method
Description
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 @param {number} x - cell coordinate @param {number} y - cell coordinate @param {value?} - The cell new value @param {boolean?} - Force update values on read-only cells. 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: [[]], adjustDimensions?: Boolean) => 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
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, origin: String) An array of cells affected. Origin: 'paste', 'fill-handle', undefined for anything else.
Initial Settings
Settings can be used during the data grid initialization.
Property
Description
data: Array | Object
Define the new data from a local JSON or array.
url: String
Load the data from an external file.
csv: String
Load the data from an external CSV file.
csvHeaders: Boolean
The first row of the CSV file is the headers
csvDelimiter: String
CSV divisor. Default: ','
autoNames: Boolean
Automatically detects column names from the data object when column names are not explicitly declared. Default: true.
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('NjZkMTNlMjAyMTMwYmMwMWIzMzVjNDk0ZjI2YjkyYTczZWMwNTU5ZTdkNzUwNWFlOTA3NzlhNWVjZDQ5Mjg2NzgwMWE2Mjk2ZTBmOGNiMjc5YWE0YmM5MmJkN2I2NTlhZmVhOTlmYTM3ZTAzNzFhMDI3ODk4ODFlY2U3NjQ1MTksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpReU9UZzJNekUxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// 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 XLSX file
This feature requires an extension that is part of the Premium and Enterprise license.
<divid="spreadsheet"></div><script>
jspreadsheet.setLicense('NjZkMTNlMjAyMTMwYmMwMWIzMzVjNDk0ZjI2YjkyYTczZWMwNTU5ZTdkNzUwNWFlOTA3NzlhNWVjZDQ5Mjg2NzgwMWE2Mjk2ZTBmOGNiMjc5YWE0YmM5MmJkN2I2NTlhZmVhOTlmYTM3ZTAzNzFhMDI3ODk4ODFlY2U3NjQ1MTksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpReU9UZzJNekUxTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Bind the XLSX parser to your JSS distribution
jspreadsheet.setExtensions({ parser });
// Spreadsheet containerlet spreadsheet = document.getElementById('spreadsheet')
// Create spreadsheet from the XLSX
jspreadsheet.parser({
url: '/jspreadsheet/list.xlsx',
onload: function(config) {
config.namespace = 'test-parser';
// Create the spreadsheetjspreadsheet(spreadsheet, config);
},
});
</script>