Zum Hauptinhalt springen

MultiTableOptions

MultiTableOptions = object

Properties​

rows?​

optional rows: MultiTableRows

(Optional) Array of rows.

columns?​

optional columns: MultiTableColumns

(Optional) Column definition. If no column definition is given, columns are generated from the rows.

select?​

optional select: boolean

(Optional) Enables selection.

Default​

true

multiSelect?​

optional multiSelect: boolean

(Optional) Enables multi-selection.

Default​

false

multiSelectBehavior?​

optional multiSelectBehavior: "" | "filter" | "paged"

How should the "select all" checkbox behave?

  • : Empty - all rows are selected
  • filter: All filtered rows are selected
  • paged: Only the current page is selected

Default​

""

allowEdit?​

optional allowEdit: AttributeCallbackHandler<boolean>

(Optional) Aktiviert den Editiermodus im Bearbeitungsmodus.

Default​

false

Example​

allowEdit: (options) => options.rows.length > 0

allowDelete?​

optional allowDelete: AttributeCallbackHandler<boolean>

(Optional) Allows deleting rows in edit mode.

Default​

true

Example​

allowDelete: (options) => options.rows.length > 0

allowInsert?​

optional allowInsert: AttributeCallbackHandler<boolean>

(Optional) Allows inserting rows in edit mode.

Default​

true

Example​

allowInsert: (options) => options.rows.length > 0

striped?​

optional striped: boolean

(Optional) Table in zebra-stripe look.

Default​

true

border?​

optional border: boolean

(Optional) Adds a border around the table.

Default​

true

bordered?​

optional bordered: boolean

(Optional) Adds borders around table cells.

Default​

true

hover?​

optional hover: boolean

(Optional) Highlights the row when hovered with the mouse.

Default​

true

sticky?​

optional sticky: boolean

(Optional) Sticky column headers and options bar.

Default​

false

emptyMessage?​

optional emptyMessage: string

(Optional) Message shown when no data is available.

Default​

"Es wurden keine Treffer gefunden."

pageSize?​

optional pageSize: number

(Optional) Number of entries per page.

pageSizes?​

optional pageSizes: number[]

(Optional) Available page size options.

Default​

[10, 25, 50, 100]

sortBy?​

optional sortBy: string

(Optional) Column to sort by.

sortAscending?​

optional sortAscending: boolean

(Optional) Sort ascending?

filter?​

optional filter: FilterCallbackHandler

(Optional) Predefined filter.

If a string is passed, it is shown in the search input and used to filter the rows; the user can still adjust the filter afterwards.

If a callback (function or string name of a global function) is passed, rows are filtered automatically before being displayed. The user can still search within the filtered rows (see FilterCallbackOptions.filter).

Important

The callback must return a boolean!

Important

Columns of type currency or number are matched against their formatted value (via documents.sdk.utils.formatNumber). To search for 10000.95, you would need to search for "10.000,95", or convert the value beforehand using documents.sdk.utils.formatNumber.

Default​

""

Examples​

filter: "12345" // e.g. invoice number
filter: (options) => options.row.someFlag == "visible"
filter: (options) => options.filter("some filter")

showOptions?​

optional showOptions: boolean

(Optional) Show the header row with filter and page size selection?

Default​

true

showHeader?​

optional showHeader: boolean

(Optional) Show column headers?

Default​

true

showFooter?​

optional showFooter: boolean

(Optional) Show footer information (page count, selection)?

Default​

true

showPagination?​

optional showPagination: boolean

(Optional) Enable page navigation?

Default​

true

removeButtonFocusable?​

optional removeButtonFocusable: boolean

(Optional) Should the delete button be reachable via tab navigation?

Default​

false

insertMode?​

optional insertMode: "auto" | "manual"

(Optional) How should the input row behave on input?

  • auto: A new row is added immediately once input has been made.
  • manual: An insert row with an insert button is shown.

showEmptyTable?​

optional showEmptyTable: boolean

(Optional) Should the table be shown even if no data is available? By default a message is shown instead (see the emptyMessage option).

Default​

false

See​

emptyMessage

rowStyle?​

optional rowStyle: AttributeCallbackWithRowHandler<string>

(Optional) Row styling.

Examples​

rowStyle: "color: #f00"
rowStyle: (options) => "color: #f00"

html?​

optional html: HtmlSections

