MultiTableColumnNumber

Most properties can be given either as a fixed value or as a callback function. The callback must return the same type as the fixed value; returning nothing (return;) falls back to the default.

vorsicht

Callbacks are executed client-side! Only documentsContext is available there.

gefahr

The row passed into a callback must not be modified! Doing so can lead to inconsistent data.

Extends

• IMultiTableColumn

Properties

type?

optional type: ColumnAttributeCallbackHandler<"number">

(Optional) Column's display type.

Default

"default"

Example

type: "currency"

Overrides

IMultiTableColumn.type

---

decimalPrecision?

optional decimalPrecision: number

(Optional) Number of decimal places.

Default

2

---

placeholder?

optional placeholder: ColumnAttributeCallbackHandler<string>

(Optional) Placeholder text in the input field.

Default

undefined

Description

Only for MultiTableReact

Example

placeholder: "Max 30 characters"

---

label

label: ColumnAttributeCallbackHandler<string>

Column header.

Default

""

Examples

label: "de:Netto;en:net"

label: (options) => "Rows: " + options.rows.length

Inherited from

IMultiTableColumn.label

---

tooltip?

optional tooltip: ColumnAttributeCallbackHandler<string>

(Optional) Column tooltip.

Inherited from

IMultiTableColumn.tooltip

---

visible?

optional visible: ColumnAttributeCallbackHandler<boolean>

(Optional) Should the column be shown?

Inherited from

IMultiTableColumn.visible

---

field?

optional field: string

(Optional) Name of the file field to map to. If no mapping is wanted, the value must be empty (field: "").

Inherited from

IMultiTableColumn.field

---

allowEdit?

optional allowEdit: ColumnAttributeCallbackHandler<boolean>

(Optional) May the column be edited in edit mode?

Default

true

Example

allowEdit: (options) => options.row.vendorId != ""

Inherited from

IMultiTableColumn.allowEdit

---

allowInsert?

optional allowInsert: ColumnAttributeCallbackHandler<boolean>

(Optional) Can a value be entered when inserting a row?

Default

true

Example

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

Inherited from

IMultiTableColumn.allowInsert

---

sortable?

optional sortable: ColumnAttributeCallbackHandler<boolean>

(Optional) Is the column sortable?

Inherited from

IMultiTableColumn.sortable

---

reorderable?

optional reorderable: ColumnAttributeCallbackHandler<boolean>

(Optional) Can this column be reordered via drag & drop? Defaults to true if options.reorderable is set, otherwise false. options.reorderable: false disables reordering for all columns.

Description

Only for MultiTableReact

Examples

reorderable: false

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

Inherited from

IMultiTableColumn.reorderable

---

resizable?

optional resizable: ColumnAttributeCallbackHandler<boolean>

(Optional) Can this column's width be resized via drag & drop? Defaults to true if options.resizable is set, otherwise false. options.resizable: false disables resizing for all columns.

Description

Only for MultiTableReact

Examples

resizable: true

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

Inherited from

IMultiTableColumn.resizable

---

defaultValue?

optional defaultValue: unknown

(Optional) Predefined value when creating a new row.

Inherited from

IMultiTableColumn.defaultValue

---

required?

optional required: ColumnAttributeCallbackHandler<boolean>

(Optional) Required field when creating a new row?

Inherited from

IMultiTableColumn.required

---

validation?

optional validation: CellColumnAttributeCallbackHandler<boolean>

(Optional) Custom validation. The callback receives the cell value as its first and the ColumnAttributeCallbackOptions as its second parameter.

Default

null

Examples

validation: "someGlobalValidationFunction"

validation: (cellValue) => cellValue > 0 // 0 is a valid value too, so it must be strictly greater

Inherited from

IMultiTableColumn.validation

---

attributes?

optional attributes: Record<string, CellColumnAttributeCallbackHandler<unknown>>

