Interface OptionsRows

interface OptionsRows {
    addRowPos?: "top" | "bottom";
    editTriggerEvent?: "click" | "dblclick" | "focus";
    frozenRows?: number | string[] | ((row: RowComponent) => boolean);
    frozenRowsField?: string;
    movableRows?: boolean;
    movableRowsConnectedElements?: string | HTMLElement;
    movableRowsConnectedTables?:
        | string
        | string[]
        | HTMLElement
        | HTMLElement[];
    movableRowsReceiver?: | "update"
    | "add"
    | "replace"
    | "insert"
    | (
        (
            fromRow: RowComponent,
            toRow: RowComponent,
            fromTable: Tabulator,
        ) => any
    );
    movableRowsSender?:
        | false
        | "delete"
        | (
            (
                fromRow: RowComponent,
                toRow: RowComponent,
                toTable: Tabulator,
            ) => any
        );
    resizableColumnGuide?: boolean;
    resizableRowGuide?: boolean;
    resizableRows?: boolean;
    rowFormatter?: (row: RowComponent) => any;
    rowFormatterClipboard?: false | ((row: RowComponent) => any);
    rowFormatterHtmlOutput?: false | ((row: RowComponent) => any);
    rowFormatterPrint?: false | ((row: RowComponent) => any);
    scrollToRowIfVisible?: boolean;
    scrollToRowPosition?: ScrollToRowPosition;
    selectableRange?: number | boolean;
    selectableRangeClearCells?: boolean;
    selectableRangeClearCellsValue?: unknown;
    selectableRangeColumns?: boolean;
    selectableRangeRows?: boolean;
    selectableRows?: number | boolean | "highlight";
    selectableRowsCheck?: (row: RowComponent) => boolean;
    selectableRowsPersistence?: boolean;
    selectableRowsRangeMode?: "click";
    selectableRowsRollingSelection?: boolean;
    tabEndNewRow?: boolean | JSONRecord | ((row: RowComponent) => any);
}

Hierarchy (View Summary)

OptionsRows
- Options

Properties

`Optional`addRowPos

addRowPos?: "top" | "bottom"

The position in the table for new rows to be added, "bottom" or "top".

`Optional`editTriggerEvent

editTriggerEvent?: "click" | "dblclick" | "focus"

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.

`Optional`frozenRows

frozenRows?: number | string[] | ((row: RowComponent) => boolean)

Freeze rows of data

`Optional`frozenRowsField

frozenRowsField?: string

`Optional`movableRows

movableRows?: boolean

To allow the user to move rows up and down the table, set the movableRows parameter in the options:

`Optional`movableRowsConnectedElements

movableRowsConnectedElements?: string | HTMLElement

`Optional`movableRowsConnectedTables

movableRowsConnectedTables?: string | string[] | HTMLElement | HTMLElement[]

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.

`Optional`movableRowsReceiver

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

`Optional`movableRowsSender

movableRowsSender?:
    | false
    | "delete"
    | ((fromRow: RowComponent, toRow: RowComponent, toTable: Tabulator) => any)

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

`Optional`resizableColumnGuide

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

`Optional`resizableRowGuide

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

`Optional`resizableRows

resizableRows?: boolean

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.

`Optional`rowFormatter

rowFormatter?: (row: RowComponent) => any

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.

`Optional`rowFormatterClipboard

rowFormatterClipboard?: false | ((row: RowComponent) => any)

When copying to the clipboard you may want to apply a different formatter may want to apply a different formatter from the one 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.

`Optional`rowFormatterHtmlOutput

rowFormatterHtmlOutput?: false | ((row: RowComponent) => any)

When the getHtml function is called you may want to apply a different formatter may want to apply a different formatter from the one usually used to format the row

`Optional`rowFormatterPrint

rowFormatterPrint?: false | ((row: RowComponent) => 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.

`Optional`scrollToRowIfVisible

scrollToRowIfVisible?: boolean

The default option for triggering a ScrollTo on a visible element can be set using the scrollToRowIfVisible option. It can take a boolean value:

true - scroll to row, even if it is visible (default) false - scroll to row, unless it is currently visible, then don't move

`Optional`scrollToRowPosition

scrollToRowPosition?: ScrollToRowPosition

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

`Optional`selectableRange

selectableRange?: number | boolean

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).

`Optional`selectableRangeClearCells

selectableRangeClearCells?: 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,
});

`Optional`selectableRangeClearCellsValue

selectableRangeClearCellsValue?: unknown

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
});

`Optional`selectableRangeColumns

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 a column by clicking on the column header, then you can set the selectableRangeColumns option to true

`Optional`selectableRangeRows

selectableRangeRows?: 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

`Optional`selectableRows

selectableRows?: number | boolean | "highlight"

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.

`Optional`selectableRowsCheck

selectableRowsCheck?: (row: RowComponent) => 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.

`Optional`selectableRowsPersistence

selectableRowsPersistence?: 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
});

`Optional`selectableRowsRangeMode

selectableRowsRangeMode?: "click"

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",
});

`Optional`selectableRowsRollingSelection

selectableRowsRollingSelection?: boolean

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
});

`Optional`tabEndNewRow

tabEndNewRow?: boolean | JSONRecord | ((row: RowComponent) => any)

Allows you to specify the behavior when the user tabs from the last editable cell on the last row of the table.

Interface OptionsRows

Hierarchy (View Summary)

Index

Properties

Properties

OptionaladdRowPos

OptionaleditTriggerEvent

Example

OptionalfrozenRows

OptionalfrozenRowsField

OptionalmovableRows

OptionalmovableRowsConnectedElements

OptionalmovableRowsConnectedTables

OptionalmovableRowsReceiver

OptionalmovableRowsSender

OptionalresizableColumnGuide

OptionalresizableRowGuide

OptionalresizableRows

OptionalrowFormatter

OptionalrowFormatterClipboard

OptionalrowFormatterHtmlOutput

OptionalrowFormatterPrint

OptionalscrollToRowIfVisible

OptionalscrollToRowPosition

OptionalselectableRange

OptionalselectableRangeClearCells

Example

OptionalselectableRangeClearCellsValue

Example

OptionalselectableRangeColumns

OptionalselectableRangeRows

OptionalselectableRows

OptionalselectableRowsCheck

OptionalselectableRowsPersistence

Example

OptionalselectableRowsRangeMode

Example

OptionalselectableRowsRollingSelection

Example

OptionaltabEndNewRow

Settings

On This Page

`Optional`addRowPos

`Optional`editTriggerEvent

`Optional`frozenRows

`Optional`frozenRowsField

`Optional`movableRows

`Optional`movableRowsConnectedElements

`Optional`movableRowsConnectedTables

`Optional`movableRowsReceiver

`Optional`movableRowsSender

`Optional`resizableColumnGuide

`Optional`resizableRowGuide

`Optional`resizableRows

`Optional`rowFormatter

`Optional`rowFormatterClipboard

`Optional`rowFormatterHtmlOutput

`Optional`rowFormatterPrint

`Optional`scrollToRowIfVisible

`Optional`scrollToRowPosition

`Optional`selectableRange

`Optional`selectableRangeClearCells

`Optional`selectableRangeClearCellsValue

`Optional`selectableRangeColumns

`Optional`selectableRangeRows

`Optional`selectableRows

`Optional`selectableRowsCheck

`Optional`selectableRowsPersistence

`Optional`selectableRowsRangeMode

`Optional`selectableRowsRollingSelection

`Optional`tabEndNewRow