Trilium Frontend API
    Preparing search index...

    Interface OptionsGeneral

    interface OptionsGeneral {
        autoResize?: boolean;
        editorEmptyValue?: any;
        editorEmptyValueFunc?: (value: unknown) => boolean;
        footerElement?: string | HTMLElement;
        height?: string | number | false;
        invalidOptionWarnings?: boolean;
        keybindings?: false | KeyBinding;
        maxHeight?: string | number;
        minHeight?: string | number;
        placeholder?:
            | string
            | HTMLElement
            | ((this: Tabulator | TabulatorFull) => string);
        placeholderHeaderFilter?:
            | string
            | HTMLElement
            | ((this: Tabulator | TabulatorFull) => string);
        reactiveData?: boolean;
        renderHorizontal?: RenderMode;
        renderVertical?: RenderMode;
        renderVerticalBuffer?: number | boolean;
        rowHeader?:
            | boolean
            | {
                cellClick?: (e: MouseEvent, cell: CellComponent) => void;
                field?: string;
                formatter?: string;
                frozen?: boolean;
                headerHozAlign?: ColumnDefinitionAlign;
                headerSort?: boolean;
                hozAlign?: ColumnDefinitionAlign;
                minWidth?: number;
                resizable?: boolean;
                rowHandle?: boolean;
                titleFormatter?: string;
                width?: number;
            };
        rowHeight?: number;
        textDirection?: TextDirection;
        validationMode?: "manual"
        | "highlight"
        | "blocking";
    }

    Hierarchy (View Summary)

    Index

    Properties

    autoResize? editorEmptyValue? editorEmptyValueFunc? footerElement? height? invalidOptionWarnings? keybindings? maxHeight? minHeight? placeholder? placeholderHeaderFilter? reactiveData? renderHorizontal? renderVertical? renderVerticalBuffer? rowHeader? rowHeight? textDirection? validationMode?

    Properties

    autoResize?: 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.

    editorEmptyValue?: any

    The value to set in the cell after the user has finished editing the cell.

    editorEmptyValueFunc?: (value: unknown) => boolean

    The function to determine if the value is empty.

    footerElement?: string | HTMLElement

    Footer element to display for the table.

    height?: string | number | false

    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.

    invalidOptionWarnings?: boolean

    Setting the invalidOptionWarnings option to false will disable console warning messages for invalid properties in the table constructor and column definition object.

    keybindings?: false | KeyBinding

    Keybinding configuration object.

    maxHeight?: string | number

    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

    minHeight?: string | number

    With a variable table height you can set the minimum height of the table either defined in the min-height CSS property for the element or set it using the minHeight option in the table constructor, this can be set to any valid CSS value.

    placeholder?:
        | string
        | HTMLElement
        | ((this: Tabulator | TabulatorFull) => string)

    placeholder element to display on empty table.

    placeholderHeaderFilter?:
        | string
        | HTMLElement
        | ((this: Tabulator | TabulatorFull) => string)
    reactiveData?: boolean

    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

    renderHorizontal?: RenderMode
    renderVertical?: RenderMode
    renderVerticalBuffer?: number | boolean

    Manually set the size of the virtual DOM buffer.

    rowHeader?:
        | boolean
        | {
            cellClick?: (e: MouseEvent, cell: CellComponent) => void;
            field?: string;
            formatter?: string;
            frozen?: boolean;
            headerHozAlign?: ColumnDefinitionAlign;
            headerSort?: boolean;
            hozAlign?: ColumnDefinitionAlign;
            minWidth?: number;
            resizable?: boolean;
            rowHandle?: boolean;
            titleFormatter?: string;
            width?: number;
        }

    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.

    rowHeight?: number
    textDirection?: TextDirection
    validationMode?: "manual" | "highlight" | "blocking"

    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

    Settings

    Member Visibility

    On This Page

    Properties