Dynamic structure properties
Below is a list of all supported properties for the dynamic structure configuration of Table columns and Form/Detail inputs:
// Example:
[
'full_name',
{ prop: 'id', type: 'number', primaryKey: true, color: 'danger' },
{ prop: 'full_name' },
{ prop: 'avatar', type: 'image' },
{ prop: 'email', type: 'link' },
{
prop: 'email',
type: 'button',
text: '\{\{value}}',
triggers: {
buttonClick: [`\{\{actions.onClick.trigger(value)}}`],
},
labelConfig: {
align: 'center',
position: 'horizontal',
},
},
];
// Default type if not specified - string
// Required keys - prop, primaryKey (at least one column must be a primary key for table)
// Common fields for all components
export class BaseComponent {
prop: string, // Field name
editable: boolean, // Always display as editable
forceView: boolean, // Do not allow editing this field
title: string, // Title
primaryKey: boolean, // Primary key
sortable: boolean, // Enable sorting
filter: boolean, // Enable filtering
enableAdding: boolean, // Enable adding
visible: boolean, // Visible
pinColumn: string, // Pin column
passEventOutside: boolean, // Select row on click
disabled: boolean, // Disabled
__UIBAKERY__SHOW__CONDITION__PRESERVE__: boolean, // Preserve space when hidden
// for Table structure only
width: number, // Width
widthMode: 'auto' | 'fixed', // 'auto' is for Min mode
viewTooltipMode: 'overflow' | 'custom', // View tooltip mode
}
// image component
export class ImageComponent extends BaseComponent {
alt: string, // Alt text
linkInfo: object
{
active: 'internalPath' | 'externalPath', // Defines which link type is used
internalPath: string, // Path for internal navigation (e.g., '/dashboard')
externalPath: string, // URL for external navigation (e.g., 'https://example.com')
}
queryParams: object
{
[key: string]: string, // Query params to append to link URL (e.g. { theme: 'dark' } → /path?theme=dark)
}
openInNewTab: boolean, // Open in new tab
helpTooltip: string, // Help tooltip
fieldTooltip: string, // Field tooltip
viewTooltip: string, // See detailed description below
mappedValue: string, // Tag mapper
imageShape: string, // Image shape
fullWidth: boolean, // Full width
fileInputType: FileInputType.FILE, // Type of file allowed
fileUploadType: object
{
fileType: 'image',
userDefinedTypes: [], // Upload configuration: main file type and optional array of user-defined types
}
maxFileSize: number, // Max file size (Mb)
multipleFileUpload: boolean, // Multiple file upload
required: boolean, // Required field
regexpPattern: string, // Regexp pattern
regexpPatternErrorMessage: string, // Regexp pattern error message
radius: string, // Radius
fit: string, // Fit
labelConfig: object, // See detailed description below
labelWidth: number, // Width of the label in pixels
labelColor: string, // Color of the label text (any valid CSS color)
}
// number component
export class NumberComponent extends BaseComponent {
helpTooltip: string, // Help tooltip
showCopyButton: boolean, // Show copy button
filterVariation: string, // Filter type: 'includes', 'range', 'equal'
fieldTooltip: string, // Field tooltip
mappedValue: string, // Tag mapper
viewTooltip: string, // See detailed description below
range: object
{
min: value, // Minimum allowed value
max: value // Maximum allowed values
}
required: boolean, // Required field
display: string, // Format
fraction: string, // Fraction
textStyle: object, // See detailed description below
color: string, // See detailed description below
regexpPattern: string, // Regexp pattern
regexpPatternErrorMessage: string, // Regexp pattern error message
locale: string, // Locale
disableFormatting: boolean, // Disable number formatting
decoration: string, // Decoration
fontSize: string, // Font size
icon: string, // Icon
iconPlacement: string, // // Position of the icon relative to the component: 'left' | 'right' | 'none'
iconColor: string, // Predefined color for the icon (e.g. 'basic', 'primary', etc.)
editModeValue: number, // Only for edit mode. Affects the input’s value
labelConfig: object, // See detailed description below
labelWidth: number, // Width of the label in pixels
labelColor: string, // Color of the label text (any valid CSS color)
}
// string component
export class StringComponent extends BaseComponent {
helpTooltip: string, // Help tooltip
maskConfig: string, // Input mask
maskErrorMessage: string, // Mask error message
filterVariation: string, // Filter type: 'includes', 'equal'
fieldTooltip: string, // Field tooltip
mappedValue: string, // Tag mapper
viewTooltip: string, // See detailed description below
textStyle: object, // See detailed description below
color: string, // See detailed description below
inputType: string, // Input type
length: object, // See detailed description below
required: boolean, // Required field
markdownSupport: boolean, // Support Markdown
showCopyButton: boolean, // Show copy button
regexpPattern: string, // Regexp pattern
regexpPatternErrorMessage: string, // Regexp pattern error message
decoration: string, // Decoration
fontSize: string, // Font size
icon: string, // Icon
iconPlacement: string, // // Position of the icon relative to the component: 'left' | 'right' | 'none'
iconColor: string, // Predefined color for the icon (e.g. 'basic', 'primary', etc.)
editModeValue: string, // Only for edit mode. Affects the input’s value
labelConfig: object, // See detailed description below
labelWidth: number, // Width of the label in pixels
labelColor: string, // Color of the label text (any valid CSS color)
}
// text component
export class TextComponent extends BaseComponent {
helpTooltip: string, // Help tooltip
filterVariation: string, // Filter type: 'includes', 'equal'
fieldTooltip: string, // Field tooltip
mappedValue: string, // Tag mapper
viewTooltip: string, // See detailed description below
fontSize: string, // Font size
icon: string, // Icon
iconPlacement: string, // // Position of the icon relative to the component: 'left' | 'right' | 'none'
iconColor: string, // Predefined color for the icon (e.g. 'basic', 'primary', etc.)
textStyle: object, // See detailed description below
color: string, // See detailed description below
lines: number, // Lines number
length: object, // See detailed description below
required: boolean, // Required field
markdownSupport: boolean, // Support Markdown
showCopyButton: boolean, // Show copy button
expandable: boolean, // Whether the component can be expanded
expandOnClick: boolean, // Expand on click
regexpPattern: string, // Regexp pattern
regexpPatternErrorMessage: string, // Regexp pattern error message
decoration: string, // Decoration
editModeValue: string, // Only for edit mode. Affects the input’s value
labelConfig: object, // See detailed description below
labelWidth: number, // Width of the label in pixels
labelColor: string, // Color of the label text (any valid CSS color)
}
// link component
export class LinkComponent extends BaseComponent {
helpTooltip: string, // Help tooltip
filterVariation: string, // Filter type: 'includes', 'equal'
fieldTooltip: string, // Field tooltip
viewTooltip: string, // See detailed description below
fontSize: string, // Font size
icon: string, // Icon
iconPlacement: string, // // Position of the icon relative to the component: 'left' | 'right' | 'none'
iconColor: string, // Predefined color for the icon (e.g. 'basic', 'primary', etc
mappedValue: string, // Tag mapper
text: string, // Text
lines: number, // Lines number
textStyle: object, // See detailed description below
color: string, // See detailed description below
openInNewTab: boolean, // Open in new tab
decoration: string, // Decoration
required: boolean, // Required field
regexpPattern: string, // Regexp pattern
regexpPatternErrorMessage: string, // Regexp pattern error message
editModeValue: string, // Only for edit mode. Affects the input’s value
triggers?: {
linkClick: CodeString[], // On Click event
},
labelConfig: object, // See detailed description below
labelWidth: number, // Width of the label in pixels
labelColor: string, // Color of the label text (any valid CSS color)
}
// boolean component
export class BooleanComponent extends BaseComponent {
trueText: string, // True text
falseText: string, // False text
helpTooltip: string, // Help tooltip
viewTooltip: string, // See detailed description below
mappedValue: string, // Tag mapper
required: boolean, // Required field
filterVariation: string, // Filter type: 'logical equal'
display: string, // Display
decoration: string, // Decoration
textStyle: object, // See detailed description below
color: string, // See detailed description below
status: string, // Status
controlType: string, // Type of control: 'checkbox', 'toggle'
fontSize: string, // Font size
editModeValue: boolean, // Only for edit mode. Affects the input’s value
labelConfig: object, // See detailed description below
labelWidth: number, // Width of the label in pixels
labelColor: string, // Color of the label text (any valid CSS color)
}
// dateTime component
export class DateTimeComponent extends BaseComponent {
helpTooltip: string, // Help tooltip
showCopyButton: boolean, // Show copy button
filterVariation: string, // Filter type: 'includes', 'range', 'equal'
fieldTooltip: string, // Field tooltip
viewTooltip: string, // See detailed description below
mappedValue: string, // Tag mapper
dateFormat: string, // See all supported formats below
timeFormat: string, // See all supported formats below
required: boolean, // Required field
decoration: string, // Decoration
textStyle: object, // See detailed description below
color: string, // See detailed description below
fontSize: string, // Font size
allowResetValue: boolean, // Show reset button
withSeconds: boolean, // With seconds
twelveHoursFormat: boolean, // Use Twelve Hours format
timeStep: object
{
active: boolean, // Whether the time step is enabled
step: value, // Defines the time interval (in minutes) between the items displayed in the time picker; default - 60
}
minDate: date | moment, // The minimum selectable date (for example, minDate: new Date(2025, 9, 1) | minDate: moment('2025-09-01'))
maxDate: date | moment, // The maximum selectable date (for example, maxDate: new Date(2027, 9, 1) | maxDate: moment('2027-09-01'))
timezone: string, // Timezone
startView: string, // Start view
firstDayOfWeek: string, // First day of week
editModeValue: date | moment, // Only for edit mode. Affects the input’s value. Example: editModeValue: new Date(2025, 9, 1) | editModeValue: moment('2025-09-01')
labelConfig: object, // See detailed description below
labelWidth: number, // Width of the label in pixels
labelColor: string, // Color of the label text (any valid CSS color)
}
// currency component
export class CurrencyComponent extends BaseComponent {
helpTooltip: string, // Help tooltip
filterVariation: string, // Filter type: 'includes', 'range', 'equal'
fieldTooltip: string, // Field tooltip
viewTooltip: string, // See detailed description below
mappedValue: string, // Tag mapper
range: object
{
min: value, // Minimum allowed value
max: value // Maximum allowed values
}
required: boolean, // Required field
currencyCode: string, // Currency
fraction: string, // Fraction
display: string, // Display
textStyle: object, // See detailed description below
color: string, // See detailed description below
regexpPattern: string, // Regexp pattern
regexpPatternErrorMessage: string, // Regexp pattern error message
locale: string, // Locale
disableFormatting: boolean, // Disable number formatting
showCopyButton: boolean, // Show copy button
fontSize: string, // Font size
decoration: string, // Decoration
icon: string, // Icon
iconPlacement: string, // Position of the icon relative to the component: 'left' | 'right' | 'none'
iconColor: string, // Predefined color for the icon (e.g. 'basic', 'primary', etc)
editModeValue: number, // Only for edit mode. Affects the input’s value
labelConfig: object, // See detailed description below
labelWidth: number, // Width of the label in pixels
labelColor: string, // Color of the label text (any valid CSS color)
}
// button component
export class ButtonComponent extends BaseComponent {
text: string, // Text
showLoading: boolean, // Show loading
status: string, // Status
appearance: string, // Appearance
icon: string, // Icon
iconPlacement: string, // Position of the icon relative to the component: 'left' | 'center' | 'right' | 'none'
linkInfo: object
{
active: 'internalPath' | 'externalPath', // Defines which link type is used
internalPath: string, // Path for internal navigation (e.g., '/dashboard')
externalPath: string, // URL for external navigation (e.g., 'https://example.com')
}
queryParams: boolean, // Query params
openInNewTab: boolean, // Open in new tab
fieldTooltip: string, // Field tooltip
triggers?: {
buttonClick: CodeString[], // On Click event
},
alignment: string, // Alignment
}
// contextMenuButton component
export class ContextMenuButtonComponent extends BaseComponent {
text: string, // Text
showLoading: boolean, // Show loading
status: string, // Status
appearance: string, // Appearance
icon: string, // Icon
iconPlacement: string, // Position of the icon relative to the component: 'left' | 'center' | 'right' | 'none'
contextMenuTrigger: string, // Menu trigger
contextMenuPosition: string, // Menu position
contextMenuAdjustment: string, // Menu adjustment
contextMenuItems: object, // Menu items
fieldTooltip: string, // Field tooltip
triggers?: {
buttonClick: CodeString[], // On Click event
menuItemClick: CodeString[], // On Menu Item Click event
},
alignment: string, // Alignment
}
// select component
export class SelectComponent extends BaseComponent {
helpTooltip: string, // Help tooltip
filterVariation: string, // Filter type: 'includes', 'equal'
fieldTooltip: string, // Field tooltip
required: boolean, // Required field
viewTooltip: string, // See detailed description below
options: array // The list of selectable options for this field
{
value: string,
color: string, // See available colors below
}
appearance: string, // Appearance
withOptionsAutocomplete: boolean, // Enable options autocomplete
mappedValue: string, // Tag mapper
mappedColor: string, // Tag color mapper
allowResetValue: boolean, // Allow reset value
editModeValue: string, // Only for edit mode. Affects the input’s value
triggers?: {
autocompleteChange: CodeString[], // On Autocomplete Search event
tagClick: CodeString[], // On Tag Click event
},
labelConfig: object, // See detailed description below
labelWidth: number, // Width of the label in pixels
labelColor: string, // Color of the label text (any valid CSS color)
}
// multiselect component
export class MultiselectComponent extends BaseComponent {
helpTooltip: string, // Help tooltip
filterVariation: string, // Filter type: 'intersection', 'includes'
fieldTooltip: string, // Field tooltip
required: boolean, // Required field
viewTooltip: string, // See detailed description below
options: array // The list of selectable options for this field
{
value: string,
color: string, // See available colors below
}
appearance: string,
mappedValue: string, // Tag mapper
mappedColor: string, // Tag color mapper
withOptionsAutocomplete: boolean, // Enable options autocomplete
allowResetValue: boolean, // Show reset button
allowSelectAll: boolean, // Show select all option
editModeValue: string, // Only for edit mode. Affects the input’s value
triggers?: {
autocompleteChange: CodeString[], // On Autocomplete Search event
tagClick: CodeString[], // On Tag Click event
},
labelConfig: object, // See detailed description below
labelWidth: number, // Width of the label in pixels
labelColor: string, // Color of the label text (any valid CSS color)
}
// file component
export class FileComponent extends BaseComponent {
helpTooltip: string, // Help tooltip
fieldTooltip: string, // Field tooltip
viewTooltip: string, // See detailed description below
mappedValue: string, // Tag mapper
fileInputType: string, // File input type
fileUploadType: object // File upload type
{
fileType: 'any',
userDefinedTypes: [], // Upload configuration: main file type and optional array of user-defined types
}
maxFileSize: number, // Max file size (Mb)
multipleFileUpload: boolean, // Enable multiple file upload
appendFiles: boolean, // Enable append new files to existing ones
required: boolean, // Required field
regexpPattern: string, // Regexp pattern
regexpPatternErrorMessage: string, // Regexp pattern error message
labelConfig: object, // See detailed description below
labelWidth: number, // Width of the label in pixels
labelColor: string, // Color of the label text (any valid CSS color)
}
// percent component
export class PercentComponent extends BaseComponent {
helpTooltip: string, // Help tooltip
showCopyButton: boolean, // Show copy button
filterVariation: string, // Filter type: 'includes', 'range', 'equal'
fieldTooltip: string, // Field tooltip
mappedValue: string, // Tag mapper
viewTooltip: string, // See detailed description below
range: object
{
min: value, // Minimum allowed value
max: value // Maximum allowed values
}
required: boolean, // Required field
display: string, // Format
fraction: string, // Fraction
textStyle: object, // See detailed description below
color: string, // See detailed description below
status: string, // Status
regexpPattern: string, // Regexp pattern
regexpPatternErrorMessage: string, // Regexp pattern error message
view: string, // Type
displayValue: boolean, // Display value
locale: string, // Locale
disableFormatting: boolean, // Disable number formatting
decoration: string, // Decoration
fontSize: string, // Font size
icon: string, // Icon
iconPlacement: string, // Position of the icon relative to the component: 'left' | 'right' | 'none'
iconColor: string, // Predefined color for the icon (e.g. 'basic', 'primary', etc)
editModeValue: number, // Only for edit mode. Affects the input’s value
labelConfig: object, // See detailed description below
labelWidth: number, // Width of the label in pixels
labelColor: string, // Color of the label text (any valid CSS color)
}
// jsonEditor component
export class JsonEditorComponent extends BaseComponent {
helpTooltip: string, // Help tooltip
showCopyButton: boolean, // Show copy button
filterVariation: string, // Filter type: 'includes', 'equal'
viewTooltip: string, // See detailed description below
editDisplayMode: string, // Edit display mode
viewDisplayMode: string, // View display mode
lines: number, // Lines number
required: boolean, // Required field
editModeValue: string, // Only for edit mode. Affects the input’s value
labelConfig: object, // See detailed description below
labelWidth: number, // Width of the label in pixels
labelColor: string, // Color of the label text (any valid CSS color)
}
// date component
export class DateComponent extends BaseComponent {
helpTooltip: string, // Help tooltip
showCopyButton: boolean, // Show copy button
filterVariation: string, // Filter type: 'includes', 'range', 'equal'
fieldTooltip: string, // Field tooltip
viewTooltip: string, // See detailed description below
mappedValue: string, // Tag mapper
dateFormat: string, // See all supported formats below
required: boolean, // Required field
allowResetValue: boolean, // Show reset button
decoration: string, // Decoration
textStyle: object, // See detailed description below
color: string, // See detailed description below
fontSize: string, // Font size
icon: string, // Icon
iconPlacement: string, // Position of the icon relative to the component: 'left' | 'right' | 'none'
iconColor: string, // Predefined color for the icon (e.g. 'basic', 'primary', etc)
minDate: date | moment, // The minimum selectable date (for example, minDate: new Date(2025, 9, 1) | minDate: moment('2025-09-01'))
maxDate: date | moment, // The maximum selectable date (for example, maxDate: new Date(2027, 9, 1) | maxDate: moment('2027-09-01'))
timezone: string, // Timezone
startView: string, // Start view
firstDayOfWeek: string, // First day of week
editModeValue: date | moment, // Only for edit mode. Affects the input’s value. Example: editModeValue: new Date(2025, 9, 1) | editModeValue: moment('2025-09-01')
labelConfig: object, // See detailed description below
labelWidth: number, // Width of the label in pixels
labelColor: string, // Color of the label text (any valid CSS color)
}
// time component
export class TimeComponent extends BaseComponent {
helpTooltip: string, // Help tooltip
showCopyButton: boolean, // Show copy button
filterVariation: string, // Filter type: 'includes', 'range', 'equal'
fieldTooltip: string, // Field tooltip
viewTooltip: string, // See detailed description below
mappedValue: string, // Tag mapper
timeFormat: string, // See all supported formats below
required: boolean, // Required field
allowResetValue: boolean, // Show reset button
decoration: string, // Decoration
textStyle: object, // See detailed description below
color: string, // See detailed description below
fontSize: string, // Font size
icon: string, // Icon
iconPlacement: string, // Position of the icon relative to the component: 'left' | 'right' | 'none'
iconColor: string, // Predefined color for the icon (e.g. 'basic', 'primary', etc)
withSeconds: boolean, // With seconds
twelveHoursFormat: boolean, // Use Twelve Hours format
timeStep: object
{
active: boolean, // Whether the time step is enabled
step: value, // Defines the time interval (in minutes) between the items displayed in the time picker; default - 60
}
timezone: string, // Timezone
editModeValue: date, // Only for edit mode. Affects the input's value. Example: editModeValue: new Date(00, 00, 00)
labelConfig: object, // See detailed description below
labelWidth: number, // Width of the label in pixels
labelColor: string, // Color of the label text (any valid CSS color)
}type textStyle = {
style?: ('bold', 'italic')[], // text style
transform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none', // text transformation
}
type labelConfig = {
align: 'left' | 'center' | 'right'; // label alignment
position: 'vertical' | 'horizontal'; // label placement
}
type viewTooltip = string,
type viewTooltipMode = 'custom' | 'overflow' = 'overflow'; // Default is the Overflow mode; to configure a custom tooltip, specify the mode and the tooltip, for example, viewTooltipMode = 'custom', viewTooltip = 'Hello, world!'
type color = 'basic', 'alternate', 'disabled', 'hint', 'white', 'primary', 'success', 'info', 'warning', 'danger', 'primary-light', 'success-light', 'info-light', 'warning-light', 'danger-light', 'primary-dark', 'success-dark', 'info-dark', 'warning-dark', 'danger-dark', 'also any valid css color accepted here'
type length = {
min: null, // minimum length
max: null, // maximum length
}
type timeFormat // Default format options\n'HH:mm', 'HH:mm:ss', 'hh:mm aaa', 'hh:mm:ss aaa'\n\n// For custom format check\n// https://date-fns.org/docs/format\n\n// Empty string '', `null`, and `undefined` will hide time\n\n// If date format and time format are invalid,\n// we will fallback them to default 'MMM dd, yyyy HH:mm format'"
type dateFormat // Default format options
\n'yyyy-MM-dd', 'dd.MM.yyyy', 'MM-dd-yyyy', 'MM/dd/yy', 'MMM dd, yyyy',\n'MMMM dd, yyyy', 'dd MMM yyyy', 'MMM dd', 'MMMM dd', 'EEEE MMMM d, y'\n\n// For custom format check\n// https://date-fns.org/docs/format\n\n// Empty string '', `null`, and `undefined` will hide date\n\n// If date format and time format are invalid,\n// we will fallback them to default 'MMM dd, yyyy HH:mm format'"Use case: Dynamic button group column in the table
To configure columns dynamically, you first have to create a JavaScript Code action and specify the columns configuration you need using the list of supported properties above. This is an example of the code we used to set up a button group column in the table:
const columns = [
{
"prop": "id",
"type": "number",
"primaryKey": true
},
"name",
{
"prop": "type",
"type": "select"
},
{
"prop": "avatar",
"type": "image"
},
"title",
"description",
];
const buttonColumns = Math.max(...state.tableData.map(row => row.buttons.length));
return [
...columns,
...Array.from({ length: buttonColumns }).map((item, i) => ({
"prop": "buttons",
"type": "button",
"title": i === 0 ? "Actions" : " ",
text: `\{\{value[${i}]?.title}}`,
viewContentHidden: `\{\{!value[${i}]}}`,
triggers: {
buttonClick: [`\{\{actions.onClick.trigger(value[${i}])}}`],
},
width: "100",
widthMode: "fixed",
}))
]
return columns;Next, you need to assign this action to the table's Columns property in the JS mode. That's it!
Last updated
Was this helpful?