From 0760c383ada0af585e5e79156ff821c905a38c22 Mon Sep 17 00:00:00 2001 From: Mike Lischke Date: Mon, 4 Mar 2024 17:07:25 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20Merge=20PR=20#68882=20Update=20f?= =?UTF-8?q?or=20tabulator-tables=205.6=20by=20@mike-lischke?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- types/tabulator-tables/index.d.ts | 484 +++++++++++++++++- types/tabulator-tables/package.json | 2 +- .../tabulator-tables-tests.ts | 73 ++- 3 files changed, 542 insertions(+), 17 deletions(-) diff --git a/types/tabulator-tables/index.d.ts b/types/tabulator-tables/index.d.ts index 961cf00d63518a..0bd604414e2a52 100755 --- a/types/tabulator-tables/index.d.ts +++ b/types/tabulator-tables/index.d.ts @@ -1,3 +1,5 @@ +// cspell: ignore XLXS, alphanum, datetime, datetimediff, rownum, freetext, recalc, Monkhouse + export interface Options extends OptionsGeneral, @@ -106,6 +108,7 @@ export interface OptionsClipboard { * The inbuilt parser will reject any clipboard data that does not contain at least one row and two columns, in that case the clipboardPasteError will be triggered. * * If you extend the clipboard module to add your own parser, you can set it to be used as default with the clipboardPasteParser property. + * Built-in parsers are "table" and "range". */ clipboardPasteParser?: string | ((clipboard: any) => any[]) | undefined; @@ -116,7 +119,7 @@ export interface OptionsClipboard { * update - Updates data in the table using the updateOrAddData function * replace - replaces all data in the table using the setData function */ - clipboardPasteAction?: "insert" | "update" | "replace" | undefined; + clipboardPasteAction?: "insert" | "update" | "replace" | "range"; /** * By default Tabulator will copy some of the tables styling along with the data to give a better visual appearance when pasted into other documents. @@ -516,22 +519,118 @@ export interface OptionsRows { * true - selectable rows are enabled, and you can select as many as you want * integer - any integer value, this sets the maximum number of rows that can be selected (when the maximum number of selected rows is exceeded, the first selected row will be deselected to allow the next row to be selected). * "highlight" (default) - rows have the same hover stylings as selectable rows but do not change state when clicked. This is great for when you want to show that a row is clickable but don't want it to be selectable. + * @deprecated Use selectableRows instead */ selectable?: boolean | number | "highlight" | undefined; + /** + * The selectableRows option can take one of a several values: + * + * - false - selectable rows are disabled + * - true - selectable rows are enabled, and you can select as many as you want + * - integer - any integer value, this sets the maximum number of rows that can be selected (when the maximum number of selected rows is exceeded, the first selected row will be deselected to allow the next row to be selected). + * - "highlight" (default) - rows have the same hover stylings as selectable rows but do not change state when clicked. This is great for when you want to show that a row is clickable but don't want it to be selectable. + */ + selectableRows?: boolean | number | "highlight" | undefined; + + /** + * The selectableRange option can take one of a several values: + * + * - false - range selection is disabled + * - true - range selection is enabled, and you can add as many ranges as you want + * - integer - any integer value, this sets the maximum number of ranges that can be selected (when the maximum + * number of ranges is exceeded, the first selected range will be deselected to allow the next range to be selected). + */ + selectableRange?: boolean | number; + + /** + * By default you can only select ranges by selecting cells on the table. If you would like to allow the user to + * select all cells in a column by clicking on the column header, then you can set the selectableRangeColumns option to true + */ + selectableRangeColumns?: boolean; + + /** + * If you want the user to be able to clear the values for all cells in the active range by pressing the backspace + * or delete keys, then you can enable this behavior using the selectableRangeClearCells option: + * + * @example + * var table = new Tabulator("#example-table", { + * selectableRangeClearCells:true, + * }); + */ + selectableRangeClearCells?: boolean; + + /** + * By default the value of each cell in the range is set to undefined when this option is enabled and the user + * presses the backspace or delete keys. You can change the value the cells are set to using the + * selectableRangeClearCellsValue option + * + * @example + * var table = new Tabulator("#example-table", { + * selectableRangeClearCellsValue: "", //clear cells by setting value to an empty string + * }); + */ + selectableRangeClearCellsValue?: unknown; + /** * By default you can select a range of rows by holding down the shift key and click dragging over a number of rows to toggle the selected state state of all rows the cursor passes over. * * If you would prefer to select a range of row by clicking on the first row then holding down shift and clicking on the end row then you can achieve this by setting the selectableRangeMode to click + * @deprecated Use selectableRowsRangeMode instead */ selectableRangeMode?: "click" | undefined; - /** By default, row selection works on a rolling basis, if you set the selectable option to a numeric value then when you select past this number of rows, the first row to be selected will be deselected. If you want to disable this behavior and instead prevent selection of new rows once the limit is reached you can set the selectableRollingSelection option to false. */ + /** + * By default you can select a range of rows by holding down the shift key and click dragging over a number of rows + * to toggle the selected state state of all rows the cursor passes over. + * + * If you would prefer to select a range of row by clicking on the first row then holding down shift and clicking + * on the end row then you can achieve this by setting the selectableRowsRangeMode to click. + * + * @example + * var table = new Tabulator("#example-table", { + * selectableRowsRangeMode:"click", + * }); + */ + selectableRowsRangeMode?: "click"; + + /** By default, row selection works on a rolling basis, if you set the selectable option to a numeric value then when you select past this number of rows, the first row to be selected will be deselected. If you want to disable this behavior and instead prevent selection of new rows once the limit is reached you can set the selectableRollingSelection option to false. + * @deprecated Use selectableRowsRollingSelection instead + */ selectableRollingSelection?: boolean | undefined; - /** By default Tabulator will maintain selected rows when the table is filtered, sorted or paginated (but NOT when the setData function is used). If you want the selected rows to be cleared whenever the table view is updated then set the selectablePersistence option to false. */ + /** + * By default, row selection works on a rolling basis, if you set the selectableRows option to a numeric value then + * when you select past this number of rows, the first row to be selected will be deselected. If you want to + * disable this behavior and instead prevent selection of new rows once the limit is reached you can set the + * selectableRowsRollingSelection option to false. + * + * @example + * var table = new Tabulator("#example-table", { + * selectableRows: 5, + * selectableRowsRollingSelection:false, // disable rolling selection + * }); + */ + selectableRowsRollingSelection?: boolean; + + /** By default Tabulator will maintain selected rows when the table is filtered, sorted or paginated (but NOT when the setData function is used). If you want the selected rows to be cleared whenever the table view is updated then set the selectablePersistence option to false. + * @deprecated Use selectableRowsPersistence instead + */ selectablePersistence?: boolean | undefined; + /** + * By default Tabulator will maintain selected rows when the table is filtered, sorted or paginated (but NOT when + * the setData function is used). If you want the selected rows to be cleared whenever the table view is updated + * then set the selectableRowsPersistence option to false. + * + * @example + * var table = new Tabulator("#example-table", { + * selectableRows: true, + * selectableRowsPersistence: false, // disable selection persistence + * }); + */ + selectableRowsPersistence?: boolean; + /** You many want to exclude certain rows from being selected. The selectableCheck options allows you to pass a function to check if the current row should be selectable, returning true will allow row selection, false will result in nothing happening. The function should accept a RowComponent as its first argument. */ selectableCheck?: ((row: RowComponent) => boolean) | undefined; @@ -601,6 +700,25 @@ export interface OptionsRows { /** Freeze rows of data */ frozenRows?: number | string[] | ((row: RowComponent) => boolean); + + /** + * The editTriggerEvent option lets you choose which type of interaction event will trigger an edit on a cell. + * + * @example + * var table = new Tabulator("#example-table", { + * editTriggerEvent:"dblclick", // trigger edit on double click + * }); + * + * This option can take one of three values: + * + * - focus - trigger edit when the cell has focus (default) + * - click - trigger edit on single click on cell + * - dblclick - trigger edit on double click on cell + * + * This option does not affect navigation behavior, cells edits will still be triggered when they are navigated to + * through arrow keys or tabs. + */ + editTriggerEvent?: "click" | "dblclick" | "focus"; } export interface OptionsColumns { @@ -712,7 +830,8 @@ export interface OptionsColumns { headerSort?: boolean | undefined; headerSortElement?: string | undefined | ((column: ColumnComponent, dir: "asc" | "desc" | "none") => any); columnDefaults?: Partial; - /** If the resizableColumnFit table definition option is set to true, then when you resize a column its neighbouring column has the opposite resize applied to keep to total width of columns the same. */ + + /** When the resizableColumnFit table definition option is set to true, when you resize a column, its adjacent column is resized in the opposite direction to keep the total width of the columns the same. */ resizableColumnFit?: boolean | undefined; } @@ -1230,7 +1349,7 @@ export interface ColumnDefinition extends ColumnLayout, CellCallbacks { */ headerFilterFunc?: | FilterType - | ((headerValue: any, rowValue: any, rowdata: any, filterparams: any) => boolean) + | ((headerValue: any, rowValue: any, rowData: any, filterParams: any) => boolean) | undefined; /** additional parameters object passed to the headerFilterFunc function. */ @@ -1254,7 +1373,7 @@ export interface ColumnDefinition extends ColumnLayout, CellCallbacks { /** You can add a menu to any column by passing an array of menu items to the headerMenu option in that columns definition. */ headerMenu?: Array | MenuSeparator> | undefined; - /** The headerMenuIcon option will accept one of three types of value. You can pass in a string for the HTML contents of the button. Or you can pass the DOM node for the button. Though be careful not to pass the same node to multple columns or you may run into issues. Or you can define a function that is called when the column header is rendered that should return either an HTML string or the contents of the element. This funtion is passed the column component as its first argument. */ + /** The headerMenuIcon option will accept one of three types of value. You can pass in a string for the HTML contents of the button. Or you can pass the DOM node for the button. Though be careful not to pass the same node to multiple columns or you may run into issues. Or you can define a function that is called when the column header is rendered that should return either an HTML string or the contents of the element. This function is passed the column component as its first argument. */ headerMenuIcon?: string | HTMLElement | ((component: ColumnComponent) => HTMLElement | string); /** You can add a right click context menu to any column by passing an array of menu items to the headerContextMenu option in that columns definition. */ @@ -1704,7 +1823,75 @@ export type Align = "center" | "left" | "right" | "justify"; export type JSONRecord = Record; -export type StandardValidatorType = "required" | "unique" | "integer" | "float" | "numeric" | "string"; +/** + * Tabulator has a wide variety of built in validators: + * Note: For a guide to adding your own validators to this list, have a look at the "Extending Tabulator" section. + * + * Note By default all validators, except the `required` validator will approve any empty value (ie. empty string, + * null or undefined). to ensure empty values are rejected you should use the required validator. + * + * - Required, The required validator allows values that are not null or an empty string + * ```javascript + * {title:"Example", field:"example", validator:"required"} + * ``` + * - Unique, The unique validator allows values that do not match the value of any other cell in this column + * ```javascript + * {title:"Example", field:"example", validator:"unique"} + * ``` + * - Integer, The integer validator allows values that are valid integers + * ```javascript + * {title:"Example", field:"example", validator:"integer"} + * ``` + * - Float, The float validator allows values that are valid floats + * ```javascript + * {title:"Example", field:"example", validator:"float"} + * ``` + * - Numeric, The numeric validator allows values that are valid numbers + * ```javascript + * {title:"Example", field:"example", validator:"numeric"} + * ``` + * - String, The string validator allows values that are a non-numeric string + * ```javascript + * {title:"Example", field:"example", validator:"string"} + * ``` + * - Alphanumeric, The alphanumeric validator allows values that are explicitly numbers and letters with no symbols or spaces + * ```javascript + * {title:"Example", field:"example", validator:"alphanumeric"} + * ``` + * - Minimum Numeric Value, The min validator allows numeric values that are greater than or equal to parameter + * ```javascript + * {title:"Example", field:"example", validator:"min:5"} \\value must be greater than or equal to 5 + * ``` + * - Maximum Numeric Value, The max validator allows numeric values that are less than or equal to parameter + * ```javascript + * {title:"Example", field:"example", validator:"max:5"} \\value must be less than or equal to 5 + * ``` + * - Minimum String Length, The minLength validator allows string values that have a length greater than or equal to parameter + * ```javascript + * {title:"minLength", field:"example", validator:"minLength:5"} \\value must have a length greater than or equal to 5 + * ``` + * - Maximum String Length, The maxLength validator allows string values that have a length less than or equal to parameter + * ```javascript + * {title:"Example", field:"example", validator:"maxLength:5"} \\value must have a length less than or equal to 5 + * ``` + * - In List, The in validator allows values that match a value from the | delimited string in the parameter + * ```javascript + * {title:"Example", field:"example", validator:"in:red|green|blue"} \\value must be 'red', 'green' or 'blue' + * ``` + * - Starts With, The starts validator allows string values that start with the parameter (case insensitive) + * ```javascript + * {title:"Example", field:"example", validator:"starts:bob"} \\value must start with 'bob' + * ``` + * - Ends With, The ends validator allows string values that start with the parameter (case insensitive) + * ```javascript + * {title:"Example", field:"example", validator:"ends:green"} \\value must end with 'green' + * ``` + * - Regular Expression, The regex validator allows values that match the supplied regex + * ```javascript + * {title:"Example", field:"example", validator:"regex:\\.com$"} \\allow strings that end in '.com' + * ``` + */ +export type StandardValidatorType = "required" | "unique" | "integer" | "float" | "numeric" | "string" | "alphanumeric"; export interface Validator { type: StandardValidatorType | ((cell: CellComponent, value: any, parameters?: any) => boolean); @@ -1717,7 +1904,7 @@ export type ColumnLookup = ColumnComponent | ColumnDefinition | HTMLElement | st export type RowLookup = RowComponent | HTMLElement | string | number; -export type RowRangeLookup = "visible" | "active" | "selected" | "all"; +export type RowRangeLookup = "visible" | "active" | "selected" | "all" | "range"; export interface KeyBinding { navPrev?: string | boolean | undefined; @@ -2062,6 +2249,198 @@ export interface CellComponent { /** You can validate a cell by calling the validate method on any Cell Component. Returns true if the cell passes validation, or an array of failed validators if it fails validation. */ validate: () => boolean | Validator[]; popup: (contents: string, position: PopupPosition) => void; + + /** + * You can retrieve all ranges that overlap a cell by calling the getRanges function: + * + * ```javascript + * var ranges = cell.getRanges(); + * ``` + * This will return an array of Range Components for any ranges that overlap the cell. If no ranges overlap the + * cell, an empty array will be returned. + */ + getRanges(): RangeComponent[]; +} + +export interface RangeComponent { + /** + * You can update the bounds for an existing range using the setBounds function, passing in the Cell Components + * for the top-left and bottom-right bounds of the selection: + * + * @example + * var topLeft = table.getRows()[2].getCells()[1]; + * var bottomRight = table.getRows()[5].getCells()[6]; + * + * range.setBounds(topLeft, bottomRight); + */ + setBounds: (topLeft: CellComponent, bottomRight: CellComponent) => void; + + /** + * You can change the top left start edge of an existing range using the setStartBound function, passing in the + * Cell Component for the top left bound of the selection: + * + * @example + * var topLeft = table.getRows()[2].getCells()[1]; + * + * range.setStartBound(topLeft); + */ + setStartBound: (cell: CellComponent) => void; + + /** + * You can change the bottom right ending edge of an existing range using the setEndBound function, passing in the + * Cell Component for the bottom right bound of the selection: + * + * @example + * var bottomRight = table.getRows()[5].getCells()[6]; + * + * range.setEndBound(bottomRight); + */ + setEndBound: (cell: CellComponent) => void; + + /** + * You can remove a range by calling the remove function on the range: + * + * @example + * range.remove(); + */ + remove(): void; + + /** + * You can retrieve the bounding rectangle element for a range by calling the getElement function on the range: + * + * @example + * var element = range.getElement(); + */ + getElement(): unknown; + + /** + * You can retrieve the cell data for a range by calling the getData function on the range: + * + * ```javascript + * var data = range.getData(); + * ``` + * + * This will return a range data array, which is structured as a series of row data objects with only the props for + * cells in that range: + * + * ```json + * [ + * {color:"green", country:"England", driver:true}, //data for selected cells in first row in range + * {color:"red", country:"USA", driver:false}, //data for selected cells in second row in range + * {color:"blue", country:"France", driver:true}, //data for selected cells in third row in range + * ] + * ``` + */ + getData(): unknown; + + /** + * You can clear the value of every cell in a range by calling the clearValues function on the range: + * + * ```javascript + * var data = range.clearValues(); + * ``` + * This will set the value of every cell in the range to the value of the selectableRangeClearCellsValue table + * option, which is set to undefined by default. + */ + clearValues(): void; + + /** + * You can retrieve all the Cell Components in a range by calling the getCells function on the range: + * + * ```javascript + * var cells = range.getCells(); + * ``` + * This will return a array of Cell Components + */ + getCells(): CellComponent[]; + + /** + * You can retrieve a structured map of all the Cell Components in a range by calling the getStructuredCells + * function on the range: + * + * ```javascript + * var cells = range.getStructuredCells(); + * ``` + * This will return a array of row arrays, with each row array containing the Cell Components in order for that row: + * + * ```json + * [ + * [Component, Component, Component], //first row + * [Component, Component, Component], //second row + * [Component, Component, Component], //third row + * ] + * ``` + */ + getStructuredCells(): CellComponent[][]; + + /** + * You can retrieve all the Row Components in a range by calling the getRows function on the range: + * + * ```javascript + * var rows = range.getRows(); + * ``` + * This will return a array of Row Components + */ + getRows(): RowComponent[]; + + /** + * You can retrieve all the Column Components in a range by calling the getColumns function on the range: + * + * ```javascript + * var columns = range.getColumns(); + * ``` + * This will return a array of Column Components + */ + getColumns(): ColumnComponent[]; + + /** + * You can retrieve the bounds of a range by calling the getBounds function on the range: + * + * ```javascript + * var bounds = range.getBounds(); + * ``` + * This will return an object containing two Cell Components, for the two bounds of the range + * + * ```json + * { + * start:Component, //the cell component at the top left of the range + * end:Component, //the cell component at the bottom right of the range + * } + * ``` + */ + getBounds(): { start: CellComponent; end: CellComponent }; + + /** + * You can find the position number for the top row of the range by calling the getTopEdge function on the range: + * + * @example + * var topPosition = range.getTopEdge(); + */ + getTopEdge(): number; + + /** + * You can find the position number for the bottom row of the range by calling the getBottomEdge function on the range: + * + * @example + * var bottomPosition = range.getBottomEdge(); + */ + getBottomEdge(): number; + + /** + * You can find the position number for the left column of the range by calling the getLeftEdge function on the range: + * + * @example + * var leftPosition = range.getLeftEdge(); + */ + getLeftEdge(): number; + + /** + * You can find the position number for the right column of the range by calling the getRightEdge function on the range: + * + * @example + * var rightPosition = range.getRightEdge(); + */ + getRightEdge(): number; } export interface EventCallBackMethods { @@ -2180,6 +2559,39 @@ export interface EventCallBackMethods { menuOpened: (cell: CellComponent) => void; TooltipClosed: (cell: CellComponent) => void; TooltipOpened: (cell: CellComponent) => void; + + /** + * The range component provides access to a selected range of cells. The example below shows how it is passed to + * the rangeAdded callback + * + * ```javascript + * table.on("rangeAdded", function(range) { + * // range - range component for the selected range + * alert("The user has selected a new range containing " + range.getCells().length + " cells"); + * }); + * ``` + */ + rangeAdded: (range: RangeComponent) => void; + + /** + * The rangeChanged event is triggered when a the bounds of an existing range are changed. + * ```javascript + * table.on("rangeChanged", function(range){ + * // range - range component for the selected range + * }); + * ``` + */ + rangeChanged: (range: RangeComponent) => void; + + /** + * The rangeRemoved event is triggered when a range is removed from the table. + * ```javascript + * table.on("rangeRemoved", function(range){ + * // range - range component for the selected range + * }); + * ``` + */ + rangeRemoved: (range: RangeComponent) => void; } declare class Tabulator { @@ -2539,7 +2951,7 @@ declare class Tabulator { /** * To programmatically select a row you can use the selectRow function. * - * To select a specific row you can pass the any of the standard row component look up options into the first argument of the function. If you leave the argument blank you will select all rows (if you have set the selectable option to a numeric value, it will be ignored when selecting all rows). If lookup value is true you will selected all current filtered rows. + * To select a specific row you can pass the any of the standard row component look up options into the first argument of the function. If you leave the argument blank you will select all rows (if you have set the selectableRow option to a numeric value, it will be ignored when selecting all rows). If lookup value is true you will selected all current filtered rows. */ selectRow: (lookup?: RowLookup[] | RowLookup | RowRangeLookup | true) => void; deselectRow: (row?: RowLookup[] | RowLookup) => void; @@ -2703,6 +3115,60 @@ declare class Tabulator { /** The clearHistory function can be used to clear out the current table interaction history. */ clearHistory: () => void; + + /** + * To programmatically select a range of cells you can use the addRange function. + * + * To select a range of cells you should call the addRange function, passing in the Cell Components for the + * top-left and bottom-right bounds of the selection: + * + * ```javascript + * var topLeft = table.getRows()[2].getCells()[1]; + * var bottomRight = table.getRows()[5].getCells()[6]; + * + * var range = table.addRange(topLeft, bottomRight); + * ``` + * + * This will then return the Range Component for the new range. + */ + addRange: (topLeft: CellComponent, bottomRight: CellComponent) => RangeComponent; + + /** + * To get the Range Component's for all the current ranges you can use the getRanges function. + * + * ```javascript + * var ranges = table.getRanges(); //get array of currently selected range components. + * ``` + * + * This will return an array of Range Components for all the current ranges. + */ + getRanges: () => RangeComponent[]; + + /** + * To get the data objects for all the selected cell ranges you can use the getRangesData function. + * + * ```javascript + * var rangeData = table.getRangesData(); //get array of currently selected data. + * ``` + * This will return an array of range data arrays, with data array per range. Each range data array will contain a + * series of row data objects with only the props for cells in that range: + * + * ```json + * [ + * [ //range 1 + * {name:"Bob Monkhouse", age:83}, //data for selected cells in first row in range + * {name:"Mary May", age:22}, //data for selected cells in second row in range + * ], + * [ //range 2 + * {color:"green", country:"England", driver:true}, //data for selected cells in first row in range + * {color:"red", country:"USA", driver:false}, //data for selected cells in second row in range + * {color:"blue", country:"France", driver:true}, //data for selected cells in third row in range + * ], + * ] + * ``` + */ + getRangeData: () => unknown[][]; + on: (event: K, callback?: EventCallBackMethods[K]) => void; off: (event: K, callback?: EventCallBackMethods[K]) => void; } diff --git a/types/tabulator-tables/package.json b/types/tabulator-tables/package.json index 39a9b2988da503..7304968b85835d 100644 --- a/types/tabulator-tables/package.json +++ b/types/tabulator-tables/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@types/tabulator-tables", - "version": "5.5.9999", + "version": "5.6.9999", "projects": [ "http://tabulator.info" ], diff --git a/types/tabulator-tables/tabulator-tables-tests.ts b/types/tabulator-tables/tabulator-tables-tests.ts index 3be3557437a893..345e8fa360a015 100644 --- a/types/tabulator-tables/tabulator-tables-tests.ts +++ b/types/tabulator-tables/tabulator-tables-tests.ts @@ -1,3 +1,5 @@ +// cspell: ignore recalc, Boberson, Jimmerson, Jillerson, hayley, Betterson, freetext, datetime + import { CalculationComponent, CellComponent, @@ -14,6 +16,7 @@ import { Module, NumberParams, Options, + type RangeComponent, Renderer, RowComponent, SortDirection, @@ -427,7 +430,7 @@ colDef.topCalcFormatter = (cell, formatterParams, onRendered) => { colDef.tooltip = (event: MouseEvent, cell: CellComponent, onRendered: (callback: () => void) => void) => { onRendered(() => { - console.log("rendering occured"); + console.log("rendering occurred"); }); return cell.getValue(); }; @@ -470,7 +473,7 @@ options.ajaxConfig = { Accept: "application/json", // tell the server we need JSON back "X-Requested-With": "XMLHttpRequest", // fix to help some frameworks respond correctly to request "Content-type": "application/json; charset=utf-8", // set the character encoding of the request - "Access-Control-Allow-Origin": "http:// yout-site.com", // the URL origin of the site making the request + "Access-Control-Allow-Origin": "http:// you-site.com", // the URL origin of the site making the request }, }; options.ajaxConfig = { @@ -598,7 +601,7 @@ column.move("age", true); colDef.editorParams = { elementAttributes: { "+style": "background-color:#f00;", - maxlength: "10", + maxLength: "10", }, }; @@ -955,7 +958,7 @@ table.on("dataChanged", (data) => { console.log(data); }); -table.setGroupValues([["male", "female", "smizmar"]]); +table.setGroupValues([["male", "female", "other"]]); table.getData("all"); table.getDataCount("all"); table.getRows("all"); @@ -1322,7 +1325,7 @@ table = new Tabulator("#testDataLoader", { const numberEditorParams: NumberParams = { elementAttributes: { - maxlength: "10", + maxLength: "10", }, min: 0, max: 100, @@ -1338,7 +1341,7 @@ const numberEditorParams: NumberParams = { const inputEditorParams: InputParams = { elementAttributes: { - maxlength: "10", + maxLength: "10", }, mask: "AAA-999", maskAutoFill: false, @@ -1351,7 +1354,7 @@ const inputEditorParams: InputParams = { const textAreaEditorParams: TextAreaParams = { elementAttributes: { - maxlength: "10", + maxLength: "10", }, mask: "AAA-999", maskAutoFill: false, @@ -1485,3 +1488,59 @@ table = new Tabulator("#TestGroupClickMenu", { return false; }, }); + +// Testing 5.6 features +table = new Tabulator("#test-table", { + clipboardPasteAction: "range", + selectableRows: "highlight", + selectableRange: true, + selectableRangeColumns: true, + selectableRangeClearCells: false, + selectableRangeClearCellsValue: { a: "b" }, + selectableRowsRangeMode: "click", + selectableRowsRollingSelection: true, + selectableRowsPersistence: undefined, + editTriggerEvent: "dblclick", +}); + +const columnDefinition1 = { + validator: "max:10", +}; + +const columnDefinition2 = { + validator: "alphanumeric", +}; + +table.getRow("range").deselect(); +const ranges = table.getRanges(); +ranges[0].setBounds(cell, cell); +ranges[0].setStartBound(cell); +ranges[0].setEndBound(cell); +ranges[0].remove(); +ranges[0].getElement(); +ranges[0].getData(); +ranges[0].clearValues(); +const cells1 = ranges[0].getCells(); +cells1[0].checkHeight(); +const cells2 = ranges[0].getStructuredCells(); +cells2[0][0].checkHeight(); +const columns1 = ranges[0].getColumns(); +columns1[0].delete(); +const bounds1 = ranges[0].getBounds(); +bounds1.start.isEdited(); +bounds1.end.isEdited(); +ranges[0].getTopEdge(); +ranges[0].getBottomEdge(); +ranges[0].getLeftEdge(); +ranges[0].getRightEdge(); + +table.on("rangeAdded", (range: RangeComponent) => {}); +table.on("rangeChanged", (range: RangeComponent) => {}); +table.on("rangeRemoved", (range: RangeComponent) => {}); + +const range1 = table.addRange(cell, cell); +range1.clearValues(); +table.getRanges().forEach(range => range.remove()); + +const data1 = table.getRangeData(); +data1[0][0] = { name: "steve" };