(Optional) Custom HTML.

Example​

html: {
     header: (options) => "<div>Row count: " + options.rows.length + "</div>"
}

beforeDelete?​

optional beforeDelete: BeforeDeleteHandler | null

(Optional) Callback invoked before selected rows are deleted.

The callback can return synchronously (true/false) or trigger an asynchronous confirmation dialog and call BeforeDeleteOptions.removeSelectedRows once confirmed.

vorsicht

BeforeDeleteOptions.removeSelectedRows can no longer be called once a return value has already been given.

Default​

null

Examples​

beforeDelete: (options) => options.selectedRows.length == 1
beforeDelete: (options) => {
    const message =
        options.selectedRows.length === options.rows.length
            ? "Delete all rows?"
            : `Delete ${options.selectedRows.length} row(s)?`;
    return window.confirm(message);
}
beforeDelete: (options) => {
    const message =
        options.selectedRows.length === options.rows.length
            ? "Delete all rows?"
            : `Delete ${options.selectedRows.length} row(s)?`;
    documentsContext.openConfirmationDialog("Confirm deletion", message, options.removeSelectedRows);
}

selectAll?​

optional selectAll: boolean

(Optional) Selects all rows.

Note: this option only works if select: true.

Default​

false

height?​

optional height: string | number

(Optional) Maximum height of the gadget. If the gadget exceeds this height, a scrollbar is shown.

Description​

Only for MultiTableReact

Example​

height: "200px"
height: 200 // -> "200px"

virtualization?​

optional virtualization: boolean

(Optional) Enables efficient rendering of tables with many rows.

vorsicht

This virtualization feature is still in alpha and not ready for production use.

Description​

Only for MultiTableReact

Default​

false

fullscreen?​

optional fullscreen: boolean

(Optional) Enables the fullscreen mode button.

Description​

Only for MultiTableReact

Default​

false

multiInsert?​

optional multiInsert: boolean

(Optional) Enables the multi-insert button.

Description​

Only for MultiTableReact

Default​

false

multiInsertColumns?​

optional multiInsertColumns: string[] | null

(Optional) Defines which columns (as an array of column IDs) are shown in the multi-insert dialog. If not set, all editable columns are shown.

Description​

Only for MultiTableReact

Default​

undefined (all editable columns)

Example​

multiInsertColumns: ["amount", "description"]

copyPaste?​

optional copyPaste: boolean

(Optional) Enables the copy & paste button.

Description​

Only for MultiTableReact

Default​

false

copyOnlyAllowed?​

optional copyOnlyAllowed: boolean

(Optional) If enabled, copying the template only considers columns that are also insertable (allowInsert !== false).

Description​

Only for MultiTableReact

Default​

true

additionalParams?​

optional additionalParams: Record<string, unknown>

(Optional) Additional parameters passed to the component, available in callbacks.

Description​

Only for MultiTableReact

Example​

additionalParams: {
     someParam: "someValue"
}

rowFilter?​

optional rowFilter: RowFilterCallbackHandler | null

(Optional) Callback invoked for every row to determine whether it should be shown.

Example​

rowFilter: (options) => options.row.amount > 100

reorderable?​

optional reorderable: AttributeCallbackHandler<boolean>

(Optional) Enables reordering columns via drag & drop. If set to false, no columns can be reordered, regardless of the column-specific reorderable option.

Default​

false

Description​

Only for MultiTableReact

Examples​

reorderable: false
reorderable: (options) => options.rows.length > 0

resizable?​

optional resizable: AttributeCallbackHandler<boolean>

(Optional) Enables resizing column widths via drag & drop. If set to false, no column widths can be resized, regardless of the column-specific resizable option.

Default​

false

Description​

Only for MultiTableReact

Examples​

resizable: true
resizable: (options) => options.rows.length > 0

onReorder?​

optional onReorder: (externalInterface, newOrder) => void | null

(Optional) Callback function invoked when the column order changes.

Description​

Only for MultiTableReact

Example​

onReorder: (externalInterface, newOrder) => {
 // Persist the new order, e.g. forward it
}

onResize?​

optional onResize: (externalInterface, columnName, newWidth) => void | null

(Optional) Callback function invoked when a column's width changes.

Description​

Only for MultiTableReact

Example​

onResize: (externalInterface, columnName, newWidth) => {
 // Persist the new width, e.g. forward it
}