vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-08-12 04:50:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update to tabulator-tables 4.6 (#43496)

Browse Source 
* Update to tabulator-tables 4.6

* update version number

* update typescript version

* change minimum typescript version

* update array type
This commit is contained in:
Jojoshua
2020-03-31 10:10:13 -07:00
committed by GitHub
parent 29d6b019ff
commit 464a70cabc
2 changed files with 224 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
types/tabulator-tables/index.d.ts
Vendored
+140 -33
View File
@@ -1,4 +1,4 @@
// Type definitions for tabulator-tables 4.5
// Type definitions for tabulator-tables 4.6
// Project: http://tabulator.info
// Definitions by: Josh Harris <https://github.com/jojoshua>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
@@ -11,6 +11,7 @@
declare namespace Tabulator {
interface Options
extends OptionsGeneral,
OptionsMenu,
OptionsHistory,
OptionsLocale,
OptionsDownload,
@@ -52,6 +53,8 @@ declare namespace Tabulator {
/** By default all nodes on the tree will start collapsed, you can customize the initial expansion state of the tree using the dataTreeStartExpanded option.*
This option can take one of three possible value types, either a boolean to indicate whether all nodes should start expanded or collapsed: */
dataTreeStartExpanded?: boolean | boolean[] | ((row: RowComponent, level: number) => boolean);
/**Propagte selection events from parent rows to children */
dataTreeSelectPropagate?: boolean;
}
interface OptionsClipboard {
/** You can enable clipboard functionality using the clipboard config option. It can take one of four possible values:
@@ -61,18 +64,12 @@ declare namespace Tabulator {
"paste" - enable only paste functionality
false - disable all clipboard functionality (default) */
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
selected - Copy the currently selected rows to the clipboard, including data that is currently filtered out
Tabulator will try to use the best selector to match your table setup. If any text is selected on the table, then it will be that text which is copied. If the table has selectable rows enabled, the it will be the currently selected rows copied to the clipboard in the order in which they were selected. Otherwise the currently visible data in the table will be copied.
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' | 'visible';
/** 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);
/**The clipboardCopyRowRange option takes a Row Range Lookup value and allows you to choose which rows are included in the clipboard output: */
clipboardCopyRowRange?: RowRangeLookup;
/**You can alter the finished output to the clipboard using the clipboardCopyFormatter callback. The callback function receives two arguments, the first is a string representing the type of content to be formatted (either "plain" or "html" depending on the type of data entering the clipboard). The second argument is the string that is about to be insered into the clipboard. The function and should return a string that will be inserted into the clipboard */
clipboardCopyFormatter?: 'table' | ((type: 'plain' | 'html', output: string) => 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.
@@ -98,13 +95,7 @@ declare namespace Tabulator {
/** By default Tabulator includes column headers, row groups and column calculations in the clipboard output.
You can choose to remove column headers groups, row groups or column calculations from the output data by setting the values in the clipboardCopyConfig option in the table definition: */
clipboardCopyConfig?:
| {
columnHeaders?: boolean;
rowGroups?: boolean;
columnCalcs?: boolean;
}
| boolean;
clipboardCopyConfig?: AddditionalExportOptions | boolean;
/** The clipboardCopied event is triggered whenever data is copied to the clipboard. */
clipboardCopied?: () => void;
@@ -269,6 +260,9 @@ declare namespace Tabulator {
dataFiltering?: (filters: Filter[]) => void;
/** The dataFiltered callback is triggered after the table dataset is filtered. */
dataFiltered?: (filters: Filter[], rows: RowComponent[]) => void;
/**When using real time header filtering, Tabulator will wait 300 miliseconds after a keystroke before triggering the filter. You can customise this delay by using the headerFilterLiveFilterDelay table setup option */
headerFilterLiveFilterDelay?: number;
}
interface OptionsSorting {
/** Array of sorters to be applied on load. */
@@ -367,6 +361,15 @@ declare namespace Tabulator {
The function accepts one argument, the RowComponent for the row being formatted. */
rowFormatter?: (row: RowComponent) => any;
/**When printing you may want to apply a different formatter may want to apply a different formatter from the one usualy used to format the row. */
rowFormatterPrint?: false | ((row: RowComponent) => any);
/**When the getHtml function is called you may want to apply a different formatter may want to apply a different formatter from the one usualy used to format the row */
rowFormatterHtmlOutput?: false | ((row: RowComponent) => any);
/**When copying to the clipboard you may want to apply a different formatter may want to apply a different formatter from the one usualy used to format the row. You can now do this using the rowFormatterClipboard table option, which takes the same inputs as the standard rowFormatter property. Passing a value of false into the formatter prevent the default row formatter from being run when the table is copied to the clipboard*/
rowFormatterClipboard?: false | ((row: RowComponent) => any);
/** The position in the table for new rows to be added, "bottom" or "top" */
addRowPos?: 'bottom' | 'top';
@@ -584,7 +587,7 @@ declare namespace Tabulator {
tooltipsHeader?: boolean;
/** You can use the columnHeaderVertAlign option to set how the text in your column headers should be vertically */
columnHeaderVertAlign?: 'top' | 'middle' | 'bottom';
columnHeaderVertAlign?: VerticalAlign;
/** The default placeholder text used for input elements can be set using the headerFilterPlaceholder option in the table definition */
headerFilterPlaceholder?: string;
@@ -658,11 +661,18 @@ declare namespace Tabulator {
cellEditing?: CellEditEventCallback;
cellEdited?: CellEditEventCallback;
cellEditCancelled?: CellEditEventCallback;
cellHozAlign?: ColumnDefinitionAlign;
cellVertAlign?: VerticalAlign;
}
interface OptionsGeneral {
/** Sets the height of the containing element, can be set to any valid height css value. If set to false (the default), the height of the table will resize to fit the table data. */
height?: string | number | false;
/** Can be set to any valid CSS value. By setting this you can allow your table to expand to fit the data, but not overflow its parent element. Whene there are too many rows to fit in the available space, the vertical scroll bar will be shown. This has the added benefit of improving load times on larger tables */
maxHeight?: string | number;
/** With a variable table height you can set the minimum height of the table either defined in the min-height CSS property for the element or set it using the minHeight option in the table constructor, this can be set to any valid CSS value */
minHeight?: string | number;
/** Enable rendering using the Virtual DOM engine */
virtualDom?: boolean;
@@ -752,6 +762,25 @@ declare namespace Tabulator {
scrollHorizontal?: (left: any) => void;
}
interface OptionsMenu {
rowContextMenu?:
| MenuObject[]
| MenuSeparator[]
| ((component: RowComponent | CellComponent | ColumnComponent) => MenuObject | false | any[]);
}
interface MenuObject extends MenuSeparator {
label:
| string
| HTMLElement
| ((component: RowComponent | CellComponent | ColumnComponent) => string | HTMLElement);
action: (e: any, component: RowComponent | CellComponent | ColumnComponent) => any;
disabled?: boolean | ((component: RowComponent | CellComponent | ColumnComponent) => boolean);
}
interface MenuSeparator {
separator?: boolean;
}
type DownloadType = 'csv' | 'json' | 'xlsx' | 'pdf' | 'html';
interface DownloadOptions extends DownloadCSV, DownloadXLXS, DownloadPDF, DownloadHTML {}
@@ -825,10 +854,10 @@ declare namespace Tabulator {
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;
printStyled?: 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;
/**By default, only the rows currently visible in the Tabulator will be added to the HTML table. For custom row ranges it is also possible to pass a function into the printRowRange option that should return an array of Row Components */
printRowRange?: RowRangeLookup | (() => RowComponent[]);
/**You can use the printHeader table setup option to define a header to be displayed when the table is printed. */
printHeader?: StandardStringParam;
@@ -843,9 +872,13 @@ declare namespace Tabulator {
type StandardStringParam = string | HTMLElement | (() => string | HTMLElement);
interface AddditionalExportOptions {
columnHeaders?: boolean;
columnGroups?: boolean;
rowGroups?: boolean;
columnCalcs?: boolean;
dataTree?: boolean;
/**Show only raw unformatted cell values in the clipboard output */
formatCells?: boolean;
}
interface OptionsLocale {
@@ -887,9 +920,11 @@ declare namespace Tabulator {
}
interface ColumnDefinition extends ColumnLayout, CellCallbacks {
// Layout
/** sets the text alignment for this column */
align?: ColumnDefinitionAlign; // Align?
/**If you want to set the horizontal alignment on a column by column basis, */
hozAlign?: ColumnDefinitionAlign;
/**If you want to set the vertical alignment on a column by column basis */
vertAlign?: VerticalAlign;
/** sets the minimum width of this column, this should be set in pixels (this takes priority over the global option of columnMinWidth) */
minWidth?: number;
@@ -1099,6 +1134,28 @@ You can pass an optional additional property with sorter, sorterParams that shou
/** A column can be a "group" of columns (Example: group header column -> Measurements, grouped column -> Length, Width, Height) */
columns?: ColumnDefinition[];
/**You can add a menu to any column by passing an array of menu items to the headerMenu option in that columns definition. */
headerMenu?: MenuObject[] | MenuSeparator[];
/**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. */
headerContextMenu?: MenuObject[] | MenuSeparator[];
/**You can add a right click context menu to any columns cells by passing an array of menu items to the contextMenu option in that columns definition. */
contextMenu?: MenuObject[] | MenuSeparator[];
/**When copying to the clipboard you may want to apply a different formatter from the one usualy used to format the cell, you can do this using the formatterClipboard column definition option. You can use the formatterClipboardParams to pass in any additional params to the formatter */
formatterClipboard?: Formatter | false;
formatterClipboardParams?: FormatterParams;
/**When printing you may want to apply a different formatter from the one usualy used to format the cell, you can do this using the formatterPrint column definition option. You can use the formatterPrintParams to pass in any additional params to the formatter */
formatterPrint?: Formatter | false;
formatterPrintParams?: FormatterParams;
/**You can use the accessorPrint and accessorPrintParams options on a column definition to alter the value of data in a column before it is printed */
accessorPrint?: CustomAccessor;
accessorPrintParams?: CustomAccessorParams;
/**You can use the accessorHtmlOutput and accessorHtmlOutputParams options on a column definition to alter the value of data in a column before the html is generated. */
accessorHtmlOutput?: CustomAccessor;
accessorHtmlOutputParams?: CustomAccessorParams;
/**When the getHtml function is called you may want to apply a different formatter from the one usualy used to format the cell, you can do this using the formatterHtmlOutput column definition option */
formatterHtmlOutput?: Formatter | false;
formatterHtmlOutputParams?: FormatterParams;
}
interface CellCallbacks {
@@ -1240,6 +1297,7 @@ You can pass an optional additional property with sorter, sorterParams that shou
type ScrollToRowPostition = 'top' | 'center' | 'bottom' | 'nearest';
type ScrollToColumnPosition = 'left' | 'center' | 'middle' | 'right';
type ColumnDefinitionAlign = 'left' | 'center' | 'right';
type VerticalAlign = 'top' | 'middle' | 'bottom';
interface MoneyParams {
// Money
@@ -1307,6 +1365,25 @@ You can pass an optional additional property with sorter, sorterParams that shou
interface SharedEditorParams {
elementAttributes?: JSONRecord;
/**Built in editors based on input elements such as the input, number, textarea and autocomplete editors have the ability to mask the users input to restrict it to match a given pattern.
This can be set by passing a string to the the mask option in the columns editorParams
Each character in the string passed to the mask option defines what type of character can be entered in that position in the editor.
A - Only a letter is valid in this position
9 - Only a number is valid in this position
* - Any character is valid in this position
Any other character - The character in this position must be the same as the mask
For example, a mask string of "AAA-999" would require the user to enter three letters followed by a hyphen followed by three numbers
f you want to use the characters A, 9 or * as fixed characters then it is possible to change the characters looked for in the mask by using the maskLetterChar, maskNumberChar and maskWildcardChar options in the editorParams*/
mask?: string;
/** you are using fixed characters in your mask (any character other that A, 9 or *), then you can get the mask to automatically fill in these characters for you as you type by setting the maskAutoFill option in the editorParams to true */
maskAutoFill?: boolean;
maskLetterChar?: string;
maskNumberChar?: string;
maskWildcardChar?: string;
}
interface NumberParams extends SharedEditorParams {
@@ -1355,11 +1432,16 @@ You can pass an optional additional property with sorter, sorterParams that shou
interface AutoCompleteParams extends SharedEditorParams, SharedSelectAutoCompleteEditorParams {
values: true | string[] | JSONRecord | string;
listItemFormatter?: (value: string, text: string) => string;
searchFunc?: (term: string, values: string[]) => string[];
searchFunc?: (term: string, values: string[]) => string[] | Promise<string[]>;
allowEmpty?: boolean;
freetext?: boolean;
showListOnEmpty?: boolean;
verticalNavigation?: 'editor' | 'table' | 'hybrid';
/**If you return a promise from the searchFunc callback then a "Searching..." placeholder will be displayed until the promise resolved.
You can customise this placeholder using the searchingPlaceholder option. */
searchingPlaceholder?: string | HTMLElement;
emptyPlaceholder?: string | HTMLElement;
}
type ValueStringCallback = (value: any) => string;
@@ -1391,6 +1473,7 @@ You can pass an optional additional property with sorter, sorterParams that shou
type ColumnLookup = ColumnComponent | ColumnDefinition | HTMLElement | string;
type RowLookup = RowComponent | HTMLElement | string | number | number[] | string[];
type VisibleRowRangeLookup = 'active' | 'visible';
type RowRangeLookup = 'visible' | 'active' | 'selected' | 'all';
interface KeyBinding {
navPrev?: string | boolean;
@@ -1586,6 +1669,9 @@ You can pass an optional additional property with sorter, sorterParams that shou
/** The reloadHeaderFilter function rebuilds the header filter element, updating any params passed into the editor used to generate the filter. */
reloadHeaderFilter: () => void;
/**Get the current header filter value of a column */
getHeaderFilterValue: () => any;
/** Update the definition of a column */
updateDefinition: (definition: ColumnDefinition) => Promise<void>;
}
@@ -1661,12 +1747,17 @@ declare class Tabulator {
/** 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;
/** The copyToClipboard function allows you to copy the current table data to the clipboard.
/**The copyToClipboard function allows you to copy the current table data to the clipboard.
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.
It takes one optional argument, a Row Range Lookup option, that will determine which rows are included in the clipboard output.It can take any following strings as input:
If you leave this argument undefined, Tabulator will use the value of the clipboardCopySelector property, which has a default value of table */
copyToClipboard: (type?: 'selected' | 'table' | 'active') => void;
visible - Rows currently visible in the table viewport
active - Rows currently in the table (rows that pass current filters etc)
selected - Rows currently selected by the selection module (this includes not currently active rows)
all - All rows in the table reguardless of filters
If you leave this argument undefined, Tabulator will use the value of the clipboardCopyRowRange property, which has a default value of active*/
copyToClipboard: (rowRangeLookup?: Tabulator.RowRangeLookup) => 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;
@@ -1696,10 +1787,18 @@ declare class Tabulator {
/** 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[];
/** Returns a table built of all active rows in the table (matching filters and sorts) */
getHtml: (activeOnly?: boolean, style?: boolean, config?: Tabulator.AddditionalExportOptions) => any;
getHtml: (
rowRangeLookup?: Tabulator.RowRangeLookup,
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;
print: (
rowRangeLookup?: Tabulator.RowRangeLookup,
style?: boolean,
config?: Tabulator.AddditionalExportOptions,
) => any;
/** You can retrieve the current AJAX URL of the table with the getAjaxUrl function.
*
@@ -1877,6 +1976,10 @@ declare class Tabulator {
setHeaderFilterFocus: (column: Tabulator.ColumnLookup) => void;
/** If you just want to retrieve the current header filters, you can use the getHeaderFilters function: */
getHeaderFilters: () => Tabulator.Filter[];
/**You get the current header filter value of a column */
getHeaderFilterValue: (column: Tabulator.ColumnLookup) => string;
/** If you want to remove one filter from the current list of filters you can use the removeFilter function: */
removeFilter: Tabulator.FilterFunction;
/** To remove all filters from the table, use the clearFilter function. */
@@ -1950,6 +2053,10 @@ declare class Tabulator {
/** You can retrieve the results of the column calculations at any point using the getCalcResults function.* For a table without grouped rows, this will return an object with top and bottom properties, that contain a row data object for all the columns in the table for the top calculations and bottom calculations respectively.
*/
getCalcResults: () => any;
/**manually trigger recalculation of column calculations */
recalc: () => void;
/** Use the navigatePrev function to shift focus to the next editable cell on the left, if none available move to the right most editable cell on the row above.
*
* Note: These actions will only work when a cell is editable and has focus.
types/tabulator-tables/tabulator-tables-tests.ts
+84 -1
View File
@@ -449,7 +449,7 @@ table = new Tabulator('#test', {
},
});
colDef.editorParams = { search: true };
table.getHtml(true, true, { columnCalcs: true });
table.getHtml('all', true, { columnCalcs: true });
table.download('pdf', 'data.pdf', {
documentProcessing: doc => {},
@@ -622,3 +622,86 @@ table = new Tabulator('#example-table', {
scrollVertical: () => {},
scrollHorizontal: () => {},
});
// 4.6 updates
const menuOptions: Tabulator.MenuObject[] | Tabulator.MenuSeparator[] = [
{
label: 'Hide Column',
action: (e, column) => {
(column as Tabulator.ColumnComponent).hide();
},
} as Tabulator.MenuObject,
{ separator: true },
{
disabled: true,
label: component => {
return 'Move Column';
},
action: (e, column) => {
(column as Tabulator.ColumnComponent).move('col', true);
},
} as Tabulator.MenuObject,
];
table = new Tabulator('#example-table', {
maxHeight: '100%',
minHeight: 300,
rowContextMenu: menuOptions,
cellVertAlign: 'middle',
cellHozAlign: 'center',
clipboardCopyConfig: {
columnHeaders: false,
columnGroups: false,
rowGroups: false,
columnCalcs: false,
dataTree: false,
formatCells: false,
},
clipboardCopyRowRange: 'selected',
clipboardCopyFormatter: (type, output) => {
return output;
},
printRowRange: () => {
return [];
},
rowFormatterPrint: row => {},
rowFormatterHtmlOutput: row => {},
headerFilterLiveFilterDelay: 600,
columns: [
{
title: 'Name',
field: 'name',
width: 200,
headerMenu: menuOptions,
headerContextMenu: menuOptions,
contextMenu: menuOptions,
vertAlign: 'bottom',
hozAlign: 'right',
editorParams: {
mask: 'A!!-9BBB$',
maskLetterChar: 'B',
maskNumberChar: '!',
maskWildcardChar: '$',
maskAutoFill: true,
searchFunc: (term, values) => {
return new Promise((resolve, reject) => {
fetch('http://test.com?search=' + term).then(response => {
resolve(response.json());
});
});
},
searchingPlaceholder: 'Filtering...',
emptyPlaceholder: 'no matching results',
},
accessorHtmlOutput: (value, data, type, params, column) => {
if (column) {
const filterVal = column.getHeaderFilterValue();
}
return value >= params.legalAge;
},
accessorHtmlOutputParams: { legalAge: 18 },
},
],
});
const filterVal = table.getHeaderFilterValue('name');
table.recalc();