Class TableOptions

Id of the element that describes the table (aria-describedby). Default: none.

Since

1.1.91

Accessible name of the table (aria-label). Default: none.

Since

1.1.91

Id of the element that names the table (aria-labelledby). Default: none.

Since

1.1.91

Own screen reader texts; missing functions use the English defaults (AriaTexts).

Since

1.1.91

Batch edit always on: edited and filled values are collected (marked ge-table-cell-pending) and written with TableApi.commitBatchEdit or discarded with TableApi.cancelBatchEdit. Without it, start a batch edit with TableApi.startBatchEdit (it ends with commit or cancel).

Example

const tableOptions: TableOptionsIf = { ...new TableOptions(), batchEdit: true };
Copy

Since

1.1.96

See

Live demo: fill handle & batch edit · Training: Fill handle and batch edit

Cell formulas (TableOptionsIf.cellFormulas). Not set = off.

Since

1.1.99

Copy, cut and paste (TableOptionsIf.clipboard). Not set = off.

Since

1.1.99

The width of the column resize handle in pixels.

Flag indicating whether the columns are draggable.

Represents whether the columns are resizable.

Row heights of header, body and footer in px (default 34 / 34 / 34). Read by TableFactory.createTableModel when it creates the area models – pass the options there as tableOptions, too.

Writing direction ("ltr" | "rtl" | "auto"). Not set = "ltr"; a nested table (master/detail) without its own value takes the direction of the outer table.

Since

1.1.98

Excel-style editing (TableOptionsIf.editing). Not set = off.

Since

1.1.99

Your filter: called for every row, return true to show it. After changing the filter criteria call TableApi.externalFilterChanged – the table filters again and keeps the sort order.

Example

const filter = { text: "" };
const tableOptions: TableOptionsIf = {
  ...new TableOptions(),
  externalFilterFunction: (order: Order) => order.customer.toLowerCase().includes(filter.text)
};
searchInput.addEventListener("input", () => {
  filter.text = searchInput.value.toLowerCase();
  tableApi.externalFilterChanged();
});
Copy

See

Training: Filtering with a live search

The fill handle: a small square at the bottom right corner of the selected range. Dragging it fills the neighbouring cells (copy, or a series: 1, 2, 3 …, dates, Item 1 → Item 2); ⌥/Alt switches between series and copy. Keyboard: Ctrl/⌘+D fills down, Ctrl/⌘+R fills right. Needs a selection model of the type "range"; only editable cells are filled. true = defaults (FillHandleOptions).

Example

const selectionModel = new SelectionModel("range", "multi");   // one model – not a new one per call
const tableOptions: TableOptionsIf = {
  ...new TableOptions(),
  getSelectionModel: () => selectionModel,
  fillHandle: true,
};
Copy

Since

1.1.96

See

Live demo: fill handle & batch edit · Training: Fill handle and batch edit

Determines whether the fixed east separator border is visible.

Indicates whether the fixed west separator border should be visible.

Indicates whether the footer separator border is visible or not.

Indicates whether a vertical separator should be displayed in the footer.

The editor for a cell, if the column has no own ColumnDefIf.getEditRenderer. Default: a text input (InputCellRenderer).

See

Training: Inline editing

Focus model of the table. Not set (default): every table creates its own new FocusModel("cell").

Selection model of the table. Not set (default): every table creates its own model (new SelectionModel(), type "none") – tables never share a selection.

Icons of collapsible header groups (AreaModelCellGroups).

Indicates whether the header separator border is visible.

Reserved – currently not evaluated (tree tables always show the expand-all / collapse-all icon in the top left header cell).

Represents whether a vertical separator should be displayed in a header.

Since

1.0.0

Represents the visibility of the horizontal border.

Flag indicating whether the hover color of a column is visible or not in general. If true, the column get the hover background color while the mouse is over the column.

Flag indicating whether the hover color of a row is visible or not in general. If true, the row get the hover background color while the mouse is over the row.

Master/detail: master rows get an expand icon; below an expanded row a detail row over the full width shows any content (a nested table, a form, a framework component – see MasterDetailOptionsIf). Only for flat body models. Fields you leave out keep their default (MasterDetailOptions); detailRenderer is required.

Example

const tableOptions: TableOptionsIf = {
  ...new TableOptions(),
  masterDetail: {
    detailHeight: "auto",
    detailRenderer: (container, row) => { container.textContent = `Notes: ${row.notes}`; }
  }
};
Copy

Since

1.1.97

See

Live demo: master/detail · Training: Master/detail

The value of the css overflowX determines the behavior of horizontal overflow for the table body (scroll port).

The value of the css overflowX determines the behavior of vertical overflow for the table body (scroll port).

Texts and behaviour of the "Loading…" / "No rows" overlays; missing fields use OverlayOptions.

Since

1.1.92

The delay in milliseconds used for debouncing the resize event.

Row drag: managed or events only, multi-row drag, tree drop, auto-scroll (see RowDragOptionsIf). The drag handles come from ColumnDefIf.rowDrag. Fields you leave out keep their default (RowDragOptions).

Example

const tableOptions: TableOptionsIf = {
  ...new TableOptions(),
  rowDragOptions: { managed: false },   // only events – e.g. the server decides
};
Copy

Since

1.1.95

See

Live demo: row drag · Training: Dragging rows into order

Own keyboard shortcuts: maps a shortcut (e.g. "ctrl+c", "f2") to an ActionId. Default: WindowsShortcutActionIdMapping resp. OsxShortcutActionIdMapping.

Switch off all keyboard shortcuts of the table (copy, select all, navigation, F2 …).

Indicates whether to show checkbox without an extra column. If true and the row is checkable, a checkbox is rendered in the first column. If false and the row is checkable, a checkbox is rendered in an extra column left to the first column.

See

Training: Tree table with checkboxes

The order of the sort states on repeated double-clicks on a header, default ["asc", "desc"]. Add "" to get "unsorted" as third state. Per column: ColumnDefIf.sortStatesOrder.

The sort icons shown in sortable header cells.

Preset like a spreadsheet (TableOptionsIf.spreadsheet). Not set = off.

Since

1.1.99

Specifies whether the bottom border of a table is visible.

Indicates whether the top border of a table is visible or hidden.

Icons and behaviour of tree tables (arrows, indentation). See TreeOptionsIf.

Undo and redo (TableOptionsIf.undo). Not set = off.

Since

1.1.99

Indicates whether the vertical border is visible.