@jspreadsheet/parser
Version:
Convert XLSX to JSS spreadsheet parser. This is a premium extension and requires a license.
1,046 lines (975 loc) • 108 kB
TypeScript
/**
* Official Type definitions for Jspreadsheet Pro v11
* https://jspreadsheet.com/docs
*/
declare function jspreadsheet(element: HTMLElement|HTMLDivElement|null, options: jspreadsheet.Spreadsheet) : Array<jspreadsheet.worksheetInstance>;
declare namespace jspreadsheet {
let current: worksheetInstance | null;
/** ClientID */
let clientId: string | null;
/** License string. Use setLicense to define the license */
let license: string | null;
/** Default row height for a table */
let defaultRowHeight: number | string;
/** Default column width for a table */
let defaultColWidth: number;
/** Column index default width. Default: 50 */
let indexColumnWidth: number;
/** The container that holds all spreadsheet instances in the screen */
let spreadsheet: spreadsheetInstance[];
/** Advance excel like helpers */
let helpers: Helpers;
/** Native editors. You can have extra entries not defined here when working with custom editors */
let editors: Editors;
/** History tracker controllers */
let history: History;
/** Clipboard controller */
let clipboard: ClipBoardMethods;
/** Shortcuts */
let shortcuts: Shortcuts;
/** Get the worksheet instance by its name */
let getWorksheetInstanceByName: GetWorksheetInstanceByNameFunction;
/** Picker */
let picker: Picker;
/** Pause calculations */
function calculations(state: boolean) : void;
/** Define the translations from english to any other language. Ex.{ 'hello': 'Ola', 'Successfully Saved': 'Salvo com sucesso' } */
let setDictionary: SetDictionary;
/** Set the license */
function setLicense(license: string|object) : void;
/** Set extensions to the JSS spreadsheet or null to disable all extensions. Example { formula, parser, render } */
function setExtensions(extensions: object | null, options?: object) : void;
/** Destroy the spreadsheet. Full destroy will clear all JSS controllers and is not possible to re-create a new spreadsheet if true is used, until refresh the page. */
function destroy(element: HTMLElement | spreadsheetInstance, fullDestroy?: boolean) : void;
/** Destroy all the spreadsheets in all namespaces **/
function destroyAll() : void;
/** Jspreadsheet parser extension. More info at: https://jspreadsheet.com/products */
let parser: ((options?: parseOptions) => void) | undefined;
/** Jspreadsheet formula extension. More info at: https://jspreadsheet.com/products */
let formula: ((expression: string, variables: object, x: number, y: number, instance: worksheetInstance) => void) | undefined;
/** Jspreadsheet parser extension. More info at: https://jspreadsheet.com/products */
let render: ((element: HTMLElement, options: any) => void) | undefined;
/** Jspreadsheet forms extension. More info at: https://jspreadsheet.com/products */
let forms: ((options: any) => void) | undefined;
/** Jspreadsheet search extension. More info at: https://jspreadsheet.com/products */
let search: (() => void) | undefined;
/** Jspreadsheet importer extension. More info at: https://jspreadsheet.com/products */
let importer: (() => void) | undefined;
/** Jspreadsheet validations extension. More info at: https://jspreadsheet.com/products */
let validations: (() => void) | undefined;
/** Jspreadsheet bar extension. More info at: https://jspreadsheet.com/products */
let bar: ((options?: { suggestions?: boolean }) => void) | undefined;
/** Jspreadsheet charts extension. More info at: https://jspreadsheet.com/products */
let charts: (() => void) | undefined;
/** Jspreadsheet shapes extension. More info at: https://jspreadsheet.com/products */
let shapes: (() => void) | undefined;
/** Get the current version */
function version(): {
version: string,
edition: string,
host: string,
license: string,
print: () => [string],
};
type GetWorksheetInstanceByNameFunction = (worksheetName?: string | null | undefined, namespace?: string) => worksheetInstance | Record<string, worksheetInstance>;
interface Picker {
(el: HTMLElement, options: PickerOptions) : void;
cancel: () => void;
click: () => void;
e: Record<string, any> | null | undefined;
end: () => void;
getRangeFromNode: () => RangeCoords | null | undefined;
hasEvent: (focus?: boolean) => Record<string, any> | null | undefined;
input: (element: HTMLElement) => void;
keydown: (event: KeyboardEvent) => void;
palette: (colors: string[]) => void;
selection: (x1: number, y1: number, x2: number, y2: number, event: Event) => boolean | undefined;
start: (element: HTMLElement) => void;
update: (element: HTMLElement) => void;
validSelection: (acceptNewNodeOnly?: boolean) => boolean;
}
interface SetDictionary {
(dictionary: object) : void;
translate: (text: string, substitutions: string[]) => string;
}
interface Shortcuts {
get: (event: object) => Function | null;
set: (shortcut: string, method: Function | null) => void;
}
interface PickerOptions {
/** picker creates a range selection component. formula expect to be a formula starting with '=' */
type?: 'formula' | 'picker';
/** When the value is changed */
onchange?: (element: HTMLElement, mouseEvent: object) => void;
/** Each time the selection is updated */
onupdate?: (element: HTMLElement, mouseEvent: object) => void;
}
type RangeCoords = [number, number, number, number];
interface ClipBoard {
worksheet: worksheetInstance,
value: string,
selection: RangeCoords,
highlighted: RangeCoords | RangeCoords[],
cut: boolean,
hash: string | null,
}
interface ClipBoardMethods {
set(text: string, isCut?: boolean | undefined, coords?: RangeCoords, reset?: boolean): void,
get(): ClipBoard,
reset(resetClipboard?: boolean): void,
}
/** Common properties for all media types */
interface MediaBase {
// GUID string
id: string;
type: 'image' | 'chart' | 'shape';
top?: number;
left?: number;
width?: number;
height?: number;
zIndex?: number;
// Cell anchor if applicable
cellAnchor?: string;
}
/** Options for image media */
interface MediaImageOptions {
src: string;
absolute?: boolean;
}
/** Options for chart media (unchanged) */
interface MediaChartOptions {
type: 'area' | 'bar' | 'column' | 'doughnut' | 'filledRadar' | 'histogram' | 'line' | 'pareto' |
'percentArea' | 'percentBar' | 'percentColumn' | 'pie' | 'radar' | 'scatter' |
'stackedArea' | 'stackedBar' | 'stackedColumn';
range: string; // e.g., "A1:B10"
headers?: boolean;
orientation?: 0 | 1;
labels?: number;
datasets?: number[];
title?: {
text: string;
align?: 'left' | 'center' | 'right';
font?: { size?: number; bold?: boolean };
};
subtitle?: {
text: string;
align?: 'left' | 'center' | 'right';
};
legend?: {
display?: boolean;
position?: 'top' | 'bottom' | 'left' | 'right';
align?: 'left' | 'center' | 'right';
};
series?: Array<{
color?: string;
borderColor?: string;
yAxis?: 'left' | 'right';
}>;
axis?: {
base?: { title?: { text: string } };
side?: { title?: { text: string } };
};
cutout?: number;
separation?: {
type: 'piece-width';
value: number;
};
}
/** Options for shape media (updated with your list) */
interface MediaShapeOptions {
type: 'simpleLine' | 'lineWithArrow' | 'doubleArrowLine' | 'elbowConnector' | 'elbowArrowConnector' |
'doubleArrowElbowConnector' | 'curvedElbowConnector' | 'curvedArrowConnector' | 'curvedDoubleArrowConnector' |
'rectangle' | 'rounded-rectangle' | 'singleCutCornerRectangle' | 'doubleCutCornerRectangle' |
'oppositeCutCornerRectangle' | 'roundedTopRightRectangle' | 'roundedTopLeftRectangle' |
'roundedTopRightBottomLeftRectangle' | 'ellipse' | 'triangle' | 'right-triangle' | 'parallelogram' |
'trapezium' | 'diamond' | 'pentagon' | 'hexagon' | 'heptagon' | 'octagon' | 'decagon' |
'ovalInterfaceIcon' | 'cutCircle' | 'circlewithtoprightoutsideangle' | 'doubleLineSquare' |
'doubledtoprighangle' | 'doubleLineShape' | 'mouldingCrown' | 'crossIcon' | 'plaqueShape' |
'cylinderShape' | 'cubeShape' | 'bevelShape' | 'donutShape' | 'blockShape' | 'blockArk' |
'smileyFace' | 'heart' | 'lightningBolt' | 'sun' | 'crescentMoon' | 'cloud' | 'arcCurve' |
'leftSquareBrackets' | 'rightSquareBrackets' | 'squareBracketsPair' | 'leftFlowerBracket' |
'rightFlowerBracket' | 'flowerBrackets' | 'rightBlockArrow' | 'leftBlockArrow' | 'upBlockArrow' |
'downBlockArrow' | 'upDownArrow' | 'leftRightArrow' | 'quadArrow' | 'leftRightUpArrow' |
'bentArrow' | 'uTurnArrow' | 'leftUpArrow' | 'bentUpArrow' | 'curvedRightArrow' | 'curvedLeftArrow' |
'curvedUpArrow' | 'curvedDownArrow' | 'stripedRightArrow' | 'notchedRightArrow' | 'pentagonArrow' |
'chevron' | 'rightArrowCallout' | 'downArrowCallout' | 'leftArrowCallout' | 'upArrowCallout' |
'leftRightArrowCallout' | 'quadArrowCallout' | 'circularArrow' | 'plus' | 'minus' | 'multiplication' |
'division' | 'equal' | 'notEqualTo' | 'predefinedTask' | 'internalStorage' | 'document' |
'multitaskingDocuments' | 'terminator' | 'preparation' | 'manualInput' | 'manualOperation' |
'offpageConnector' | 'card' | 'punchedTape' | 'swimmingJunction' | 'orShape' | 'collateShape' |
'sortShape' | 'extractShape' | 'mergeShape' | 'storedDataShape' | 'delayShape' |
'sequentialAccessStorageShape' | 'directAccessStorage' | 'displayShape';
backgroundColor?: string;
borderColor?: string;
fontColor?: string;
borderWidth?: number;
text?: string;
}
/** Discriminated union for Media based on type */
interface MediaImage extends MediaBase {
type: 'image';
src: string;
options?: MediaImageOptions;
}
interface MediaChart extends MediaBase {
type: 'chart';
options?: MediaChartOptions;
}
interface MediaShape extends MediaBase {
type: 'shape';
options?: MediaShapeOptions;
}
/** Unified Media type */
type Media = MediaImage | MediaChart | MediaShape;
/** New column object */
interface newColumn {
column?: number,
data?: any[],
options: Column,
}
/* New row object */
interface newRow {
row?: number,
data?: any[],
options: Row,
[key: string]: any,
}
/** Advance comments */
interface Comment {
/** User unique identification */
user_id?: number,
/** User name */
name?: string,
/** Comment content */
comments?: string,
/** Date of the comments */
date?: string,
}
/** Global History */
interface History {
(changes: Record<string, any>): void;
/** History index cursor */
index: number;
/** History items */
actions: Record<string, any>[];
/** When true the next item is cascaded in the same existing history element */
cascade: boolean;
/** When true no history will be added to the tracker */
ignore: boolean;
/** A history redo or undo is in progress */
progress: 'undo' | 'redo' | null;
/** Undo last action */
undo: () => void;
/** Redo most recent action */
redo: () => void;
/** Reset history tracker */
reset: () => void;
}
/** Validation entry */
interface Validation {
/** Excel-like range format Sheet1!A1:A6 */
range: string;
/** Validation type */
type: 'number' | 'text' | 'date' | 'list' | 'textLength' | 'empty' | 'notEmpty';
/** Validation action can be a warning or reject when the condition are not match or a format when the condition matches */
action: 'warning' | 'reject' | 'format';
/** Criteria to be match */
criteria:
| '='
| '!='
| '>='
| '>'
| '<='
| '<'
| 'between'
| 'not between'
| 'valid date'
| 'valid email'
| 'valid url'
| 'contains'
| 'not contains'
| 'begins with'
| 'ends with'
/** Custom message to the user */
text?: string;
/** Ignore blank cells */
allowBlank?: boolean;
/** For type: format you can apply some CSS when condition is matched */
format?: Record<string, string>;
/** For type: format you can add a class when condition is matched */
className?: string;
/** Array with two positions, the second position used when criteria is between or not between. */
value?: number[] | string[],
/** Make sure run that as a dropdown */
dropdown: true,
}
/** Validations update format */
interface Validations {
/** Index position in the array of validations */
index?: number | null;
/** The validation definition object */
value: Validation;
}
/** Native editors */
interface Editors {
/** Create a DOM element for a cell edition */
createEditor: (type: 'input'|'div', cellReference: HTMLElement, value: any, instance: worksheetInstance) => HTMLElement;
/** Create a DOM for a floating editor container */
createDialog: (cell: HTMLElement, value: any, x: number, y: number, instance: worksheetInstance) => HTMLElement;
text: Editor;
number: Editor;
numeric: Editor;
percent: Editor;
notes: Editor;
dropdown: Editor;
autocomplete: Editor;
calendar: Editor;
color: Editor;
checkbox: Editor;
radio: Editor;
autonumber: Editor;
progressbar: Editor;
rating: Editor;
email: Editor;
url: Editor;
image: Editor;
html: Editor;
hidden: Editor;
tags: Editor;
record: Editor;
}
/** Helpers */
interface Helpers {
/**
* Compare two arrays to see if contains exact the same elements.
* @param a1 - Array 1.
* @param a2 - Array 2.
*/
compareArray: (a1: number[], a2: number[]) => boolean;
/**
* Get caret position for editable dom element.
*/
getCaretIndex: (element: HTMLElement) => number;
/**
* Invert the key and values in an object.
*/
invert: (obj: object) => object;
/**
* Get the excel-like letter based on the index number.
*/
getColumnName: (index: number) => string;
/**
* Get the cell name from its coordinates.
*/
getCellNameFromCoords: (x: number, y: number) => string;
/**
* Aliases or getCellNameFromCoords.
*/
getColumnNameFromCoords: (x: number, y: number) => string;
/**
* Get the coordinates from a cell name.
*/
getCoordsFromCellName: (name: string) => [number | null, number | null] | [];
/**
* Alias for getCoordsFromCellName.
*/
getCoordsFromColumnName: (name: string) => [number | null, number | null] | [];
/**
* Shift the formula by x and y positions in the matrix.
*/
shiftFormula: (formula: string, x: number, y: number) => string;
/**
* Get all the token names from a excel-like range.
*/
getTokensFromRange: (range: string, force?: boolean, worksheetName?: string, removeDuplicates?: boolean) => string[];
/**
* Get the range from an array of tokens.
*/
getRangeFromTokens: (tokens: string[], fixCurrencySymbol?: string) => string;
/**
* Get the coordinates as a number from a range string. Adjust helps to define the height dynamically when you have A:A ranges for example. Works in the same way for 1:1 ranges. Default: true.
*/
getCoordsFromRange: (range: string, adjust?: boolean) => RangeCoords;
/**
* Get range string from [x1,y1,x2,y2].
*/
getRangeFromCoords(coords: RangeCoords): string;
getRangeFromCoords(x1: number, y1: number, x2: number, y2: number): string;
/**
* Extract the configuration from JSS from a static HTML table.
*/
createFromTable: (element: HTMLElement, options?: Worksheet) => Worksheet;
/**
* CSV string to JS array.
* @param str - CSV string.
* @param delimiter - Default: ','.
*/
parseCSV: (str: string, delimiter?: string) => string[][];
/**
* Get all token names inside an range.
*/
getTokensFromCoords: (x1: number, y1: number, x2: number, y2: number, worksheetName?: string) => string[];
focus: (element: HTMLElement) => void;
setCaretIndex: (element: any, index: number) => void;
getCaretNode: (target: HTMLElement) => HTMLElement | null;
secureFormula: (oldValue: string, runtime?: boolean) => string;
insertLineBreak: () => void;
}
interface Tabs {
/** Show the create new tab button */
allowCreate?: boolean;
/** Allow drag and drop of the headers to change the tab position */
allowChangePosition?: boolean;
/** Allow the header border bottom animation. */
animation?: boolean;
/** Hide the tab headers if only one tab is present. */
hideHeaders?: boolean;
/** Default padding content */
padding?: number;
/** Position of the headers: top | bottom. Default: top */
position?: 'top' | 'bottom';
}
interface Toolbar {
/** Array of items for the toolbar */
items: Array<ToolbarItem>;
/** Responsive toolbar. Default: true. */
responsive?: boolean;
/** maxWidth */
maxWidth?: number;
/** Position of the extended hidden options when applicable */
bottom: 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?: (el: HTMLElement, iconObject: object, toolbarItem: HTMLElement) => void;
/** For the type select when a new item is selected */
onchange?: (el: HTMLElement, pickerObject: object, reservedValue: any, itemValue: string, itemKey: string, mouseEvent: object) => void;
/** To update the state of the toolbar */
updateState?: (toolbarObject: object, toolbarItem: HTMLElement, option: any, extendOption: any) => void;
}
interface Dropdown {
/** Endpoint to fetch data from a remote server */
url?: string;
/** Preloaded data items for the dropdown */
data?: DropdownItem[];
/** Format type of the data, typically { id: name } or { value: text } */
format?: number;
/** Indicates if multiple item selection is allowed */
multiple?: boolean;
/** Enables the autocomplete feature for user input */
autocomplete?: boolean;
/** Allows remote search for options */
remoteSearch?: boolean;
/** Enables the lazy loading feature for handling a large number of options */
lazyLoading?: boolean;
/** Rendering style of the dropdown: 'default', 'picker', or 'searchbar' */
type?: 'default' | 'picker' | 'searchbar',
/** Defines the dropdown's width */
width?: number;
/** Sets the maximum width of the dropdown */
maxWidth?: number;
/** Determines if the dropdown is opened when initialized */
opened?: boolean;
/** The initial value of the dropdown */
value?: string;
/** Placeholder text for the dropdown */
placeholder?: string;
/** Allows the user to add new options */
newOptions?: boolean;
/** Internal controller for the dropdown's position */
position?: boolean;
/** Event handler for value changes */
onchange?: (el: HTMLElement, obj: object, oldValue: string, newValue: string) => void;
/** Event handler for when the dropdown is ready */
onload?: (el: HTMLElement, obj: object, data: any, val: any) => void;
/** Event handler for when the dropdown opens */
onopen?: (el: HTMLElement) => void;
/** Event handler for when the dropdown closes */
onclose?: (el: HTMLElement) => void;
/** Event handler for when the dropdown receives focus */
onfocus?: (el: HTMLElement) => void;
/** Event handler for when the dropdown loses focus */
onblur?: (el: HTMLElement) => void;
/** Event handler for when a new option is added to the dropdown */
oninsert?: (obj: object, item: DropdownItem, newItem: DropdownItem) => void;
/** Event handler for just before a new option is added to the dropdown */
onbeforeinsert?: (obj: object, item: DropdownItem) => DropdownItem | false | undefined;
/** Event handler for before a search on autocomplete is performed */
onbeforesearch?: (obj: object, ajaxRequest: object) => object | false | undefined;
/** Event handler for processing search results */
onsearch?: (obj: object, result: object) => void;
/** Toggles the sorting of dropdown elements */
sortResults?: boolean;
/** Indicates if the dropdown should automatically receive focus upon creation */
autofocus?: boolean;
}
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?: 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;
/** Submenu */
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 {
/** Specifies the type of calendar to render. Default is 'default'. Possible values are 'default' and 'year-month-picker'. */
type?: 'default' | 'year-month-picker';
/** An array of numbers specifying a range of valid dates. Dates outside this range will be disabled. */
validRange?: [number, number];
/** The day of the week the calendar starts on (0 for Sunday - 6 for Saturday). Default: 0. */
startingDay?: number;
/** Specifies the day of the week the calendar starts on, where 0 is Sunday and 6 is Saturday. Default is 0 (Sunday). */
format?: string;
/** Specifies whether the calendar input is readonly or not. Default is false. */
readonly?: boolean;
/** Specifies whether today's date is automatically selected when no date is defined. */
today?: boolean;
/** Specifies whether to display a dropdown for selecting hour and minute values. Default is false. */
time?: boolean;
/** Specifies whether to display a reset button. Default is true. */
resetButton?: boolean;
/** Specifies a placeholder text to display in the calendar input when no date is selected. */
placeholder?: string;
/** Auto select confirms the current date as the new value onblur. Default: true */
autoSelect?: boolean;
/** Open in fullscreen mode. */
fullscreen?: boolean;
}
interface DefinedNames {
index: string;
value?: string;
}
/**
* Cell value
*/
interface CellRecord {
/** Cached value of the cell */
value: string | number | boolean | undefined;
/** Coordinate X */
x: number;
/** Coordinate Y */
y: number;
}
/**
* Cell object
*/
interface Records {
/** CELL td element */
element: HTMLTableCellElement;
/** Cached value of the cell */
v: string | number | boolean | undefined;
/** Coordinate X */
x: number;
/** Coordinate Y */
y: number;
/** Associate to an array of values */
a?: Map<Records, any>;
/** Part of a merged cells */
merged?: any[];
/** Merged cells */
mergeCells?: [number, number];
/** Style */
s?: number;
/** Comments */
c?: string | Record<string, any>[];
/** Meta */
meta?: object;
/** Chain */
chain?: Map<Records, true>;
// Worksheet Instance
w: worksheetInstance;
}
type ColumnType = Editor | 'text' | 'number' | 'numeric' | 'percent' | 'notes' | 'dropdown' | 'autocomplete' | 'calendar' | 'color' | 'checkbox' | 'radio' | 'autonumber' | 'progressbar' | 'rating' | 'email' | 'url' | 'image' | 'html' | 'hidden' | 'tags' | 'record';
interface ColumnPrimitiveProperties {
/** Define the type of editor to use for the column. Can be a string to define a native editor, or a method to define a custom editor plugin. */
type?: ColumnType;
/** The alignment of the column content. Default: center. */
align?: 'center' | 'left' | 'right' | 'justify';
/** The URL to load items from for the dropdown in this column, or when used in a text cell it will be a create a link */
url?: string;
/** The items to show in the dropdown or autocomplete. */
source?: Array<DropdownItem> | Array<string> | Array<number>;
/** It defines the options of a dropdown from a cell range. Example: Sheet1!A1:A4 */
dynamicSource?: string;
/** Whether the column is an autocomplete field. */
autocomplete?: boolean;
/** Whether the dropdown or autocomplete can accept multiple options. */
multiple?: boolean;
/** The delimiter to use for separating multiple dropdown options. Default: ";". */
delimiter?: string;
/** The input mask to apply to the data cell. @see https://jsuites.net/v4/javascript-mask */
mask?: string;
/** The character to use as the decimal separator. */
decimal?: '.' | ',';
/** The maximum number of characters to display in the cell before truncating. */
truncate?: number,
/** Whether to disable the mask when editing. */
disabledMaskOnEdition?: boolean;
/** A renderer method or rule for the cell content. */
render?: string | ((td: HTMLElement, value: number|string, x: number | string, y: number | string, worksheet: worksheetInstance, options: Column) => void);
/** The format of the date or numbers in the cell. Default for the calendar: "DD/MM/YYYY". */
format?: string;
/** Locale for Intl.NumberFormat */
locale?: string,
/** Extended configuration for the column. */
options?: Calendar | Dropdown | object;
/** Whether the column is read-only. */
readOnly?: boolean;
/** Whether to process the raw data when copying or downloading. Default: true. */
process?: boolean;
/** Whether to try to cast numbers from a cell text. Default: true. */
autoCasting?: boolean;
/** Whether to wrap the text in the column. */
wrap?: boolean;
/** The rotation angle for the text value, between -90 and 90. Default: null. */
rotate?: number;
/** Can be used to map JSON properties or help to group type radio cells */
name?: string;
/** Record editor */
worksheetId?: string;
worksheetColumn?: number;
worksheetImage?: boolean;
locked?: boolean;
}
interface Column extends ColumnPrimitiveProperties {
/** The title of the column. */
title?: string;
/** The name or path of a property when the data is a JSON object. */
name?: string;
/** Define the tooltip text to display on mouseover for the column header. */
tooltip?: string;
/** The width of the column. Default: 100px */
width?: number;
/** Whether the column is visible. */
visible?: boolean,
/** A method to overwrite the column definitions in real-time just before the column is edited. */
filterOptions?: (worksheet: worksheetInstance, cell: HTMLElement, x: number, y: number, value: number|string, options: Column) => Column;
/** Whether the column is a primary key. */
primaryKey?: boolean;
/** Whether to shift the formula when copying and pasting. This option is only valid for custom column types. Default: false. */
shiftFormula?: boolean;
/** Whether to apply CSS odd-even background color to the column. Default: false. */
zebra?: boolean;
/** The number of columns to group together. */
group?: number;
/** State of the column group. */
state?: boolean;
/** Style index */
s?: number;
}
interface Cell extends ColumnPrimitiveProperties { }
interface Border {
/** HTML Element for the border */
element: HTMLElement;
/** Border color */
color: string;
/** Used on the marching ants border */
moveLeft?: HTMLElement;
/** Used on the marching ants border */
moveTop?: HTMLElement;
/** Used on the marching ants border */
moveRight?: HTMLElement;
/** Used on the marching ants border */
moveDown?: HTMLElement;
/** Current x1 coordinates for the border */
x1: number;
/** Current y1 coordinates for the border */
y1: number;
/** Current x2 coordinates for the border */
x2: number;
/** Current y2 coordinates for the border */
y2: number;
/** Border is active in the viewport */
active: boolean;
/** Position top of the border */
t: number;
/** Position left of the border */
l: number;
/** Current border width */
w: number;
/** Current border height */
h: number;
}
interface Row {
/** Height of the row in pixels. */
height?: number;
/** Title or name of the row. */
title?: string;
/** Determines whether the row is visible or not. */
visible?: boolean;
/** ID number that identifies the row. */
id?: number;
/** Number of rows that this row is grouped with. */
group?: number;
/** State of the row group (collapsed or expanded). */
state?: boolean;
/** Determines whether the row is read-only or not. */
readOnly?: boolean;
/** Style index */
s?: number;
}
interface RowInstance extends Row {
/** Element. */
element: HTMLTableRowElement;
/** Row index. */
y: number;
}
interface Editor {
/** createCell When a new cell is created. */
createCell?: (cell: HTMLTableCellElement, value: any, x: number, y: number, instance: worksheetInstance, options: Column | Cell) => any;
/** updateCell When the cell value changes. */
updateCell?: (cell: HTMLTableCellElement, value: any, x: number, y: number, instance: worksheetInstance, options: Column | Cell) => any;
/** openEditor When the user starts the edition of a cell. */
openEditor?: (cell: HTMLTableCellElement, value: any, x: number, y: number, instance: worksheetInstance, options: Column | Cell) => any;
/** closeEditor When the user finalizes the edition of a cell. */
closeEditor?: (cell: HTMLTableCellElement, confirmChanges: boolean, x: number, y: number, instance: worksheetInstance, options: Column | Cell) => any;
/** When a cell is destroyed. */
destroyCell?: (cell: HTMLTableCellElement, x: number, y: number, instance: worksheetInstance) => void;
/** Transform the raw data into processed data. It will show a text instead of an id in the type dropdown for example. */
get?: (options: object, value: any, extended: boolean, instance: worksheetInstance) => string
}
interface Plugin {
/** When a new worksheet is added. */
beforeinit?: (worksheet: worksheetInstance) => void;
/** When a new worksheet is added. */
init?: (worksheet: worksheetInstance) => void;
/** It would receive a call for every spreadsheet event. */
onevent?: (event: string, ...args: any[]) => any;
/** 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: worksheetInstance, x: number, y: number, e: MouseEvent, items:Array<ContextmenuItem> , section: string, a: any, b?: any) => Array<ContextmenuItem>;
/** When the toolbar is created and clicked. */
toolbar?: (instance: worksheetInstance, toolbar: Toolbar) => Toolbar;
}
interface Nested {
/** Nested header title */
title?: string;
/** Nested header tooltip */
tooltip?: string;
/** Nested header colspan */
colspan?: number;
/** Alignment */
align?: 'left' | 'center' | 'right';
/** Frozen */
frozen?: boolean;
}
interface Spreadsheet {
/** Your application name */
application?: string;
/** Remote configuration with Jspreadsheet Server */
guid?: 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) => (a: any, b: any) => number;
/** Remote URL for the persistence server */
server?: string;
/** Enable the toolbars */
toolbar?: boolean | Toolbar | ToolbarItem[] | ((toolbarOptions: Toolbar) => Toolbar);
/** 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;
/** 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;
/** Enable or disable formula picker with keyboard. Default: true */
keyboardFormulas?: 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;
/** Parse HTML. Default: false (Use this with caution) */
parseHTML?: boolean;
/** Allow bar when extension bar is enabled. Default: true */
bar?: 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 | undefined;
/** After something is saved */
onsave?: (spreadsheet: spreadsheetInstance, worksheet: worksheetInstance, data: object, result: object) => void;
/** When something goes wrong during a persistence operation */
onerror?: (spreadsheet: spreadsheetInstance, result: object) => 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 | string, y: number | string, value: any) => false | any | undefined;
/** After a column value is changed. */
onchange?: (worksheet: worksheetInstance, cell: HTMLElement, x: number | string, y: number | string, newValue: any, oldValue: any) => void;
/** When all data have been updated. Origin: 'paste', 'handle-fill' or undefined */
onafterchanges?: (worksheet: worksheetInstance, records: Record<string, any>[], origin: string | undefined) => 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: RangeCoords, data: string, cut: boolean | undefined) => false | string | undefined;
/** 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: Record<string, any>[][], x: number, y: number) => false | Record<string, any>[][] | undefined;
/** After a paste action is performed in the spreadsheet. */
onpaste?: (
worksheet: worksheetInstance,
records: {
x: number,
y: number,
[key: string]: any,
}[]
) => void;
/** Before a new row is inserted. You can cancel the insert event by returning false. */
onbeforeinsertrow?: (worksheet: worksheetInstance, newRow: Record<string, any>[]) => false | newRow[] | undefined;
/** After a new row is inserted. */
oninsertrow?: (worksheet: worksheetInstance, newRow: Record<string, any>[]) => void;
/** Before a row is deleted. You can cancel the delete event by returning false. */
onbeforedeleterow?: (worksheet: worksheetInstance, rows: number[]) => number[] | false | undefined;
/** After a row is excluded. */
ondeleterow?: (worksheet: worksheetInstance, rows: number[]) => void;
/** Before a new column is inserted. You can cancel the insert event by returning false. */
onbeforeinsertcolumn?: (worksheet: worksheetInstance, newColumn: Record<string, any>[]) => false | newColumn[] | undefined;
/** After a new column is inserted. */
oninsertcolumn?: (worksheet: worksheetInstance, affected: Record<string, any>[]) => void;
/** Before a column is excluded. You can cancel the insert event by returning false. */
onbeforedeletecolumn?: (worksheet: worksheetInstance, cols: number[]) => false | number[] | undefined;
/** After a column is excluded. */
ondeletecolumn?: (worksheet: worksheetInstance, cols: number[]) => void;
/** After a row is moved to a new position. */
onmoverow?: (worksheet: worksheetInstance, origin: number, destination: number, quantityOfRows: number) => void;
/** After a column is moved to a new position. */
onmovecolumn?: (worksheet: worksheetInstance, origin: number, destination: number, quantityOfColumns: 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;
/** Before the selection happens */
onbeforeselection?: (worksheet: worksheetInstance, px: number, py: number, ux: number, uy: number, origin?: object) => boolean | undefined;
/** When the selection is changed. */
onselection?: (worksheet: worksheetInstance, px: number, py: number, ux: number, uy: number, origin?: object) => void;
/** Before the comments is added or updated. Return false to cancel the event, void to accept the action or a object. */
onbeforecomments?: (worksheet: worksheetInstance, cells: Record<string, string>) => false | Record<string, string> | undefined;
/** After a new comment is added or updated. */
oncomments?: (worksheet: worksheetInstance, newValues: Record<string, string>, previousValues: Record<string, string>) => 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: number[]) => false | number[] | undefined;
/** When a column is sorted. */
onsort?: (worksheet: worksheetInstance, column: number, direction: number, newOrderValues: number[]) => 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 | undefined) => void;
/** When the footers are created or updated. */
onchangefooter?: (worksheet: worksheetInstance, newValue: string[][], oldValue: string[][] | undefined) => void;
/** When the value in a cell footer is changed. */
onchangefootervalue?: (worksheet: worksheetInstance, x: number, y: number, value: string) => void;
/** When the footer cell is rendered */
onrenderfootercell?: (worksheet: worksheetInstance, x: number, y: number, value: string, td: HTMLElement) => 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) => boolean | undefined;
/** 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: Record<string, string>, oldValue: Record<string, string | null>) => void;
/** When a cell meta information is added or updated. */
onchangemeta?: (worksheet: worksheetInstance, newValue: Record<string, any>) => void;
/** Before the page is changed. Can cancel the action when return is false. */
onbeforechangepage?: (worksheet: worksheetInstance, pageNumber: number, oldPage: number, quantityPerPage: number) => boolean | undefined;
/** 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) => Worksheet | false | undefined;
/** 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: any[] | Record<string, any>) => void;
/** Before the search method starts */
onsearchstart?: (worksheet: worksheetInstance, query: string) => void;
/** Before the search method starts */
onsearchrow?: (worksheet: worksheetInstance, row: number, query: string, terms: RegExp) => boolean;
/** Action to be executed before searching. The accepted method return would be: null to contin