MultiTableColumnBadge
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.
Callbacks are executed client-side! Only documentsContext is available there.
The row passed into a callback must not be modified! Doing so can lead to inconsistent data.
Extends
Properties
type?
optionaltype:ColumnAttributeCallbackHandler<"badge">
(Optional) Column's display type.
Default
"default"
Example
type: "currency"
Overrides
badges?
optionalbadges:Record<string,"error"|"success"|"info"|string>
(Optional) For type: "badge", CSS classes can be assigned based on the cell value. The built-in
CSS classes are error, success, and info. If a value starts with #, no CSS class is applied
and the value is used as a style attribute instead.
If the value is empty, the badge is shown in grey.
Styling support (as opposed to plain localization) is available since version 20.6.1.
Default
null
Examples
badges: {
"20": "info",
"50": "success",
"55": "error"
}
badges: {
"10;de:Entwurf": "info",
"50;de:Prüfen": "warning",
"100;de:Fertig": "success",
"98;de:Abbruch": "error",
}
badges: {
"10;de:Erfassung": "#ff5722; color:#fff",
}
badgeAsPill?
optionalbadgeAsPill:boolean
(Optional) Render the badge with fully rounded corners (pill shape).
Available since version 20.5.0.
Default
false
Example
badgeAsPill: true
label
label:
ColumnAttributeCallbackHandler<string>
Column header.
Default
""
Examples
label: "de:Netto;en:net"
label: (options) => "Rows: " + options.rows.length
Inherited from
tooltip?
optionaltooltip:ColumnAttributeCallbackHandler<string>
(Optional) Column tooltip.
Inherited from
visible?
optionalvisible:ColumnAttributeCallbackHandler<boolean>
(Optional) Should the column be shown?
Inherited from
field?
optionalfield:string
(Optional) Name of the file field to map to. If no mapping is wanted, the value must be empty (field: "").
Inherited from
allowEdit?
optionalallowEdit:ColumnAttributeCallbackHandler<boolean>
(Optional) May the column be edited in edit mode?
Default
true
Example
allowEdit: (options) => options.row.vendorId != ""
Inherited from
allowInsert?
optionalallowInsert:ColumnAttributeCallbackHandler<boolean>
(Optional) Can a value be entered when inserting a row?
Default
true
Example
allowInsert: (options) => options.rows.length <= 0
Inherited from
sortable?
optionalsortable:ColumnAttributeCallbackHandler<boolean>
(Optional) Is the column sortable?
Inherited from
reorderable?
optionalreorderable: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
resizable?
optionalresizable: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
defaultValue?
optionaldefaultValue:unknown
(Optional) Predefined value when creating a new row.
Inherited from
IMultiTableColumn.defaultValue
required?
optionalrequired:ColumnAttributeCallbackHandler<boolean>
(Optional) Required field when creating a new row?
Inherited from
validation?
optionalvalidation: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
attributes?
optionalattributes: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
selectOnFocus?
optionalselectOnFocus:boolean
(Optional) Should the text in the input field be selected when it receives focus?
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?
optionalchange: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
headerTemplate?
optionalheaderTemplate: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?
optionalfooterTemplate: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?
optionalwidth: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
render?
optionalrender: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
disableInternationalization?
optionaldisableInternationalization: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?
optionalcellBackgroundColor:CellColumnAttributeCallbackHandler<string>
(Optional) The cell's background color.
Default
""
Description
Only for MultiTableReact
Example
cellBackgroundColor: "#ff0000"