UNPKG

@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
/** * 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