Quick reference
JSS Spreadsheet @types definitions
interface Tabs {
/** Allow to create new tabs */
allowCreate?: boolean;
/** Hide headers */
hideHeaders?: boolean;
/** Allow drag and drop to change tabs position */
allowChangePosition?: boolean;
}
interface Toolbar {
/** Array of items for the toolbar */
items: Array<ToolbarItem>;
/** Responsive toolbar. Default: true. */
responsive?: boolean;
}
interface ToolbarItem {
/** Toolbar item type */
type?: 'icon' | 'divisor' | 'label' | 'select';
/** Content of the toolbar element */
content?: string;
/** Tooltip for the toolbar element */
tooltip?: string;
/** Toolbar element width */
width?: number;
/** The initial selected option for the type: select */
value?: string;
/** Render method parser for the elements in the dropdown when type: select */
render?: Function;
/** When a item is clicked */
onclick?: Function;
/** For the type select when a new item is selected */
onchange?: Function;
/** To update the state of this item **/
updateState?: Function;
}
interface Dropdown {
/** Render type: default | picker | searchbar */
type?: 'default' | 'picker' | 'searchbar';
/** Dropdown input placeholder */
placeholder?: string;
/** The user can add new options to the dropdown. */
newOptions?: boolean;
/** Enabled the remote search features. */
remoteSearch?: boolean;
/** Remote backend to respond to the search. */
url?: string;
/** When the user add a new item to the dropdown. */
oninsert?: Function;
}
interface DropdownItem {
/** Value of the selected item. */
id?: string | number;
/** Label for the selected item. */
name?: string;
/** Description of the item */
title?: string;
/** Icon of the item */
image?: string;
/** Name of the group where the item belongs to */
group?: string;
/** Keywords to help finding one item */
synonym?: Array<string>;
/** Item is disabled */
disabled?: boolean;
/** Color for the item */
color?: string;
}
interface ContextmenuItem {
/** Context menu item type: line | divisor | default */
type?: 'line' | 'divisor' | 'default';
/** Context menu item title */
title: string;
/** Context menu icon key. (Material icon key icon identification) */
icon?: string;
/** HTML id property of the item DOM element */
id?: string;
/** Item is disabled */
disabled?: boolean;
/** Onclick event for the contextmenu item */
onclick?: (instance: object, e: MouseEvent) => void;
/** A short description or instruction for the item. Normally a shortcut. Ex. CTRL + C */
shortcut?: string;
/** Show this text when the user mouse over the element */
tooltip?: string;
/** Subm menu */
submenu?: Array<ContextmenuItem>;
}
interface Contextmenu {
/** The contextmenu menu */
(worksheet: worksheetInstance, x: number, y: number, e: MouseEvent, items: Array<ContextmenuItem>, section: string, section_argument1?: any, section_argument2?: any) : Array<ContextmenuItem> | boolean;
}
interface Calendar {
/** Render type. Default: 'default' */
type?: 'default' | 'year-month-picker';
/** Disable the dates out of the defined range. */
validRange?: Array<number>;
/** The calendar starts in a day of week (0 for Sunday - 6 for Saturday). Default: 0 (Sunday) */
format?: string;
/** Calendar input is readonly */
readonly?: boolean;
/** Select today automatically when no date value is defined. */
today?: boolean;
/** Show hour and minute dropdown. */
time?: boolean;
/** Show reset button. Default: true */
resetButton?: boolean;
/** Calendar input placeholder. */
placeholder?: string;
}
interface Column {
/** Define the column type. Can be a string to define a native editor, or a method to define the custom editor plugin. */
type?: Editor | 'autocomplete' | 'calendar' | 'checkbox' | 'color' | 'dropdown' | 'hidden' | 'html' | 'image' | 'numeric' | 'radio' | 'text';
/** Column title */
title?: string;
/** Name or a path of a property when the data is a JSON object. */
name?: string;
/** Define the onmouseover tooltip for the column header. */
tooltip?: string;
/** Width of the column */
width?: number;
/** Visibility of a column */
visible?: boolean,
/** Column alignment. Default: center */
align?: 'center' | 'left' | 'right' | 'justify';
/** It is a method to overwrite the column definitions in real-time just before the column edition. */
filterOptions?: Function;
/** Load the items from the dropdown from a remote URL. */
url?: string;
/** Define the items in the dropdown and autocomplete column type. */
source?: Array<DropdownItem> | Array<string> | Array<number>;
/** Autocomplete: boolean */
autocomplete?: boolean;
/** Define the dropdown or autocomplete to accept multiple options. */
multiple?: boolean;
/** Define the dropdown separator for multiple dropdown options. Default ; */
delimiter?: string;
/** Define the input mask for the data cell. @see https://jsuites.net/v5/javascript-mask */
mask?: string;
/** Decimal representation character. */
decimal?: '.' | ',';
/** Truncate the string in the cell by any number of characters. */
truncate?: number,
/** Disable the mask when editing. */
disabledMaskOnEdition?: boolean;
/** It defines a renderer method or rule for the cell content. */
render?: string | Function;
/** Define the format of the date or numbers in the cell. Default for the calendar: DD/MM/YYYY */
format?: string;
/** Define the column as primaryKey. */
primaryKey?: boolean;
/** Extended configuration for one column. */
options?: Calendar | Dropdown;
/** The column is read-only */
readOnly?: boolean;
/** Process the raw data when copy or download. Default: true */
process?: boolean;
/** Try to cast numbers from a cell text. Default: true */
autoCasting?: boolean;
/** Shift formula when copy and pasting. This option is only valid for custom column type. Default: false */
shiftFormula?: boolean;
/** Wrap the text in the column */
wrap?: boolean;
/** Rotate text value between -90 and 90. Default: null */
rotate?: number;
/** CSS odd even background color. Default: false */
zebra?: boolean;
}
interface Row {
/** Row height in pixels. */
height?: number;
/** Row identification. */
title?: string;
}
interface Editor {
/** createCell When a new cell is created. */
createCell: (cell: HTMLElement, value: any, x: number, y: number, instance: object, options: object) => any;
/** updateCell When the cell value changes. */
updateCell: (cell: HTMLElement, value: any, x: number, y: number, instance: object, options: object) => any;
/** openEditor When the user starts the edition of a cell. */
openEditor: (cell: HTMLElement, value: any, x: number, y: number, instance: object, options: object) => any;
/** closeEditor When the user finalizes the edition of a cell. */
closeEditor: (cell: HTMLElement, confirmChanges: boolean, x: number, y: number, instance: object, options: object) => any;
/** When a cell is destroyed. */
destroyCell: (cell: HTMLElement, x: number, y: number, instance: object) => void;
/** Apply updates when the properties of a cell or column is changed. */
updateProperty: (x: number, y: number, instance: object, options: object) => void;
/** Transform the raw data into processed data. It will shown a text instead of an id in the type dropdown for example. */
get: (options: object, value: any) => String
}
interface Plugin {
/** When a new worksheet is added. */
beforeinit?: (worksheet: Object) => void;
/** When a new worksheet is added. */
init?: (worksheet: Object) => void;
/** It would receive a call for every spreadsheet event. */
onevent?: (event: String, a?: any, b?: any, c?: any, d?: any) => void;
/** When the spreadsheet needs to save something in the server. */
persistence?: (method: String, args: Object) => void;
/** When the user opens the context menu. */
contextMenu?: (instance: Object, x: number, y: number, e: MouseEvent, items:Array<ContextmenuItem> , section: String, a: any, b?: any) => void;
/** When the toolbar is create and clicked. */
toolbar?: (instance: Object, toolbar: Toolbar) => void;
}
interface Nested {
/** Nested header title */
title?: string;
/** Nested header tooltip */
tooltip?: string;
/** Nested header colspan */
colspan?: number;
}
interface Spreadsheet {
/** Your application name */
application?: string;
/** Render a remote spreadsheet from Jspreadsheet Cloud, which is a serveless hosting service. That can be generate at https://jspreadsheet.com/cloud */
cloud?: string;
/** DOM element for binding the javascript events. This property is normally used when JSS is running as a web component. */
root?: HTMLElement;
/** Global defined names. It defines global range variables. **/
definedNames?: Record<string, string>,
/** Global sorting handler. **/
sorting?: (direction: boolean, column: number) => number;
/** Remote URL for the persistence server **/
server?: string;
/** Toolbar */
toolbar?: boolean | Toolbar | Function;
/** Allow table edition */
editable?: boolean;
/** Allow data export */
allowExport?: boolean;
/** Include the table headers in the first row of the data */
includeHeadersOnDownload?: boolean;
/** Force update on paste for read-only cells */
forceUpdateOnPaste?: boolean;
/** Enable loading spin when loading data. Default: false. */
loadingSpin?: boolean;
/** Render jspreadsheet spreadsheet on full screen mode. Default: false */
fullscreen?: boolean;
/** Make sure the formulas are capital letter. Default: true */
secureFormulas?: boolean;
/** Enable formula debug. Default: false **/
debugFormulas?: boolean,
/** Execute formulas. Default: true */
parseFormulas?: boolean;
/** Disable the formula editor. Default: true **/
editorFormulas?: boolean;
/** Auto increment cell data when using the corner copy, including formulas, numbers and dates. Default: true */
autoIncrement?: boolean;
/** Try to cast numbers from cell values when executing formulas. Default: true */
autoCasting?: boolean;
/** Remove any HTML from the data and headers. Default: true */
stripHTML?: boolean;
/** Allow tabs. Default: false */
tabs?: boolean | Tabs;
/** Allow the user to delete worksheets. Default: true */
allowDeleteWorksheet?: boolean;
/** Allow the user to rename worksheets. Default: true */
allowRenameWorksheet?: boolean;
/** Allow the user to drag and drop the worksheets. Default: true */
allowMoveWorksheet?: boolean;
/** Move the cursor down when pressing enter during edition. Default: true */
moveDownOnEnter?: boolean;
/** This method is called when the data in the spreadsheet is ready. */
onload?: (spreadsheet: spreadsheetInstance) => void;
/** Spreadsheet is clicked **/
onclick?: (worksheet: worksheetInstance, section: string, x: number, y: number, event: object) => void;
/** When undo is applied */
onundo?: (worksheet: worksheetInstance, historyRecord: object) => void;
/** When redo is applied */
onredo?: (worksheet: worksheetInstance, historyRecord: object) => void;
/** Before any data is sent to the backend. Can be used to overwrite the data or to cancel the action when return false. */
onbeforesave?: (spreadsheet: spreadsheetInstance, worksheet: worksheetInstance, data: object) => boolean | object;
/** After something is saved */
onsave?: (spreadsheet: spreadsheetInstance, worksheet: worksheetInstance, data: Array<any>) => void;
/** Before a column value is changed. NOTE: It is possible to overwrite the original value, by return a new value on this method. */
onbeforechange?: (worksheet: worksheetInstance, cell: HTMLElement, x: number, y: number, value: any) => boolean | any;
/** After a column value is changed. */
onchange?: (worksheet: worksheetInstance, cell: HTMLElement, x: number, y: number, newValue: any, oldValue: any) => void;
/** Event: onafterchanges(jspreadsheetHTMLElement, jspreadsheetInstance) */
onafterchanges?: (worksheet: worksheetInstance, records: Array<any>) => void;
/** When a copy is performed in the spreadsheet. Any string returned will overwrite the user data or return null to progress with the default behavior. */
oncopy?: (worksheet: worksheetInstance, selectedCells: Array<number>, data: string) => boolean | string;
/** Before the paste action is performed. Can return parsed or filtered data. It is possible to cancel the action when the return is false. */
onbeforepaste?: (worksheet: worksheetInstance, data: Array<any>, x: number, y: number, style: []) => boolean | [];
/** After a paste action is performed in the spreadsheet. */
onpaste?: (worksheet: worksheetInstance, records: Array<any>) => void;
/** Before a new row is inserted. You can cancel the insert event by returning false. */
onbeforeinsertrow?: (worksheet: worksheetInstance, rowNumber: number, numOfRows: number, insertBefore: boolean) => boolean | void;
/** After a new row is inserted. */
oninsertrow?: (worksheet: worksheetInstance, rowNumber: number, numOfRows: number, rowData: [], insertBefore: boolean) => void;
/** Before a row is deleted. You can cancel the delete event by returning false. */
onbeforedeleterow?: (worksheet: worksheetInstance, rowNumber: number, numOfRows: number) => boolean | void;
/** After a row is excluded. */
ondeleterow?: (worksheet: worksheetInstance, rowNumber: number, numOfRows: number, rowHTMLElements: [], rowData: [], cellAttributes: []) => void;
/** Before a new column is inserted. You can cancel the insert event by returning false. */
onbeforeinsertcolumn?: (worksheet: worksheetInstance, columnNumber: number, numOfColumns: number, insertBefore: boolean) => boolean | void;
/** After a new column is inserted. */
oninsertcolumn?: (worksheet: worksheetInstance, columnNumber: number, numOfColumns: number, historyRecords: [], insertBefore: boolean) => void;
/** Before a column is excluded. You can cancel the insert event by returning false. */
onbeforedeletecolumn?: (worksheet: worksheetInstance, columnNumber: number, numOfColumns: number) => boolean | void;
/** After a column is excluded. */
ondeletecolumn?: (worksheet: worksheetInstance, columnNumber: number, numOfColumns: number, affectedHTMLElements: [], historyProperties: [], cellAttributes: []) => void;
/** After a row is moved to a new position. */
onmoverow?: (worksheet: worksheetInstance, origin: number, destination: number) => void;
/** After a column is moved to a new position. */
onmovecolumn?: (worksheet: worksheetInstance, origin: number, destination: number) => void;
/** After a height change for one or more rows. */
onresizerow?: (worksheet: worksheetInstance, row: number | Array<number>, height: number | Array<number>, oldHeight: number | Array<number>) => void;
/** After a column width change for one or more columns. */
onresizecolumn?: (worksheet: worksheetInstance, column: number | Array<number>, width: number | Array<number>, oldWidth: number | Array<number>) => void;
/** When the selection is changed. */
onselection?: (worksheet: worksheetInstance, px: number, py: number, ux: number, uy: number, origin?: object) => void;
/** Before a new comment is added or updated. Return false to cancel the event. */
onbeforecomments?: (worksheet: worksheetInstance, cells: object) => boolean | void;
/** After a new comment is added or updated. */
oncomments?: (worksheet: worksheetInstance, newValues: object, previousValues: object) => void;
/** It runs before sorting a column. It should return an array with a custom sorting or false to cancel the user action. */
onbeforesort?: (worksheet: worksheetInstance, column: number, direction: number, newOrderValues: []) => boolean | [] | void;
/** When a column is sorted. */
onsort?: (worksheet: worksheetInstance, column: number, direction: number, newOrderValues: []) => void;
/** When the spreadsheet gets the focus. */
onfocus?: (worksheet: worksheetInstance) => void;
/** When the spreadsheet loses the focus. */
onblur?: (worksheet: worksheetInstance) => void;
/** When merge cells is executed. */
onmerge?: (worksheet: worksheetInstance, newValue: object, oldValue: object) => void;
/** When the header title is changed. */
onchangeheader?: (worksheet: worksheetInstance, column: number, newValue: string, oldValue: string) => void;
/** When the footers are created or updated. */
onchangefooter?: (worksheet: worksheetInstance, newValue: string, oldValue: string) => void;
/** When the value in a cell footer is changed. */
onchangefootervalue?: (worksheet: worksheetInstance, x: number, y: number, value: String) => void;
/** On change nested headers */
onchangenested?: (worksheet: worksheetInstance, options: object) => void;
/** On change nested cell properties */
onchangenestedcell?: (worksheet: worksheetInstance, x: number, y: number, properties: object) => void;
/** When an editor is created. */
oncreateeditor?: (worksheet: worksheetInstance, cell: HTMLElement, x: number, y: number, element: HTMLElement, options: object) => void;
/** When the editor is opened. **/
oneditionstart?: (worksheet: worksheetInstance, cell: HTMLElement, x: number, y: number) => void;
/** When the editor is closed. **/
oneditionend?: (worksheet: worksheetInstance, cell: HTMLElement, x: number, y: number, newValue: any, save: boolean) => void;
/** When the style of a cell is changed. */
onchangestyle?: (worksheet: worksheetInstance, newValue: object, oldValue: object) => void;
/** When a cell meta information is added or updated. */
onchangemeta?: (worksheet: worksheetInstance, newValue: object) => void;
/** Before the page is changed. Can cancel the action when return is false. */
onbeforechangepage?: (worksheet: worksheetInstance, pageNumber: number, oldPage: number, quantityPerPage: number) => boolean | void;
/** When pagination is enabled and the user changes the page. */
onchangepage?: (worksheet: worksheetInstance, pageNumber: number, oldPageNumber: number, quantityPerPage: number) => void;
/** Add or change the options of a new worksheet. */
onbeforecreateworksheet?: (worksheetOptions: Worksheet, position: number) => Object;
/** When the user creates a new worksheet. */
oncreateworksheet?: (worksheet: worksheetInstance, worksheetOptions: Worksheet, position: number) => void;
/** When the user renames a worksheet. */
onrenameworksheet?: (worksheet: worksheetInstance, position: number, newValue: string, oldValue: string) => void;
/** When the user deletes a worksheet. */
ondeleteworksheet?: (worksheet: worksheetInstance, position: number) => void;
/** When the user updates the worksheet tab position. */
onmoveworksheet?: (worksheet: worksheetInstance, from: number, to: number) => void;
/** When the user opens a worksheet. */
onopenworksheet?: (worksheet: worksheetInstance, index: number) => void;
/** When there is a row id update */
onchangerowid?: (worksheet: worksheetInstance, rows: []) => void;
/** Action to be executed before searching. The accepted method return would be: null to continue with the default behavior, false to cancel the user action or an array with the row numbers to overwrite the default result. */
onbeforesearch?: (worksheet: worksheetInstance, query: string, results: []) => [] | boolean | void;
/** After the search is applied to the rows. */
onsearch?: (worksheet: worksheetInstance, query: string, results: []) => void;
/** Action to be executed before filtering rows. It can cancel the action by returning false. */
onbeforefilter?: (worksheet: worksheetInstance, filters: [], data: []) => void;
/** After the filter has been applied to the rows. */
onfilter?: (worksheet: worksheetInstance, filters: [], data: []) => void;
/** When a new cell is created */
oncreatecell?: (worksheet: worksheetInstance, cell: HTMLElement, x: number, y: number, value: any) => void;
/** When a new row is created */
oncreaterow?: (worksheet: worksheetInstance, rowNumber: number, tr: HTMLElement) => void;
/** When a new column is created */
oncreatecolumn?: (worksheet: worksheetInstance, columnNumber: number, td: HTMLElement, options: Object) => void;
/**
* Before execute a formula.
* @param {string} expression - formula to be executed.
* @param {number} coordinate x - cell coordinates
* @param {number} coordinate y
* @return {any} Return false to cancel parsing. Return new parsed formula. Return void to continue with original formula
*/
onbeforeformula?: (worksheet: worksheetInstance, expression: string, x: number, y: number) => string | false | void;
/** Get the information about the expressions executed from the formula chain */
onformulachain?: (worksheet: worksheetInstance, expressions: Array<object>) => void;
/** Customize the items available when filter editor is open. */
onopenfilter?: (worksheet: worksheetInstance, column: number, options: Array<object>) => void | Array<object>;
/** When the viewport dimension is updated. */
onresize?: (worksheet: worksheetInstance, w: number, h: number) => void
/** Run every single table update action. Can bring performance issues if perform too much changes. */
updateTable?: (worksheet: worksheetInstance, cell: Object, x: number, y: number, value: String) => void;
/** Return false to cancel the contextMenu event, or return custom elements for the contextmenu. */
contextMenu?: Contextmenu;
/** The first row is the header titles when parsing a HTML table */
parseTableFirstRowAsHeader?: boolean;
/** Try to identify a column type when parsing a HTML table */
parseTableAutoCellType?: boolean;
/** Global cell wrapping. Default: false */
wordWrap?: boolean;
/** About information */
about?: string | Function,
/** License string */
license?: string,
/** Worksheets */
worksheets?: Array<Worksheet>;
/** Validations */
validations?: any;
}
interface Worksheet {
/** Logo URL **/
logo?: string
/** Load the data from an external server URL */
url?: string;
/** Persitence URL or true when the URL is the same of the URL of the data source */
persistence?: string | boolean;
/** Allow internal sequence for new rows */
sequence?: boolean;
/** Load the data into a new spreadsheet from an array of rows or objects */
data?: Array<Array<any>> | Array<Record<string, any>>;
/** Deprected. Please use the data property. */
json?: Array<Record<string, any>>;
/** Array with the rows properties definitions such as title, height. */
rows?: Row[];
/** The column properties define the behavior of a column and the associated editor */
columns?: Array<Column>;
/** Define the properties of a cell. This property overwrite the column definitions */
cells?: Record<string, Column>;
/** Role of this worksheet **/
role?: string,
/** Nested headers definition */
nestedHeaders?: Array<Array<Nested>> | Array<Nested>;
/** Default column width. Default: 50px */
defaultColWidth?: number | string;
/** Default row height. Default: null */
defaultRowHeight?: number | string;
/** Deprecated. The default alignment of a cell is defined by a CSS class from 8.2.0+ */
defaultColAlign?: 'center' | 'left' | 'right' | 'justify';
/** Minimum number of spare rows. Default: 0 */
minSpareRows?: number;
/** Minimum number of spare cols. Default: 0 */
minSpareCols?: number;
/** Minimum table dimensions: [numberOfColumns, numberOfRows] */
minDimensions?: [number, number];
/** CSV data source URL */
csv?: string;
/** CSV default filename for the jspreadsheet exports. Default: 'jspreadsheet' */
csvFileName?: string;
/** Consider first line as header. Default: true */
csvHeaders?: boolean;
/** Delimiter to consider when dealing with the CSV data. Default: ',' */
csvDelimiter?: string;
/** Allow column sorting */
columnSorting?: boolean;
/** Allow column dragging */
columnDrag?: boolean;
/** Allow column resizing */
columnResize?: boolean;
/** Allow row resizing */
rowResize?: boolean;
/** Allow row dragging */
rowDrag?: boolean;
/** Allow table edition */
editable?: boolean;
/** Allow new rows */
allowInsertRow?: boolean;
/** Allow new rows to be added using tab key. Default: true */
allowManualInsertRow?: boolean;
/** Allow new columns to be added using enter key. Default: true */
allowInsertColumn?: boolean;
/** Allow new rows to be added via script. Default: true */
allowManualInsertColumn?: boolean;
/** Allow rows to be deleted. Default: true */
allowDeleteRow?: boolean;
/** Allow all rows to be deleted. Warning: no rows left can lead to undesirabled behavior. Default: false */
allowDeletingAllRows?: boolean;
/** Allow columns to be deleted. Default: true */
allowDeleteColumn?: boolean;
/** Allow rename column. Default: true */
allowRenameColumn?: boolean;
/** Allow users to add comments to the cells. Default: false */
allowComments?: boolean;
/** Corner selection and corner data cloning. Default: true */
selectionCopy?: boolean;
/** Merged cells. Default: null */
mergeCells?: Record<string, any[]>;
/** Allow search on the spreadsheet */
search?: boolean;
/** Activate pagination and defines the number of records per page. Default: false */
pagination?: number;
/** Dropdown for the user to change the number of records per page. Example: [10,25,50,100]. Default: false */
paginationOptions?: boolean | Array<number>;
/** Text Overflow. Default: false */
textOverflow?: boolean;
/** Table overflow. Default: false */
tableOverflow?: boolean;
/** Define the table overflow height. Example: '300px' */
tableHeight?: number | string;
/** Define the table overflow width. Example: '800px' */
tableWidth?: number | string;
/** Initial comments. Default: null */
comments?: Record<string, string>;
/** Initial meta information. Default: null */
meta?: Record<string, any>;
/** Style */
style?: Record<string, string>;
/** Freeze columns. Default: 0 */
freezeColumns?: number;
/** Initial sorting [colNumber, direction]. Default: null */
orderBy?: [number, boolean];
/** Worksheet Unique Id. **/
worksheetId?: string;
/** Worksheet Name. **/
worksheetName?: string;
/** Worksheet state: hidden | null. Hide a worksheet **/
worksheetState?: 'hidden' | undefined;
/** Enable the column filters */
filters?: boolean;
/** Footers */
footers?: Array<any>;
/** Apply mask on footers */
applyMaskOnFooters?: boolean;
/** Define options for the plugins. Each key should be the pluginName. */
pluginOptions?: Record<string, any>;
/** This is a internal controller for the spreadsheet locked properties. Please use editable to make it readonly. */
locked?: boolean;
/** Allow the selection of unlocked cells. Default: true. */
selectUnLockedCells?: boolean;
/** Allow the selection of locked cells. Default: true. */
selectLockedCells?: boolean;
/** Enable resizable worksheet in on or both direction (horizontal | vertical | both). Default: none */
resize?: 'horizontal' | 'vertical' | 'both' | 'none' | undefined;
}
interface spreadsheetInstance {
/** Spreadsheet configuration */
config: Spreadsheet;
/** Contextmenu HTMLElement */
contextmenu: HTMLElement;
/** Create a new worksheet from the given settings */
createWorksheet: (options: Worksheet) => worksheetInstance;
/** Delete an existing worksheet by its position */
deleteWorksheet: (position: Number) => void;
/** DOM Element */
el: HTMLElement;
/** DOM Element. Alias for el */
element: HTMLElement;
/** DOM Element container for the filters */
filters: HTMLElement;
/** Toggle the full screen mode */
fullscreen: (state: Boolean) => void;
/** Get the toolbar object definitions */
getToolbar: Toolbar,
/** Set the toolbar */
setToolbar: (toolbar: Toolbar) => void;
/** Show the toolbar for the worksheet */
showToolbar: () => void;
/** Hide the toolbar for the worksheet */
hideToolbar: () => void;
/** Get the worksheet by its id */
getWorksheet: (id: String) => Number;
/** Get the active worksheet when applicable */
getWorksheetActive: () => number;
/** Get the worksheet instance by its position */
getWorksheetInstance: (position: Number) => worksheetInstance;
/** HTMLElement Helper */
helper: HTMLElement,
/** Array with the history information */
history: [];
/** Internal history index position */
historyIndex: Boolean;
/** Ignore events */
ignoreEvents: Boolean;
/** Ignore history events */
ignoreHistory: Boolean;
/** Ignore persistence events */
ignorePersistence: Boolean;
/** HTMLElement editor container **/
input: HTMLElement;
/** HTMLElement loading element **/
loading: HTMLElement;
/** Rename an existing worksheet by its position */
renameWorksheet: (position: Number, title: String) => void;
/** Move the position of a worksheet tab */
moveWorksheet: (from: Number, to: Number, updateDom: Boolean) => void;
/** Open a worksheet */
openWorksheet: (position: Number) => void;
/** Get the worksheet name */
getWorksheetName: () => String;
/** Spreadsheet unique name */
name: string;
/** List of plugins loaded to the spreadsheet */
plugins: Record<number, Plugin>;
/** Processing flag. It would be true when the spreadsheet is loading. */
processing: boolean;
/** Show progressbar */
progress: (state: boolean) => void;
/** Queue of formulas used during the loading */
queue: Array<string>;
/** Undo */
undo: () => void;
/** Redo */
redo: () => void;
/** DOM Textarea helper */
textarea: HTMLElement;
/** DOM toolbar */
toolbar: HTMLElement;
/** Tools HTMLElement container */
tools: HTMLElement;
/** Worksheets container */
worksheets: Array<Worksheet>;
}
interface worksheetInstance {
/** Array with the borders information */
borders: Array<any>;
/** Close the editon for one cell */
closeEditor: (cell: HTMLElement, save: boolean) => void;
/** Close the filters */
closeFilters: (update: boolean) => void;
/** Array with the column width controllers */
colgroup: [];
/** Hold the colgroup container */
colgroupContainer: HTMLElement;
/** DOM Worksheet container */
content: HTMLElement;
/** Copy */
copy: (cut?: boolean) => void;
/** DOM Corner square */
corner: HTMLElement;
/** Create a new worksheet */
createWorksheet: (worksheetOptions: Worksheet) => worksheetInstance;
/** Internal selected cell */
cursor: object;
/** Cut */
cut: () => void;
/**
* Get the worksheet data
*
* @param {boolean} only the selected cells
* @param {boolean} get the raw or processed data
* @param {string} Null the return will be an array. With this argument, the return will be a string separated by the character defined.
* @return {array} array of data
*/
data: (highlighted?: boolean, processedData?: boolean, delimiter?: string) => Array<Array<any>> | string
/** Internal use control type to defined JSON or ARRAY. */
dataType: boolean,
/** Delete an existing column */
deleteColumn: (columnnumber: number, numOfColumns?: number) => void;
/** Delete an existing row */
deleteRow: (rownumber: number, numOfRows?: number) => void;
/** Destroy all merged cells */
destroyMerged: () => void;
/** Internal method: event dispatch controllers */
dispatch: (event?: string) => void;
/** Navigation down */
down: (shiftKey?: boolean, ctrlKey?: boolean, jump?: boolean) => void;
/** Download CSV */
download: (includeHeaders?: boolean, processed?: boolean) => void;
/** Edition controllers */
edition: [];
/** DOM Worksheet. Alias for worksheet */
element: HTMLElement;
/** Internal method: Execute a formula */
executeFormula: (expression: string, x?: number, y?: number, caching?: boolean) => void;
/** Navigation first */
first: (shiftKey?: boolean, ctrlKey?: boolean) => void;
/** Footers */
footers: Record<string, string>;
/** Formula chain. Internal use. */
formula: [];
/** Toggle the fullscreen mode */
fullscreen: (state: boolean) => void;
/** Get the border */
getBorder: (alias: string) => object;
/** Get the cell element from the cellname */
getCell: (cellName: string) => HTMLElement | null;
/** Get the cell element from its coordinates */
getCellFromCoords: (x: number, y: number) => Array<any>;
/** Get attributes from one cell when applicable */
getCells: (cellName: string) => Column;
/** Get the column object by its position */
getColumn: (position: number) => Object;
/** Get the column data from its number */
getColumnData: (col: number, processed?: boolean) => Array<any>;
/** Get the column position by its name */
getColumnIdByName: (name: string) => number;
/** Alias for getProperty */
getColumnOptions: (x: number, y?: number) => Column;
/** Get the comments from one cell. Example: getComments('A1') */
getComments: (cellName?: string) => string;
/** Get the worksheet settings */
getConfig: () => Worksheet;
/**
* Get the worksheet data
*
* @param {boolean} only the selected cells
* @param {boolean} get the raw or processed data
* @param {string} delimiter to get the data as a string with columns separate by the char delimiter.
* @param {boolean} get the data as a JSON object.
* @return {array|object} array or object with the data
*/
getData: (highlighted?: boolean, processed?: boolean, delimiter?: string, asJson?: boolean) => Array<any> | String;
/** Get the defined name or defined names when key is null */
getDefinedNames: (key?: string) => object;
/** Internal method: Get the editor for one cell */
getEditor: (x: number, y: number) => Object;
/** Internal method: Get the filter */
getFilter: (column: number) => Array<any>;
/** Get the footers configuration */
getFooter: () => Array<any>;
/** Get the footer value */
getFooterValue: (x: number, y: number) => any;
/** Get the header title */
getHeader: (columnNumber: number) => string;
/** Get all header elements */
getHeaders: (asArray: boolean) => Array<any>;
/** Get the height of one row by its position when height is defined. */
getHeight: (row?: number) => Array<number> | number;
/** Get the highlighted coordinates **/
getHighlighted: () => Array<any>;
/** Get json */
getJson: (h?: boolean, processed?: boolean) => any;
/** Get the processed data cell shown to the user by the cell name */
getLabel: (cellName: string) => Object;
/** Get the processed data cell shown to the user by its coordinates */
getLabelFromCoords: (x: number, y: number) => string[];
/** Get the merged cells. Cell name: A1, A2, etc */
getMerge: (cellName: string) => Object | Array<number>;
/** Get one or all meta information for one cell. */
getMeta: (cellName: string, property: string) => Object;
/** Get the nested cells */
getNestedCell: (x: number, y: number, properties?: any) => Object;
/** Get the nested header columns */
getNestedColumns: (x: number, y: number) => any[];
/** Get the nested headers */
getNestedHeaders: () => [];
/** Get the next available number in the sequence */
getNextSequence: () => number;
/** Alias to getProperty */
getOptions: (x: number, y?: number) => Column;
/** Get the primaryKey column when applicable. */
getPrimaryKey: () => number;
/** Get processed data by the coordinates of the cell. Extended process a color, progressbar and rating as raw. */
getProcessed: (x: number, y: number, extended?: boolean) => any;
/** Get the properties for one column when only x is present or the cell when x and y is defined. */
getProperties: (x: number, y?: number) => Column;
/** Get the selection in a range format */
getRange: () => string;
/** Get a row data or meta information by Id. */
getRowById: (row: number, element: boolean) => Object;
/** Get the data from one row */
getRowData: (row: number, processed: boolean) => any[];
/** Get the row id from its position */
getRowId: (row: number) => number;
/** Get all selected cells */
getSelected: (columnNameOnly: boolean) => any[];
/** Get the selected columns. DOMElements or Indexes */
getSelectedColumns: (indexes?: Boolean) => Array<HTMLElement> | Array<number>;
/** Get the selected rows. DOMElements or Indexes */
getSelectedRows: (indexes?: Boolean) => Array<HTMLElement> | Array<number>;
/** Get the style from one cell. Ex. getStyle('A1') */
getStyle: (cell: string) => Object;
/** Get value by the cell name or object. The value can be the raw or processed value. */
getValue: (cell: string, processed: boolean) => String;
/** Get value by the coordinates. The value can be the raw or processed value. */
getValueFromCoords: (x: number, y: number, processed: boolean) => any;
/** Get the width of one column by index or all column width as an array when index is null. */
getWidth: (x?: number) => Array<number> | number;
/** Go to the row number, [col number] **/
goto: (y: number, x?: number) => void;
/** Hold the header container */
headerContainer: HTMLElement;
/** Array with the header DOM elements */
headers: Array<HTMLElement>;
/** Hide column */
hideColumn: (column: number) => void;
/** Hide the filters */
hideFilter: () => void;
/** Hide index column */
hideIndex: () => void;
/** Hide row */
hideRow: (row: number) => void;
/** Hide the search container */
hideSearch: () => void;
/** Add a new column */
insertColumn: (numOfColumns: number, columnnumber: number, insertBefore: boolean, properties: Column, data: []) => void;
/** Add a new row */
insertRow: (numOfRows: number, rownumber: number, insertBefore: boolean, data: any[]) => void;
/** Check if cell is attached to the DOM */
isAttached: (x: number, y: number) => boolean;
/** The worksheet is editable */
isEditable: () => boolean;
/** Check if cell is readonly or not */
isReadOnly: (cell: Object) => boolean;
/** Cell is selected */
isSelected: (x: number, y: number) => boolean;
/** Navigation last */
last: () => void;
/** Navigation left */
left: () => void;
/** Dynamic load data to the spreadsheet. This method does not trigger events or persistence and reset the spreadsheet. To persist use setData. */
loadData: (data: any[]) => void;
/** Change a column position */
moveColumn: (from: number, to: number) => void;
/** Change a row position */
moveRow: (from: number, to: number) => void;
/** Get the column name */
name: (col: number) => string;
/** Start the edition for one cell */
openEditor: (cell: HTMLElement, empty?: boolean, mouseEvent?: Object) => void;
/** Open the filters */
openFilter: (column: number) => void;
/** Worksheet configuration */
options: Worksheet;
/** Sort one column by its position. ASC (0) or DESC (1) */
orderBy: (column: number, direction: boolean) => void;
/** Change page when using pagination */
page: (pagenumber: number) => void;
/** Current page number */
pagenumber: number;
/** Pagination DOM container */
pagination: Object;
/** Spreadsheet object */
parent: spreadsheetInstance;
/** Paste */
paste: (x: number, y: number, data: string) => void;
/** Get the quantity of pages when pagination is active */
quantityOfPages?: () => number;
/** Array with the cell DOM elements */
records: Array<HTMLElement>;
/** Refresh the whole data or from a single row */
refresh: (y: number | undefined) => void;
/** Refresh the borders by the border name */
refreshBorders: (border?: string) => void;
/** Refresh footers */
refreshFooter: () => void;
/** Remove the merged cells by the cell name */
removeMerge: (cellName: String) => void;
/** Reset the borders by name border name */
resetBorders: (border: String, resetPosition: boolean) => void;
/** Close the filters */
resetFilters: () => void;
/** Destroy the footers */
resetFooter: () => void;
/** Destroy freeze columns */
resetFreezeColumns: () => void;
/** Reset meta data */
resetMeta: () => void;
/** Reset nested headers */
resetNestedHeaders: () => void;
/** Reset the search */
resetSearch: () => void;
/** Reset the main selection */
resetSelection: () => void;
/** Get the style from one cell. Ex. resetStyle('A1') */
resetStyle: (cell?: String) => void;
/** DOM array of results */
results: Array<number>;
/** Navigation right */
right: () => void;
/** Rotate the spreadsheet cell text. cell = A1, B1... etc */
rotate: (cell: string|string[], value:number) => void;
/** DOM array of rows */
rows: Array<HTMLElement>;
/** Persistence helper method. The callback is executed with a JSON from the server */
save: (url: String, data: Object, token?: String, callback?: (result: Object) => void) => void;
/** ScrollX DOM Element */
scrollX: HTMLElement;
/** ScrollY DOM Element */
scrollY: HTMLElement;
/** Search for something */
search: (str: String) => void;
/** Search HTML container */
searchContainer: HTMLElement;
/** Search HTML input */
searchInput: HTMLElement;
/** Select All */
selectAll: () => void;
/** Selected cells */
selectedCell: any[];
/** Internal record id sequence */
sequence: number;
/** Set borders with a border name and color. */
setBorder: (x1: number, y1: number, x2: number, y2: number, border?: string, color?: string) => void;
/** Set attributes for one cell */
setCells: (cellName: string, settings: Column) => void;
/** Set the column data from its number */
setColumnData: (col: number, data: any[], force?: boolean) => void;
/** Set the comments for one cell */
setComments: (cellName: String, comments: String) => void;
/** Change the worksheet settings */
setConfig: (config: Worksheet) => void;
/** Set the worksheet data */
setData: (data: any[]) => void;
/** Set the defined name */
setDefinedNames: (key: string, value: string) => void;
/** Set filter */
setFilter: (colnumber: number, keywords: any[]) => void;
/** Set the footers */
setFooter: (data: []) => void;
/** Set the footer value */
setFooterValue: (col: number, row: number, value: any) => void;
/** Freeze x number of columns */
setFreezeColumns: (num: number) => void;
/** Set the header title */
setHeader: (x: number, title: String) => void;
/** Set the height of one row by its position */
setHeight: (row: number, width: number) => void;
/** Get the merged cells. Cellname: A1, A2, etc */
setMerge: (cellName: String, colspan: number, rowspan: number, forceOverwrite?: boolean) => void;
/** Get one or various meta information for one cell. */
setMeta: (cell: string | object, property?: string, value?: string) => void;
/** Set the nested headers */
setNestedHeaders: (config: any[]) => void;
/** Set plugins for the spreadsheet */
setPlugins: (plugins: any[]) => void;
/** Set the properties for one column */
setProperties: (column: number, settings: Object) => void;
/** Set or reset the cell as readonly */
setReadOnly: (cell: Object, state: boolean) => void;
/** Set the data from one row */
setRowData: (row: number, data: any[], force: boolean) => void;
/** Set the row id from its position */
setRowId: (row: number, newId: number) => void;
/** Set the style for one cell. Ex. setStyle('A1', 'background-color', 'red') */
setStyle: (cell: string | object, property?: string, value?: string, forceOverwrite?: boolean) => void;
/**
* Set a cell value
*
* @param {mixed} cell destination cell
* @param {string} value value
* @param {string} force value over readonly cells
* @return void
*/
setValue: (cell: string, value?: String, forceOverwrite?: boolean) => void;
/**
* Set a cell value
*
* @param {number} x
* @param {number} y
* @param {string} value value
* @param {string} force value over readonly cells
* @return void
*/
setValueFromCoords: (x: number, y: number, value: string, force?: boolean) => void;
/** Set viewport width and height */
setViewport: (width: number, height: number) => void;
/** Set the width of one column by its position */
setWidth: (col: number, width: number) => void;
/** Show column */
showColumn: (column: number) => void;
/** Show filter controls */
showFilter: () => void;
/** Show index column */
showIndex: () => void;
/** Show row */
showRow: (row: number) => void;
/** Hide the search container */
showSearch: () => void;
/** DOM Worksheet table */
table: HTMLElement;
/** DOM Worksheet table thead */
thead: HTMLElement;
/** DOM Worksheet table tbody */
tbody: HTMLElement;
/** DOM Worksheet table tfoot */
tfoot: HTMLElement;
/** Verify if one col + row is merged and return or not the merge cell */
isMerged: (x: number, y: number, getParent: boolean) => boolean | any[];
/** Verify if the col has any merged cells */
isColMerged: (x: number) => boolean;
/** Verify if the col has any merged cells */
isRowMerged: (y: number) => boolean;
/** Navigation up */
up: () => void;
/**
* Internal method: Internal method: Set a cell value
*
* @param {number} x
* @param {number} y
* @param {string} value value
* @param {string} force value over readonly cells
* @return void
*/
updateCell: (x: number, y: number, value: string, force?: boolean) => void;
/** Internal method: update cells in a batch */
updateCells: (o: Object) => void;
/** Update the selection based on two DOM cell selements */
updateSelection: (el1: number, el2: number, origin: boolean) => void;
/** Update the selection based on coordinates */
updateSelectionFromCoords: (x1: number, y1: number, x2: number, y2: number, origin: boolean) => void;
/** Getter/setter the value by coordinates */
value?: (x: number, y: number, value?: any) => void;
/** Which page the row number is */
whichPage?: (row: number) => number;
}
