vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-10-04 06:47:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

tabulator-tables - Update for version 4.3 (#37041)

Browse Source 
* Update prettier 400col width

* Update for 4.3

* linter
This commit is contained in:
Jojoshua
2019-07-22 12:39:10 -07:00
committed by Wesley Wigham
parent 1784bb6677
commit f8020db2d9
2 changed files with 441 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
types/tabulator-tables/index.d.ts
Vendored
+276 -73
View File
@@ -1,4 +1,4 @@
// Type definitions for tabulator-tables 4.2
// Type definitions for tabulator-tables 4.3
// Project: http://tabulator.info
// Definitions by: Josh Harris <https://github.com/jojoshua>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
@@ -9,7 +9,23 @@
// tslint:disable:no-trailing-whitespace
declare namespace Tabulator {
interface Options extends OptionsGeneral, OptionsHistory, OptionsLocale, OptionsDownload, OptionsColumns, OptionsRows, OptionsData, OptionsSorting, OptionsFiltering, OptionsRowGrouping, OptionsPagination, OptionsPersistentConfiguration, OptionsClipboard, OptionsDataTree, OptionsCell {}
interface Options
extends OptionsGeneral,
OptionsHistory,
OptionsLocale,
OptionsDownload,
OptionsColumns,
OptionsRows,
OptionsData,
OptionsSorting,
OptionsFiltering,
OptionsRowGrouping,
OptionsPagination,
OptionsPersistentConfiguration,
OptionsClipboard,
OptionsDataTree,
OptionsCell,
OptionsHTML {}
interface OptionsCells extends CellCallbacks {
/** The validationFailed event is triggered when the value entered into a cell during an edit fails to pass validation. */
@@ -43,7 +59,7 @@ declare namespace Tabulator {
"copy" - enable only copy functionality
"paste" - enable only paste functionality
false - disable all clipboard functionality (default) */
clipboard?: boolean | "copy" | "paste";
clipboard?: boolean | 'copy' | 'paste';
/** * The copy selector is a function that is used to choose which data is copied into the clipboard. Tabulator comes with a few different selectors built in:
active - Copy all table data currently displayed in the table to the clipboard (default)
table - Copy all table data to the clipboard, including data that is currently filtered out
@@ -52,10 +68,10 @@ declare namespace Tabulator {
These selectors can also be used when programatically triggering a copy event. in this case if the selector is not specified it will default to the value set in the clipboardCopySelector property (which is active by default).
*/
clipboardCopySelector?: "active" | "table" | "selected";
clipboardCopySelector?: 'active' | 'table' | 'selected';
/** The copy formatter is used to take the row data provided by the selector and turn it into a text string for the clipboard.
There is one built in copy formatter called table, if you have extended the clipboard module and want to change the default you can use the clipboardCopyFormatter property. you can also pass in a formatting function directly into this property.*/
clipboardCopyFormatter?: "table" | ((rowData: any[]) => string);
clipboardCopyFormatter?: 'table' | ((rowData: any[]) => string);
/** By default Tabulator will include the column header titles in any clipboard data, this can be turned off by passing a value of false to the clipboardCopyHeader property: */
clipboardCopyHeader?: boolean;
/** Tabulator has one built in paste parser, that is designed to take a table formatted text string from the clipboard and turn it into row data. it breaks the tada into rows on a newline character \n and breaks the rows down to columns on a tab character \t.
@@ -71,7 +87,7 @@ declare namespace Tabulator {
insert - Inserts data into the table using the addRows function (default)
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";
clipboardPasteAction?: 'insert' | 'update' | 'replace';
/** 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.
@@ -105,7 +121,7 @@ declare namespace Tabulator {
local - (string) Store the persistence information in the localStorage object
cookie - (string) Store the persistence information in a cookie
true - (boolean) check if localStorage is available and store persistence information, otherwise store in cookie (Default option) */
persistenceMode?: "local" | "cookie" | true;
persistenceMode?: 'local' | 'cookie' | true;
/** Enable persistsnt storage of column layout information */
persistentLayout?: boolean;
/** You can ensure the data sorting is stored for the next page load by setting the persistentSort option to true */
@@ -116,7 +132,7 @@ declare namespace Tabulator {
interface OptionsPagination {
/** Choose pagination method, "local" or "remote" */
pagination?: "remote" | "local";
pagination?: 'remote' | 'local';
/** Set the number of rows in each page */
paginationSize?: number;
/** Setting this option to true will cause Tabulator to create a list of page size options, that are multiples of the current page size. In the example below, the list will have the values of 5, 10, 15 and 20.
@@ -124,7 +140,7 @@ declare namespace Tabulator {
When using the page size selector like this, if you use the setPageSize function to set the page size to a value not in the list, the list will be regenerated using the new page size as the starting valuer */
paginationSizeSelector?: true | number[];
/** By default the pagination controls are added to the footer of the table. If you wish the controls to be created in another element pass a DOM node or a CSS selector for that element to the paginationElement option.*/
paginationElement?: HTMLElement | "string";
paginationElement?: HTMLElement | string;
/** Lookup list to link expected data feilds from the server to their function * default* {
"current_page":"current_page",
"last_page":"last_page",
@@ -146,7 +162,7 @@ declare namespace Tabulator {
page - add rows relative to current page (default)
table - add rows relative to the table */
paginationAddRow?: "table" | "page";
paginationAddRow?: 'table' | 'page';
/** The number of pagination page buttons shown in the footer using the paginationButtonCount option. By default this has a value of 5.*/
paginationButtonCount?: number;
}
@@ -160,7 +176,9 @@ declare namespace Tabulator {
groupValues?: any[][];
/** You can use the setGroupHeader function to change the header generation function for each group. This function has one argument and takes the same values as passed to the groupHeader setup option. */
groupHeader?: ((value: any, count: number, data: any, group: GroupComponent) => string) | Array<(value: any, count: number, data: any) => string>;
groupHeader?:
| ((value: any, count: number, data: any, group: GroupComponent) => string)
| Array<(value: any, count: number, data: any) => string>;
/** You can set the default open state of groups using the groupStartOpen property* * This can take one of three possible values:
@@ -177,7 +195,7 @@ declare namespace Tabulator {
header - toggle group on click anywhere on the group header element
false - prevent clicking anywhere in the group toggling the group
*/
groupToggleElement?: "arrow" | "header" | false;
groupToggleElement?: 'arrow' | 'header' | false;
/** show/hide column calculations when group is closed */
groupClosedShowCalcs?: boolean;
@@ -218,7 +236,7 @@ declare namespace Tabulator {
initialFilter?: Filter[];
/** array of initial values for header filters. */
initialHeaderFilter?: Array<Pick<Filter, "field" | "value">>;
initialHeaderFilter?: Array<Pick<Filter, 'field' | 'value'>>;
/** The dataFiltering callback is triggered whenever a filter event occurs, before the filter happens. */
dataFiltering?: (filters: Filter[]) => void;
@@ -258,7 +276,7 @@ declare namespace Tabulator {
If you want to use a custom content type then you can pass a content type formatter object into the ajaxContentType option. this object must have two properties, the headers property should contain all headers that should be sent with the request and the body property should contain a function that returns the body content of the request
*/
ajaxContentType?: "form" | "json" | AjaxContentType;
ajaxContentType?: 'form' | 'json' | AjaxContentType;
/** If you need more control over the url of the request that you can get from the ajaxURL and ajaxParams properties, the you can use the ajaxURLGenerator property to pass in a callback that will generate the URL for you.
@@ -281,7 +299,7 @@ declare namespace Tabulator {
With this mode enabled, all of the settings outlined in the Ajax Documentation are still available
There are two different progressive loading modes, to give you a choice of how data is loaded into the table. */
ajaxProgressiveLoad?: "load" | "scroll";
ajaxProgressiveLoad?: 'load' | 'scroll';
/** By default tabulator will make the requests to fill the table as quickly as possible. On some servers these repeates requests from the same client may trigger rate limiting or security systems. In this case you can use the ajaxProgressiveLoadDelay option to add a delay in milliseconds between each page request. */
ajaxProgressiveLoadDelay?: number;
/** The ajaxProgressiveLoadScrollMargin property determines how close to the bottom of the table in pixels, the scroll bar must be before the next page worth of data is loaded, by default it is set to twice the height of the table. */
@@ -308,7 +326,7 @@ declare namespace Tabulator {
body: (url: string, config: any, params: any) => any;
}
type HttpMethod = "GET" | "POST";
type HttpMethod = 'GET' | 'POST';
interface AjaxConfig {
method?: HttpMethod;
headers?: JSONRecord;
@@ -323,7 +341,7 @@ declare namespace Tabulator {
rowFormatter?: (row: RowComponent) => any;
/** The position in the table for new rows to be added, "bottom" or "top" */
addRowPos?: "bottom" | "top";
addRowPos?: 'bottom' | 'top';
/** The selectable option can take one of a several values:
@@ -331,12 +349,12 @@ declare namespace Tabulator {
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 exeded, 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. */
selectable?: boolean | number | "highlight";
selectable?: boolean | number | 'highlight';
/** 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 prefere 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 acheive this by setting the selectableRangeMode to click */
selectableRangeMode?: "click";
selectableRangeMode?: '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 behaviour and instead prevent selection of new rows once the limit is reached you can set the selectableRollingSelection option to false. */
selectableRollingSelection?: boolean;
@@ -361,7 +379,10 @@ declare namespace Tabulator {
delete - deletes the row from the table
You can also pass a callback to the movableRowsSender option for custom sender functionality
*/
movableRowsSender?: false | "delete" | ((fromRow: RowComponent, toRow: RowComponent, toTable: Tabulator) => any);
movableRowsSender?:
| false
| 'delete'
| ((fromRow: RowComponent, toRow: RowComponent, toTable: Tabulator) => any);
/** The movableRowsReceiver option should be set on the receiving tables, and sets the action that should be taken when the row is dropped into the table.
There are several inbuilt receiver functions:
@@ -370,7 +391,12 @@ declare namespace Tabulator {
add - adds row to the table
update - updates the row it is dropped on with the sent rows data
replace - replaces the row it is dropped on with the sent row*/
movableRowsReceiver?: "insert" | "add" | "update" | "replace" | ((fromRow: RowComponent, toRow: RowComponent, fromTable: Tabulator) => any);
movableRowsReceiver?:
| 'insert'
| 'add'
| 'update'
| 'replace'
| ((fromRow: RowComponent, toRow: RowComponent, fromTable: Tabulator) => any);
/** You can allow the user to manually resize rows by dragging the top or bottom border of a row. To enable this functionality, set the resizableRows property to true */
resizableRows?: boolean;
@@ -472,7 +498,7 @@ declare namespace Tabulator {
autoColumns?: boolean;
/** By default Tabulator will use the fitData layout mode, which will resize the tables columns to fit the data held in each column, unless you specify a width or minWidth in the column constructor. If the width of all columns exceeds the width of the containing element, a scroll bar will appear. */
layout?: "fitData" | "fitColumns" | "fitDataFill";
layout?: 'fitData' | 'fitColumns' | 'fitDataFill';
/** To keep the layout of the columns consistent, once the column widths have been set on the first data load (either from the data property in the constructor or the setData function) they will not be changed when new data is loaded.
@@ -490,7 +516,7 @@ declare namespace Tabulator {
By default, columns will be hidden from right to left as the width of the table decreases. You can choose exactlyhow columns are hidden using the responsive property in the column definition object.
When responsive layout is enabled, all columns are given a default responsive value of 1. The higher you set this value the sooner that column will be hidden as the table width decreases. If two columns have the same responsive value then they are hidden from right to left (as defined in the column definition array, ignoring user moving of the columns). If you set the value to 0 then the column will never be hidden regardless of how narrow the table gets. */
responsiveLayout?: boolean | "hide" | "collapse";
responsiveLayout?: boolean | 'hide' | 'collapse';
/** Collapsed lists are displayed to the user by default, if you would prefer they start closed so the user can open them you can use the responsiveLayoutCollapseStartOpen option */
responsiveLayoutCollapseStartOpen?: boolean;
@@ -519,7 +545,7 @@ declare namespace Tabulator {
/** By default it is possible to manually resize columns by dragging the borders of the column in both the column headers and the cells of the column.
If you want to alter this behaviour you can use the resizableColumns to choose where the resize handles are available. */
resizableColumns?: true | false | "header" | "cell";
resizableColumns?: true | false | 'header' | 'cell';
/** To allow the user to move columns along the table, set the movableColumns parameter in the options: */
movableColumns?: boolean;
@@ -528,7 +554,7 @@ declare namespace Tabulator {
tooltipsHeader?: boolean;
/** You can use the columnVertAlign option to set how the text in your column headers should be vertically */
columnVertAlign?: "top" | "middle" | "bottom";
columnVertAlign?: 'top' | 'middle' | 'bottom';
/** The default placeholder text used for input elements can be set using the headerFilterPlaceholder option in the table definition */
headerFilterPlaceholder?: string;
@@ -554,7 +580,7 @@ declare namespace Tabulator {
both - show calcs at top and bottom of the table and show in groups
table - show calcs at top and bottom of the table only
group - show calcs in groups only */
columnCalcs?: boolean | "both" | "table" | "group";
columnCalcs?: boolean | 'both' | 'table' | 'group';
/** If you need to use the . character as part of your field name, you can change the separator to any other character using the nestedFieldSeparator option
* Set to false to disable nested data parsing
@@ -572,6 +598,12 @@ declare namespace Tabulator {
/** The columnTitleChanged callback is triggered whenever a user edits a column title when the editableTitle parameter has been enabled in the column definition array. */
columnTitleChanged?: (column: ColumnComponent) => void;
/**By setting the headerVisible option to false you can hide the column headers and present the table as a simple list if needed. */
headerVisible?: boolean;
/**If you don't want to show a particular column in the print table you can set the print property in its column definition object to false */
print?: boolean;
}
interface OptionsCell {
@@ -609,7 +641,7 @@ declare namespace Tabulator {
/** Function to generate tooltips for cells */
tooltips?: GlobalTooltipOption;
/** When to regenerate cell tooltip value */
tooltipGenerationMode?: "load";
tooltipGenerationMode?: 'load';
/** Keybinding configuration object */
keybindings?: false | KeyBinding;
@@ -670,16 +702,13 @@ declare namespace Tabulator {
dataSorted?: (sorters: Sorter[], rows: RowComponent[]) => void;
}
type DownloadType = "csv" | "json" | "xlsx" | "pdf";
type DownloadType = 'csv' | 'json' | 'xlsx' | 'pdf';
interface DownloadOptions extends DownloadCSV, DownloadXLXS, DownloadPDF {
downloadType: DownloadType;
fileName: string;
}
interface DownloadOptions extends DownloadCSV, DownloadXLXS, DownloadPDF {}
interface DownloadCSV {
/** By default CSV files are created using a comma (,) delimiter. If you need to change this for any reason the you can pass the options object with a delimiter property to the download function which will then use this delimiter instead of the comma. */
delimiter?: "string";
delimiter?: string;
/** If you need the output CSV to include a byte order mark (BOM) to ensure that output with UTF-8 characters can be correctly interpereted across didfferent applications, you should set the bom option to true */
bom?: boolean;
}
@@ -690,12 +719,15 @@ declare namespace Tabulator {
}
interface DownloadPDF {
orientation?: "portrait" | "landscape";
orientation?: 'portrait' | 'landscape';
title?: string;
rowGroupStyles?: any;
rowCalcStyles?: any;
jsPDF?: any;
autoTable?: {} | ((doc: any) => any);
/**An optional callback documentProcessing can be set on the download config object, that is passed the jsPDF document object after the auto-table creation to allow full customisation of the PDF */
documentProcessing?: (doc: any) => any;
}
interface OptionsDownload {
@@ -716,11 +748,48 @@ declare namespace Tabulator {
You can choose to remove column headers groups, row groups or column calculations from the output data by setting the values in the downloadConfig option in the table definition: */
downloadConfig?: {
columnGroups?: boolean;
rowGroups?: boolean;
columnCalcs?: boolean;
};
downloadConfig?: AddditionalExportOptions;
}
interface OptionsHTML {
htmlOutputConfig?: AddditionalExportOptions;
/**By Default when a page is printed that includes a Tabulator it will be rendered on the page exactly as the table is drawn. While this ise useful in most cases, some users prefer tohave more controll over the print output, for example showing all rows of the table, instead of just those visible with the current position of the scroll bar.
Tabulator provides a print styling mode that will replace the Tabulator with an HTML table for the printout giving you much more control over the look and feel of the table for the print out., to enable this mode, set the printAsHtml option to true in the table constructor.
This will replace the table (in print outs only) with a simple HTML table with the class tabulator-print-table that you can use to style the table in any way you like.
It also has the benifit that because it is an HTML table, if it corsses a page break your browser will uatomatically add the column headers in at the top of the next page.
*/
printAsHtml?: boolean;
/**The HTML table will contain column header groups, row groups, and column calculations.
You can choose to remove any of these from the output data by setting the values in the printConfig option in the table definition */
printConfig?: AddditionalExportOptions;
/**If you want your printed table to be styled to match your Tabulator you can set the printCopyStyle to true, this will copy key layout styling to the printed table */
printCopyStyle?: boolean;
/**By deafault, only the rows currently visible in the Tabulator will be added to the HTML table, If you want to inclued all the active data (all currently filted/sorted rows) in the table you can set the printVisibleRows option to false. */
printVisibleRows?: boolean;
/**You can use the printHeader table setup option to define a header to be displayed when the table is printed. */
printHeader?: StandardStringParam;
/**You can use the printFooter table setup option to define a footer to be displayed when the table is printed. */
printFooter?: StandardStringParam;
/**The printFormatter table setup option allows you to carry out any manipulation of the print output before it is displayed to the user for printing*/
printFormatter?: (tableHolderElement: any, tableElement: any) => any;
}
type StandardStringParam = string | HTMLElement | (() => string | HTMLElement);
interface AddditionalExportOptions {
columnGroups?: boolean;
rowGroups?: boolean;
columnCalcs?: boolean;
}
interface OptionsLocale {
@@ -738,7 +807,7 @@ declare namespace Tabulator {
localized?: (locale: string, lang: any) => void;
}
type HistoryAction = "cellEdit" | "rowAdd" | "rowDelete" | "rowMoved";
type HistoryAction = 'cellEdit' | 'rowAdd' | 'rowDelete' | 'rowMoved';
interface OptionsHistory {
/** Enable user interaction history functionality */
history?: boolean;
@@ -800,7 +869,25 @@ declare namespace Tabulator {
To specify a sorter to be used on a column use the sorter property in the columns definition object
You can pass an optional additional property with sorter, sorterParams that should contain an object with additional information for configuring the sorter*/
sorter?: "string" | "number" | "alphanum" | "boolean" | "exists" | "date" | "time" | "datetime" | "array" | ((a: any, b: any, aRow: RowComponent, bRow: RowComponent, column: ColumnComponent, dir: SortDirection, sorterParams: {}) => number);
sorter?:
| 'string'
| 'number'
| 'alphanum'
| 'boolean'
| 'exists'
| 'date'
| 'time'
| 'datetime'
| 'array'
| ((
a: any,
b: any,
aRow: RowComponent,
bRow: RowComponent,
column: ColumnComponent,
dir: SortDirection,
sorterParams: {}
) => number);
/** If you want to dynamically generate the sorterParams at the time the sort is called you can pass a function into the property that should return the params object. */
sorterParams?: ColumnDefinitionSorterParams | ColumnSorterParamLookupFunction;
/** set how you would like the data to be formatted*/
@@ -915,7 +1002,7 @@ You can pass an optional additional property with sorter, sorterParams that shou
true - vertical columns enabled
"flip" - vertical columns enabled, with text direction flipped by 180 degrees*
*/
headerVertical?: boolean | "flip";
headerVertical?: boolean | 'flip';
/** allows the user to edit the header titles */
editableTitle?: boolean;
@@ -947,6 +1034,9 @@ You can pass an optional additional property with sorter, sorterParams that shou
/** disable live filtering of the table */
headerFilterLiveFilter?: boolean;
/** Show/Hide a particular column in the HTML output*/
htmlOutput?: boolean;
}
interface CellCallbacks {
@@ -992,27 +1082,99 @@ You can pass an optional additional property with sorter, sorterParams that shou
interface ColumnDefinitionSorterParams {
format?: string;
locale?: string | boolean;
alignEmptyValues?: "top" | "bottom";
type?: "length" | "sum" | "max" | "min" | "avg";
alignEmptyValues?: 'top' | 'bottom';
type?: 'length' | 'sum' | 'max' | 'min' | 'avg';
}
type GlobalTooltipOption = boolean | ((cell: CellComponent) => string);
type CustomMutator = (value: any, data: any, type: "data" | "edit", mutatorParams: any, cell?: CellComponent) => any;
type CustomMutatorParams = {} | ((value: any, data: any, type: "data" | "edit", cell?: CellComponent) => any);
type CustomAccessor = (value: any, data: any, type: "data" | "download" | "clipboard", AccessorParams: any, column?: ColumnComponent) => any;
type CustomAccessorParams = {} | ((value: any, data: any, type: "data" | "download" | "clipboard", column?: ColumnComponent) => any);
type ColumnCalc = "avg" | "max" | "min" | "sum" | "concat" | "count" | ((values: any[], data: any[], calcParams: {}) => number);
type CustomMutator = (
value: any,
data: any,
type: 'data' | 'edit',
mutatorParams: any,
cell?: CellComponent
) => any;
type CustomMutatorParams = {} | ((value: any, data: any, type: 'data' | 'edit', cell?: CellComponent) => any);
type CustomAccessor = (
value: any,
data: any,
type: 'data' | 'download' | 'clipboard',
AccessorParams: any,
column?: ColumnComponent
) => any;
type CustomAccessorParams =
| {}
| ((value: any, data: any, type: 'data' | 'download' | 'clipboard', column?: ColumnComponent) => any);
type ColumnCalc =
| 'avg'
| 'max'
| 'min'
| 'sum'
| 'concat'
| 'count'
| ((values: any[], data: any[], calcParams: {}) => number);
type ColumnCalcParams = (values: any, data: any) => any;
type Formatter = "plaintext" | "textarea" | "html" | "money" | "image" | "datetime" | "datetimediff" | "link" | "tickCross" | "color" | "star" | "traffic" | "progress" | "lookup" | "buttonTick" | "buttonCross" | "rownum" | "handle" | ((cell: CellComponent, formatterParams: {}, onRendered: EmptyCallback) => string | HTMLElement);
type FormatterParams = MoneyParams | ImageParams | LinkParams | DateTimeParams | DateTimeDifferenceParams | TickCrossParams | TrafficParams | StarRatingParams | JSONRecord | ((cell: CellComponent) => {});
type Formatter =
| 'plaintext'
| 'textarea'
| 'html'
| 'money'
| 'image'
| 'datetime'
| 'datetimediff'
| 'link'
| 'tickCross'
| 'color'
| 'star'
| 'traffic'
| 'progress'
| 'lookup'
| 'buttonTick'
| 'buttonCross'
| 'rownum'
| 'handle'
| ((cell: CellComponent, formatterParams: {}, onRendered: EmptyCallback) => string | HTMLElement);
type FormatterParams =
| MoneyParams
| ImageParams
| LinkParams
| DateTimeParams
| DateTimeDifferenceParams
| TickCrossParams
| TrafficParams
| StarRatingParams
| JSONRecord
| ((cell: CellComponent) => {});
type Editor = true | "input" | "textarea" | "number" | "range" | "tickCross" | "star" | "select" | "autocomplete" | ((cell: CellComponent, onRendered: EmptyCallback, success: ValueVoidCallback, cancel: ValueVoidCallback, editorParams: {}) => HTMLElement | false);
type Editor =
| true
| 'input'
| 'textarea'
| 'number'
| 'range'
| 'tickCross'
| 'star'
| 'select'
| 'autocomplete'
| ((
cell: CellComponent,
onRendered: EmptyCallback,
success: ValueVoidCallback,
cancel: ValueVoidCallback,
editorParams: {}
) => HTMLElement | false);
type EditorParams = NumberParams | CheckboxParams | SelectParams | AutoCompleteParams | ((cell: CellComponent) => {});
type EditorParams =
| NumberParams
| CheckboxParams
| SelectParams
| AutoCompleteParams
| InputParams
| ((cell: CellComponent) => {});
type ScrollToRowPostition = "top" | "center" | "bottom" | "nearest";
type ScrollToColumnPosition = "left" | "center" | "middle" | "right";
type ColumnDefinitionAlign = "left" | "center" | "right";
type ScrollToRowPostition = 'top' | 'center' | 'bottom' | 'nearest';
type ScrollToColumnPosition = 'left' | 'center' | 'middle' | 'right';
type ColumnDefinitionAlign = 'left' | 'center' | 'right';
interface MoneyParams {
// Money
@@ -1048,7 +1210,7 @@ You can pass an optional additional property with sorter, sorterParams that shou
// Date Time Difference
date?: any;
humanize?: boolean;
unit?: "years" | "months" | "weeks" | "days" | "hours" | "minutes" | "seconds";
unit?: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds';
suffix?: boolean;
}
interface TickCrossParams {
@@ -1084,6 +1246,11 @@ You can pass an optional additional property with sorter, sorterParams that shou
step?: number;
}
interface InputParams {
/**Changes input type to 'search' and shows an 'X' clear button to clear the cell value easily */
search?: boolean;
}
interface CheckboxParams {
// tick
tristate?: boolean;
@@ -1125,14 +1292,14 @@ You can pass an optional additional property with sorter, sorterParams that shou
type RowChangedCallback = (row: RowComponent) => void;
type GroupEventCallback = (e: any, group: GroupComponent) => void;
type SortDirection = "asc" | "desc";
type FilterType = "=" | "!=" | "like" | "<" | ">" | "<=" | ">=" | "in" | "regex";
type SortDirection = 'asc' | 'desc';
type FilterType = '=' | '!=' | 'like' | '<' | '>' | '<=' | '>=' | 'in' | 'regex';
type Color = string | any[] | ValueStringCallback;
type Align = "center" | "left" | "right" | "justify";
type Align = 'center' | 'left' | 'right' | 'justify';
type JSONRecord = Record<string, string | number | boolean>;
type StandardValidatorType = "required" | "unique" | "integer" | "float" | "numeric" | "string";
type StandardValidatorType = 'required' | 'unique' | 'integer' | 'float' | 'numeric' | 'string';
interface Validator {
type: StandardValidatorType | ((cell: CellComponent, value: any, parameters?: any) => boolean);
parameters?: any;
@@ -1390,7 +1557,13 @@ declare class Tabulator {
If you want to create a custom file type from the table data then you can pass a function to the type argument, instead of a string value. At the end of this function you must call the setFileContents function, passing the formatted data and the mime type.
*/
download: (downloadType: Tabulator.DownloadType | ((columns: Tabulator.ColumnDefinition[], data: any, options: any, setFileContents: any) => any), fileName: string, params?: Tabulator.DownloadOptions) => void;
download: (
downloadType:
| Tabulator.DownloadType
| ((columns: Tabulator.ColumnDefinition[], data: any, options: any, setFileContents: any) => any),
fileName: string,
params?: Tabulator.DownloadOptions
) => void;
/** If you want to open the generated file in a new browser tab rather than downloading it straight away, you can use the downloadToTab function. This is particularly useful with the PDF downloader, as it allows you to preview the resulting PDF in a new browser ta */
downloadToTab: (downloadType: Tabulator.DownloadType, fileName: string, params?: Tabulator.DownloadOptions) => void;
@@ -1400,7 +1573,7 @@ declare class Tabulator {
The first argument is the copy selector, you can choose from any of the built in options or pass a function in to the argument, that must return the selected row components.
If you leave this argument undefined, Tabulator will use the value of the clipboardCopySelector property, which has a default value of table */
copyToClipboard: (type: "selection" | "table") => void;
copyToClipboard: (type: 'selection' | 'table') => void;
/** With history enabled you can use the undo function to automatically undo a user action, the more times you call the function, the further up the history log you go. */
undo: () => boolean;
@@ -1429,8 +1602,12 @@ declare class Tabulator {
searchRows: (field: string, type: Tabulator.FilterType, value: any) => Tabulator.RowComponent[];
/** The searchData function allows you to retreive an array of table row data that match any filters you pass in. it accepts the same arguments as the setFilter function. */
searchData: (field: string, type: Tabulator.FilterType, value: any) => any[];
/** You can retrieve the table data as a simple HTML table using the getHtml function. */
getHtml: (activeOnly?: boolean) => void;
/** Returns a table built of all active rows in the table (matching filters and sorts) */
getHtml: (activeOnly?: boolean, style?: boolean, config?: Tabulator.AddditionalExportOptions) => any;
/**You can use the print function to trigger a full page printing of the contents of the table without any other elements from the page */
print: (activeOnly?: boolean, style?: boolean, config?: Tabulator.AddditionalExportOptions) => any;
/** You can retrieve the current AJAX URL of the table with the getAjaxUrl function.
*
* This will return a HTML encoded string of the table data.
@@ -1447,7 +1624,11 @@ declare class Tabulator {
This function takes an array of row objects and will update each row based on its index value. (the index defaults to the "id" parameter, this can be set using the index option in the tabulator constructor). Options without an index will be ignored, as will items with an index that is not already in the table data. The addRow function should be used to add new data to the table. */
updateData: (data: Array<{}>) => Promise<void>;
/** The addData method returns a promise, this can be used to run any other commands that have to be run after the data has been loaded into the table. By running them in the promise you ensure they are only run after the table has loaded the data. */
addData: (data?: Array<{}>, addToTop?: boolean, positionTarget?: Tabulator.RowLookup) => Promise<Tabulator.RowComponent>;
addData: (
data?: Array<{}>,
addToTop?: boolean,
positionTarget?: Tabulator.RowLookup
) => Promise<Tabulator.RowComponent>;
/** If the data you are passng to the table contains a mix of existing rows to be updated and new rows to be added then you can call the updateOrAddData function. This will check each row object provided and update the existing row if available, or else create a new row with the data. */
updateOrAddData: (data: Array<{}>) => Promise<Tabulator.RowComponent[]>;
@@ -1487,7 +1668,11 @@ declare class Tabulator {
The second argument is optional, and is used to set the position of the row, it should be a string with a value of either top, center, bottom or nearest, if omitted it will be set to the value of the scrollToRowPosition option which has a default value of top.
The third argument is optional, and is a boolean used to set if the table should scroll if the row is already visible, true to scroll, false to not, if omitted it will be set to the value of the scrollToRowIfVisible option, which defaults to true */
scrollToRow: (row: Tabulator.RowLookup, position?: Tabulator.ScrollToRowPostition, ifVisible?: boolean) => Promise<void>;
scrollToRow: (
row: Tabulator.RowLookup,
position?: Tabulator.ScrollToRowPostition,
ifVisible?: boolean
) => Promise<void>;
/** If you want to programmatically move a row to a new position you can use the moveRow function.
The first argument should be the row you want to move, and can be any of the standard row component look up options.
@@ -1534,7 +1719,11 @@ declare class Tabulator {
Position (optional) - The field to insert the new column next to, this can be any of the standard column component look up options.
*
*/
addColumn: (definition: Tabulator.ColumnDefinition, insertRightOfTarget?: boolean, positionTarget?: Tabulator.ColumnLookup) => void;
addColumn: (
definition: Tabulator.ColumnDefinition,
insertRightOfTarget?: boolean,
positionTarget?: Tabulator.ColumnLookup
) => void;
/** To permanently remove a column from the table deleteColumn function. This function takes any of the standard column component look up options as its first parameter */
deleteColumn: (column: Tabulator.ColumnLookup) => void;
/** If you want to trigger an animated scroll to a column then you can use the scrollToColumn function. The first argument should be any of the standard column component look up options for the column you want to scroll to.
@@ -1543,7 +1732,11 @@ declare class Tabulator {
The third argument is optional, and is a boolean used to set if the table should scroll if the column is already visible, true to scroll, false to not, if omitted it will be set to the value of the scrollToColumnIfVisible option, which defaults to true
*/
scrollToColumn: (column: Tabulator.ColumnLookup, position?: Tabulator.ScrollToColumnPosition, ifVisible?: boolean) => Promise<void>;
scrollToColumn: (
column: Tabulator.ColumnLookup,
position?: Tabulator.ScrollToColumnPosition,
ifVisible?: boolean
) => Promise<void>;
/** You can also set the language at any point after the table has loaded using the setLocale function, which takes the same range of values as the locale setup option mentioned above. */
setLocale: (locale: string | boolean) => void;
/** It is possible to retrieve the locale code currently being used by Tabulator using the getLocale function: */
@@ -1569,7 +1762,11 @@ declare class Tabulator {
If you want to perform a more complicated filter then you can pass a callback function to the setFilter method, you can also pass an optional second argument, an object with parameters to be passed to the filter function.
*/
setFilter: (p1: string | Tabulator.Filter[] | any[] | ((data: any, filterParams: any) => boolean), p2?: Tabulator.FilterType | {}, value?: any) => void;
setFilter: (
p1: string | Tabulator.Filter[] | any[] | ((data: any, filterParams: any) => boolean),
p2?: Tabulator.FilterType | {},
value?: any
) => void;
/** If you want to add another filter to the existing filters then you can call the addFilter function: */
addFilter: Tabulator.FilterFunction;
/** You can retrieve an array of the current programtic filters using the getFilters function, this will not include any of the header filters: */
@@ -1614,7 +1811,7 @@ declare class Tabulator {
"last" - show the last page
The setPage method returns a promise, this can be used to run any other commands that have to be run after the data has been loaded into the table. By running them in the promise you ensure they are only run after the table has loaded the data.
*/
setPage: (page: number | "first" | "prev" | "next" | "last") => Promise<void>;
setPage: (page: number | 'first' | 'prev' | 'next' | 'last') => Promise<void>;
/** You can load the page for a specific row using the setPageToRow function and passing in any of the standard row component look up options for the row you want to scroll to.
** The setPageToRow method returns a promise, this can be used to run any other commands that have to be run after the data has been loaded into the table. By running them in the promise you ensure they are only run after the table has loaded the data.
*/
@@ -1638,9 +1835,15 @@ declare class Tabulator {
/** You can use the setGroupStartOpen function to change the default open state of groups. This function has one argument and takes the same values as passed to the groupStartOpen setup option.
** Note: If you use the setGroupStartOpen or setGroupHeader before you have set any groups on the table, the table will not update until the setGroupBy function is called.
*/
setGroupStartOpen: (values: boolean | ((value: any, count: number, data: any, group: Tabulator.GroupComponent) => boolean)) => void;
setGroupStartOpen: (
values: boolean | ((value: any, count: number, data: any, group: Tabulator.GroupComponent) => boolean)
) => void;
/** You can use the setGroupHeader function to change the header generation function for each group. This function has one argument and takes the same values as passed to the groupHeader setup option. */
setGroupHeader: (values: ((value: any, count: number, data: any, group: Tabulator.GroupComponent) => string) | Array<(value: any, count: number, data: any) => string>) => void;
setGroupHeader: (
values:
| ((value: any, count: number, data: any, group: Tabulator.GroupComponent) => string)
| Array<(value: any, count: number, data: any) => string>
) => void;
/** You can use the getGroups function to retrieve an array of all the first level Group Components in the table. */
getGroups: () => Tabulator.GroupComponent[];
/** get grouped table data in the same format as getData() */
types/tabulator-tables/tabulator-tables-tests.ts
+165 -118
View File
@@ -2,30 +2,30 @@
// tslint:disable:whitespace
// constructor
let table = new Tabulator("#test");
table.copyToClipboard("selection");
table.searchRows("name", "<", 3);
table.setFilter("name", "<=", 3);
let table = new Tabulator('#test');
table.copyToClipboard('selection');
table.searchRows('name', '<', 3);
table.setFilter('name', '<=', 3);
table.setFilter([
{ field: "age", type: ">", value: 52 }, // filter by age greater than 52
{ field: "height", type: "<", value: 142 }, // and by height less than 142
{ field: "name", type: "in", value: ["steve", "bob", "jim"] } // name must be steve, bob or jim
{ field: 'age', type: '>', value: 52 }, // filter by age greater than 52
{ field: 'height', type: '<', value: 142 }, // and by height less than 142
{ field: 'name', type: 'in', value: ['steve', 'bob', 'jim'] }, // name must be steve, bob or jim
]);
table.setFilter(
(data, filterParams) => {
// data - the data for the row being filtered
// filterParams - params object passed to the filter
return data.name === "bob" && data.height < filterParams.height; // must return a boolean, true if it passes the filter.
return data.name === 'bob' && data.height < filterParams.height; // must return a boolean, true if it passes the filter.
},
{ height: 3 }
);
table.setFilter("age", "in", ["steve", "bob", "jim"]);
table.setFilter('age', 'in', ['steve', 'bob', 'jim']);
table.setFilter([
{ field: "age", type: ">", value: 52 }, // filter by age greater than 52
{ field: 'age', type: '>', value: 52 }, // filter by age greater than 52
[
{ field: "height", type: "<", value: 142 }, // with a height of less than 142
{ field: "name", type: "=", value: "steve" } // or a name of steve
]
{ field: 'height', type: '<', value: 142 }, // with a height of less than 142
{ field: 'name', type: '=', value: 'steve' }, // or a name of steve
],
]);
table
@@ -37,23 +37,23 @@ table
// handle error loading data
});
table.setGroupBy("gender");
table.setGroupBy('gender');
table.setGroupStartOpen(true);
table.setGroupHeader((value, count, data, group) => {
return "";
return '';
});
table.setGroupHeader((value, count, data) => {
return "";
return '';
});
table.setSort([
{ column: "age", dir: "asc" }, // sort by this first
{ column: "height", dir: "desc" } // then sort by this second
{ column: 'age', dir: 'asc' }, // sort by this first
{ column: 'height', dir: 'desc' }, // then sort by this second
]);
table
.scrollToColumn("age", "middle", false)
.scrollToColumn('age', 'middle', false)
.then(() => {
// run code after column has been scrolled to
})
@@ -62,7 +62,7 @@ table
});
table
.updateOrAddData([{ id: 1, name: "bob" }, { id: 3, name: "steve" }])
.updateOrAddData([{ id: 1, name: 'bob' }, { id: 3, name: 'steve' }])
.then(rows => {
// rows - array of the row components for the rows updated or added
// run code after data has been updated
@@ -71,9 +71,9 @@ table
// handle error updating data
});
table.updateData([{ id: 1, name: "bob", gender: "male" }, { id: 2, name: "Jenny", gender: "female" }]);
table.updateData([{ id: 1, name: 'bob', gender: 'male' }, { id: 2, name: 'Jenny', gender: 'female' }]);
table
.updateData([{ id: 1, name: "bob" }])
.updateData([{ id: 1, name: 'bob' }])
.then(() => {
// run code after data has been updated
})
@@ -85,7 +85,7 @@ let row1: Tabulator.RowComponent;
let row2: Tabulator.RowComponent;
// column definitions
let colDef: Tabulator.ColumnDefinition = { title: "title", field: "" };
let colDef: Tabulator.ColumnDefinition = { title: 'title', field: '' };
colDef.sorter = customSorter;
// prettier-ignore
@@ -98,35 +98,35 @@ function customSorter(a: any, b: any, aRow: Tabulator.RowComponent,
colDef.sorterParams = (col: Tabulator.ColumnComponent, dir: Tabulator.SortDirection) => {
return {};
};
colDef.sorterParams = { format: "DD/MM/YY" };
colDef.sorterParams = { format: 'DD/MM/YY' };
colDef.formatterParams = {
invalidPlaceholder: val => {
return "";
}
return '';
},
};
colDef.formatterParams = cell => {
// cell - the cell component
// do some processing and return the param object
return { param1: "green" };
return { param1: 'green' };
};
// List lookup
colDef.formatterParams = {
small: "Cute",
medium: "Fine",
small: 'Cute',
medium: 'Fine',
big: 2,
huge: true
huge: true,
};
// Custom Formatter
colDef.formatter = (cell: Tabulator.CellComponent, formatterParams: {}, onRendered) => {
onRendered = () => {};
return "";
return '';
};
colDef.editor = true;
colDef.editor = "number";
colDef.editor = 'number';
colDef.editor = (cell, onRendered, success, cancel, editorParams) => {
// cell - the cell component for the editable cell
// onRendered - function to call when the editor has been rendered
@@ -135,38 +135,38 @@ colDef.editor = (cell, onRendered, success, cancel, editorParams) => {
// editorParams - params object passed into the editorParams column definition property
// create and style editor
const editor = document.createElement("input");
const editor = document.createElement('input');
editor.setAttribute("type", "date");
editor.setAttribute('type', 'date');
// create and style input
editor.style.padding = "3px";
editor.style.width = "100%";
editor.style.boxSizing = "border-box";
editor.style.padding = '3px';
editor.style.width = '100%';
editor.style.boxSizing = 'border-box';
// Set value of editor to the current value of the cell
editor.value = moment(cell.getValue(), "DD/MM/YYYY");
editor.value = moment(cell.getValue(), 'DD/MM/YYYY');
// set focus on the select box when the editor is selected (timeout allows for editor to be added to DOM)
onRendered(() => {
editor.focus();
editor.style.cssText = "100%";
editor.style.cssText = '100%';
});
// when the value has been set, trigger the cell to update
function successFunc() {
success(moment(editor.value, "YYYY-MM-DD"));
success(moment(editor.value, 'YYYY-MM-DD'));
}
editor.addEventListener("change", successFunc);
editor.addEventListener("blur", successFunc);
editor.addEventListener('change', successFunc);
editor.addEventListener('blur', successFunc);
// return the editor element
return editor;
};
// Dummy function
function moment(a: any, b: any) {
return "";
return '';
}
colDef.cellClick = (_e, cell) => {
@@ -180,50 +180,50 @@ colDef.editorParams = {
values: [
{
// option group
label: "Men",
label: 'Men',
options: [
// options in option group
{
label: "Steve Boberson",
value: "steve"
label: 'Steve Boberson',
value: 'steve',
},
{
label: "Bob Jimmerson",
value: "bob"
}
]
label: 'Bob Jimmerson',
value: 'bob',
},
],
},
{
// option group
label: "Women",
label: 'Women',
options: [
// options in option group
{
label: "Jenny Jillerson",
value: "jenny"
label: 'Jenny Jillerson',
value: 'jenny',
},
{
label: "Jill Betterson",
value: "jill"
}
]
label: 'Jill Betterson',
value: 'jill',
},
],
},
{
// ungrouped option
label: "Other",
value: "other"
}
]
label: 'Other',
value: 'other',
},
],
};
let selectParamValues: Tabulator.JSONRecord;
selectParamValues = {
steve: "Steve Boberson",
bob: "Bob Jimmerson",
jim: true
steve: 'Steve Boberson',
bob: 'Bob Jimmerson',
jim: true,
};
colDef.editorParams = {
values: selectParamValues
values: selectParamValues,
};
colDef.editorParams = cell => {
@@ -241,9 +241,9 @@ let autoComplete: Tabulator.AutoCompleteParams = {
},
listItemFormatter: (value, title) => {
// prefix all titles with the work "Mr"
return "Mr " + title;
return 'Mr ' + title;
},
values: true // create list of values from all values contained in this column
values: true, // create list of values from all values contained in this column
};
colDef.editorParams = autoComplete;
@@ -251,40 +251,40 @@ colDef.editorParams = {
values: [
{
// option group
label: "Men",
label: 'Men',
options: [
// options in option group
{
label: "Steve Boberson",
value: "steve"
label: 'Steve Boberson',
value: 'steve',
},
{
label: "Bob Jimmerson",
value: "bob"
}
]
label: 'Bob Jimmerson',
value: 'bob',
},
],
},
{
// option group
label: "Women",
label: 'Women',
options: [
// options in option group
{
label: "Jenny Jillerson",
value: "jenny"
label: 'Jenny Jillerson',
value: 'jenny',
},
{
label: "Jill Betterson",
value: "jill"
}
]
label: 'Jill Betterson',
value: 'jill',
},
],
},
{
// ungrouped option
label: "Other",
value: "other"
}
]
label: 'Other',
value: 'other',
},
],
};
// Validators
@@ -293,23 +293,23 @@ colDef.validator = {
return true;
},
parameters: {
divisor: 5
}
divisor: 5,
},
};
colDef.validator = "float";
colDef.validator = { type: "float", parameters: {} };
colDef.validator = 'float';
colDef.validator = { type: 'float', parameters: {} };
let validators: Tabulator.Validator[] = [
{ type: "integer", parameters: {} },
{ type: 'integer', parameters: {} },
{
type: (cell, value, parameters) => {
return true;
},
parameters: {}
}
parameters: {},
},
];
colDef.headerFilterFunc = "!=";
colDef.headerFilterFunc = '!=';
colDef.headerFilterFunc = (headerValue, rowValue, rowData, filterParams) => {
return rowData.name === filterParams.name && rowValue < headerValue; // must return a boolean, true if it passes the filter.
};
@@ -335,8 +335,8 @@ row.delete()
// Options
let options = <Tabulator.Options>{};
options.keybindings = {
navPrev: "ctrl + 1",
navNext: false
navPrev: 'ctrl + 1',
navNext: false,
};
options.downloadDataFormatter = data => {
@@ -347,30 +347,30 @@ options.downloadDataFormatter = data => {
options.downloadConfig = {
columnGroups: false, // include column groups in column headers for download
rowGroups: false, // do not include row groups in download
columnCalcs: false // do not include column calculation rows in download
columnCalcs: false, // do not include column calculation rows in download
};
options.ajaxConfig = "GET";
options.ajaxConfig = 'GET';
options.ajaxConfig = {
mode: "cors", // set request mode to cors
credentials: "same-origin", // send cookies with the request from the matching origin
mode: 'cors', // set request mode to cors
credentials: 'same-origin', // send cookies with the request from the matching origin
headers: {
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
}
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
},
};
options.ajaxConfig = {
method: "POST", // set request type to Position
method: 'POST', // set request type to Position
headers: {
"Content-type": "application/json; charset=utf-8" // set specific content type
}
'Content-type': 'application/json; charset=utf-8', // set specific content type
},
};
options.ajaxContentType = {
headers: {
"Content-Type": "text/html"
'Content-Type': 'text/html',
},
body: (url, config, params) => {
// url - the url of the request
@@ -384,19 +384,19 @@ options.ajaxContentType = {
output.push(`${key} ":" ${params[key]}`);
}
return output.join(",");
}
return output.join(',');
},
};
options.initialSort = [{ column: "name", dir: "asc" }, { column: "name2", dir: "desc" }];
options.initialFilter = [{ field: "color", type: "=", value: "red" }];
options.initialSort = [{ column: 'name', dir: 'asc' }, { column: 'name2', dir: 'desc' }];
options.initialFilter = [{ field: 'color', type: '=', value: 'red' }];
options.initialHeaderFilter = [
{ field: "color", value: "red" } // set the initial value of the header filter to "red"
{ field: 'color', value: 'red' }, // set the initial value of the header filter to "red"
];
options.groupValues = [
["red", "blue", "green"], // create groups for color values of "red", "blue", and "green",
[10, 20, 30] // create sub groups for ages of 10, 20 and 30
['red', 'blue', 'green'], // create groups for color values of "red", "blue", and "green",
[10, 20, 30], // create sub groups for ages of 10, 20 and 30
];
options.groupHeader = (value, count, data, group) => {
@@ -416,12 +416,12 @@ options.groupHeader = [
(value, count, data) => {
// generate header contents for color groups
return `${value} <span style='color:#0dd; margin-left:10px;'>(${count}item)</span>`;
}
},
];
options.paginationDataReceived = {
last_page: "max_pages",
a: "b"
last_page: 'max_pages',
a: 'b',
};
options.clipboardPasteParser = clipboard => {
@@ -431,3 +431,50 @@ options.clipboardPasteParser = clipboard => {
options.cellEditing = cell => {
console.log(cell);
};
// 4.3 updates
table = new Tabulator('#test', {
headerVisible: false,
printHeader: () => {
return 'Header';
},
});
colDef.editorParams = { search: true };
table.getHtml(true, true, { columnCalcs: true });
table.download('pdf', 'data.pdf', {
documentProcessing: doc => {},
});
table.download('pdf', 'data.pdf', {
orientation: 'portrait',
autoTable: doc => {
doc.text('SOME TEXT', 1, 1);
return {
styles: {
fillColor: [200, 00, 00],
},
};
},
});
table.download('pdf', 'data.pdf', {
orientation: 'portrait',
title: 'Dynamics Quotation Report',
jsPDF: {
unit: 'in',
},
autoTable: {
styles: {
fillColor: [100, 255, 255],
},
columnStyles: {
id: { fillColor: 255 },
},
margin: { top: 60 },
},
});
table.download('xlsx', 'AllData.xlsx');
table.download('csv', 'data.csv', { bom: true });
table.download('csv', 'data.csv', { delimiter: '.' });