Config
The configuration holds various properties to control the behavior of the spreadsheet and the worksheets. There are two objects, one config for the spreadsheet and one config for each of the worksheets.
Documentation
Methods
The following methods perform operations for the config programmatically.
Method | Description |
---|---|
getConfig | Get the configuration of one worksheet.getConfig() => Object |
setConfig | Set the configuration for the worksheetsetConfig(options: Object) => void |
Spreadsheet config
One object is available for the spreadsheet level and holds all shared or global properties.
Property | Description |
---|---|
application?: string; | Your application name |
cloud?: string; | Render a remote spreadsheet from Jspreadsheet Cloud, which is a serveless hosting service. That can be generate at https://jspreadsheet.com/cloud |
root?: HTMLElement; | DOM element for binding the javascript events. This property is normally used when JSS is running as a web component. |
definedNames?: Record<string, string>, | Global defined names. It defines global range variables. |
sorting?: (direction: boolean, column: number) => number; | Global sorting handler. |
server?: string; | Remote URL for the persistence server |
toolbar?: boolean | 'extended' | Toolbar | Function; | Enable the toolbars |
editable?: boolean; | Allow table edition |
allowExport?: boolean; | Allow data export |
includeHeadersOnDownload?: boolean; | Include the table headers in the first row of the data |
forceUpdateOnPaste?: boolean; | Force update on paste for read-only cells |
loadingSpin?: boolean; | Enable loading spin when loading data. Default: false. |
fullscreen?: boolean; | Render jspreadsheet spreadsheet on full screen mode. Default: false |
secureFormulas?: boolean; | Make sure the formulas are capital letter. Default: true |
debugFormulas?: boolean, | Enable formula debug. Default: false |
parseFormulas?: boolean; | Execute formulas. Default: true |
editorFormulas?: boolean; | Disable the formula editor. Default: true |
autoIncrement?: boolean; | Auto increment cell data when using the corner copy, including formulas, numbers and dates. Default: true |
autoCasting?: boolean; | Try to cast numbers from cell values when executing formulas. Default: true |
stripHTML?: boolean; | Remove any HTML from the data and headers. Default: true |
tabs?: boolean | Tabs; | Allow tabs. Default: false |
allowDeleteWorksheet?: boolean; | Allow the user to delete worksheets. Default: true |
allowRenameWorksheet?: boolean; | Allow the user to rename worksheets. Default: true |
allowMoveWorksheet?: boolean; | Allow the user to drag and drop the worksheets. Default: true |
moveDownOnEnter?: boolean; | Move the cursor down when pressing enter during edition. Default: true |
contextMenu?: Contextmenu; | Return false to cancel the contextMenu event, or return custom elements for the contextmenu. |
parseTableFirstRowAsHeader?: boolean; | The first row is the header titles when parsing a HTML table |
parseTableAutoCellType?: boolean; | Try to identify a column type when parsing a HTML table |
wordWrap?: boolean; | Global cell wrapping. Default: false |
about?: string | Function, | About information |
license?: string, | License string |
worksheets?: Array<Worksheet>; | Worksheets |
validations?: any; | Validations |
Worksheet options
There is one configuration for each worksheet.
Property | Description |
---|---|
logo?: string | Logo URL |
url?: string; | Load the data from an external server URL |
persistence?: string | boolean; | Persistence URL or true when the URL is the same of the URL of the data source |
sequence?: boolean; | Allow internal sequence for new rows |
data?: Array<Array |
Load the data into a new spreadsheet from an array of rows or objects |
json?: Array<Record<string, any>>; | Deprecated. Please use the data property. |
rows?: Row[]; | Array with the rows properties definitions such as title, height. |
columns?: Array<Column>; | The column properties define the behavior of a column and the associated editor |
cells?: Record<string, Column>; | Define the properties of a cell. This property overwrite the column definitions |
role?: string, | Role of this worksheet |
nestedHeaders?: Array<Array<Nested>> | Array<Nested>; | Nested headers definition |
defaultColWidth?: number | string; | Default column width. Default: 50px |
defaultRowHeight?: number | string; | Default row height. Default: null |
defaultColAlign?: 'center' | 'left' | 'right' | 'justify'; | Deprecated. The default alignment of a cell is defined by a CSS class from 8.2.0+ |
minSpareRows?: number; | Minimum number of spare rows. Default: 0 |
minSpareCols?: number; | Minimum number of spare cols. Default: 0 |
minDimensions?: [number, number]; | Minimum table dimensions: [numberOfColumns, numberOfRows] |
csv?: string; | CSV data source URL |
csvFileName?: string; | CSV default filename for the jspreadsheet exports. Default: 'jspreadsheet' |
csvHeaders?: boolean; | Consider first line as header. Default: true |
csvDelimiter?: string; | Delimiter to consider when dealing with the CSV data. Default: ',' |
columnSorting?: boolean; | Allow column sorting |
columnDrag?: boolean; | Allow column dragging |
columnResize?: boolean; | Allow column resizing |
rowResize?: boolean; | Allow row resizing |
rowDrag?: boolean; | Allow row dragging |
editable?: boolean; | Allow table edition |
allowInsertRow?: boolean; | Allow new rows |
allowManualInsertRow?: boolean; | Allow new rows to be added using tab key. Default: true |
allowInsertColumn?: boolean; | Allow new columns to be added using enter key. Default: true |
allowManualInsertColumn?: boolean; | Allow new rows to be added via script. Default: true |
allowDeleteRow?: boolean; | Allow rows to be deleted. Default: true |
allowDeletingAllRows?: boolean; | Allow all rows to be deleted. Warning: no rows left can lead to undesirabled behavior. Default: false |
allowDeleteColumn?: boolean; | Allow columns to be deleted. Default: true |
allowRenameColumn?: boolean; | Allow rename column. Default: true |
allowComments?: boolean; | Allow users to add comments to the cells. Default: false |
selectionCopy?: boolean; | Corner selection and corner data cloning. Default: true |
mergeCells?: Record<string, any[]>; | Merged cells. Default: null |
search?: boolean; | Allow search on the spreadsheet |
pagination?: number; | Activate pagination and defines the number of records per page. Default: false |
paginationOptions?: boolean | Array |
Dropdown for the user to change the number of records per page. Example: [10,25,50,100]. Default: false |
textOverflow?: boolean; | Text Overflow. Default: false |
tableOverflow?: boolean; | Table overflow. Default: false |
tableHeight?: number | string; | Define the table overflow height. Example: '300px' |
tableWidth?: number | string; | Define the table overflow width. Example: '800px' |
comments?: Record<string, string>; | Initial comments. Default: null |
meta?: Record<string, any>; | Initial meta information. Default: null |
style?: Record<string, string>; | Style |
freezeColumns?: number; | Freeze columns. Default: 0 |
orderBy?: [number, boolean]; | Initial sorting [colNumber, direction]. Default: null |
worksheetId?: string; | Worksheet Unique Id. |
worksheetName?: string; | Worksheet Name. |
worksheetState?: 'hidden' | undefined; | Worksheet state: hidden | null. Hide a worksheet |
filters?: boolean; | Enable the column filters |
footers?: Array |
Footers |
applyMaskOnFooters?: boolean; | Apply mask on footers |
pluginOptions?: Record<string, any>; | Define options for the plugins. Each key should be the pluginName. |
locked?: boolean; | This is a internal controller for the spreadsheet locked properties. Please use editable to make it readonly. |
selectUnLockedCells?: boolean; | Allow the selection of unlocked cells. Default: true. |
selectLockedCells?: boolean; | Allow the selection of locked cells. Default: true. |
resize?: 'horizontal' | 'vertical' | 'both' | 'none' | undefined; | Enable resizable worksheet in on or both direction (horizontal | vertical | both). Default: none |
Examples
Data grid manual persistence
The example below shows how to get the configuration of the data grid and create that later
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/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" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<div id="spreadsheet-clone"></div><br>
<textarea id="console" style="width: 600px; height: 100px;"></textarea><br>
<input type="button" value="Clone the data grid above" class="button main" id="clonebtn" />
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YjY1NmZlMWNjNWFiNjEzZGU0NWQ1YmM1NzMwOTMzNDQyOTE3YWQ5NDViYWIyNDAwNzg4NWFlZjZmNjVjYjAyMmU0Y2NiOTVmZjIyMDdlY2I1YmE5Mzc2NTIwMTdkZTc3ZWFhY2NmNjRjM2M0NmMwZjNmMGJmMDZkYzE3NjM0Y2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNd09EYzJNREUyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
const clone = function() {
// Get the data grid configuration
let config = grid[0].parent.getConfig();
// Show on the textarea
document.getElementById('console').value = JSON.stringify(config);
// Destroy any existing spreadsheet
jspreadsheet.destroy(document.getElementById('spreadsheet-clone'));
// Create a new spreadsheet
jspreadsheet(document.getElementById('spreadsheet-clone'), config);
}
// Create the JavaScript sample data grid
let grid = jspreadsheet(document.getElementById('spreadsheet'), {
tabs: true,
toolbar: true,
worksheets: [{
data: [[1,2,3]],
minDimensions: [8, 8],
}],
});
document.getElementById('clonebtn').onclick = clone
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YjY1NmZlMWNjNWFiNjEzZGU0NWQ1YmM1NzMwOTMzNDQyOTE3YWQ5NDViYWIyNDAwNzg4NWFlZjZmNjVjYjAyMmU0Y2NiOTVmZjIyMDdlY2I1YmE5Mzc2NTIwMTdkZTc3ZWFhY2NmNjRjM2M0NmMwZjNmMGJmMDZkYzE3NjM0Y2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNd09EYzJNREUyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
const console = useRef();
const copy = useRef();
// Method to clone the data grid
const clone = function() {
// Get the data grid configuration
let config = spreadsheet.current[0].parent.getConfig();
// Show on the textarea
console.current.value = JSON.stringify(config);
// Destroy any existing spreadsheet
jspreadsheet.destroy(copy.current);
// Create a new spreadsheet
jspreadsheet(copy.current, config);
}
return (
<>
<Spreadsheet ref={spreadsheet} license={license} tabs toolbar>
<Worksheet data={[[1,2,3]]} minDimensions={[8,8]} />
</Spreadsheet>
<div ref={copy}></div><br>
<textarea ref={console}></textarea><br>
<input type="button" value="Clone the data grid above" onClick={() => clone()} />
</>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license" tabs toolbar>
<Worksheet :data="[[1,2,3]]" :minDimensions="[8,8]" />
</Spreadsheet>
<div ref="copy"></div><br />
<textarea ref="console"></textarea><br />
<button @click="clone">Clone the data grid above</button>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'YjY1NmZlMWNjNWFiNjEzZGU0NWQ1YmM1NzMwOTMzNDQyOTE3YWQ5NDViYWIyNDAwNzg4NWFlZjZmNjVjYjAyMmU0Y2NiOTVmZjIyMDdlY2I1YmE5Mzc2NTIwMTdkZTc3ZWFhY2NmNjRjM2M0NmMwZjNmMGJmMDZkYzE3NjM0Y2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNd09EYzJNREUyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
setup() {
const console = ref(null);
const copy = ref(null);
// Method to clone the data grid
const clone = function () {
// Get the data grid configuration
let config = spreadsheet.value.current[0].parent.getConfig();
// Show on the textarea
console.value.value = JSON.stringify(config);
// Destroy any existing spreadsheet
jspreadsheet.destroy(clone.value);
// Create a new spreadsheet
jspreadsheet(clone.value, config);
};
return {
console,
copy,
license,
clone,
};
}
}
</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('YjY1NmZlMWNjNWFiNjEzZGU0NWQ1YmM1NzMwOTMzNDQyOTE3YWQ5NDViYWIyNDAwNzg4NWFlZjZmNjVjYjAyMmU0Y2NiOTVmZjIyMDdlY2I1YmE5Mzc2NTIwMTdkZTc3ZWFhY2NmNjRjM2M0NmMwZjNmMGJmMDZkYzE3NjM0Y2IsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNd09EYzJNREUyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Create component
@Component({
selector: "app-root",
template: `
<div #spreadsheet></div>
<div #copy></div><br>
<textarea #console></textarea><br>
<input type="button" value="Clone the data grid above" (click)="this.clone()" />
`,
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
@ViewChild("console") console: ElementRef;
@ViewChild("copy") copy: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngAfterViewInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
minDimensions: [4,4],
}],
contextmenu: function() {
return false;
}
});
}
// Clone the data grid
clone() {
// Get the data grid configuration
let config = this.worksheets[0].parent.getConfig();
// Show on the textarea
this.console.nativeElement.value = JSON.stringify(config);
// Destroy any existing spreadsheet
jspreadsheet.destroy(this.copy.nativeElement);
// Create a new spreadsheet
jspreadsheet(this.copy.nativeElement, config);
}
}