react-tabulator

declare namespace Tabulator { interface Options extends OptionsGeneral, OptionsMenu, OptionsHistory, OptionsLocale, OptionsDownload, OptionsColumns, OptionsRows, OptionsData, OptionsSorting, OptionsFiltering, OptionsRowGrouping, OptionsPagination, OptionsPersistentConfiguration, OptionsClipboard, OptionsDataTree, OptionsCell, OptionsCells, OptionsDebug, OptionsHTML { } interface OptionsDebug { invalidOptionWarning?: boolean; debugInvalidOptions?: boolean; } interface OptionsCells extends CellCallbacks { /** The validationFailed event is triggered when the value entered into a cell during an edit fails to pass validation. */ validationFailed?: ((cell: CellComponent, value: any, validators: Validator[] | StandardValidatorType[]) => void) | undefined; } interface OptionsDataTree { /** To enable data trees in your table, set the dataTree property to true in your table constructor: */ dataTree?: boolean | undefined; /** By default the toggle element will be inserted into the first column on the table. If you want the toggle element to be inserted in a different column you can pass the feild name of the column to the dataTreeElementColumn setup option*/ dataTreeElementColumn?: boolean | string | undefined; /** Show tree branch icon */ dataTreeBranchElement?: boolean | string | undefined; /** Tree level indent in pixels */ dataTreeChildIndent?: number | undefined; /** By default Tabulator will look for child rows in the _children field of a row data object. You can change this to look in a different field using the dataTreeChildField property in your table constructor: */ dataTreeChildField?: string | undefined; /** The toggle button that allows users to collapse and expand the column can be customised to meet your needs. There are two options, dataTreeExpandElement and dataTreeCollapseElement, that can be set to replace the default toggle elements with your own. Both options can take either an html string representing the contents of the toggle element */ dataTreeCollapseElement?: string | HTMLElement | boolean | undefined; /** The toggle button that allows users to expand the column */ dataTreeExpandElement?: string | HTMLElement | boolean | undefined; /** 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) | undefined; /**Propagte selection events from parent rows to children */ dataTreeSelectPropagate?: boolean | undefined; dataTreeFilter?: boolean | undefined; dataTreeSort?: boolean | undefined; } interface OptionsClipboard { /** You can enable clipboard functionality using the clipboard config option. It can take one of four possible values: true - enable clipboard copy and paste "copy" - enable only copy functionality "paste" - enable only paste functionality false - disable all clipboard functionality (default) */ clipboard?: boolean | 'copy' | 'paste' | undefined; /**The clipboardCopyRowRange option takes a Row Range Lookup value and allows you to choose which rows are included in the clipboard output: */ clipboardCopyRowRange?: RowRangeLookup | undefined; /**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) | undefined; /** 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 | undefined; /** 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. It will then attempt to work out which columns in the data correspond to columns in the table. It tries three different ways to achieve this. First it checks the values of all columns in the first row of data to see if they match the titles of columns in the table. If any of the columns don't match it then tries the same approach but with the column fields. If either of those options match, Tabulator will map those columns to the incoming data and import it into rows. If there is no match then Tabulator will assume the columns in the data are in the same order as the visible columns in the table and import them that way. 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.*/ clipboardPasteParser?: string | ((clipboard: any) => any[]) | undefined; /** Once the data has been parsed into row data, it will be passed to a paste action to be added to the table. There are three inbuilt paste actions: 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' | undefined; /** 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. If you want to only copy the unstyled data then you should set the clipboardCopyStyled option to false in the table options object: */ clipboardCopyStyled?: boolean | undefined; /** 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?: AddditionalExportOptions | boolean | undefined; /** The clipboardCopied event is triggered whenever data is copied to the clipboard. */ clipboardCopied?: (() => void) | undefined; /** The clipboardPasted event is triggered whenever data is successfuly pasted into the table. */ clipboardPasted?: (() => void) | undefined; /** The clipboardPasteError event is triggered whenever an atempt to paste data into the table has failed because it was rejected by the paste parser. */ clipboardPasteError?: (() => void) | undefined; /**When copying to clipboard you may want to apply a different group header from the one usualy used in the table. You can now do this using the groupHeaderClipboard table option, which takes the same inputs as the standard groupHeader property. */ groupHeaderClipboard?: ((value: any, count: number, data: any, group: GroupComponent) => string) | Array<(value: any, count: number, data: any) => string> | undefined; /**When the getHtml function is called you may want to apply a different group header from the one usualy used in the table. You can now do this using the groupHeaderHtmlOutput table option, which takes the same inputs as the standard groupHeader property. */ groupHeaderHtmlOutput?: ((value: any, count: number, data: any, group: GroupComponent) => string) | Array<(value: any, count: number, data: any) => string> | undefined; } interface OptionsPersistentConfiguration { /** ID tag used to identify persistent storage information */ persistenceID?: string | undefined; /** Persistence information can either be stored in a cookie or in the localSotrage object, you can use the persistenceMode to choose which. It can take three possible values: 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 | undefined; /** Enable persistsnt storage of column layout information */ persistentLayout?: boolean | undefined; /** You can ensure the data sorting is stored for the next page load by setting the persistentSort option to true */ persistentSort?: boolean | undefined; /** You can ensure the data filtering is stored for the next page load by setting the persistentFilter option to true*/ persistentFilter?: boolean | undefined; /**By setting the persistence property to true the table will persist the sort, filter, group (groupBy, groupStartOpen, groupHeader), pagination (paginationSize), and column (title, width, visibility, order) configuration of the table */ persistence?: true | PersistenceOptions | undefined; /**The persistenceWriterFunc function will receive three arguments, the persistance id of the table, the type of data to be written and an object or array representing the data */ persistenceWriterFunc?: ((id: string, type: keyof PersistenceOptions, data: any) => any) | undefined; /**The persistenceReaderFunc function will receive two arguments, the persistance id of the table, and the type of data to be written. This function must synchronously return the data in the format in which it was passed to the persistenceWriterFunc function. It should return a value of false if no data was present */ persistenceReaderFunc?: ((id: string, type: keyof PersistenceOptions) => any) | undefined; } interface PersistenceOptions { sort?: boolean | undefined; filter?: boolean | undefined; group?: boolean | PersistenceGroupOptions | undefined; page?: boolean | PersistencePageOptions | undefined; columns?: boolean | string[] | undefined; } interface PersistenceGroupOptions { groupBy?: boolean | undefined; groupStartOpen?: boolean | undefined; groupHeader?: boolean | undefined; } interface PersistencePageOptions { size?: boolean | undefined; page?: boolean | undefined; } interface OptionsPagination { pagination?: boolean; paginationMode?: SortMode; /** Set the number of rows in each page */ paginationSize?: number | undefined; /** 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. 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[] | any[] | undefined; /** 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 | undefined; /** Lookup list to link expected data feilds from the server to their function * default* { "current_page":"current_page", "last_page":"last_page", "data":"data", } * */ dataReceiveParams?: Record<string, string> | undefined; /** Lookup list to link fields expected by the server to their function* default:* { "page":"page", "size":"size", "sorters":"sorters", "filters":"filters", } */ dataSendParams?: Record<string, string> | undefined; /** When using the addRow function on a paginated table, rows will be added relative to the current page (ie to the top or bottom of the current page), with overflowing rows being shifted onto the next page. If you would prefer rows to be added relative to the table (firs/last page) then you can use the paginationAddRow option. it can take one of two values: page - add rows relative to current page (default) table - add rows relative to the table */ paginationAddRow?: 'table' | 'page' | undefined; /** The number of pagination page buttons shown in the footer using the paginationButtonCount option. By default this has a value of 5.*/ paginationButtonCount?: number | undefined; /** Specify that a specific page should be loaded when the table first load */ paginationInitialPage?: number | undefined; } type GroupArg = string | string[] | ((data: any) => any); interface OptionsRowGrouping { /** String/function to select field to group rows by */ groupBy?: GroupArg | undefined; /** By default Tabulator will create groups for rows based on the values contained in the row data. if you want to explicitly define which field values groups should be created for at each level, you can use the groupValues option. This option takes an array of value arrays, each item in the first array should be a list of acceptable field values for groups at that level */ groupValues?: GroupValuesArg | undefined; /** 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> | undefined; /**When printing you may want to apply a different group header from the one usualy used in the table. You can now do this using the groupHeaderPrint table option, which takes the same inputs as the standard groupHeader property. */ groupHeaderPrint?: ((value: any, count: number, data: any, group: GroupComponent) => string) | Array<(value: any, count: number, data: any) => string> | undefined; /** You can set the default open state of groups using the groupStartOpen property* * This can take one of three possible values: true - all groups start open (default value) false - all groups start closed function() - a callback to decide if a group should start open or closed Group Open Function If you want to decide on a group by group basis which should start open or closed then you can pass a function to the groupStartOpen property. This should return true if the group should start open or false if the group should start closed. */ groupStartOpen?: boolean | ((value: any, count: number, data: any, group: GroupComponent) => boolean) | undefined; /** By default Tabulator allows users to toggle a group open or closed by clicking on the arrow icon in the left of the group header. If you would prefer a different behaviour you can use the groupToggleElement option to choose a different option:* * The option can take one of three values: arrow - togggle group on arrow element click 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 | undefined; /** show/hide column calculations when group is closed */ groupClosedShowCalcs?: boolean | undefined; /** The dataGrouping callback is triggered whenever a data grouping event occurs, before grouping happens. */ dataGrouping?: (() => void) | undefined; /** The dataGrouping callback is triggered whenever a data grouping event occurs, after grouping happens. */ dataGrouped?: (() => void) | undefined; /** The groupVisibilityChanged callback is triggered whenever a group changes between hidden and visible states. */ groupVisibilityChanged?: ((group: GroupComponent, visible: boolean) => void) | undefined; /** The groupClick callback is triggered when a user clicks on a group header. */ groupClick?: GroupEventCallback | undefined; /** The groupDblClick callback is triggered when a user double clicks on a group header. */ groupDblClick?: GroupEventCallback | undefined; /** The groupContext callback is triggered when a user right clicks on a group header. If you want to prevent the browsers context menu being triggered in this event you will need to include the preventDefault() function in your callback. */ groupContext?: GroupEventCallback | undefined; /** The groupTap callback is triggered when a user taps on a group header on a touch display. */ groupTap?: GroupEventCallback | undefined; /** The groupDblTap callback is triggered when a user taps on a group header on a touch display twice in under 300ms. */ groupDblTap?: GroupEventCallback | undefined; /** The groupTapHold callback is triggered when a user taps on a group header on a touch display and holds their finger down for over 1 second */ groupTapHold?: GroupEventCallback | undefined; groupUpdateOnCellEdit?: boolean | undefined; } interface Filter { field: string; type: FilterType; value: any; } interface FilterParams { separator?: string | undefined; matchAll?: boolean | undefined; } type FilterFunction = (field: string, type: FilterType, value: any, filterParams?: FilterParams) => void; interface OptionsFiltering { /** Array of filters to be applied on load. */ initialFilter?: Filter[] | undefined; /** array of initial values for header filters. */ initialHeaderFilter?: Array<Pick<Filter, 'field' | 'value'>> | undefined; /** The dataFiltering callback is triggered whenever a filter event occurs, before the filter happens. */ dataFiltering?: ((filters: Filter[]) => void) | undefined; /** The dataFiltered callback is triggered after the table dataset is filtered. */ dataFiltered?: ((filters: Filter[], rows: RowComponent[]) => void) | undefined; /**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 | undefined; } interface OptionsSorting { /** Array of sorters to be applied on load. */ initialSort?: Sorter[] | undefined; /** reverse the order that multiple sorters are applied to the table. */ sortOrderReverse?: boolean | undefined; } interface Sorter { column: string; dir: SortDirection; } interface SorterFromTable { /** The column component for the sorted column. */ column: ColumnComponent; /** A string of the field name for the sorted column. */ field: string; /** A string of either `asc` or `desc` indicating the direction of sort. */ dir: SortDirection; } interface OptionsData { /** A unique index value should be present for each row of data if you want to be able to programatically alter that data at a later point, this should be either numeric or a string. By default Tabulator will look for this value in the id field for the data. If you wish to use a different field as the index, set this using the index option parameter. */ index?: number | string | undefined; /** Array to hold data that should be loaded on table creation */ data?: any[] | undefined; /** If you wish to retrieve your data from a remote source you can set the URL for the request in the ajaxURL option. */ ajaxURL?: string | undefined; /** Parameters to be passed to remote Ajax data loading request */ ajaxParams?: {} | undefined; /** The HTTP request type for Ajax requests or config object for the request */ ajaxConfig?: HttpMethod | AjaxConfig | undefined; /** When using a request method other than "GET" Tabulator will send any parameters with a content type of form data. You can change the content type with the ajaxContentType option. This will ensure parameters are sent in the format you expect, with the correct headers. * * The ajaxContentType option can take one of two values: "form" - send parameters as form data (default option) "json" - send parameters as JSON encoded string 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 | undefined; /** 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. The callback should return a string representing the URL to be requested. */ ajaxURLGenerator?: ((url: string, config: any, params: any) => string) | undefined; /** callback function to replace inbuilt ajax request functionality */ ajaxRequestFunc?: ((url: string, config: any, params: any) => Promise<any>) | undefined; /** Send filter config to server instead of processing locally */ ajaxFiltering?: boolean | undefined; /** Send sorter config to server instead of processing locally */ ajaxSorting?: boolean | undefined; /** If you are loading a lot of data from a remote source into your table in one go, it can sometimes take a long time for the server to return the request, which can slow down the user experience. To speed things up in this situation Tabulator has a progressive load mode, this uses the pagination module to make a series of requests for part of the data set, one at a time, appending it to the table as the data arrives. This mode can be enable using the ajaxProgressiveLoad option. No pagination controls will be visible on screen, it just reusues the functionality of the pagination module to sequentially load the data. 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. */ progressiveLoad?: 'load' | 'scroll' | undefined; /** 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. */ progressiveLoadDelay?: number | undefined; /** 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. */ progressiveLoadScrollMargin?: number | undefined; /** Show loader while data is loading, can also take a function that must return a boolean */ ajaxLoader?: boolean | (() => boolean) | undefined; /** html for loader element */ ajaxLoaderLoading?: string | undefined; /** html for the loader element in the event of an error */ ajaxLoaderError?: string | undefined; /** The ajaxRequesting callback is triggered when ever an ajax request is made. */ ajaxRequesting?: ((url: string, params: any) => boolean) | undefined; /** The ajaxResponse callback is triggered when a successful ajax request has been made. This callback can also be used to modify the received data before it is parsed by the table. If you use this callback it must return the data to be parsed by Tabulator, otherwise no data will be rendered */ ajaxResponse?: ((url: string, params: any, response: any) => any) | undefined; /** The ajaxError callback is triggered there is an error response to an ajax request. */ ajaxError?: ((xhr: any, textStatus: any, errorThrown: any) => void) | undefined; dataLoader?: boolean; dataLoaderLoading?: string; dataLoaderError?: string; sortMode?: SortMode; filterMode?: SortMode; } type SortMode = 'remote' | 'local'; interface AjaxContentType { headers: JSONRecord; body: (url: string, config: any, params: any) => any; } type HttpMethod = 'GET' | 'POST'; interface AjaxConfig { method?: HttpMethod | undefined; headers?: JSONRecord | undefined; mode?: string | undefined; credentials?: string | undefined; } interface OptionsRows { /** Tabulator also allows you to define a row level formatter using the rowFormatter option. this lets you alter each row of the table based on the data it contains. The function accepts one argument, the RowComponent for the row being formatted. */ rowFormatter?: ((row: RowComponent) => any) | undefined; /**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) | undefined; /**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) | undefined; /**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) | undefined; /** The position in the table for new rows to be added, "bottom" or "top" */ addRowPos?: 'bottom' | 'top' | undefined; /** The selectable 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 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' | undefined; /** 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' | 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 behaviour and instead prevent selection of new rows once the limit is reached you can set the selectableRollingSelection option to false. */ 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. */ selectablePersistence?: boolean | undefined; /** 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; /** To allow the user to move rows up and down the table, set the movableRows parameter in the options: */ movableRows?: boolean | undefined; /** Tabulator also allows you to move rows between tables. To enable this you should supply either a valid CSS selector string a DOM node for the table or the Tabuator object for the table to the movableRowsConnectedTables option. if you want to connect to multple tables then you can pass in an array of values to this option. */ movableRowsConnectedTables?: string | string[] | HTMLElement | HTMLElement[] | undefined; /** The movableRowsSender option should be set on the sending table, and sets the action that should be taken after the row has been successfuly dropped into the receiving table. There are several inbuilt sender functions: false - do nothing(default) 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) | undefined; /** 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: insert - inserts row next to the row it was dropped on, if not dropped on a row it is added to the table (default) 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) | undefined; movableRowsConnectedElements?: string | HTMLElement | undefined; /**When a row is dropped on element from from the movableRowsConnectedElements option the movableRowsElementDrop callback will be triggered. You can use this callback to trigger any changes as a result of the drop */ movableRowsElementDrop?: ((e: MouseEvent, element: HTMLElement, row: RowComponent) => any) | undefined; /** 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 | undefined; /** * The default ScrollTo position can be set using the scrollToRowPosition option. It can take one of four possible values: top - position row with its top edge at the top of the table (default) center - position row with its top edge in the center of the table bottom - position row with its bottom edge at the bottom of the table nearest - position row on the edge of the table it is closest to */ scrollToRowPosition?: ScrollToRowPostition | undefined; /** The default option for triggering a ScrollTo on a visible element can be set using the scrollToRowIfVisible option. It can take a boolean value: true - scroll to row, even if it is visible (default) false - scroll to row, unless it is currently visible, then don't move */ scrollToRowIfVisible?: boolean | undefined; /** The dataTreeRowExpanded callback is triggered when a row with child rows is expanded to reveal the children. */ dataTreeRowExpanded?: ((row: RowComponent, level: number) => void) | undefined; /** The dataTreeRowCollapsed callback is triggered when a row with child rows is collapsed to hide its children.*/ dataTreeRowCollapsed?: ((row: RowComponent, level: number) => void) | undefined; /** The movableRowsSendingStart callback is triggered on the sending table when a row is picked up from a sending table. */ movableRowsSendingStart?: ((toTables: any[]) => void) | undefined; /** The movableRowsSent callback is triggered on the sending table when a row has been successfuly received by a receiving table. */ movableRowsSent?: ((fromRow: RowComponent, toRow: RowComponent, toTable: Tabulator) => void) | undefined; /** The movableRowsSentFailed callback is triggered on the sending table when a row has failed to be received by the receiving table.*/ movableRowsSentFailed?: ((fromRow: RowComponent, toRow: RowComponent, toTable: Tabulator) => void) | undefined; /** The movableRowsSendingStop callback is triggered on the sending table after a row has been dropped and any senders and receivers have been handled. */ movableRowsSendingStop?: ((toTables: any[]) => void) | undefined; /** The movableRowsReceivingStart callback is triggered on a receiving table when a connection is established with a sending table. */ movableRowsReceivingStart?: ((fromRow: RowComponent, toTable: Tabulator) => void) | undefined; /** The movableRowsReceived callback is triggered on a receiving table when a row has been successfuly received.*/ movableRowsReceived?: ((fromRow: RowComponent, toRow: RowComponent, fromTable: Tabulator) => void) | undefined; /** The movableRowsReceivedFailed callback is triggered on a receiving table when a row receiver has returned false.*/ movableRowsReceivedFailed?: ((fromRow: RowComponent, toRow: RowComponent, fromTable: Tabulator) => void) | undefined; /** The movableRowsReceivingStop callback is triggered on a receiving table after a row has been dropped and any senders and receivers have been handled.*/ movableRowsReceivingStop?: ((fromTable: Tabulator) => void) | undefined; /** The rowClick callback is triggered when a user clicks on a row. */ rowClick?: RowEventCallback | undefined; /** The rowDblClick callback is triggered when a user double clicks on a row. */ rowDblClick?: RowEventCallback | undefined; /** The rowContext callback is triggered when a user right clicks on a row. If you want to prevent the browsers context menu being triggered in this event you will need to include the preventDefault() function in your callback. */ rowContext?: RowEventCallback | undefined; /** The rowTap callback is triggered when a user taps on a row on a touch display. */ rowTap?: RowEventCallback | undefined; /** The rowDblTap callback is triggered when a user taps on a row on a touch display twice in under 300ms. */ rowDblTap?: RowEventCallback | undefined; /** The rowTapHold callback is triggered when a user taps on a row on a touch display and holds their finger down for over 1 second. */ rowTapHold?: RowEventCallback | undefined; /** The rowMouseEnter callback is triggered when the mouse pointer enters a row. */ rowMouseEnter?: RowEventCallback | undefined; /** The rowMouseLeave callback is triggered when the mouse pointer leaves a row. */ rowMouseLeave?: RowEventCallback | undefined; /** The rowMouseOver callback is triggered when the mouse pointer enters a row or any of its child elements.*/ rowMouseOver?: RowEventCallback | undefined; /** The rowMouseOut callback is triggered when the mouse pointer leaves a row or any of its child elements. */ rowMouseOut?: RowEventCallback | undefined; /** The rowMouseMove callback is triggered when the mouse pointer moves over a row. */ rowMouseMove?: RowEventCallback | undefined; /** The rowAdded callback is triggered when a row is added to the table by the addRow and updateOrAddRow functions. */ rowAdded?: RowChangedCallback | undefined; /** The rowUpdated callback is triggered when a row is updated by the updateRow, updateOrAddRow, updateData or updateOrAddData, functions. */ rowUpdated?: RowChangedCallback | undefined; /** The rowDeleted callback is triggered when a row is deleted from the table by the deleteRow function. */ rowDeleted?: RowChangedCallback | undefined; /** The rowMoved callback will be triggered when a row has been successfuly moved. */ rowMoved?: RowChangedCallback | undefined; /** The rowResized callback will be triggered when a row has been resized by the user. */ rowResized?: RowChangedCallback | undefined; /** Whenever the number of selected rows changes, through selection or deselection, the rowSelectionChanged event is triggered. This passes an array of the data objects for each row in the order they were selected as the first argument, and an array of row components for each of the rows in order of selection as the second argument. */ rowSelectionChanged?: ((data: any[], rows: RowComponent[]) => void) | undefined; /** The rowSelected event is triggered when a row is selected, either by the user or programatically. */ rowSelected?: RowChangedCallback | undefined; /** The rowDeselected event is triggered when a row is deselected, either by the user or programatically. */ rowDeselected?: RowChangedCallback | undefined; /** Allows you to specifcy the behaviour when the user tabs from the last editable cell on the last row of the table */ tabEndNewRow?: boolean | JSONRecord | ((row: RowComponent) => any) | undefined; } interface OptionsColumns { /** The column definitions are provided to Tabluator in the columns property of the table constructor object and should take the format of an array of objects, with each object representing the configuration of one column. */ columns?: ColumnDefinition[] | undefined; /** * If you set the autoColumns option to true, every time data is loaded into the table through the data option or through the setData function, Tabulator will examine the first row of the data and build columns to match that data. */ autoColumns?: boolean | undefined; autoColumnsDefinitions?: ((columnDefinitions?: ColumnDefinition[]) => ColumnDefinition[]) | ColumnDefinition[] | Record<string, Partial<ColumnDefinition>> | undefined; /** 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' | 'fitDataStretch' | 'fitDataTable' | undefined; /** 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. If you would prefer that the column widths adjust to the data each time you load it into the table you can set the layoutColumnsOnNewData property to true. */ layoutColumnsOnNewData?: boolean | undefined; /** Responsive layout will automatically hide/show columns to fit the width of the Tabulator element. This allows for clean rendering of tables on smaller mobile devices, showing important data while avoiding horizontal scroll bars. You can enable responsive layouts using the responsiveLayout option. There are two responsive layout modes available: hide - hide columns that no longer fit in the table collapse - collapse columns that no longer fit on the table into a list under the row Hide Extra Columns 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' | undefined; /** 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 | undefined; /** By default any formatter set on the column is applied to the value that will appear in the list. while this works for most formatters it can cause issues with the progress formatter which relies on being inside a cell. If you would like to disable column formatting in the collapsed list, you can use the responsiveLayoutCollapseUseFormatters option: */ responsiveLayoutCollapseUseFormatters?: boolean | undefined; /** If you set the responsiveLayout option to collapse the values from hidden columns will be displayed in a title/value list under the row. In this mode an object containing the title of each hidden column and its value is generated and then used to generate a list displayed in a div .tabulator-responsive-collapse under the row data. The inbuilt collapse formatter creates a table to neatly display the hidden columns. If you would like to format the data in your own way you can use the responsiveLayoutCollapseFormatter, it take an object of the column values as an argument and must return the HTML content of the div. This function should return an empty string if there is no data to display. */ responsiveLayoutCollapseFormatter?: ((data: any[]) => any) | undefined; /** To allow the user to move columns along the table, set the movableColumns parameter in the options: */ movableColumns?: boolean | undefined; /** You can use the columnHeaderVertAlign option to set how the text in your column headers should be vertically */ columnHeaderVertAlign?: VerticalAlign | undefined; /** The default ScrollTo position can be set using the scrollToColumnPosition option. It can take one of three possible values: left - position column with its left edge at the left of the table (default) center - position column with its left edge in the center of the table right - position column with its right edge at the right of the table */ scrollToColumnPosition?: ScrollToColumnPosition | undefined; /** The default option for triggering a ScrollTo on a visible element can be set using the scrollToColumnIfVisible option. It can take a boolean value: true - scroll to column, even if it is visible (default) false - scroll to column, unless it is currently visible, then don't move */ scrollToColumnIfVisible?: boolean | undefined; /** By default column calculations are shown at the top and bottom of the table, unless row grouping is enabled, in which case they are shown at the top and bottom of each group. The columnCalcs option lets you decided where the calculations should be displayed, it can take one of four values: true - show calcs at top and bottom of the table, unless grouped, then show in groups (boolean, default) 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' | undefined; /** 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 */ nestedFieldSeparator?: string | boolean | undefined; /** multiple or single column sorting */ columnHeaderSortMulti?: boolean | undefined; /** The columnMoved callback will be triggered when a column has been successfuly moved. */ columnMoved?: ((column: ColumnComponent, columns: any[]) => void) | undefined; columnResized?: ((column: ColumnComponent) => void) | undefined; /** The columnVisibilityChanged callback is triggered whenever a column changes between hidden and visible states. */ columnVisibilityChanged?: ((column: ColumnComponent, visible: boolean) => void) | undefined; /** 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) | undefined; /**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 | undefined; /**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 | undefined; /** The headerSort option can now be set in the table options to affect all columns as well as in column definitions. */ headerSort?: boolean | undefined; headerSortElement?: string | undefined; columnDefaults?: ColumnDefinition; } interface OptionsCell { /** The cellClick callback is triggered when a user left clicks on a cell, it can be set on a per column basis using the option in the columns definition object. */ cellClick?: CellEventCallback | undefined; cellDblClick?: CellEventCallback | undefined; cellContext?: CellEventCallback | undefined; cellTap?: CellEventCallback | undefined; cellDblTap?: CellEventCallback | undefined; cellTapHold?: CellEventCallback | undefined; cellMouseEnter?: CellEventCallback | undefined; cellMouseLeave?: CellEventCallback | undefined; cellMouseOver?: CellEventCallback | undefined; cellMouseOut?: CellEventCallback | undefined; cellMouseMove?: CellEventCallback | undefined; cellEditing?: CellEditEventCallback | undefined; cellEdited?: CellEditEventCallback | undefined; cellEditCancelled?: CellEditEventCallback | undefined; } 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 | undefined; /** 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 | undefined; /** 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 | undefined; renderVertical?: RenderMode; renderHorizontal?: RenderMode; /** Manually set the size of the virtual DOM buffer */ renderVerticalBuffer?: boolean | number | undefined; /** placeholder element to display on empty table */ placeholder?: string | HTMLElement | undefined; /** Footer element to display for the tabl