(Optional) Additional field attributes. Each attribute can be a fixed value or a callback that receives the cell value as its first and the ColumnAttributeCallbackOptions as its second parameter.

Default

null

Examples

attributes: {
    class: 'some-class',
    title: 'A tooltip'
}

attributes: {
    class: "text-right",
    style: (value) => "color: " + (value > 1000 ? "#f00" : "inherit")
}

Inherited from

IMultiTableColumn.attributes

---

selectOnFocus?

optional selectOnFocus: boolean

(Optional) Should the text in the input field be selected when it receives focus?

tipp

For type: "textarea" it can be useful to set this to false so the entire text isn't selected.

Default

true

Inherited from

IMultiTableColumn.selectOnFocus

---

change?

optional change: ChangeCallbackHandler

(Optional) Callback invoked when the value has changed.

Examples

// Named global function
change: "someCallbackFunction"

change: (amount, options) => {
    if (amount < 0) {
        return 0
    }
}

change: (value, options) => {
    const total = value * options.row.get("taxRate") / 100
    options.row.set("totalAmount", total.toFixed(2))
    options.row.focus("taxRate")
}

Inherited from

IMultiTableColumn.change

---

headerTemplate?

optional headerTemplate: ColumnAttributeCallbackHandler<string>

(Optional) HTML for the header area.

Example

// Provided as string
headerTemplate: "Additional column heading"
// callback script
headerTemplate: (options) => {
    const sum = options.rows.reduce((acc, row) => acc + row.amount, 0)
    return "<div style='text-align:right; border-top: solid 2px #000; border-bottom: double 3px #000; margin: -4px; padding-right: 4px'>" + sum + " €</div>"
}

Inherited from

IMultiTableColumn.headerTemplate

---

footerTemplate?

optional footerTemplate: ColumnAttributeCallbackHandler<string>

(Optional) HTML for the footer area.

Example

// Provided as string
footerTemplate: "Additional footer info"
// callback script
footerTemplate: (options) => {
    const sum = options.rows.reduce((acc, row) => acc + row.amount, 0)
    return "<div style='text-align:right; border-top: solid 2px #000; border-bottom: double 3px #000; margin: -4px; padding-right: 4px'>" + sum + " €</div>"
}

Inherited from

IMultiTableColumn.footerTemplate

---

width?

optional width: ColumnAttributeCallbackHandler<string>

(Optional) Column width.

If the global resizable option is not active, the given <N>px value additionally acts as a minimum width, preventing columns from shrinking below their configured width in wide tables.

Default

"auto"

Examples

width: "60px"

width: "de:60px;en:80px"

width: (options) => {
    const anyBigNumber = options.rows.some((row) => row.totalAmount > 999)
    return anyBigNumber ? "100px" : "60px"
}

Inherited from

IMultiTableColumn.width

---

render?

optional render: ColumnAttributeCallbackHandler<string>

(Optional) Display text for the cell. The callback has the current row (row) available in addition to the usual ColumnAttributeCallbackOptions.

Default

null

Examples

render: (options) => options.row.taxRate + "%"

render: (options) => {
    // Check for access profile
    return options.row.iban.substring(0, 5) + "xxxxxxxxxx" +
        options.row.iban.substring(options.row.iban.length - 3)
}

Inherited from

IMultiTableColumn.render

---

disableInternationalization?

optional disableInternationalization: ColumnAttributeCallbackHandler<boolean>

(Optional) Should localization be disabled for the column? Useful when cell values contain semicolons that are not meant to be part of a localization string.

Default

false

Description

Only for MultiTableReact

Example

disableInternationalization: true

Inherited from

IMultiTableColumn.disableInternationalization

---

cellBackgroundColor?

optional cellBackgroundColor: CellColumnAttributeCallbackHandler<string>

(Optional) The cell's background color.

Default

""

Description

Only for MultiTableReact

Example

cellBackgroundColor: "#ff0000"

Inherited from

IMultiTableColumn.cellBackgroundColor