@orangelogic/design-system 2.19.0-ci.5

package/library/packages/types/src/table.d.ts

@@ -0,0 +1,2931 @@
+import { ButtonVariant } from './button';
+import { PaginationCounter } from './pagination';
+
+export type CxTableEventName = `cx-table.${string}`;
+export type DropdownSection = Record<string, string>;
+export type DropdownItem = {
+    label?: string;
+    name: string;
+    prefixIcon?: string;
+    section?: string;
+};
+export declare enum RowActionType {
+    Button = "button",
+    Dropdown = "dropdown"
+}
+export declare enum ScrollToRowPosition {
+    Bottom = "bottom",
+    Center = "center",
+    Nearest = "nearest",
+    Top = "top"
+}
+export declare enum SelectRangeType {
+    All = "all",
+    Cell = "cell",
+    Column = "column",
+    Row = "row"
+}
+/**
+ * Tabulator Interface
+ */
+export interface ITabulator extends IModuleBinder {
+    options: Options;
+    columnManager: IColumnManager | null;
+    rowManager: IRowManager | null;
+    footerManager: IFooterManager | null;
+    toolbar: HTMLElement | undefined;
+    alertManager: IAlert | null;
+    vdomHoz: any;
+    externalEvents: IExternalEventBus | null;
+    eventBus: IInternalEventBus | null;
+    interactionMonitor: IInteractionManager | false;
+    browser: string;
+    browserSlow: boolean;
+    browserMobile: boolean;
+    rtl: boolean;
+    originalElement: HTMLElement | null;
+    componentFunctionBinder: IComponentFunctionBinder;
+    dataLoader: IDataLoader | null;
+    deprecationAdvisor: IDeprecationAdvisor;
+    optionsList: IOptionsList;
+    dependencyRegistry: IDependencyRegistry;
+    initialized: boolean;
+    destroyed: boolean;
+    element: HTMLElement;
+    tableWidth: number;
+    isResizingRow: boolean;
+    isResizingColumn: boolean;
+    hasResized: boolean;
+    initializeElement(element?: HTMLElement | string): boolean;
+    initializeCoreSystems(options?: Partial<Options>): void;
+    _create(): void;
+    _clearObjectPointers(): void;
+    _mapDeprecatedFunctionality(): void;
+    _clearSelection(): void;
+    _create(): void;
+    _rtlCheck(): void;
+    _clearObjectPointers(): void;
+    _buildElement(): void;
+    _initializeTable(): void;
+    _loadInitialData(): Promise<void>;
+    destroy(): void;
+    _detectBrowser(): void;
+    initGuard(func?: string | boolean, msg?: string): boolean;
+    blockRedraw(): void;
+    restoreRedraw(): void;
+    setData(data: any, params?: any, config?: any): Promise<void>;
+    clearData(): void;
+    getData(active?: RowRangeLookup): any[];
+    getDataCount(active?: RowRangeLookup): number;
+    replaceData(data: any, params?: any, config?: any): Promise<void>;
+    updateData(data: any[] | string): Promise<void>;
+    addData(data: any[] | string, pos?: AddRowPos, index?: any): Promise<any[]>;
+    updateOrAddData(data: any[] | string): Promise<any[]>;
+    getRow(index: any): any | false;
+    getRowFromPosition(position: number): any | false;
+    deleteRow(index: any | any[]): Promise<void>;
+    addRow(data: any | string, pos?: AddRowPos, index?: any): Promise<IRowComponent | IRow> | undefined;
+    updateOrAddRow(index: any, data: any | string): Promise<IRowComponent | IRow> | undefined;
+    updateRow(index: any, data: any | string): Promise<any>;
+    scrollToRow(index: any, position?: ScrollToRowPosition, ifVisible?: boolean): Promise<unknown> | undefined;
+    moveRow(from: any, to: any, after?: boolean): void;
+    getRows(active?: RowRangeLookup): any[];
+    getRowPosition(index: any): number | false;
+    setColumns(definition: any): void;
+    getColumns(structured?: boolean): any[];
+    getColumn(field: string): any | false;
+    getColumnDefinitions(): any[];
+    showColumn(field: string): Promise<boolean | void>;
+    hideColumn(field: ColumnLookup): boolean | void;
+    toggleColumn(field: string): Promise<boolean | void>;
+    addColumn(definition: any, before?: boolean, field?: ColumnLookup): Promise<IColumnComponent | IColumn> | undefined;
+    deleteColumn(field: string): Promise<void>;
+    updateColumnDefinition(field: string, definition: ColumnDefinition): Promise<IColumnComponent>;
+    moveColumn(from: string, to: string, after?: boolean): void;
+    scrollToColumn(field: ColumnLookup, position?: ScrollToColumnPosition, ifVisible?: boolean): Promise<void>;
+    redraw(force?: boolean): void;
+    setHeight(height: string | number): void;
+    on(key: string, callback: (...args: any[]) => any): void;
+    off(key: string, callback?: (...args: any[]) => any): void;
+    dispatchEvent(...args: any[]): any;
+    alert(contents: any, type?: string): void;
+    clearAlert(): void;
+    modExists(plugin: string, required?: boolean): boolean;
+    module(key: string): any;
+}
+/**
+ * Interface for tabulator table core features
+ */
+export interface ICellComponent {
+    _cell: ICell;
+    getValue(): any;
+    getOldValue(): any;
+    getInitialValue(): any;
+    getElement(): HTMLElement | null;
+    getContentElement(): HTMLElement | null;
+    getRow(): IRowComponent;
+    getData(transform?: string): Record<string, any>;
+    getType(): string;
+    getField(): string;
+    getColumn(): IColumnComponent;
+    setValue(value: any, mutate?: boolean): void;
+    restoreOldValue(): void;
+    restoreInitialValue(): void;
+    checkHeight(): void;
+    getTable(): ITabulator;
+    _getSelf(): ICell;
+}
+export interface ICell extends ICoreFeature {
+    column: IColumn;
+    row: IRow;
+    element: HTMLElement | null;
+    contentElement: HTMLElement | null;
+    value: any;
+    initialValue: any;
+    oldValue: any;
+    modules: Record<string, any>;
+    height: number | null;
+    width: number | string | null;
+    minWidth: number | null;
+    maxWidth: number | null;
+    component: ICellComponent | null;
+    loaded: boolean;
+    calcs?: Record<string, any>;
+    build(): void;
+    generateElement(): void;
+    _configureCell(): void;
+    updateCellClass(): void;
+    getTextFormat(): Record<string, string>;
+    _generateContents(): void;
+    cellRendered(): void;
+    getElement(containerOnly?: boolean): HTMLElement | null;
+    getValue(): any;
+    getOldValue(): any;
+    setValue(value: any, mutate?: boolean, force?: boolean): void;
+    setValueProcessData(value: any, mutate?: boolean, force?: boolean): boolean;
+    setValueActual(value: any): void;
+    layoutElement(): void;
+    setWidth(): void;
+    clearWidth(): void;
+    getWidth(): number;
+    setMinWidth(): void;
+    setMaxWidth(): void;
+    checkHeight(): void;
+    clearHeight(): void;
+    setHeight(): void;
+    getHeight(): number;
+    show(): void;
+    hide(): void;
+    delete(): void;
+    getIndex(): number;
+    getComponent(): ICellComponent;
+}
+export interface IColumnComponent {
+    _column: IColumn;
+    type: string;
+    getElement(): HTMLElement;
+    getDefinition(): ColumnDefinition;
+    getField(): string;
+    getTitleDownload(): string | null;
+    getCells(): ICellComponent[];
+    isVisible(): boolean;
+    show(): Promise<void>;
+    hide(): void;
+    toggle(): void;
+    delete(): Promise<void>;
+    getSubColumns(): IColumnComponent[];
+    getParentColumn(): IColumnComponent | false;
+    _getSelf(): IColumn;
+    scrollTo(position: ScrollToColumnPosition, ifVisible?: boolean): Promise<void> | undefined;
+    getTable(): ITabulator;
+    move(to: ColumnLookup, after: boolean): void;
+    getNextColumn(): IColumnComponent | false;
+    getPrevColumn(): IColumnComponent | false;
+    updateDefinition(updates: ColumnDefinition): Promise<IColumnComponent>;
+    getWidth(): number;
+    setWidth(width: number | true): Promise<void>;
+}
+export interface IColumn extends ICoreFeature {
+    definition: ColumnDefinition;
+    parent: IColumnManager | IColumn;
+    type: 'column';
+    columns: IColumn[];
+    cells: ICell[];
+    isGroup: boolean;
+    isRowHeader: boolean;
+    element: HTMLElement | false;
+    contentElement: HTMLElement | false;
+    titleHolderElement: HTMLElement | false;
+    titleElement: HTMLElement | false;
+    groupElement: HTMLElement | false;
+    hozAlign: string;
+    vertAlign: string;
+    field: string | false;
+    fieldStructure: string[];
+    getFieldValue: (data: Record<string, any>) => any;
+    setFieldValue: (data: Record<string, any>, value: any) => void;
+    titleDownload: string | null;
+    titleFormatterRendered: (() => void) | false;
+    modules: Record<string, any>;
+    width: number | null;
+    widthStyled: string;
+    maxWidth: number | null;
+    maxWidthStyled: string;
+    maxInitialWidth: number | null;
+    minWidth: number | null;
+    minWidthStyled: string;
+    widthFixed: boolean;
+    hidden: boolean;
+    component: IColumnComponent | null;
+    silent?: boolean;
+    createElement(): HTMLElement;
+    createGroupElement(): HTMLElement;
+    mapDefinitions(): void;
+    checkDefinition(): void;
+    setField(field: string | undefined): void;
+    registerColumnPosition(column: IColumn): void;
+    registerColumnField(column: IColumn): void;
+    reRegisterPosition(): void;
+    _initialize(): Promise<void>;
+    _buildColumnHeader(): Promise<void>;
+    _buildColumnHeaderContent(): HTMLElement;
+    _buildColumnHeaderTitle(): HTMLElement;
+    _formatColumnHeaderTitle(el: HTMLElement, title: string): void;
+    _buildGroupHeader(): void;
+    _getFlatData(data: Record<string, any>): any;
+    _getNestedData(data: Record<string, any>): any;
+    _setFlatData(data: Record<string, any>, value: any): void;
+    _setNestedData(data: Record<string, any>, value: any): void;
+    attachColumn(column: IColumn): void;
+    verticalAlign(alignment?: string, height?: number): void;
+    clearVerticalAlign(): void;
+    getElement(): HTMLElement;
+    getGroupElement(): HTMLElement;
+    getField(): string;
+    getTitleDownload(): string | null;
+    getFirstColumn(): IColumn | false;
+    getLastColumn(): IColumn | false;
+    getColumns(traverse?: boolean): IColumn[];
+    getCells(): ICell[];
+    getTopColumn(): IColumn;
+    getDefinition(updateBranches?: boolean): ColumnDefinition;
+    checkColumnVisibility(): Promise<void>;
+    show(silent?: boolean, responsiveToggle?: boolean): Promise<void>;
+    hide(silent?: boolean, responsiveToggle?: boolean): void;
+    matchChildWidths(): void;
+    removeChild(child: IColumn): void;
+    setWidth(width: number | string): void;
+    setWidthActual(width: number | string): void;
+    checkCellHeights(): void;
+    getWidth(): number;
+    getLeftOffset(): number;
+    getHeight(): number;
+    setMinWidth(minWidth: number | undefined): void;
+    setMaxWidth(maxWidth: number | undefined): void;
+    delete(): Promise<void>;
+    columnRendered(): void;
+    generateCell(row: IRow): ICell;
+    nextColumn(): IColumn | false;
+    _nextVisibleColumn(index: number): IColumn | false;
+    prevColumn(): IColumn | false;
+    _prevVisibleColumn(index: number): IColumn | false;
+    reinitializeWidth(force?: boolean): Promise<void>;
+    fitToData(force?: boolean): void;
+    updateDefinition(updates: Partial<ColumnDefinition>): Promise<IColumnComponent>;
+    deleteCell(cell: ICell): void;
+    getComponent(): IColumnComponent;
+    getPosition(): number;
+    getParentComponent(): IColumnComponent | false;
+}
+export interface IRowComponent {
+    _row: IRow;
+    hoverMenuElement: HTMLElement | null;
+    getData(transform?: string): Record<string, any>;
+    getElement(): HTMLElement;
+    getCells(): ICellComponent[];
+    getCell(column: string | IColumnComponent): ICellComponent | false;
+    getIndex(): number;
+    getPosition(): number | false;
+    watchPosition(callback: (position: number) => void): void;
+    delete(): Promise<void>;
+    scrollTo(position: ScrollToRowPosition, ifVisible: boolean): Promise<unknown> | undefined;
+    move(to: IRow, after: boolean): void;
+    update(data: Record<string, any>): Promise<void>;
+    normalizeHeight(): void;
+    _getSelf(): IRow;
+    reformat(): void;
+    getTable(): ITabulator;
+    getNextRow(): IRowComponent | false;
+    getPrevRow(): IRowComponent | false;
+    toggleSelect?: () => void;
+    isSelected?: () => boolean;
+}
+export interface IRow extends ICoreFeature {
+    calcHeight(force?: boolean): void;
+    calcMaxHeight(): number;
+    calcMinHeight(): number;
+    cells: ICell[];
+    clearCellHeight(): void;
+    component: IRowComponent | null;
+    create(): void;
+    createElement(): void;
+    created: boolean;
+    data: Record<string, any>;
+    deinitialize(): void;
+    deinitializeHeight(): void;
+    delete(): Promise<void>;
+    deleteActual(blockRedraw?: boolean): void;
+    deleteCell(cell: ICell): void;
+    deleteCells(): void;
+    detachElement(): void;
+    detachModules(): void;
+    element: HTMLElement | false;
+    findCell(subject: HTMLElement): ICell | undefined;
+    generateCells(): void;
+    generateElement(): void;
+    getCell(column: string | IColumn | IColumnComponent): ICell | undefined;
+    getCellIndex(findCell: ICell): number;
+    getCells(): ICell[];
+    getComponent(): IRowComponent;
+    getData(transform?: string): Record<string, any>;
+    getElement(): HTMLElement;
+    getGroup(): any | false;
+    getHeight(): number;
+    getPosition(): number | false;
+    getWidth(): number;
+    height: number;
+    heightInitialized: boolean;
+    heightStyled: string;
+    initialize(force?: boolean, inFragment?: boolean): void;
+    initialized: boolean;
+    isDisplayed(): boolean;
+    manualHeight: boolean;
+    modules: Record<string, any>;
+    moveToRow(to: IRow, before?: boolean): void;
+    nextRow(): IRow | false;
+    normalizeHeight(force?: boolean): void;
+    outerHeight: number;
+    parent: IRowManager;
+    position: number;
+    positionWatchers: Array<(position: number) => void>;
+    prevRow(): IRow | false;
+    reinitialize(): void;
+    reinitializeHeight(): void;
+    rendered(): void;
+    setCellHeight(): void;
+    setData(data: Record<string, any>): void;
+    setHeight(height: number, force?: boolean): void;
+    setPosition(position: number): void;
+    type: string;
+    updateData(updatedData: Record<string, any> | string): Promise<void>;
+    watchPosition(callback: (position: number) => void): void;
+    wipe(): void;
+}
+export interface IRenderer extends ICoreFeature {
+    elementVertical: HTMLElement | undefined;
+    elementHorizontal: HTMLElement | undefined;
+    tableElement: HTMLElement | undefined;
+    verticalFillMode: 'fit' | 'fill';
+    initialize(): void;
+    scrollToRowPosition(row: IRow, position?: ScrollToRowPosition, ifVisible?: boolean): Promise<void>;
+    clearRows(): void;
+    clearColumns(): void;
+    reinitializeColumnWidths(columns?: IColumn[]): Promise<void>;
+    renderRows(): void;
+    renderColumns(): void;
+    rerenderRows(callback?: () => void): void;
+    rerenderColumns(update?: boolean | null, blockRedraw?: boolean): void;
+    renderRowCells(row: IRow, inFragment?: boolean): void;
+    rerenderRowCells(row: IRow, force?: boolean): void;
+    scrollColumns(left: number, dir?: boolean): void;
+    scrollRows(top: number, dir?: boolean): void;
+    resize(): void;
+    scrollToRow(row: IRow): void;
+    scrollToRowNearestTop(row: IRow): boolean;
+    visibleRows(includingBuffer?: boolean): IRow[];
+    rows(): IRow[];
+    styleRow(row: IRow, index: number): void;
+    clear(): void;
+}
+export interface IBasicHorizontal extends IRenderer {
+    renderRowCells(row: IRow, inFragment?: boolean): void;
+    reinitializeColumnWidths(columns: IColumn[]): Promise<void>;
+}
+export interface IBasicVertical extends IRenderer {
+    scrollTop: number;
+    scrollLeft: number;
+    clearRows(): void;
+    renderRows(): void;
+    rerenderRows(callback?: () => void): void;
+    scrollToRow(row: IRow): void;
+    visibleRows(): IRow[];
+}
+export interface IVirtualDomHorizontal extends IRenderer {
+    leftCol: number;
+    rightCol: number;
+    scrollLeft: number;
+    vDomScrollPosLeft: number;
+    vDomScrollPosRight: number;
+    vDomPadLeft: number;
+    vDomPadRight: number;
+    fitDataColAvg: number;
+    windowBuffer: number;
+    visibleRowsCache: IRow[] | null;
+    initialized: boolean;
+    isFitData: boolean;
+    columns: IColumn[];
+    initialize(): void;
+    compatibilityCheck(): void;
+    layoutCheck(): void;
+    vertScrollListen(): void;
+    clearVisRowCache(): void;
+    renderColumns(): Promise<void>;
+    scrollColumns(left: number): void;
+    calcWindowBuffer(): void;
+    rerenderColumns(update?: boolean, blockRedraw?: boolean): void;
+    renderRowCells(row: IRow): void;
+    rerenderRowCells(row: IRow, force?: boolean): void;
+    reinitializeColumnWidths(): Promise<void>;
+    deinitialize(): void;
+    clear(): void;
+    dataChange(): Promise<void>;
+    reinitChanged(old: {
+        cols: IColumn[];
+        leftCol: number;
+        rightCol: number;
+    }): boolean;
+    reinitializeRows(): void;
+    getVisibleRows(): IRow[];
+    scroll(diff: number): Promise<void>;
+    colPositionAdjust(start: number, end: number, diff: number): void;
+    addColRight(): Promise<void>;
+    addColLeft(): Promise<void>;
+    removeColRight(): void;
+    removeColLeft(): void;
+    fitDataColActualWidthCheck(columns: IColumn): Promise<number>;
+    initializeRow(row: IRow): void;
+    appendCell(row: IRow, column: IColumn): void;
+    reinitializeRow(row: IRow, force?: boolean): void;
+}
+export interface IVirtualDomVertical extends IRenderer {
+    scrollTop: number;
+    scrollLeft: number;
+    vDomRowHeight: number;
+    vDomTop: number;
+    vDomBottom: number;
+    vDomScrollPosTop: number;
+    vDomScrollPosBottom: number;
+    vDomTopPad: number;
+    vDomBottomPad: number;
+    vDomMaxRenderChain: number;
+    vDomWindowBuffer: number;
+    vDomWindowMinTotalRows: number;
+    vDomWindowMinMarginRows: number;
+    vDomTopNewRows: IRow[];
+    vDomBottomNewRows: IRow[];
+    vDomScrollHeight: number;
+}
+export interface IAlert extends ICoreFeature {
+    element: HTMLElement;
+    msgElement: HTMLElement;
+    type: string | null;
+    _createAlertElement(): HTMLElement;
+    _createMsgElement(): HTMLElement;
+    _typeClass(): string;
+    alert(content: string | HTMLElement | (() => string | HTMLElement) | undefined, type?: string): void;
+    clear(): void;
+}
+export interface IComponentFunctionBinder {
+    table: ITabulator;
+    bindings: Record<string, Record<string, (...args: any[]) => any>>;
+    bind(type: string, funcName: string, handler: (...args: any[]) => any): void;
+    handle(type: string, component: any, name: string | symbol): any;
+}
+export interface IDataLoader extends ICoreFeature {
+    requestOrder: number;
+    loading: boolean;
+    load(data: any, params?: any, config?: any, replace?: any, silent?: any, columnsChanged?: any): Promise<void>;
+    mapParams(params: Record<string, any>, map: Record<string, string>): Record<string, any>;
+    objectInvert(obj: Record<string, string>): Record<string, string>;
+    blockActiveLoad(): void;
+    alertLoader(): void;
+    alertError(): void;
+    clearAlert(): void;
+}
+export interface IDependencyRegistry extends ICoreFeature {
+    deps: Record<string, any>;
+    props: Record<string, Record<string, any>>;
+    lookup(key: string | string[], prop?: string, silent?: boolean): any;
+    lookupProp(key: string, prop: string, silent?: boolean): any;
+    lookupKey(key: string, silent?: boolean): any;
+    error(key: string | string[]): void;
+}
+export interface IDeprecationAdvisor extends ICoreFeature {
+    _warnUser(...args: any[]): void;
+    check(oldOption: string, newOption?: string, convert?: (value: unknown) => unknown): boolean;
+    checkMsg(oldOption: string, msg: string): boolean;
+    msg(msg: string): void;
+}
+export type EventCallback = (...args: any[]) => any;
+export interface IExternalEventBus {
+    table: ITabulator;
+    events: Record<string, EventCallback[]>;
+    optionsList: IOptionsList | Record<string, any>;
+    subscriptionNotifiers: Record<string, Array<(subscribed: boolean) => void>>;
+    dispatch: (key: string, ...args: any[]) => any;
+    debug: boolean | string[] | undefined;
+    subscriptionChange(key: string, callback: (subscribed: boolean) => void): void;
+    subscribe(key: string, callback: EventCallback): void;
+    unsubscribe(key: string, callback?: EventCallback): void;
+    subscribed(key: string): boolean;
+    _notifySubscriptionChange(key: string, subscribed: boolean): void;
+    _dispatch(key: string, ...args: any[]): any;
+    _debugDispatch(key: string, ...args: any[]): any;
+}
+export type PseudoTracker = {
+    subscriber: ((key: string, e: Event, target: HTMLElement) => void) | null;
+    target: HTMLElement | null;
+};
+export type ListenerConfig = {
+    components: string[];
+    handler: ((e: Event) => void) | null;
+};
+export type ComponentTarget = {
+    component: any;
+    target: HTMLElement;
+};
+export interface IInteractionManager extends ICoreFeature {
+    el: HTMLElement | null;
+    abortClasses: string[];
+    previousTargets: Record<string, ComponentTarget>;
+    listeners: string[] | Record<string, ListenerConfig>;
+    componentMap: Record<string, string>;
+    pseudoTrackers: Record<string, PseudoTracker>;
+    pseudoTracking: boolean;
+    pseudoMouseEnter(key: string, e: Event, target: HTMLElement): void;
+    pseudoMouseLeave(key: string, e: Event): void;
+    bindSubscriptionWatchers(): void;
+    subscriptionChanged(component: string, key: string, added: boolean): void;
+    updateEventListeners(): void;
+    track(type: string, e: Event): void;
+    findTargets(path: EventTarget[]): Record<string, HTMLElement>;
+    bindComponents(type: string, targets: Record<string, HTMLElement | false>): Record<string, any>;
+    triggerEvents(type: string, e: Event, targets: Record<string, any>): void;
+    clearWatchers(): void;
+}
+export type EventSubscriber = {
+    callback: (...args: any[]) => any;
+    priority: number;
+};
+export type InternalEventBusEventCallback = (subscribed: boolean) => void;
+export interface IInternalEventBus {
+    events: Record<string, EventSubscriber[]>;
+    subscriptionNotifiers: Record<string, InternalEventBusEventCallback[]>;
+    dispatch: (key: string, ...args: any[]) => void;
+    chain: (key: string, args: any[] | any, initialValue: any, fallback?: any) => any;
+    confirm: (key: string, args: any[] | any) => boolean;
+    debug: boolean | string[] | undefined;
+    subscriptionChange(key: string, callback: InternalEventBusEventCallback): void;
+    subscribe(key: string, callback: InternalEventBusEventCallback, priority?: number): void;
+    unsubscribe(key: string, callback?: InternalEventBusEventCallback): void;
+    subscribed(key: string): boolean;
+    _chain(key: string, args: any[] | any, initialValue: any, fallback?: any): any;
+    _confirm(key: string, args: any[] | any): boolean;
+    _notifySubscriptionChange(key: string, subscribed: boolean): void;
+    _dispatch(key: string, ...args: any[]): void;
+    _debugDispatch(key: string, ...args: any[]): any;
+    _debugChain(key: string, args: any[] | any, initialValue: any, fallback?: any): any;
+    _debugConfirm(key: string, args: any[] | any): boolean;
+}
+export interface IModuleBinder {
+    modules: Record<string, any>;
+    modulesCore: any[];
+    modulesRegular: any[];
+    _bindModules(): void;
+}
+export interface IOptionsList {
+    table: ITabulator;
+    msgType: string;
+    registeredDefaults: Record<string, any>;
+    register(option: string, value: any): void;
+    generate(defaultOptions: Record<string, any>, userOptions: Record<string, any>): Record<string, any>;
+}
+export interface IPopup {
+    element: HTMLElement;
+    container: HTMLElement;
+    parent: IPopup | null;
+    reversedX: boolean;
+    childPopup: IPopup | null;
+    blurable: boolean;
+    blurCallback: (() => void) | null;
+    blurEventsBound: boolean;
+    renderedCallback: (() => void) | null;
+    visible: boolean;
+    hideable: boolean;
+    blurEvent: () => void;
+    escEvent: (e: KeyboardEvent) => void;
+    destroyBinding: () => void;
+    destroyed: boolean;
+    tableDestroyed(): void;
+    _lookupContainer(): HTMLElement;
+    _checkContainerIsParent(container: HTMLElement, element: HTMLElement | ParentNode): boolean;
+    renderCallback(callback: () => void): void;
+    containerEventCoords(e: MouseEvent | TouchEvent): {
+        x: number;
+        y: number;
+    };
+    elementPositionCoords(element: HTMLElement, position: 'right' | 'bottom' | 'left' | 'top' | 'center'): {
+        offset: {
+            left: number;
+            top: number;
+        };
+        x: number;
+        y: number;
+    };
+    show(origin: HTMLElement | MouseEvent | TouchEvent | number, position?: 'right' | 'bottom' | 'left' | 'top' | 'center' | number): this;
+    _fitToScreen(x: number, y: number, parentEl: HTMLElement | undefined, parentOffset: {
+        left: number;
+        top: number;
+    } | undefined, position: 'right' | 'bottom' | 'left' | 'top' | 'center' | undefined): void;
+    isVisible(): boolean;
+    hideOnBlur(callback: () => void): this;
+    _escapeCheck(e: KeyboardEvent): void;
+    blockHide(): void;
+    restoreHide(): void;
+    hide(silent?: boolean): this;
+    child(element: HTMLElement): IPopup;
+}
+export interface ICoreFeature {
+    table: ITabulator;
+    reloadData(data: unknown[] | null, silent?: boolean, columnsChanged?: boolean): Promise<void>;
+    langText(...args: any[]): any;
+    langBind(...args: any[]): any;
+    langLocale(...args: any[]): any;
+    commsConnections(...args: any[]): any;
+    commsSend(...args: any[]): any;
+    layoutMode(): any;
+    layoutRefresh(force: boolean): any;
+    subscribe(...args: any[]): any;
+    unsubscribe(...args: any[]): any;
+    subscribed(key: string): any;
+    subscriptionChange(...args: any[]): any;
+    dispatch(...args: any[]): any;
+    chain(...args: any[]): any;
+    confirm(...args: any[]): any;
+    dispatchExternal(...args: any[]): any;
+    subscribedExternal(key: string): any;
+    subscriptionChangeExternal(...args: any[]): any;
+    options(key: keyof Options): any;
+    setOption(key: keyof Options, value: unknown): any;
+    deprecationCheck(oldOption: keyof Options, newOption: keyof Options, convert: (value: unknown) => unknown): any;
+    deprecationCheckMsg(oldOption: keyof Options, msg: string): any;
+    deprecationMsg(msg: string): any;
+    module(key: string): any;
+}
+export interface IRowManager extends ICoreFeature {
+    element: HTMLElement;
+    tableElement: HTMLElement;
+    heightFixer: HTMLElement;
+    placeholder: HTMLElement | null;
+    placeholderContents: HTMLElement | null;
+    firstRender: boolean;
+    renderMode?: RenderMode;
+    fixedHeight: boolean;
+    rows: IRow[];
+    activeRowsPipeline: IRow[][];
+    activeRows: IRow[];
+    activeRowsCount: number;
+    displayRows: IRow[][];
+    displayRowsCount: number;
+    scrollTop: number;
+    scrollLeft: number;
+    redrawBlock: boolean;
+    redrawBlockRestoreConfig: any;
+    redrawBlockRenderInPosition: boolean;
+    dataPipeline: any[];
+    displayPipeline: any[];
+    scrollbarWidth: number;
+    renderer: IRenderer | null;
+    redrawing?: boolean;
+    rowIndexMap: Map<any, IRow>;
+    createHolderElement(): HTMLElement;
+    createTableElement(): HTMLElement;
+    initializePlaceholder(): void;
+    getElement(): HTMLElement;
+    getTableElement(): HTMLElement;
+    initialize(): void;
+    findRow(subject: IRow | IRowComponent | HTMLElement | null | undefined): IRow | false;
+    getRowFromDataObject(data: any): IRow | false;
+    getRowFromPosition(position: number): IRow | undefined;
+    registerRowInMap(row: IRow): void;
+    unregisterRowFromMap(row: IRow): void;
+    scrollToRow(row: IRow, position?: ScrollToRowPosition, ifVisible?: boolean): Promise<unknown> | undefined;
+    setData(data: any[], renderInPosition?: boolean, columnsChanged?: boolean): Promise<void>;
+    _setDataActual(data: any[], renderInPosition?: boolean): void;
+    _wipeElements(): void;
+    destroy(): void;
+    deleteRow(row: IRow, blockRedraw?: boolean): void;
+    addRow(data: any | IRow, isTop?: boolean, index?: any, blockRedraw?: boolean): IRow;
+    addRows(data: any[], pos?: AddRowPos, index?: any, refreshDisplayOnly?: boolean): Promise<Array<IRowComponent | IRow>>;
+    findAddRowPos(pos?: AddRowPos): boolean;
+    addRowActual(data: any | IRow, pos: boolean, index?: any, blockRedraw?: boolean): IRow;
+    moveRow(from: IRow, to: IRow, after?: boolean): void;
+    moveRowActual(from: IRow, to: IRow, after?: boolean): void;
+    moveRowInArray(rows: IRow[], from: IRow, to: IRow, after?: boolean): void;
+    clearData(): void;
+    getRowIndex(row: IRow): number | false;
+    getDisplayRowIndex(row: IRow): number | false;
+    nextDisplayRow(row: IRow, rowOnly?: boolean): IRow | false;
+    prevDisplayRow(row: IRow, rowOnly?: boolean): IRow | false;
+    findRowIndex(row: IRow, list: IRow[]): number | false;
+    getData(active?: RowRangeLookup, transform?: string): any[];
+    getComponents(active?: RowRangeLookup): IRowComponent[];
+    getDataCount(active?: RowRangeLookup): number;
+    scrollHorizontal(left: number): void;
+    registerDataPipelineHandler(handler: (rows: IRow[]) => IRow[], priority: number): void;
+    registerDisplayPipelineHandler(handler: (rows: IRow[], renderInPosition?: boolean) => IRow[], priority: number): void;
+    refreshActiveData(handler?: ((rows: IRow[]) => IRow[]) | string | false, silent?: boolean, renderInPosition?: boolean): void;
+    getDisplayRows(index?: number): IRow[];
+    scrollToRow(row: IRow, position?: ScrollToRowPosition, ifVisible?: boolean): Promise<unknown> | undefined;
+    adjustTableSize(): void;
+    getData(transform?: string): any[];
+    getDataCount(activeOnly?: RowRangeLookup): number;
+    scrollHorizontal(left: number): void;
+    registerDataPipelineHandler(handler: (rows: IRow[]) => IRow[], priority: number): void;
+    registerDisplayPipelineHandler(handler: (rows: IRow[], renderInPosition?: boolean) => IRow[], priority: number): void;
+    refreshActiveData(handler?: ((rows: IRow[]) => IRow[]) | string | false, skipStage?: boolean, renderInPosition?: boolean): void;
+    refreshPipelines(handler: any, stage: string, index: number, renderInPosition?: boolean): void;
+    regenerateRowPositions(): void;
+    setActiveRows(activeRows: IRow[]): void;
+    resetDisplayRows(): void;
+    setDisplayRows(displayRows: IRow[], index: number): void;
+    getVisibleRows(chain: boolean, viewable?: boolean): IRow[];
+    displayRowIterator(callback: (rows: IRow[]) => void): void;
+    getRows(type?: RowRangeLookup): IRow[];
+    reRenderInPosition(callback?: () => void): void;
+    scrollBarCheck(): void;
+    initializeRenderer(): void;
+    getRenderMode(): RenderMode | undefined;
+    renderTable(): void;
+    renderEmptyScroll(): void;
+    _clearTable(): void;
+    tableEmpty(): void;
+    checkPlaceholder(): void;
+    _showPlaceholder(): void;
+    _clearPlaceholder(): void;
+    _positionPlaceholder(): void;
+    styleRow(row: IRow, index: number): void;
+    normalizeHeight(force?: boolean): void;
+    adjustTableSize(): boolean;
+    reinitialize(): void;
+    blockRedraw(): void;
+    restoreRedraw(): void;
+    redraw(force?: boolean): void;
+    resetScroll(): void;
+}
+export interface IColumnManager extends ICoreFeature {
+    blockHozScrollEvent: boolean;
+    headersElement: HTMLElement | null;
+    contentsElement: HTMLElement | null;
+    rowHeader: IColumn | null;
+    element: HTMLElement | undefined;
+    columns: IColumn[];
+    columnsByIndex: IColumn[];
+    columnsByField: Record<string, IColumn>;
+    scrollLeft: number;
+    optionsList: any;
+    redrawBlock: boolean;
+    redrawBlockUpdate: boolean | null;
+    renderer: IRenderer | null;
+    tableElement: HTMLElement | undefined;
+    initialize(): void;
+    updateLastCellClass(): void;
+    padVerticalScrollbar(width: number): void;
+    initializeRenderer(): void;
+    createHeadersElement(): HTMLElement;
+    createHeaderContentsElement(): HTMLElement;
+    createHeaderElement(): HTMLElement;
+    getElement(): HTMLElement | undefined;
+    getContentsElement(): HTMLElement | null;
+    getHeadersElement(): HTMLElement | null;
+    scrollHorizontal(left: number): void;
+    initializeScrollWheelWatcher(): void;
+    generateColumnsFromRowData(data: Array<Record<string, any>>): void;
+    calculateSorterFromValue(value: any): 'string' | 'number' | 'boolean' | 'time' | 'alphanum' | 'exists' | 'date' | 'datetime' | 'array';
+    setColumns(cols: ColumnDefinition[]): void;
+    _addColumn(definition: ColumnDefinition, before?: boolean, nextToColumn?: IColumn | IColumnComponent | false): IColumn;
+    registerColumnField(col: IColumn): void;
+    registerColumnPosition(col: IColumn): void;
+    _reIndexColumns(): void;
+    verticalAlignHeaders(): void;
+    findColumn(subject: ColumnLookup): IColumn | false;
+    getColumnByField(field: string): IColumn | undefined;
+    getColumnsByFieldRoot(root: string): IColumn[];
+    getColumnByIndex(index: number): IColumn | undefined;
+    getFirstVisibleColumn(): IColumn | false;
+    getVisibleColumnsByIndex(): IColumn[];
+    getColumns(): IColumn[];
+    findColumnIndex(column: IColumn | false): number | false;
+    getRealColumns(): IColumn[];
+    traverse(callback: (column: IColumn, index: number) => void): void;
+    getDefinitions(active?: boolean): ColumnDefinition[];
+    getDefinitionTree(): ColumnDefinition[];
+    getComponents(structured?: boolean): IColumnComponent[];
+    getWidth(): number;
+    moveColumn(from: IColumn, to: IColumn, after?: boolean): void;
+    moveColumnActual(from: IColumn, to: IColumn, after?: boolean): void;
+    _moveColumnInArray(columns: IColumn[], from: IColumn, to: IColumn, after?: boolean, updateRows?: boolean): void;
+    scrollToColumn(column: IColumn, position?: ScrollToColumnPosition, ifVisible?: boolean): Promise<void>;
+    generateCells(row: IRow): ICell[];
+    getFlexBaseWidth(): number;
+    addColumn(definition: ColumnDefinition, before?: boolean, nextToColumn?: IColumn | false): Promise<IColumn>;
+    deregisterColumn(column: IColumn): void;
+    rerenderColumns(update?: boolean | null, blockRedraw?: boolean): void;
+    blockRedraw(): void;
+    restoreRedraw(): void;
+    redraw(force?: boolean): void;
+}
+export interface IFooterManager extends ICoreFeature {
+    active: boolean;
+    element: HTMLElement;
+    containerElement: HTMLElement;
+    external: boolean;
+    initialize(): void;
+    createElement(): HTMLElement;
+    createContainerElement(): HTMLElement;
+    initializeElement(): void;
+    getElement(): HTMLElement;
+    append(element: Node): void;
+    prepend(element: Node): void;
+    remove(element: Node): void;
+    deactivate(): void;
+    activate(): void;
+    redraw(): void;
+}
+export interface IModule extends ICoreFeature {
+    moduleCore?: boolean;
+    _handler: ((rows: IRow[]) => IRow[]) | string;
+    initialize(): void;
+    registerTableOption(key: string, value?: unknown): void;
+    registerColumnOption(key: string, value?: unknown): void;
+    registerTableFunction<TName extends string, TFunc extends (...args: any[]) => any>(name: TName, func: TFunc): void;
+    registerComponentFunction(component: string, func: string, handler: any): any;
+    registerDataHandler(handler: (rows: IRow[]) => IRow[], priority: number): void;
+    registerDisplayHandler(handler: (rows: IRow[], renderInPosition?: boolean) => IRow[], priority: number): void;
+    displayRows(adjust?: number): IRow[] | undefined;
+    activeRows(): IRow[];
+    refreshData(renderInPosition?: boolean, handler?: ((rows: IRow[]) => IRow[]) | string): void;
+    footerAppend(element: HTMLElement): HTMLElement;
+    footerPrepend(element: HTMLElement): HTMLElement;
+    footerRemove(element: HTMLElement): HTMLElement;
+    popup(menuEl: HTMLElement, menuContainer?: any): any;
+    alert(content: any, type?: string): void;
+    clearAlert(): void;
+}
+export interface ITabulatorFull extends ITabulator {
+    setSheetData: (lookup: string | SpreadsheetComponent, data: unknown[][]) => void;
+    setGroupBy: (groups: GroupArg) => void;
+    setGroupHeader: (values: Options['groupHeader']) => void;
+    setGroupStartOpen: (values: Options['groupStartOpen']) => void;
+    setGroupValues: (data: GroupValuesArg) => void;
+    setPageSize: (size: number | true) => void;
+    setPage: (page: number | 'first' | 'prev' | 'next' | 'last') => Promise<void>;
+    getSheetData: (key?: SheetLookup) => unknown[][];
+    getPage: () => IPage;
+    setFilter: IFilter['setFilter'];
+    clearFilter: IFilter['clearFilter'];
+    setSort: (sortList: string | Sorter[], dir?: SortDirection) => void;
+}
+/**
+ * Table type
+ */
+export type RowAction = {
+    icon: string;
+    name: string;
+    options?: {
+        buttonProps?: {
+            outline?: boolean;
+            variant?: ButtonVariant;
+        };
+        dropdownItems: DropdownItem[];
+        dropdownSections: DropdownSection;
+    };
+    tooltip?: string;
+    type?: RowActionType;
+};
+export declare enum HoverMenuPlacement {
+    Left = "left",
+    Right = "right"
+}
+export type HoverMenuOptions = {
+    data: RowAction[];
+    options: {
+        placement: HoverMenuPlacement;
+    };
+};
+export interface ISheetComponent {
+    active(): unknown;
+    clear(): unknown;
+    getData(): unknown[][];
+    getDefinition(): unknown;
+    getKey(): string;
+    getTitle(): string;
+    remove(): unknown;
+    setColumns(columns: number): unknown;
+    setData(data: unknown[][]): unknown;
+    setRows(rows: number): unknown;
+    setTitle(title: string): unknown;
+}
+export interface IGroupComponent {
+    getElement(): HTMLElement | false;
+    getField(): string | false;
+    getKey(): unknown;
+    getParentGroup(): IGroupComponent | false;
+    getRows(): IRowComponent[];
+    getSubGroups(): IGroupComponent[];
+    getTable(): unknown;
+    hide(): void;
+    isVisible(): boolean;
+    scrollTo(position?: ScrollToRowPosition, ifVisible?: boolean): Promise<unknown> | undefined;
+    show(): void;
+    toggle(): void;
+    type: string;
+}
+export interface ICalcComponent {
+    getCell(column: IColumnComponent): ICellComponent | false;
+    getCells(): ICellComponent[];
+    getData(transform?: string): Record<string, unknown>;
+    getElement(): HTMLElement | false;
+    getTable(): unknown;
+}
+export interface IRangeComponent {
+    clearValues(): void;
+    getBottomEdge(): number;
+    getBounds(): {
+        end: ICellComponent;
+        start: ICellComponent;
+    };
+    getCells(): ICellComponent[];
+    getColumns(): IColumnComponent[];
+    getData(): unknown;
+    getElement(): HTMLElement | null;
+    getLeftEdge(): number;
+    getRightEdge(): number;
+    getRows(): IRowComponent[];
+    getStructuredCells(): ICellComponent[][];
+    getTopEdge(): number;
+    remove(): void;
+    setBounds(start: ICellComponent | unknown, end: ICellComponent | unknown): void;
+    setEndBound(end: ICellComponent | unknown): void;
+    setStartBound(start: ICellComponent | unknown): void;
+}
+export interface Options extends OptionsGeneral, OptionsMenu, OptionsHistory, OptionsLocale, OptionsDownload, OptionsColumns, OptionsRows, OptionsData, OptionsSorting, OptionsFiltering, OptionsRowGrouping, OptionsPagination, OptionsPersistentConfiguration, OptionsClipboard, OptionsDataTree, OptionsDebug, OptionsHTML, OptionsSpreadsheet, OptionsHoverMenu, OptionsAccessibility {
+    toolbarElement?: HTMLElement;
+}
+export interface OptionsAccessibility {
+    tabulatorRole?: string;
+    columnGroupRole?: string;
+    columnHeaderRole?: string;
+    rowRole?: string;
+    rowGroupRole?: string;
+    cellRole?: string;
+}
+export interface OptionsHoverMenu {
+    hoverMenu?: HoverMenuOptions;
+    hoverMenuPlacement?: 'top' | 'bottom' | 'left' | 'right';
+    hoverMenuField?: string;
+}
+export interface OptionsSorting {
+    /** Array of sorters to be applied on load. */
+    initialSort?: Sorter[];
+    /** reverse the order that multiple sorters are applied to the table. */
+    sortOrderReverse?: boolean;
+    headerSortClickElement?: 'header' | 'icon';
+}
+export interface OptionsDebug {
+    invalidOptionWarning?: boolean;
+    /** Enabled by default this will provide a console warning if you are trying to set an option on the table that does not exist. With the new optional modular structure this is particularly valuable as it will prompt you if you are trying to use an option for a module that has not been installed */
+    debugInvalidOptions?: boolean;
+    /** Enabled by default this will provide a console warning if you try and call a function on the table before it has been initialized. */
+    debugInitialization?: boolean;
+    /** The debugEventsExternal option will create a console log for every external event that is fired so you can gain an understanding of which events you should be binding to. */
+    debugEventsExternal?: boolean;
+    /** The debugEventsInternal option will create a console log for every internal event that is fired so you can gain an understanding of which events you should be subscribing to in your modules. */
+    debugEventsInternal?: boolean;
+    /** Disable component function warnings */
+    debugInvalidComponentFuncs?: boolean;
+    /** Disable deprecation warnings */
+    debugDeprecation?: boolean;
+}
+export type DataTreeConfig = {
+    branchEl: HTMLElement | false;
+    children: any[] | boolean;
+    controlEl: HTMLElement | false;
+    index: number;
+    open: boolean;
+    parent: any | false;
+};
+export interface OptionsDataTree {
+    /** To enable data trees in your table, set the dataTree property to true in your table constructor: */
+    dataTree?: boolean;
+    /** 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 field name of the column to the dataTreeElementColumn setup option. */
+    dataTreeElementColumn?: boolean | string;
+    /** Show tree branch icon. */
+    dataTreeBranchElement?: boolean | string;
+    /** Tree level indent in pixels */
+    dataTreeChildIndent?: number;
+    /** 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;
+    /** By default Tabulator will look for loading rows in the loading field of a row data object. You can change this to look in a different field using the dataTreeLoadingField property in your table constructor: */
+    dataTreeLoadingField?: string;
+    /** By default Tabulator will look for has more rows in the hasMore field of a row data object. You can change this to look in a different field using the dataTreeHasMoreField property in your table constructor: */
+    dataTreeHasMoreField?: string;
+    /**
+     * The toggle button that allows users to collapse and expand the column can be customized 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;
+    /** The toggle button that allows users to expand the column. */
+    dataTreeExpandElement?: string | HTMLElement;
+    /**
+     * 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: IRowComponent, level: number) => boolean);
+    /** Propagate selection events from parent rows to children. */
+    dataTreeSelectPropagate?: boolean;
+    dataTreeFilter?: boolean;
+    dataTreeSort?: boolean;
+    /**
+     * When you are using the dataTree option with your table, the column calculations will by default only use the data for the top level rows and will ignore any children.
+     * To include child rows in the column calculations set the dataTreeChildColumnCalcs option to true in the table constructor.
+     */
+    dataTreeChildColumnCalcs?: boolean;
+}
+/** Context for paste parser/action - avoids conflict with DOM Clipboard API. */
+export interface IClipboardModuleContext {
+    table: any;
+}
+export type PasteParser = (this: IClipboardModuleContext, clipboard: string) => Array<Record<string, any>> | false;
+export type ClipboardCopyConfig = AdditionalExportOptions | undefined;
+export 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';
+    /** 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 inserted 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 data 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.
+     * Built-in parsers are "table" and "range".
+     */
+    clipboardPasteParser?: string | PasteParser;
+    /**
+     * 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' | 'range';
+    /**
+     * By default Tabulator will copy some of the tables styling along with the data to give a better visual appearance when pasted into other documents.
+     *
+     * If you want to only copy the un-styled data then you should set the clipboardCopyStyled option to false in the table options object:
+     */
+    clipboardCopyStyled?: boolean;
+    /**
+     * 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?: ClipboardCopyConfig;
+    /** When copying to clipboard you may want to apply a different group header from the one usually 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: IGroupComponent) => string) | Array<(value: any, count: number, data: any) => string>;
+    /** When the getHtml function is called you may want to apply a different group header from the one usually 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: IGroupComponent) => string) | Array<(value: any, count: number, data: any) => string>;
+}
+export interface OptionsPersistentConfiguration {
+    /** ID tag used to identify persistent storage information. */
+    persistenceID?: string;
+    /**
+     * Persistence information can either be stored in a cookie or in the localStorage 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;
+    /** Enable persistent 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. */
+    persistentSort?: boolean;
+    /** You can ensure the data filtering is stored for the next page load by setting the persistentFilter option to true. */
+    persistentFilter?: boolean;
+    /** 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;
+    /** 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;
+    /** 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;
+}
+export interface PersistenceOptions {
+    sort?: boolean;
+    filter?: boolean;
+    group?: boolean | PersistenceGroupOptions;
+    page?: boolean | PersistencePageOptions;
+    columns?: boolean | string[];
+    headerFilter?: boolean;
+}
+export interface PersistenceGroupOptions {
+    groupBy?: boolean;
+    groupStartOpen?: boolean;
+    groupHeader?: boolean;
+}
+export interface PersistencePageOptions {
+    size?: boolean;
+    page?: boolean;
+}
+export interface OptionsPagination {
+    pagination?: boolean;
+    paginationMode?: DataSource;
+    /** 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.
+     *
+     *  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[];
+    /** 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;
+    /**
+     * Lookup list to link expected data fields from the server to their function
+     * ```typescript
+     * default: {
+     *   "current_page": "current_page",
+     *   "last_page": "last_page",
+     *   "data": "data",
+     *   }
+     * ```
+     */
+    dataReceiveParams?: Record<string, string>;
+    /**
+     * Lookup list to link fields expected by the server to their function
+     * ```typescript
+     * default: {
+     *   "page": "page",
+     *   "size": "size",
+     *   "sorters": "sorters",
+     *   "filters": "filters",
+     * }
+     * ```
+     */
+    dataSendParams?: Record<string, string>;
+    /**
+     * 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';
+    /**
+     * You can choose to display a pagination counter in the bottom left of the footer that shows a summary of the current number of rows shown out of the total.
+     */
+    paginationCounter?: PaginationCounter;
+    /**
+     * By default the counter will be displayed in the left of the table footer. If you would like it displayed in another element pass a DOM node or a CSS selector for that element.
+     */
+    paginationCounterElement?: string | HTMLElement;
+    /** The number of pagination page buttons shown in the footer using the paginationButtonCount option. By default this has a value of 5. */
+    paginationButtonCount?: number;
+    /** Specify that a specific page should be loaded when the table first load. */
+    paginationInitialPage?: number;
+    /** Whether to show the button to go the first page. */
+    paginationShowFirst?: boolean;
+    /** Whether to show the button to go the last page. */
+    paginationShowLast?: boolean;
+    /** Whether to show the pagination buttons. */
+    showPaginationButtons?: boolean;
+}
+export type GroupArg = string | string[] | ((data: any) => any) | Array<string | ((data: any) => any)>;
+export interface OptionsRowGrouping {
+    /** String/function to select field to group rows by */
+    groupBy?: GroupArg;
+    /**
+     * 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;
+    /** 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: IGroupComponent) => string) | Array<(value: any, count: number, data: any, group: IGroupComponent) => string>;
+    /** When true, displays the item count in the group header. */
+    groupHeaderCount?: boolean;
+    /** Indentation in pixels applied per group level. Defaults to 10. */
+    groupIndent?: number;
+    /** When printing you may want to apply a different group header from the one usually 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: IGroupComponent) => 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:
+     *
+     * 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 | boolean[] | ((value: any, count: number, data: any, group: IGroupComponent) => boolean) | Array<boolean | ((value: any, count: number, data: any, group: IGroupComponent) => boolean)>;
+    /**
+     * 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 behavior you can use the groupToggleElement option to choose a different option:* * The option can take one of three values:
+     * arrow - toggle 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;
+    /** show/hide column calculations when group is closed. */
+    groupClosedShowCalcs?: boolean;
+    groupUpdateOnCellEdit?: boolean;
+}
+export interface Filter {
+    field: string | FilterFunction;
+    type: FilterType;
+    value: any;
+    params?: FilterParams;
+}
+export interface FilterParams {
+    separator?: string;
+    matchAll?: boolean;
+}
+export type FilterFunction = (data: any, filter: Filter) => boolean;
+export interface OptionsFiltering {
+    /** Array of filters to be applied on load. */
+    initialFilter?: Filter[];
+    /** array of initial values for header filters. */
+    initialHeaderFilter?: Array<Pick<Filter, 'field' | 'value'>>;
+    /** When using real time header filtering, Tabulator will wait 300 milliseconds after a keystroke before triggering the filter. You can customize this delay by using the headerFilterLiveFilterDelay table setup option. */
+    headerFilterLiveFilterDelay?: number;
+}
+export interface Sorter {
+    column: string;
+    dir: SortDirection;
+}
+export interface SorterFromTable {
+    /** The column component for the sorted column. */
+    column: IColumnComponent;
+    /** 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;
+}
+export interface OptionsData {
+    /** A unique index value should be present for each row of data if you want to be able to programmatically 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;
+    /** Array to hold data that should be loaded on table creation. */
+    data?: Array<Record<string, any>>;
+    importFormat?: 'array' | 'csv' | 'json' | ((fileContents: string) => unknown[]);
+    /** By default Tabulator will read in the file as plain text, which is the format used by all the built in importers. If you need to read the file data in a different format then you can use the importReader option to instruct the file reader to read in the file in a different format. */
+    importReader?: 'binary' | 'buffer' | 'text' | 'url';
+    autoTables?: boolean;
+    /** 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;
+    /** Parameters to be passed to remote Ajax data loading request. */
+    ajaxParams?: Record<string, unknown>;
+    /** The HTTP request type for Ajax requests or config object for the request. */
+    ajaxConfig?: HttpMethod | AjaxConfig;
+    /**
+     * 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;
+    /**
+     * 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;
+    /** callback function to replace inbuilt ajax request functionality */
+    ajaxRequestFunc?: (url: string, config: any, params: any) => Promise<any>;
+    /** Send filter config to server instead of processing locally */
+    ajaxFiltering?: boolean;
+    /** Send sorter config to server instead of processing locally */
+    ajaxSorting?: boolean;
+    /**
+     * 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 reuses 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';
+    /** By default tabulator will make the requests to fill the table as quickly as possible. On some servers these repeats 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;
+    /** 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;
+    /** Show loader while data is loading, can also take a function that must return a boolean. */
+    ajaxLoader?: boolean | (() => boolean);
+    /** html for loader element. */
+    ajaxLoaderLoading?: string;
+    /** html for the loader element in the event of an error. */
+    ajaxLoaderError?: string;
+    /** The ajaxRequesting callback is triggered when ever an ajax request is made. */
+    ajaxRequesting?: (url: string, params: any) => boolean;
+    /** 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;
+    dataLoader?: boolean;
+    dataLoaderLoading?: string | HTMLElement;
+    dataLoaderError?: string;
+    dataLoaderErrorTimeout?: number;
+    sortMode?: DataSource;
+    filterMode?: DataSource;
+}
+export declare enum DataSource {
+    Local = "local",
+    Remote = "remote"
+}
+export interface AjaxContentType {
+    headers: JSONRecord;
+    body: (url: string, config: any, params: any) => any;
+}
+export type HttpMethod = 'GET' | 'POST';
+export interface AjaxConfig {
+    method?: HttpMethod;
+    headers?: JSONRecord;
+    mode?: string;
+    credentials?: string;
+}
+export type AddRowPos = 'bottom' | 'top' | 'pos';
+export 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: IRowComponent) => any;
+    /** When printing you may want to apply a different formatter may want to apply a different formatter from the one usually used to format the row. */
+    rowFormatterPrint?: false | ((row: IRowComponent) => 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 usually used to format the row */
+    rowFormatterHtmlOutput?: false | ((row: IRowComponent) => any);
+    /** When copying to the clipboard you may want to apply a different formatter may want to apply a different formatter from the one usually 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: IRowComponent) => any);
+    /** The position in the table for new rows to be added, "bottom" or "top". */
+    addRowPos?: AddRowPos;
+    /**
+     * The selectableRows option can take one of a several values:
+     *
+     * - false - selectable rows are disabled
+     * - true - selectable rows are enabled, and you can select as many as you want
+     * - integer - any integer value, this sets the maximum number of rows that can be selected (when the maximum number of selected rows is exceeded, the first selected row will be deselected to allow the next row to be selected).
+     * - "highlight" (default) - rows have the same hover stylings as selectable rows but do not change state when clicked. This is great for when you want to show that a row is clickable but don't want it to be selectable.
+     */
+    selectableRows?: boolean | number | 'highlight';
+    /**
+     * The selectableRange option can take one of a several values:
+     *
+     * - false - range selection is disabled
+     * - true - range selection is enabled, and you can add as many ranges as you want
+     * - integer - any integer value, this sets the maximum number of ranges that can be selected (when the maximum
+     *           number of ranges is exceeded, the first selected range will be deselected to allow the next range to be selected).
+     */
+    selectableRange?: boolean | number;
+    selectableRangeAutoFocus?: boolean;
+    /**
+     * By default you can only select ranges by selecting cells on the table. If you would like to allow the user to
+     * select all cells in a column by clicking on the column header, then you can set the selectableRangeColumns option to true
+     */
+    selectableRangeColumns?: boolean;
+    /**
+     * By default you can only select ranges by selecting cells on the table. If you would like to allow the user to
+     * select all cells in row by clicking on the row header, then you can set the selectableRangeColumns option to true
+     */
+    selectableRangeRows?: boolean;
+    /**
+     * If you want the user to be able to clear the values for all cells in the active range by pressing the backspace
+     * or delete keys, then you can enable this behavior using the selectableRangeClearCells option:
+     *
+     * @example
+     * var table = new Tabulator("#example-table", {
+     *     selectableRangeClearCells:true,
+     * });
+     */
+    selectableRangeClearCells?: boolean;
+    /**
+     * By default the value of each cell in the range is set to undefined when this option is enabled and the user
+     * presses the backspace or delete keys. You can change the value the cells are set to using the
+     * selectableRangeClearCellsValue option
+     *
+     * @example
+     * var table = new Tabulator("#example-table", {
+     *     selectableRangeClearCellsValue: "", //clear cells by setting value to an empty string
+     * });
+     */
+    selectableRangeClearCellsValue?: unknown;
+    /**
+     * By default you can select a range of rows by holding down the shift key and click dragging over a number of rows
+     * to toggle the selected state state of all rows the cursor passes over.
+     *
+     * If you would prefer to select a range of row by clicking on the first row then holding down shift and clicking
+     * on the end row then you can achieve this by setting the selectableRowsRangeMode to click.
+     *
+     * @example
+     * var table = new Tabulator("#example-table", {
+     *     selectableRowsRangeMode:"click",
+     * });
+     */
+    selectableRowsRangeMode?: 'click' | 'drag';
+    /**
+     * By default, row selection works on a rolling basis, if you set the selectableRows option to a numeric value then
+     * when you select past this number of rows, the first row to be selected will be deselected. If you want to
+     * disable this behavior and instead prevent selection of new rows once the limit is reached you can set the
+     * selectableRowsRollingSelection option to false.
+     *
+     * @example
+     * var table = new Tabulator("#example-table", {
+     *     selectableRows: 5,
+     *     selectableRowsRollingSelection:false, // disable rolling selection
+     * });
+     */
+    selectableRowsRollingSelection?: boolean;
+    /**
+     * By default Tabulator will maintain selected rows when the table is filtered, sorted or paginated (but NOT when
+     * the setData function is used). If you want the selected rows to be cleared whenever the table view is updated
+     * then set the selectableRowsPersistence option to false.
+     *
+     * @example
+     * var table = new Tabulator("#example-table", {
+     *     selectableRows: true,
+     *     selectableRowsPersistence: false, // disable selection persistence
+     * });
+     */
+    selectableRowsPersistence?: boolean;
+    /** You many want to exclude certain rows from being selected. The selectableRowsCheck 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. */
+    selectableRowsCheck?: (row: IRowComponent) => boolean;
+    /** To allow the user to move rows up and down the table, set the movableRows parameter in the options: */
+    movableRows?: boolean;
+    /** 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 Tabulator object for the table to the movableRowsConnectedTables option. if you want to connect to multiple tables then you can pass in an array of values to this option. */
+    movableRowsConnectedTables?: string | string[] | HTMLElement | HTMLElement[];
+    /**
+     * The movableRowsSender option should be set on the sending table, and sets the action that should be taken after the row has been successfully 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: IRowComponent, toRow: IRowComponent, toTable: any) => 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:
+     *
+     * - 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: IRowComponent, toRow: IRowComponent, fromTable: ITabulator) => any);
+    movableRowsConnectedElements?: string | HTMLElement;
+    /** 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;
+    /**
+     * Allows the user to control the height of rows in the table by dragging the bottom border of the row.
+     * These guides will only appear on columns with the `resizable` option enabled in their column definition.
+     */
+    resizableRowGuide?: boolean;
+    /**
+     * Allows the user to control the height of columns in the table by dragging the border of the column.
+     * These guides will only appear if the `resizableRows` option is enabled.
+     */
+    resizableColumnGuide?: boolean;
+    /**
+     * 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?: ScrollToRowPosition;
+    /**
+     * The default option for triggering a ScrollTo on a visible element can be set using the scrollToRowIfHidden option. It can take a boolean value:
+     *
+     * false - scroll to row, even if it is visible (default)
+     * true - scroll to row, unless it is currently visible, then don't move
+     */
+    scrollToRowIfHidden?: boolean;
+    /** Allows you to specify the behavior when the user tabs from the last editable cell on the last row of the table. */
+    tabEndNewRow?: boolean | JSONRecord | ((row: IRowComponent) => any);
+    frozenRowsField?: string;
+    /** Freeze rows of data */
+    frozenRows?: number | string[] | ((row: IRowComponent) => boolean);
+    /**
+     * The editTriggerEvent option lets you choose which type of interaction event will trigger an edit on a cell.
+     *
+     * @example
+     * var table = new Tabulator("#example-table", {
+     *     editTriggerEvent:"dblclick", // trigger edit on double click
+     * });
+     *
+     * This option can take one of three values:
+     *
+     * - focus - trigger edit when the cell has focus (default)
+     * - click - trigger edit on single click on cell
+     * - dblclick - trigger edit on double click on cell
+     *
+     * This option does not affect navigation behavior, cells edits will still be triggered when they are navigated to
+     * through arrow keys or tabs.
+     */
+    editTriggerEvent?: 'click' | 'dblclick' | 'focus';
+}
+export interface OptionsColumns {
+    /** The column definitions are provided to Tabulator 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[];
+    /** 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 | 'full';
+    autoColumnsDefinitions?: ((columnDefinitions?: ColumnDefinition[]) => Array<Partial<ColumnDefinition>>) | Array<Partial<ColumnDefinition>> | Record<string, Partial<ColumnDefinition>>;
+    /** 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';
+    /**
+     * 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;
+    /**
+     * 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 exactly how 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';
+    /** 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /** To allow the user to move columns along the table, set the movableColumns parameter in the options: */
+    movableColumns?: boolean;
+    /** You can use the columnHeaderVertAlign option to set how the text in your column headers should be vertically. */
+    columnHeaderVertAlign?: VerticalAlign;
+    /**
+     * 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;
+    /**
+     * The default option for triggering a ScrollTo on a visible element can be set using the scrollToColumnIfHidden option. It can take a boolean value:
+     *
+     * false - scroll to column, even if it is visible (default)
+     * true - scroll to column, unless it is currently visible, then don't move
+     */
+    scrollToColumnIfHidden?: boolean;
+    /**
+     * 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';
+    /**
+     * 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;
+    /** multiple or single column sorting */
+    columnHeaderSortMulti?: boolean;
+    /** By setting the headerHidden option to true you can hide the column headers and present the table as a simple list if needed. */
+    headerHidden?: boolean;
+    /** The headerSort option can now be set in the table options to affect all columns as well as in column definitions. */
+    headerSort?: boolean;
+    headerSortElement?: string | ((column: IColumnComponent, dir: SortDirection) => any);
+    columnDefaults?: Partial<ColumnDefinition>;
+    /** When the resizableColumnFit table definition option is set to true, when you resize a column, its adjacent column is resized in the opposite direction to keep the total width of the columns the same. */
+    resizableColumnFit?: boolean;
+}
+export 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. When 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 | boolean;
+    /** 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 | boolean;
+    renderVertical?: RenderMode;
+    renderHorizontal?: RenderMode;
+    rowHeight?: number;
+    /** Manually set the size of the virtual DOM buffer. */
+    renderVerticalBuffer?: boolean | number;
+    /** placeholder element to display on empty table. */
+    placeholder?: string | HTMLElement | ((this: ITabulator | ITabulatorFull) => string);
+    placeholderHeaderFilter?: string | HTMLElement | ((this: ITabulator | ITabulatorFull) => string);
+    /** Footer  element to display for the table. */
+    footerElement?: string | HTMLElement;
+    /** Keybinding configuration object. */
+    keybindings?: false | KeyBinding;
+    /**
+     * The reactivity systems allow Tabulator to watch arrays and objects passed into the table for changes and then automatically update the table.
+     *
+     * This approach means you no longer need to worry about calling a number of different functions on the table to make changes, you simply update the array or object you originally passed into the table and Tabulator will take care of the rest.
+     *
+     * You can enable reactive data by setting the reactiveData option to true in the table constructor, and then passing your data array to the data option.
+     *
+     * Once the table is built any changes to the array will automatically be replicated to the table without needing to call any functions on the table itself
+     */
+    reactiveData?: boolean;
+    /** Tabulator will automatically attempt to redraw the data contained in the table if the containing element for the table is resized. To disable this functionality, set the autoResize property to false. */
+    autoResize?: boolean;
+    /** Setting the invalidOptionWarnings option to false will disable console warning messages for invalid properties in the table constructor and column definition object. */
+    invalidOptionWarnings?: boolean;
+    /**
+     * There are now three different validation modes available to customize the validation experience:
+     *
+     * blocking - if a user enters an invalid value while editing, they are blocked from leaving the cell until a valid value is entered (default)
+     *
+     * highlight - if a user enters an invalid value, then the edit will complete as usual and they are allowed to exit the cell but a highlight is applied to the cell using the tabulator-validation-fail class
+     *
+     * manual - no validation is automatically performed on edit, but it can be triggered by calling the validate function on the table or any Component Object
+     */
+    validationMode?: 'blocking' | 'highlight' | 'manual';
+    textDirection?: TextDirection;
+    /**
+     * Sometimes it can be useful to add a visual header to the start of a row.
+     * The `rowHeader` option allows you to define a column definition for a stylized header column at the start of the row.
+     *
+     * This can be great for adding row number, movable row handles or row selections, and keeps the controls visually separated from the table data.
+     */
+    rowHeader?: boolean | {
+        formatter?: Formatter;
+        field?: string;
+        headerSort?: boolean;
+        hozAlign?: ColumnDefinitionAlign;
+        headerHozAlign?: ColumnDefinitionAlign;
+        resizable?: ColumnResizable;
+        frozen?: boolean;
+        titleFormatter?: Formatter;
+        cellClick?: (e: MouseEvent, cell: ICellComponent) => void;
+        minWidth?: number;
+        width?: string | number;
+        rowHandle?: boolean;
+    };
+    /**
+     * The value to set in the cell after the user has finished editing the cell.
+     */
+    editorEmptyValue?: any;
+    /**
+     * The function to determine if the value is empty.
+     */
+    editorEmptyValueFunc?: (value: unknown) => boolean;
+}
+export interface OptionsSpreadsheet {
+    /**
+     * Enables the spreadsheet mode on the table.
+     *
+     * The SpreadsheetModule must be installed to use this functionality.
+     */
+    spreadsheet?: boolean;
+    spreadsheetRows?: number;
+    spreadsheetColumns?: number;
+    spreadsheetColumnDefinition?: Partial<ColumnDefinition>;
+    spreadsheetSheets?: SheetDefinition[];
+    spreadsheetSheetTabs?: boolean;
+    spreadsheetData?: unknown[][];
+    spreadsheetOutputFull?: boolean;
+}
+export interface SheetDefinition {
+    title?: string;
+    key?: string;
+    rows: number;
+    columns: number;
+    data?: unknown[][];
+    dummy?: number[][];
+}
+export type SheetLookup = string | any | ISheetComponent;
+export interface SpreadsheetComponent {
+    getTitle(): string;
+    setTitle(title: string): void;
+    getKey(): string;
+    getDefinition(): SheetDefinition;
+    setRows(rows: number): void;
+    setColumns(columns: number): void;
+    getData(): unknown[][];
+    setData(data: unknown[][]): void;
+    clear(): void;
+    remove(): void;
+    active(): void;
+}
+export type RenderMode = 'virtual' | 'basic' | IRenderer;
+export interface OptionsMenu {
+    rowContextMenu?: RowContextMenuSignature;
+    rowClickMenu?: RowContextMenuSignature;
+    rowDblClickMenu?: RowContextMenuSignature;
+    groupClickMenu?: GroupContextMenuSignature;
+    groupDblClickMenu?: GroupContextMenuSignature;
+    groupContextMenu?: GroupContextMenuSignature;
+    popupContainer?: boolean | string | HTMLElement;
+    groupClickPopup?: string;
+    groupContextPopup?: string;
+    groupDblPopup?: string;
+    groupDblClickPopup?: string;
+    rowClickPopup?: string;
+    rowContextPopup?: string;
+    rowDblClickPopup?: string;
+}
+export type RowContextMenuSignature = Array<MenuObject<IRowComponent> | MenuSeparator> | ((e: MouseEvent, component: IRowComponent) => MenuObject<IRowComponent> | false | any[]);
+export type GroupContextMenuSignature = Array<MenuObject<IGroupComponent> | MenuSeparator> | ((e: MouseEvent, component: IGroupComponent) => MenuObject<IGroupComponent> | false | any[]);
+export interface MenuObject<T extends IRowComponent | ICellComponent | IColumnComponent | IGroupComponent> {
+    label: string | HTMLElement | ((component: T) => string | HTMLElement);
+    action?: (e: any, component: T) => any;
+    disabled?: boolean | ((component: T) => boolean);
+    menu?: Array<MenuObject<T>>;
+}
+export interface MenuSeparator {
+    separator?: boolean;
+}
+export type DownloadType = 'csv' | 'json' | 'xlsx' | 'pdf' | 'html';
+export interface DownloadOptions extends DownloadCSV, DownloadXLXS, DownloadPDF, DownloadHTML {
+}
+export 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;
+    /** If you need the output CSV to include a byte order mark (BOM) to ensure that output with UTF-8 characters can be correctly interpreted across different applications, you should set the bom option to true. */
+    bom?: boolean;
+}
+export interface DownloadHTML {
+    /** By default the HTML output is a simple un-styled table. if you would like to match the current table styling you can set the style property to true. */
+    style?: boolean;
+}
+export interface DownloadXLXS {
+    /** The sheet name must be a valid Excel sheet name, and cannot include any of the following characters \, /, *, [, ], :, */
+    sheetName?: string;
+    documentProcessing?: (input: any) => any;
+    compress?: boolean;
+    writeOptions?: Record<string, unknown>;
+    test?: Record<string, unknown>;
+}
+export interface DownloadPDF {
+    orientation?: 'portrait' | 'landscape';
+    title?: string;
+    rowGroupStyles?: any;
+    rowCalcStyles?: any;
+    jsPDF?: any;
+    autoTable?: Record<string, unknown> | ((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 customization of the PDF */
+    documentProcessing?: (doc: any) => any;
+}
+export interface OptionsDownload {
+    /**
+     * The downloadEncoder callback allows you to intercept the download file data before the users is prompted to save the file.
+     *
+     * The first argument of the function is the file contents returned from the downloader, the second argument is the suggested mime type for the output. The function is should return a blob of the file to be downloaded.
+     */
+    downloadEncoder?: (fileContents: any, mimeType: string) => Blob | false;
+    /**
+     * By default Tabulator includes column headers, row groups and column calculations in the download output.
+     *
+     * 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?: AdditionalExportOptions;
+    /** By default, only the active rows (rows that have passed filtering) will be included in the download the downloadRowRange option takes a Row Range Lookup value and allows you to choose which rows are included in the download output. */
+    downloadRowRange?: RowRangeLookup;
+    /** If you want to make any changes to the table data before it is parsed into the download file you can pass a mutator function to the downloadDataFormatter callback. */
+    downloadDataFormatter?: (data: any) => any;
+    /**
+     * The downloadReady callback allows you to intercept the download file data before the users is prompted to save the file.
+     *
+     * In order for the download to proceed the downloadReady callback is expected to return a blob of file to be downloaded.
+     *
+     * If you would prefer to abort the download you can return false from this callback. This could be useful for example if you want to send the created file to a server via ajax rather than allowing the user to download the file.
+     */
+    downloadReady?: (fileContents: any, blob: Blob) => Blob | false;
+}
+export interface OptionsHTML {
+    htmlOutputConfig?: AdditionalExportOptions;
+    /**
+     * 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 to have more control 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 benefit that because it is an HTML table, if it causes a page break your browser will automatically 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?: AdditionalExportOptions;
+    /** 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. */
+    printStyled?: 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 | (() => IRowComponent[]);
+    /** 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;
+    groupHeaderDownload?: ((value: any, count: number, data: any, group: IGroupComponent) => string) | Array<(value: any, count: number, data: any) => string>;
+}
+export type StandardStringParam = string | HTMLElement | (() => string | HTMLElement);
+export interface AdditionalExportOptions {
+    columnHeaders?: boolean;
+    columnGroups?: boolean;
+    rowGroups?: boolean;
+    columnCalcs?: boolean;
+    dataTree?: boolean;
+    rowHeaders?: boolean;
+    /** Show only raw unformatted cell values in the clipboard output. */
+    formatCells?: boolean;
+}
+export interface OptionsLocale {
+    /** You can set the current local in one of two ways. If you want to set it when the table is created, simply include the locale option in your Tabulator constructor. You can either pass in a string matching one of the language options you have defined, or pass in the boolean true which will cause Tabulator to auto-detect the browsers language settings from the navigator.language object. */
+    locale?: boolean | string;
+    /**
+     * You can store as many languages as you like, creating an object inside the langs object with a property of the locale code for that language. A list of locale codes can be found here.
+     *
+     * At present there are three parts of the table that can be localized, the column headers, the header filter placeholder text and the pagination buttons. To localize the pagination buttons, create a pagination property inside your language object and give it the properties outlined below.
+     *
+     * If you wish you can also localize column titles by adding a columns property to your language object. You should store a property of the field name of the column you wish to change, with a value of its title. Any fields that match this will use this title instead of the one provided by the column definition array.
+     */
+    langs?: any;
+}
+type HistoryAction = 'cellEdit' | 'rowAdd' | 'rowDelete' | 'rowMoved';
+export interface OptionsHistory {
+    /** Enable user interaction history functionality */
+    history?: boolean;
+}
+export interface ColumnLayout {
+    /** title - Required This is the title that will be displayed in the header for this column. */
+    title: string;
+    /** field - Required (not required in icon/button columns) this is the key for this column in the data array. */
+    field?: string;
+    /** hidden - (boolean, default - false) determines if the column is hidden. (see Column Visibility for more details */
+    hidden?: boolean;
+    /** sets the width of this column, this can be set in pixels or as a percentage of total table width (if not set the system will determine the best) */
+    width?: number | string;
+}
+export type ColumnResizable = true | false | 'header' | 'cell';
+export interface ColumnDefinition extends ColumnLayout, CellCallbacks {
+    /** If you want to set the horizontal alignment on a column by column basis, */
+    hozAlign?: ColumnDefinitionAlign;
+    headerHozAlign?: 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 */
+    minWidth?: number;
+    /** The widthGrow property should be used on columns without a width property set. The value is used to work out what fraction of the available will be allocated to the column. The value should be set to a number greater than 0, by default any columns with no width set have a widthGrow value of 1 */
+    widthGrow?: number;
+    /** The widthShrink property should be used on columns with a width property set. The value is used to work out how to shrink columns with a fixed width when the table is too narrow to fit in all the columns. The value should be set to a number greater than 0, by default columns with a width set have a widthShrink value of 0, meaning they will not be shrunk if the table gets too narrow, and may cause the horizontal scrollbar to appear. */
+    widthShrink?: number;
+    /** set whether column can be resized by user dragging its edges */
+    resizable?: ColumnResizable;
+    /** You can freeze the position of columns on the left and right of the table using the frozen property in the column definition array. This will keep the column still when the table is scrolled horizontally. */
+    frozen?: boolean;
+    /** an integer to determine when the column should be hidden in responsive mode. */
+    responsive?: number;
+    /**
+     * Sets the on hover tooltip for each cell in this column * * The tooltip parameter can take three different types of value:
+     * - boolean - a value of false disables the tooltip, a value of true sets the tooltip of the cell to its value
+     * - string - a string that will be displayed for all cells in the matching column/table.
+     * - function - a callback function that returns the string for the cell
+     * Note: setting a tooltip value on a column will override the global setting.
+     */
+    tooltip?: string | GlobalTooltipOption;
+    /** sets css classes on header and cells in this column. (value should be a string containing space separated class names) */
+    cssClass?: string;
+    /** sets the column as a row handle, allowing it to be used to drag movable rows. */
+    rowHandle?: boolean;
+    /** When the getHtml function is called, hide the column from the output. */
+    hideInHtml?: boolean;
+    /**
+     * By default Tabulator will attempt to guess which sorter should be applied to a column based on the data contained in the first row. It can determine sorters for strings, numbers, alphanumeric sequences and booleans, anything else will be treated as a string.
+     * 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: IRowComponent, bRow: IRowComponent, column: IColumnComponent, dir: SortDirection, sorterParams: Record<string, unknown>) => 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. */
+    formatter?: Formatter;
+    /** You can pass an optional additional parameter with the formatter, formatterParams that should contain an object with additional information for configuring the formatter. */
+    formatterParams?: FormatterParams;
+    /** alter the row height to fit the contents of the cell instead of hiding overflow */
+    variableHeight?: boolean;
+    /** There are some circumstances where you may want to block edit-ability of a cell for one reason or another. To meet this need you can use the editable option. This lets you set a callback that is executed before the editor is built, if this callback returns true the editor is added, if it returns false the edit is aborted and the cell remains a non editable cell. The function is passed one parameter, the CellComponent of the cell about to be edited. You can also pass a boolean value instead of a function to this property. */
+    editable?: boolean | ((cell: ICellComponent) => boolean);
+    /**
+     * When a user clicks on an editable column the will be able to edit the value for that cell.
+     *
+     * By default Tabulator will use an editor that matches the current formatter for that cell. if you wish to specify a specific editor, you can set them per column using the editor option in the column definition. Passing a value of true to this option will result in Tabulator applying the editor that best matches the columns formatter, if present.
+     *
+     * You can pass an optional additional parameter with the editor, editorParams that should contain an object with additional information for configuring the editor.
+     */
+    editor?: Editor;
+    /** additional parameters you can pass to the editor. */
+    editorParams?: EditorParams;
+    /**
+     * Validators are used to ensure that any user input into your editable cells matches your requirements.
+     *
+     * Validators can be applied by using the validator property in a columns definition object (see Define Columns for more details).
+     */
+    validator?: StandardValidatorType | StandardValidatorType[] | Validator | Validator[] | string;
+    /**
+     * Mutators are used to alter data as it is parsed into  For example if you wanted to convert a numeric column into a boolean based on its value, before the data is used to build the table.
+     *
+     * You can set mutators on a per column basis using the mutator option in the column definition object.
+     *
+     * You can pass an optional additional parameter with mutator, mutatorParams that should contain an object with additional information for configuring the mutator.
+     */
+    mutator?: CustomMutator;
+    /** You can pass an optional additional parameter with mutator, mutatorParams that should contain an object with additional information for configuring the mutator. */
+    mutatorParams?: CustomMutatorParams;
+    /** only called when data is loaded via a command {eg. setData). */
+    mutatorData?: CustomMutator;
+    mutatorDataParams?: CustomMutatorParams;
+    /** only called when data is changed via a user editing a cell. */
+    mutatorEdit?: CustomMutator;
+    mutatorEditParams?: CustomMutatorParams;
+    /** only called when data is changed via a user editing a cell. */
+    mutatorClipboard?: CustomMutator;
+    mutatorClipboardParams?: CustomMutatorParams;
+    /**
+     * Accessors are used to alter data as it is extracted from the table, through commands, the clipboard, or download.
+     *
+     * You can set accessors on a per column basis using the accessor option in the column definition object.
+     */
+    accessor?: CustomAccessor | 'rownum';
+    /** Each accessor function has its own matching params option, for example accessorDownload has accessorDownloadParams. */
+    accessorParams?: CustomAccessorParams;
+    /** only called when data is being converted into a downloadable file. */
+    accessorDownload?: CustomAccessor;
+    /** additional parameters you can pass to the accessorDownload. */
+    accessorDownloadParams?: CustomAccessorParams;
+    /** only called when data is being copied into the clipboard. */
+    accessorClipboard?: CustomAccessor;
+    /** Additional parameters you can pass to the accessorClipboard. */
+    accessorClipboardParams?: CustomAccessorParams;
+    /** show or hide column in downloaded data */
+    download?: boolean | ((column: IColumnComponent) => boolean);
+    /** set custom title for column in download. */
+    titleDownload?: string;
+    /** the column calculation to be displayed at the top of this column(see Column Calculations for more details) */
+    topCalc?: ColumnCalc;
+    /** additional parameters you can pass to the topCalc calculation function (see Column Calculations for more details) */
+    topCalcParams?: ColumnCalcParams;
+    /** Formatter for the topCalc calculation cell. */
+    topCalcFormatter?: Formatter;
+    /** additional parameters you can pass to the topCalcFormatter function. */
+    topCalcFormatterParams?: FormatterParams;
+    bottomCalc?: ColumnCalc;
+    bottomCalcParams?: ColumnCalcParams;
+    bottomCalcFormatter?: Formatter;
+    /** additional parameters you can pass to the bottomCalcFormatter function. */
+    bottomCalcFormatterParams?: FormatterParams;
+    /** By default all columns in a table are sortable by clicking on the column header, if you want to disable this behavior, set the headerSort property to false in the column definition array: */
+    headerSort?: boolean;
+    /** set the starting sort direction when a user first clicks on a header. */
+    headerSortStartingDir?: SortDirection;
+    /** allow tristate toggling of column header sort direction. */
+    headerSortTristate?: boolean;
+    /** Callback for when user clicks on the header for this column. */
+    headerClick?: ColumnEventCallback;
+    /** Callback for when user double clicks on the header for this column. */
+    headerDblClick?: ColumnEventCallback;
+    headerMouseDown?: ColumnEventCallback;
+    headerMouseUp?: ColumnEventCallback;
+    /** Callback for when user right clicks on the header for this column. */
+    headerContext?: ColumnEventCallback;
+    /** callback for when user taps on a header for this column, triggered in touch displays. */
+    headerTap?: ColumnEventCallback;
+    /** callback for when user double taps on a header for this column, triggered in touch displays when a user taps the same header twice in under 300ms */
+    headerDblTap?: ColumnEventCallback;
+    /** callback for when user taps and holds on a header for this column, triggered in touch displays when a user taps and holds the same header for 1 second. */
+    headerTapHold?: ColumnEventCallback;
+    /**
+     * sets the on hover tooltip for the column header* * The tooltip headerTooltip can take three different types of value
+     *
+     * - boolean - a value of false disables the tooltip, a value of true sets the tooltip of the column header to its title value.
+     * - string - a string that will be displayed for the tooltip.
+     * - function - a callback function that returns the string for the column header*
+     */
+    headerTooltip?: boolean | string | ((column: IColumnComponent) => string);
+    /**
+     * Change the orientation of the column header to vertical* * The headerVertical property can take one of three values:
+     *
+     * - false - vertical columns disabled (default value)
+     * - true - vertical columns enabled
+     * - "flip" - vertical columns enabled, with text direction flipped by 180 degrees*
+     */
+    headerVertical?: boolean | 'flip';
+    /** allows the user to edit the header titles */
+    editableTitle?: boolean;
+    /** formatter function for header title. */
+    titleFormatter?: Formatter;
+    /** additional parameters you can pass to the header title formatter. */
+    titleFormatterParams?: FormatterParams;
+    /** additional parameters you can pass to the text formatter. */
+    textFormatParams?: TextFormatParams;
+    /** sets css classes on cells in this column. (value should be a string containing space separated class names) */
+    cellClass?: string;
+    /** sets the style of the cells in this column. (value should be an object with CSS properties) */
+    cellStyle?: Record<string, string>;
+    /** filtering of columns from elements in the header. */
+    headerFilter?: Editor;
+    /** additional parameters you can pass to the header filter. */
+    headerFilterParams?: EditorParams;
+    /** placeholder text for the header filter. */
+    headerFilterPlaceholder?: string;
+    /** function to check when the header filter is empty */
+    headerFilterEmptyCheck?: ValueBooleanCallback;
+    /**
+     * By default Tabulator will try and match the comparison type to the type of element used for the header filter.
+     *
+     * Standard input elements will use the "like" filter, this allows for the matches to be displayed as the user types.
+     *
+     * For all other element types (select boxes, check boxes, input elements of type number) an "=" filter type is used.
+     *
+     * If you want to specify the type of filter used you can pass it to the headerFilterFunc option in the column definition object. This will take any of the standard filters outlined above or a custom function
+     */
+    headerFilterFunc?: FilterType | HeaderFilterFunc;
+    /** additional parameters object passed to the headerFilterFunc function. */
+    headerFilterFuncParams?: any;
+    /** disable live filtering of the table. */
+    headerFilterLiveFilter?: boolean;
+    /** Show/Hide a particular column in the HTML output. */
+    htmlOutput?: boolean | ((column: IColumnComponent) => boolean);
+    /** If you don't want to show a particular column in the clipboard output you can set the clipboard property in its column definition object to false. */
+    clipboard?: boolean | ((column: IColumnComponent) => 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 | ((column: IColumnComponent) => boolean);
+    /** 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?: Array<MenuObject<IColumnComponent> | MenuSeparator> | ((e: MouseEvent, component: IColumnComponent) => Array<MenuObject<IColumnComponent> | MenuSeparator>);
+    /** The headerMenuIcon option will accept one of three types of value. You can pass in a string for the HTML contents of the button. Or you can pass the DOM node for the button. Though be careful not to pass the same node to multiple columns or you may run into issues. Or you can define a function that is called when the column header is rendered that should return either an HTML string or the contents of the element. This function is passed the column component as its first argument. */
+    headerMenuIcon?: string | HTMLElement | ((component: IColumnComponent) => HTMLElement | string);
+    /** You can add a right click context menu to any column by passing an array of menu items to the headerContextMenu option in that columns definition. */
+    headerContextMenu?: Array<MenuObject<IColumnComponent> | MenuSeparator>;
+    headerDblClickPopup?: string;
+    dblClickPopup?: string;
+    /** 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?: Array<MenuObject<ICellComponent> | MenuSeparator>;
+    clickMenu?: Array<MenuObject<ICellComponent> | MenuSeparator>;
+    headerDblClickMenu?: Array<MenuObject<ICellComponent> | MenuSeparator>;
+    dblClickMenu?: Array<MenuObject<ICellComponent> | MenuSeparator>;
+    /** Popups work in a similar way to menus, but instead of only displaying lists of menu items they allow you to fill them with any custom content you like, text, input elements, forms, anything you fancy. */
+    cellPopup?: string | ((e: MouseEvent, component: IRowComponent | ICellComponent | IColumnComponent, onRendered: () => any) => any);
+    /** When copying to the clipboard you may want to apply a different formatter from the one usually 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 usually 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 usually used to format the cell, you can do this using the formatterHtmlOutput column definition option. */
+    formatterHtmlOutput?: Formatter | false;
+    formatterHtmlOutputParams?: FormatterParams;
+    /** When copying to clipboard you may want to apply a different column header title from the one usually used in the table. You can now do this using the titleClipboard column definition option, which takes the same inputs as the standard title property. */
+    titleClipboard?: string;
+    /** When the getHtml function is called you may want to apply a different column header title from the one usually used in the table. You can now do this using the titleHtmlOutput column definition option, which takes the same inputs as the standard title property. */
+    titleHtmlOutput?: string;
+    /** When printing you may want to apply a different column header title from the one usually used in the table. You can now do this using the titlePrint column definition option, which takes the same inputs as the standard title property. */
+    titlePrint?: string;
+    maxWidth?: number | false;
+    headerWordWrap?: boolean;
+    /**
+     * The value to set in the cell after the user has finished editing the cell.
+     */
+    editorEmptyValue?: any;
+    /**
+     * The function to determine if the value is empty.
+     */
+    editorEmptyValueFunc?: (value: unknown) => boolean;
+}
+export interface CellCallbacks {
+    /** callback for when user clicks on a cell in this column. */
+    cellClick?: CellEventCallback;
+    /** callback for when user double clicks on a cell in this column. */
+    cellDblClick?: CellEventCallback;
+    /** callback for when user right clicks on a cell in this column. */
+    cellContext?: CellEventCallback;
+    /** callback for when user taps on a cell in this column, triggered in touch displays. */
+    cellTap?: CellEventCallback;
+    /** callback for when user double taps on a cell in this column, triggered in touch displays when a user taps the same cell twice in under 300ms. */
+    cellDblTap?: CellEventCallback;
+    /** callback for when user taps and holds on a cell in this column, triggered in touch displays when a user taps and holds the same cell for 1 second. */
+    cellTapHold?: CellEventCallback;
+    /** callback for when the mouse pointer enters a cell */
+    cellMouseEnter?: CellEventCallback;
+    /** callback for when the mouse pointer leaves a cell */
+    cellMouseLeave?: CellEventCallback;
+    /** callback for when the mouse pointer enters a cell or one of its child elements */
+    cellMouseOver?: CellEventCallback;
+    /** callback for when the mouse pointer enters a cell or one of its child elements */
+    cellMouseOut?: CellEventCallback;
+    /** callback for when the mouse pointer moves over a cell. */
+    cellMouseMove?: CellEventCallback;
+    /** callback for when a cell in this column is being edited by the user. */
+    cellEditing?: CellEditEventCallback;
+    /** callback for when a cell in this column has been edited by the user. */
+    cellEdited?: CellEditEventCallback;
+    /** callback for when an edit on a cell in this column is aborted by the user. */
+    cellEditCancelled?: CellEditEventCallback;
+    cellMouseDown?: CellEventCallback;
+    cellMouseUp?: CellEventCallback;
+}
+export interface ColumnDefinitionSorterParams {
+    format?: string;
+    locale?: string | boolean;
+    alignEmptyValues?: 'top' | 'bottom';
+    type?: 'length' | 'sum' | 'max' | 'min' | 'avg';
+}
+export type GroupValuesArg = any[][];
+export type TextDirection = 'auto' | 'ltr' | 'rtl';
+export type GlobalTooltipOption = boolean | ((event: MouseEvent, cell: ICellComponent, onRender: () => void) => string | HTMLElement);
+export type CustomMutator = (value: any, data: any, type: 'data' | 'edit', mutatorParams: any, cell?: ICellComponent) => any;
+export type CustomMutatorParams = Record<string, unknown> | ((value: any, data: any, type: 'data' | 'edit', cell?: ICellComponent) => any);
+export type CustomAccessor = (value: any, data: any, type: 'data' | 'download' | 'clipboard', AccessorParams: any, column?: IColumnComponent, row?: IRowComponent) => any;
+export type CustomAccessorParams = Record<string, unknown> | ((value: any, data: any, type: 'data' | 'download' | 'clipboard', column?: IColumnComponent, row?: IRowComponent) => any);
+export type ColumnCalc = 'avg' | 'max' | 'min' | 'sum' | 'concat' | 'count' | 'unique' | ((values: any[], data: any[], calcParams: Record<string, unknown>) => any);
+export type ColumnCalcParams = {
+    precision: number;
+} | ((values: any, data: any) => any);
+export type Formatter = 'plaintext' | 'textarea' | 'html' | 'money' | 'image' | 'datetime' | 'datetimediff' | 'link' | 'tickCross' | 'color' | 'star' | 'traffic' | 'progress' | 'lookup' | 'buttonTick' | 'buttonCross' | 'rownum' | 'handle' | 'rowSelection' | 'responsiveCollapse' | 'toggle' | ((cell: ICellComponent, formatterParams: Record<string, unknown>, onRendered: EmptyCallback) => string | HTMLElement);
+export type FormatterParams = MoneyParams | ImageParams | LinkParams | DateTimeParams | DateTimeDifferenceParams | TickCrossParams | TrafficParams | ProgressBarParams | StarRatingParams | RowSelectionParams | JSONRecord | ToggleSwitchParams | ((cell: ICellComponent) => Record<string, unknown>);
+export type TextFormatParams = {
+    getColor?: (cell: any) => string;
+    colorMap?: Record<any, string>;
+    color?: string;
+};
+export type Editor = true | 'input' | 'textarea' | 'number' | 'range' | 'tickCross' | 'star' | 'list' | 'date' | 'time' | 'datetime' | ((cell: ICellComponent, onRendered: EmptyCallback, success: ValueBooleanCallback, cancel: ValueVoidCallback, editorParams: Record<string, unknown>) => HTMLElement | false);
+export type EditorParams = NumberParams | CheckboxParams | ListEditorParams | InputParams | TextAreaParams | DateParams | TimeParams | DateTimeEditorParams | ((cell: ICellComponent) => Record<string, unknown>);
+export type PopupPosition = ColumnDefinitionAlign | 'top' | 'bottom';
+export type ScrollToColumnPosition = 'left' | 'center' | 'middle' | 'right';
+export type ColumnDefinitionAlign = 'left' | 'center' | 'right';
+export type VerticalAlign = 'top' | 'middle' | 'bottom';
+export interface MoneyParams {
+    decimal?: string;
+    thousand?: string;
+    symbol?: string;
+    symbolAfter?: boolean;
+    precision?: boolean | number;
+    negativeSign?: string | true;
+}
+export interface ImageParams {
+    height?: string;
+    width?: string;
+    urlPrefix?: string;
+    urlSuffix?: string;
+}
+export interface LinkParams {
+    labelField?: string;
+    label?: string | ((cell: ICellComponent) => string);
+    urlPrefix?: string;
+    urlField?: string;
+    url?: string | ((cell: ICellComponent) => string);
+    target?: string;
+    download?: boolean;
+}
+export interface DateTimeParams {
+    inputFormat?: string;
+    outputFormat?: string;
+    invalidPlaceholder?: true | string | number | ValueStringCallback;
+    timezone?: string;
+}
+export interface DateTimeDifferenceParams extends DateTimeParams {
+    date?: any;
+    humanize?: boolean;
+    unit?: 'years' | 'months' | 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds';
+    suffix?: boolean;
+}
+export interface TickCrossParams {
+    allowEmpty?: boolean;
+    allowTruthy?: boolean;
+    tickElement?: boolean | string;
+    crossElement?: boolean | string;
+}
+export interface TrafficParams {
+    min?: number;
+    max?: number;
+    color?: Color;
+}
+export interface ProgressBarParams extends TrafficParams {
+    legend?: string | true | ValueStringCallback;
+    legendColor?: Color;
+    legendAlign?: Align;
+}
+export interface StarRatingParams {
+    stars?: number;
+}
+export interface RowSelectionParams {
+    rowRange?: RowRangeLookup;
+}
+export interface ToggleSwitchParams {
+    size?: number;
+    max?: number;
+    onValue?: string | number;
+    offValue?: string | number;
+    onTruthy?: boolean;
+    onColor?: string;
+    offColor?: string;
+    clickable?: boolean;
+}
+export 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
+     *
+     * If 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;
+}
+export interface NumberParams extends SharedEditorParams {
+    min?: number;
+    max?: number;
+    step?: number;
+    verticalNavigation?: 'editor' | 'table';
+    /** When the editor is loaded select its text content */
+    selectContents?: boolean;
+}
+export interface InputParams extends SharedEditorParams {
+    /** Changes input type to 'search' and shows an 'X' clear button to clear the cell value easily. */
+    search?: boolean;
+    /** When the editor is loaded select its text content */
+    selectContents?: boolean;
+}
+export interface TextAreaParams extends SharedEditorParams {
+    verticalNavigation?: 'editor' | 'table' | 'hybrid';
+    /** Allow submission of the value of the editor when the shift and enter keys are pressed together. */
+    shiftEnterSubmit?: boolean;
+    /** When the editor is loaded select its text content */
+    selectContents?: boolean;
+}
+type VerticalNavigationOptions = 'editor' | 'table';
+export interface CheckboxParams extends SharedEditorParams {
+    tristate?: boolean;
+    indeterminateValue?: string;
+}
+export interface SharedSelectAutoCompleteEditorParams {
+    defaultValue?: string;
+    sortValuesList?: 'asc' | 'desc';
+}
+export interface DateParams extends SharedEditorParams {
+    min?: string;
+    max?: string;
+    format?: string;
+    verticalNavigation?: VerticalNavigationOptions;
+}
+export interface TimeParams extends SharedEditorParams {
+    format?: string;
+    verticalNavigation?: VerticalNavigationOptions;
+}
+export interface DateTimeEditorParams extends SharedEditorParams {
+    format?: string;
+    verticalNavigation?: VerticalNavigationOptions;
+}
+export interface LabelValue {
+    label: string;
+    value: string | number | boolean;
+}
+export interface ListEditorParams extends SharedEditorParams, SharedSelectAutoCompleteEditorParams {
+    values?: true | string[] | JSONRecord | string | any[] | LabelValue[];
+    valuesURL?: string;
+    valuesLookup?: RowRangeLookup;
+    valuesLookupField?: string;
+    clearable?: boolean;
+    itemFormatter?: (label: string, value: string, item: any, element: HTMLElement) => string;
+    sort?: SortDirection;
+    emptyValue?: any;
+    maxWidth?: boolean;
+    placeholderLoading?: string;
+    placeholderEmpty?: string;
+    multiselect?: boolean;
+    autocomplete?: boolean;
+    filterFunc?: (term: string, label: string, value: string | number | boolean, item: any) => any;
+    filterRemote?: boolean;
+    filterDelay?: number;
+    allowEmpty?: boolean;
+    listOnEmpty?: boolean;
+    freetext?: boolean;
+    showListOnEmpty?: boolean;
+    verticalNavigation?: 'editor' | 'table' | 'hybrid';
+}
+export type ValueStringCallback = (value: any) => string;
+export type ValueBooleanCallback = (value: any) => boolean;
+export type ValueVoidCallback = (value: any) => void;
+export type EmptyCallback = (callback: () => void) => void;
+export type CellEventCallback = (e: UIEvent, cell: ICellComponent) => void;
+export type CellEditEventCallback = (cell: ICellComponent) => void;
+export type ColumnEventCallback = (e: UIEvent, column: IColumnComponent) => void;
+export type RowEventCallback = (e: UIEvent, row: IRowComponent) => void;
+export type RowChangedCallback = (row: IRowComponent) => void;
+export type GroupEventCallback = (e: UIEvent, group: IGroupComponent) => void;
+export declare enum SortDirection {
+    Asc = "asc",
+    Desc = "desc",
+    None = "none"
+}
+export declare enum FilterType {
+    Ends = "ends",
+    Equal = "=",
+    GreaterOrEqual = ">=",
+    GreaterThan = ">",
+    In = "in",
+    Keywords = "keywords",
+    LessOrEqual = "<=",
+    LessThan = "<",
+    Like = "like",
+    NotEqual = "!=",
+    Regex = "regex",
+    Starts = "starts"
+}
+export type Color = string | any[] | ValueStringCallback;
+export type Align = 'center' | 'left' | 'right' | 'justify';
+export type JSONRecord = Record<string, string | number | boolean>;
+/**
+ * Tabulator has a wide variety of built in validators:
+ * Note: For a guide to adding your own validators to this list, have a look at the "Extending Tabulator" section.
+ *
+ * Note By default all validators, except the `required` validator will approve any empty value (ie. empty string,
+ * null or undefined). to ensure empty values are rejected you should use the required validator.
+ *
+ * - Required, The required validator allows values that are not null or an empty string
+ * ```javascript
+ *     {title:"Example", field:"example", validator:"required"}
+ * ```
+ * - Unique, The unique validator allows values that do not match the value of any other cell in this column
+ * ```javascript
+ *     {title:"Example", field:"example", validator:"unique"}
+ * ```
+ * - Integer, The integer validator allows values that are valid integers
+ * ```javascript
+ *     {title:"Example", field:"example", validator:"integer"}
+ * ```
+ * - Float, The float validator allows values that are valid floats
+ * ```javascript
+ *     {title:"Example", field:"example", validator:"float"}
+ * ```
+ * - Numeric, The numeric validator allows values that are valid numbers
+ * ```javascript
+ *     {title:"Example", field:"example", validator:"numeric"}
+ * ```
+ * - String, The string validator allows values that are a non-numeric string
+ * ```javascript
+ *     {title:"Example", field:"example", validator:"string"}
+ * ```
+ * - Alphanumeric, The alphanumeric validator allows values that are explicitly numbers and letters with no symbols or spaces
+ * ```javascript
+ *     {title:"Example", field:"example", validator:"alphanumeric"}
+ * ```
+ * - Minimum Numeric Value, The min validator allows numeric values that are greater than or equal to parameter
+ * ```javascript
+ *     {title:"Example", field:"example", validator:"min:5"} \\value must be greater than or equal to 5
+ * ```
+ * - Maximum Numeric Value, The max validator allows numeric values that are less than or equal to parameter
+ * ```javascript
+ *     {title:"Example", field:"example", validator:"max:5"} \\value must be less than or equal to 5
+ * ```
+ * - Minimum String Length, The minLength validator allows string values that have a length greater than or equal to parameter
+ * ```javascript
+ *     {title:"minLength", field:"example", validator:"minLength:5"} \\value must have a length greater than or equal to 5
+ * ```
+ * - Maximum String Length, The maxLength validator allows string values that have a length less than or equal to parameter
+ * ```javascript
+ *     {title:"Example", field:"example", validator:"maxLength:5"} \\value must have a length less than or equal to 5
+ * ```
+ * - In List, The in validator allows values that match a value from the | delimited string in the parameter
+ * ```javascript
+ *     {title:"Example", field:"example", validator:"in:red|green|blue"} \\value must be 'red', 'green' or 'blue'
+ * ```
+ * - Starts With, The starts validator allows string values that start with the parameter (case insensitive)
+ * ```javascript
+ *     {title:"Example", field:"example", validator:"starts:bob"} \\value must start with 'bob'
+ * ```
+ * - Ends With, The ends validator allows string values that start with the parameter (case insensitive)
+ * ```javascript
+ *     {title:"Example", field:"example", validator:"ends:green"} \\value must end with 'green'
+ * ```
+ * - Regular Expression, The regex validator allows values that match the supplied regex
+ * ```javascript
+ *     {title:"Example", field:"example", validator:"regex:\\.com$"} \\allow strings that end in '.com'
+ * ```
+ */
+export type StandardValidatorType = 'required' | 'unique' | 'integer' | 'float' | 'numeric' | 'string' | 'alphanumeric';
+export interface Validator {
+    type: StandardValidatorType | ((cell: ICellComponent, value: any, parameters?: any) => boolean);
+    parameters?: any;
+}
+export type ColumnSorterParamLookupFunction = (column: IColumnComponent, dir: SortDirection) => Record<string, unknown>;
+export type ColumnLookup = IColumn | IColumnComponent | ColumnDefinition | HTMLElement | string;
+export type RowLookup = IRowComponent | HTMLElement | string | number;
+export type RowRangeLookup = 'visible' | 'active' | 'selected' | 'all' | 'range' | 'display';
+export interface KeyBinding {
+    navPrev?: string | boolean;
+    navNext?: string | boolean;
+    navLeft?: string | boolean;
+    navRight?: string | boolean;
+    navUp?: string | boolean;
+    navDown?: string | boolean;
+    undo?: string | boolean;
+    redo?: string | boolean;
+    scrollPageUp?: string | boolean;
+    scrollPageDown?: string | boolean;
+    scrollToStart?: string | boolean;
+    scrollToEnd?: string | boolean;
+    copyToClipboard?: string | boolean;
+}
+export interface CalculationComponent {
+    /** The getData function returns the data object for the row. */
+    getData: () => {
+        [key: string]: any;
+    };
+    /** The getElement function returns the DOM node for the row. */
+    getElement: () => HTMLElement;
+    /** The getTable function returns the Tabulator object for the table containing the row. */
+    getTable: () => ITabulator;
+    /** The getCells function returns an array of CellComponent objects, one for each cell in the row. */
+    getCells: () => ICellComponent[];
+    /** The getCell function returns the CellComponent for the specified column from this row. */
+    getCell: (column: IColumnComponent | HTMLElement | string) => ICellComponent;
+}
+export interface RangeComponent {
+    /**
+     * You can update the bounds for an existing range using the setBounds function, passing in the Cell Components
+     * for the top-left and bottom-right bounds of the selection:
+     *
+     * @example
+     * var topLeft = table.getRows()[2].getCells()[1];
+     * var bottomRight = table.getRows()[5].getCells()[6];
+     *
+     * range.setBounds(topLeft, bottomRight);
+     */
+    setBounds: (topLeft: ICellComponent, bottomRight: ICellComponent) => void;
+    /**
+     * You can change the top left start edge of an existing range using the setStartBound function, passing in the
+     * Cell Component for the top left bound of the selection:
+     *
+     * @example
+     * var topLeft = table.getRows()[2].getCells()[1];
+     *
+     * range.setStartBound(topLeft);
+     */
+    setStartBound: (cell: ICellComponent) => void;
+    /**
+     * You can change the bottom right ending edge of an existing range using the setEndBound function, passing in the
+     * Cell Component for the bottom right bound of the selection:
+     *
+     * @example
+     * var bottomRight = table.getRows()[5].getCells()[6];
+     *
+     * range.setEndBound(bottomRight);
+     */
+    setEndBound: (cell: ICellComponent) => void;
+    /**
+     * You can remove a range by calling the remove function on the range:
+     *
+     * @example
+     * range.remove();
+     */
+    remove(): void;
+    /**
+     * You can retrieve the bounding rectangle element for a range by calling the getElement function on the range:
+     *
+     * @example
+     * var element = range.getElement();
+     */
+    getElement(): unknown;
+    /**
+     * You can retrieve the cell data for a range by calling the getData function on the range:
+     *
+     * ```javascript
+     * var data = range.getData();
+     * ```
+     *
+     * This will return a range data array, which is structured as a series of row data objects with only the props for
+     * cells in that range:
+     *
+     * ```json
+     * [
+     *     {color:"green", country:"England", driver:true}, //data for selected cells in first row in range
+     *     {color:"red", country:"USA", driver:false}, //data for selected cells in second row in range
+     *     {color:"blue", country:"France", driver:true}, //data for selected cells in third row in range
+     * ]
+     * ```
+     */
+    getData(): unknown;
+    /**
+     * You can clear the value of every cell in a range by calling the clearValues function on the range:
+     *
+     * ```javascript
+     * var data = range.clearValues();
+     * ```
+     * This will set the value of every cell in the range to the value of the selectableRangeClearCellsValue table
+     * option, which is set to undefined by default.
+     */
+    clearValues(): void;
+    /**
+     * You can retrieve all the Cell Components in a range by calling the getCells function on the range:
+     *
+     * ```javascript
+     * var cells = range.getCells();
+     * ```
+     * This will return a array of Cell Components
+     */
+    getCells(): ICellComponent[];
+    /**
+     * You can retrieve a structured map of all the Cell Components in a range by calling the getStructuredCells
+     * function on the range:
+     *
+     * ```javascript
+     * var cells = range.getStructuredCells();
+     * ```
+     * This will return a array of row arrays, with each row array containing the Cell Components in order for that row:
+     *
+     * ```json
+     * [
+     *     [Component, Component, Component], //first row
+     *     [Component, Component, Component], //second row
+     *     [Component, Component, Component], //third row
+     * ]
+     * ```
+     */
+    getStructuredCells(): ICellComponent[][];
+    /**
+     * You can retrieve all the Row Components in a range by calling the getRows function on the range:
+     *
+     * ```javascript
+     * var rows = range.getRows();
+     * ```
+     * This will return a array of Row Components
+     */
+    getRows(): IRowComponent[];
+    /**
+     * You can retrieve all the Column Components in a range by calling the getColumns function on the range:
+     *
+     * ```javascript
+     * var columns = range.getColumns();
+     * ```
+     * This will return a array of Column Components
+     */
+    getColumns(): IColumnComponent[];
+    /**
+     * You can retrieve the bounds of a range by calling the getBounds function on the range:
+     *
+     * ```javascript
+     * var bounds = range.getBounds();
+     * ```
+     * This will return an object containing two Cell Components, for the two bounds of the range
+     *
+     * ```json
+     * {
+     *     start:Component, //the cell component at the top left of the range
+     *     end:Component, //the cell component at the bottom right of the range
+     * }
+     * ```
+     */
+    getBounds(): {
+        start: ICellComponent;
+        end: ICellComponent;
+    };
+    /**
+     * You can find the position number for the top row of the range by calling the getTopEdge function on the range:
+     *
+     * @example
+     * var topPosition = range.getTopEdge();
+     */
+    getTopEdge(): number;
+    /**
+     * You can find the position number for the bottom row of the range by calling the getBottomEdge function on the range:
+     *
+     * @example
+     * var bottomPosition = range.getBottomEdge();
+     */
+    getBottomEdge(): number;
+    /**
+     * You can find the position number for the left column of the range by calling the getLeftEdge function on the range:
+     *
+     * @example
+     * var leftPosition = range.getLeftEdge();
+     */
+    getLeftEdge(): number;
+    /**
+     * You can find the position number for the right column of the range by calling the getRightEdge function on the range:
+     *
+     * @example
+     * var rightPosition = range.getRightEdge();
+     */
+    getRightEdge(): number;
+}
+export interface EventCallBackMethods {
+    validationFailed: (cell: ICellComponent, value: any, validators: Validator[]) => void;
+    scrollHorizontal: (left: number, leftDir: boolean) => void;
+    scrollVertical: (top: number, topDir: boolean) => void;
+    rowAdded: (row: IRowComponent) => void;
+    rowDeleted: (row: IRowComponent) => void;
+    rowMoving: (row: IRowComponent) => void;
+    rowMoved: (row: IRowComponent) => void;
+    rowMoveCancelled: (row: IRowComponent) => void;
+    rowUpdated: (row: IRowComponent) => void;
+    rowSelectionChanged: (data: any[], rows: IRowComponent[], selectedRows: IRowComponent[], deselectedRows: IRowComponent[]) => void;
+    rowSelected: (row: IRowComponent) => void;
+    rowDeselected: (row: IRowComponent) => void;
+    rowResized: (row: IRowComponent) => void;
+    rowClick: (event: UIEvent, row: IRowComponent) => void;
+    rowDblClick: (event: UIEvent, row: IRowComponent) => void;
+    rowContext: (event: UIEvent, row: IRowComponent) => void;
+    rowTap: (event: UIEvent, row: IRowComponent) => void;
+    rowDblTap: (event: UIEvent, row: IRowComponent) => void;
+    rowTapHold: (event: UIEvent, row: IRowComponent) => void;
+    rowMouseEnter: (event: UIEvent, row: IRowComponent) => void;
+    rowMouseLeave: (event: UIEvent, row: IRowComponent) => void;
+    rowMouseOver: (event: UIEvent, row: IRowComponent) => void;
+    rowMouseDown: (event: UIEvent, row: IRowComponent) => void;
+    rowMouseUp: (event: UIEvent, row: IRowComponent) => void;
+    rowMouseOut: (event: UIEvent, row: IRowComponent) => void;
+    rowMouseMove: (event: UIEvent, row: IRowComponent) => void;
+    htmlImporting: () => void;
+    htmlImported: () => void;
+    ajaxError: () => void;
+    clipboardCopied: (clipboard: string, html?: string) => void;
+    clipboardPasted: (clipboard: string, rowData: any[], rows: IRowComponent[]) => void;
+    clipboardPasteError: (clipboard: string) => void;
+    downloadComplete: () => void;
+    dataTreeRowExpanded: (row: IRowComponent, level: number) => void;
+    dataTreeRowCollapsed: (row: IRowComponent, level: number) => void;
+    pageLoaded: (pageNo: number) => void;
+    pageSizeChanged: (pageSize: number) => void;
+    headerClick: (event: UIEvent, column: IColumnComponent) => void;
+    headerDblClick: (event: UIEvent, column: IColumnComponent) => void;
+    headerContext: (event: UIEvent, column: IColumnComponent) => void;
+    headerTap: (event: UIEvent, column: IColumnComponent) => void;
+    headerDblTap: (event: UIEvent, column: IColumnComponent) => void;
+    headerTapHold: (event: UIEvent, column: IColumnComponent) => void;
+    headerMouseUp: (event: UIEvent, column: IColumnComponent) => void;
+    headerMouseDown: (event: UIEvent, column: IColumnComponent) => void;
+    groupClick: (event: UIEvent, group: IGroupComponent) => void;
+    groupDblClick: (event: UIEvent, group: IGroupComponent) => void;
+    groupContext: (event: UIEvent, group: IGroupComponent) => void;
+    groupTap: (event: UIEvent, group: IGroupComponent) => void;
+    groupDblTap: (event: UIEvent, group: IGroupComponent) => void;
+    groupTapHold: (event: UIEvent, group: IGroupComponent) => void;
+    groupMouseDown: (event: UIEvent, group: IGroupComponent) => void;
+    groupMouseUp: (event: UIEvent, group: IGroupComponent) => void;
+    tableBuilding: () => void;
+    tableBuilt: () => void;
+    tableDestroyed: () => void;
+    dataChanged: (data: any[]) => void;
+    dataLoading: (data: any[]) => void;
+    dataLoaded: (data: any[]) => void;
+    dataLoadError: (error: Error) => void;
+    dataProcessing: (data: any[]) => void;
+    dataProcessed: (data: any[]) => void;
+    dataFiltering: (filters: Filter[]) => void;
+    dataFiltered: (filters: Filter[], rows: IRowComponent[]) => void;
+    dataSorting: (sorters: SorterFromTable[]) => void;
+    dataSorted: (sorters: SorterFromTable[], rows: IRowComponent[]) => void;
+    movableRowsSendingStart: (toTables: any[]) => void;
+    movableRowsSent: (fromRow: IRowComponent, toRow: IRowComponent, toTable: any) => void;
+    movableRowsSentFailed: (fromRow: IRowComponent, toRow: IRowComponent, toTable: any) => void;
+    movableRowsSendingStop: (toTables: any[]) => void;
+    movableRowsReceivingStart: (fromRow: IRowComponent, fromTable: ITabulator) => void;
+    movableRowsReceived: (fromRow: IRowComponent, toRow: IRowComponent, fromTable: any) => void;
+    movableRowsReceivedFailed: (fromRow: IRowComponent, toRow: IRowComponent, fromTable: any) => void;
+    movableRowsReceivingStop: (fromTable: any) => void;
+    movableRowsElementDrop: (event: UIEvent, element: Element, row: IRowComponent) => void;
+    dataGrouping: () => void;
+    dataGrouped: (groups: IGroupComponent[]) => void;
+    groupVisibilityChanged: (group: IGroupComponent, visible: boolean) => void;
+    localized: (locale: string, lang: any) => void;
+    renderStarted: () => void;
+    renderComplete: () => void;
+    columnMoved: (column: IColumnComponent, columns: IColumnComponent[]) => void;
+    columnResized: (column: IColumnComponent) => void;
+    columnTitleChanged: (column: IColumnComponent) => void;
+    columnVisibilityChanged: (column: IColumnComponent, visible: boolean) => void;
+    historyUndo: (action: HistoryAction, component: any, data: any[]) => void;
+    historyRedo: (action: HistoryAction, component: any, data: any[]) => void;
+    cellEditing: (cell: ICellComponent) => void;
+    cellEdited: (cell: ICellComponent) => void;
+    cellEditCancelled: (cell: ICellComponent) => void;
+    cellClick: (event: UIEvent, cell: ICellComponent) => void;
+    cellDblClick: (event: UIEvent, cell: ICellComponent) => void;
+    cellContext: (event: UIEvent, cell: ICellComponent) => void;
+    cellMouseDown: (event: UIEvent, cell: ICellComponent) => void;
+    cellMouseUp: (event: UIEvent, cell: ICellComponent) => void;
+    cellTap: (event: UIEvent, cell: ICellComponent) => void;
+    cellDblTap: (event: UIEvent, cell: ICellComponent) => void;
+    cellTapHold: (event: UIEvent, cell: ICellComponent) => void;
+    cellMouseEnter: (event: UIEvent, cell: ICellComponent) => void;
+    cellMouseLeave: (event: UIEvent, cell: ICellComponent) => void;
+    cellMouseOver: (event: UIEvent, cell: ICellComponent) => void;
+    cellMouseOut: (event: UIEvent, cell: ICellComponent) => void;
+    cellMouseMove: (event: UIEvent, cell: ICellComponent) => void;
+    popupOpen: (cell: ICellComponent) => void;
+    popupClosed: (cell: ICellComponent) => void;
+    menuClosed: (cell: ICellComponent) => void;
+    menuOpened: (cell: ICellComponent) => void;
+    tooltipClosed: (cell: ICellComponent) => void;
+    tooltipOpened: (cell: ICellComponent) => void;
+    /**
+     * The range component provides access to a selected range of cells. The example below shows how it is passed to
+     * the rangeAdded callback
+     *
+     * ```javascript
+     * table.on("rangeAdded", function(range) {
+     *     // range - range component for the selected range
+     *     alert("The user has selected a new range containing " + range.getCells().length + " cells");
+     * });
+     * ```
+     */
+    rangeAdded: (range: RangeComponent) => void;
+    /**
+     * The rangeChanged event is triggered when a the bounds of an existing range are changed.
+     * ```javascript
+     * table.on("rangeChanged", function(range){
+     *     // range - range component for the selected range
+     * });
+     * ```
+     */
+    rangeChanged: (range: RangeComponent) => void;
+    /**
+     * The rangeRemoved event is triggered when a range is removed from the table.
+     * ```javascript
+     * table.on("rangeRemoved", function(range){
+     *     // range - range component for the selected range
+     * });
+     * ```
+     */
+    rangeRemoved: (range: RangeComponent) => void;
+    /**
+     * The rowHeight event will be triggered when the width of a row is set or changed.
+     */
+    rowHeight: (row: IRowComponent) => void;
+    /**
+     * The rowResizing event will be triggered when a row has started to be resized by the user.
+     */
+    rowResizing: (row: IRowComponent) => void;
+    /**
+     * The columnWidth event will be triggered when the width of a column is set or changed.
+     */
+    columnWidth: (column: IColumnComponent) => void;
+    /**
+     * The columnResizing event will be triggered when a column has started to be resized by the user.
+     */
+    columnResizing: (column: IColumnComponent) => void;
+    sheetAdded: (sheet: ISheetComponent) => void;
+    sheetLoaded: (sheet: ISheetComponent) => void;
+    sheetUpdated: (sheet: ISheetComponent) => void;
+    sheetRemoved: (sheet: ISheetComponent) => void;
+    /**
+     * The columnsLoaded event is triggered when the replacement of the columns is complete.
+     * An array of column components is passed as the first argument of the callback.
+     */
+    columnsLoaded: (columns: IColumnComponent[]) => void;
+    /**
+     * The importChoose event is triggered the import function is called and the file picker modal opens.
+     */
+    importChoose: () => void;
+    /**
+     * The importImporting event is triggered after the user has chosen the file to import, but before it has been processed.
+     * The file array returned from the file pickers is passed as the first argument of the callback.
+     */
+    importImporting: (files: File[]) => void;
+    /**
+     * The importError event is triggered if there is an error importing the data from the file.
+     * The thrown error is passes as the first argument of the callback.
+     */
+    importError: (err: unknown) => void;
+    /**
+     * The importImported event is triggered when the data has been successfully parsed from the file, just before it is then loaded into the table.
+     * The parsed array of row data objects is passed as the first argument of the callback..
+     */
+    importImported: (data: unknown) => void;
+}
+export interface IHoverMenu extends IModule {
+    hoverMenuField: string;
+    handleRowMouseEnter(e: Event, row: IRowComponent): void;
+    handleRowMouseLeave(e: Event, row: IRowComponent): void;
+    layoutRow(row: IRowComponent): void;
+}
+export interface IPage extends IModule {
+    paginationElement: any;
+    element: HTMLElement | null;
+    size: number | true;
+    page: number;
+    count: number;
+    max: number;
+    remoteRowCountEstimate: number | null;
+    initialLoad: boolean;
+    progressiveLoad: boolean;
+    dataChanging: boolean;
+    pageSizes: number[];
+    mode: 'remote' | 'local' | 'progressive_load' | 'progressive_scroll';
+    setMaxPage(max: string | number): void;
+    setPage(page: string | number): Promise<unknown> | undefined;
+    setPageToRow(row: any): Promise<unknown> | undefined;
+    setPageSize(size: number | true | string): void;
+    getPageSize(): number | true;
+    previousPage(): Promise<unknown>;
+    nextPage(): Promise<unknown>;
+    getPage(): number;
+    getPageMax(): number;
+    getMode(): 'remote' | 'local' | 'progressive_load' | 'progressive_scroll';
+}
+export interface IFilter extends IModule {
+    filterList: Filter[];
+    headerFilters: Record<string, {
+        func: (data: any) => boolean;
+        type: FilterType | ((data: any) => boolean);
+        value: any;
+    }>;
+    headerFilterColumns: IColumn[];
+    changed: boolean;
+    tableInitialized: boolean;
+    setFilter(field: string | string[] | Filter[] | FilterFunction, type?: FilterType, value?: any, params?: FilterParams): void;
+    addFilter(field: string | Filter[], type?: FilterType, value?: any, params?: FilterParams): void;
+    removeFilter(field: string | Filter[], type?: FilterType, value?: any): void;
+    getFilters(all?: boolean, ajax?: boolean): Filter[];
+    getHeaderFilters(): Filter[];
+    clearFilter(all?: boolean): void;
+    clearHeaderFilter(): void;
+    refreshFilter(): void;
+    searchRows(field: string | Filter[], type?: FilterType, value?: any): any[];
+    searchData(field: string | Filter[], type?: FilterType, value?: any): any[];
+    setHeaderFilterFocus(column: IColumn): void;
+    getHeaderFilterValue(column: IColumn): any;
+    setHeaderFilterValue(column: IColumn, value: any): void;
+    reloadHeaderFilter(column: IColumn): void;
+}
+export interface HeaderFilterFunc {
+    (headerValue: any, rowValue: any, rowData: any, filterParams: any): boolean;
+}
+export type LangObject = Record<string, any>;
+export type TableSelector = string | HTMLElement | ITabulator | TableSelector[];
+export {};