Table components

This article describes components in Components Library > Table.

EditTable

The EditTable component displays a data table that supports inline row editing, adding new rows, and deleting rows. It supports configurable columns, action buttons, and pagination. In the App Designer, select an EditTable on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the EditTable. The table is organised into collapsible sections.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Data column	Array setter	-	Defines the columns displayed in the table. Expand to add, remove, or configure columns. Refer to Data column.
Sort icons desc	Icon setter	`descending`	Sets a custom icon for the descending sort state.
Sort icons asc	Icon setter	`ascending`	Sets a custom icon for the ascending sort state.
Action column buttons	Switch Setter (Object setter / Variable input)	-	Configures the buttons in the row-level action column. Refer to Action column buttons.
Action column	Switch Setter (Object setter / Variable input)	-	Configures the layout and behaviour of the action column. Refer to Action column.
Action bar button	Switch Setter (Object setter / Variable input)	-	Configures the toolbar buttons displayed above the table. Refer to Action bar button.
Datasource	JSON setter	See code sample	Sets the table data.
Pagination configuration	Switch Setter (Object setter / Variable input)	-	Configures the pagination controls. Refer to Pagination configuration.

Datasource default code sample

[{
    "id": "id-2f5DdE2b-0",
    "date": "2013-06-12",
    "percent": 1.862,
    "documentAmount": 2022,
    "currency": "CNY",
    "company": "Ecquaria Technology Co., Ltd"
}, {
    "id": "id-2f5DdE2b-1",
    "date": "2013-06-12",
    "percent": 1.862,
    "documentAmount": 2022,
    "currency": "CNY",
    "company": "Ecquaria Technology Co., Ltd"
}, {
    "id": "id-2f5DdE2b-2",
    "date": "2013-06-12",
    "percent": 1.862,
    "documentAmount": 2022,
    "currency": "CNY",
    "company": "Ecquaria Technology Co., Ltd"
}, {
    "id": "id-2f5DdE2b-3",
    "date": "2013-06-12",
    "percent": 1.862,
    "documentAmount": 2022,
    "currency": "CNY",
    "company": "Ecquaria Technology Co., Ltd"
}, {
    "id": "id-2f5DdE2b-4",
    "date": "2013-06-12",
    "percent": 1.862,
    "documentAmount": 2022,
    "currency": "CNY",
    "company": "Ecquaria Technology Co., Ltd"
}]

Data column

The Data column section manages the list of table columns. Each column entry supports the following properties:

Property	UI Control	Default	Description
Title	i18n setter	-	Sets the column header text. Required. Supports internationalisation.
Data type	Dropdown (`Text` \| `Number` \| `Money` \| `Date` \| `Mobile phone number` \| `Currency` \| `Select` \| `Percentage` \| `Progress bar` \| `Link` \| `Pop-up notification` \| `Label` \| `None`)	`Text`	Specifies how the column data is formatted and displayed. Required.
Select datasource	Expression input	-	Sets the datasource for selectable options. Visible only when Data type is `Select`.
Default value	Text input	-	Sets the default selected value. Visible only when Data type is `Select`.
Width	Number input	-	Sets the column width in pixels.
Label color	Dropdown (`Blue` \| `Green` \| `Orange` \| `Red` \| `Turquoise` \| `Yellow`)	-	Sets the tag label color. Visible only when Data type is `Label`.
Data field	Text input	`dataIndex`	Specifies the field name in the datasource that this column maps to.
Alignment	Radio group (`Left` \| `Center` \| `Right`)	-	Sets the horizontal alignment of cell content.
Column freeze	Radio group (`Left` \| `None` \| `Right`)	`None`	Freezes the column so it remains visible when scrolling horizontally.
Time format	Dropdown (`Yyyy mm dd hh:mm:ss` \| `Yyyy mm dd hh:mm` \| `Yyyy mm dd` \| `Yyyy mm` \| `Yyyy`)	-	Sets the date display format. Visible only when Data type is `Date`.
Tooltip description	i18n setter	-	Sets a tooltip shown on the column header. Supports internationalisation.
Allow sorting	Toggle switch	Off	Enables ascending and descending sorting on this column.
Allow searching	Toggle switch	Off	Toggles the visibility of a search box for this column.
Cell	Function Binding	-	Binds a custom function to render the cell content.
Render	Toggle switch + Function Binding	On	When enabled, binds a custom render function with parameters (`value,index,record`) to control how the cell is displayed.
Advanced settings	Behaviour setter	-	Configures click behaviour for the column. Visible only when Data type is `Link` or `Pop-up notification`. Contains the following sub-properties:

Advanced settings when Data type is Link

Property	UI Control	Default	Description
Event	Dropdown	`onCellClick`	Sets the event that triggers the configured behaviour.
Type	Radio group (`Dialog` \| `Link`)	`Link`	Determines the action type.
Target	Radio group (`Same window` \| `New window`)	`Same window`	Sets whether the link opens in the same window or a new window.
Target type	Radio group (`Internal page` \| `URL`)	`Internal page`	Sets whether the destination is an internal page or an external URL.
Destination	Text input	-	Sets the destination URL.

Advanced settings when Data type is Pop-up notification

Property	UI Control	Default	Description
Event	Dropdown	`onCellClick`	Sets the event that triggers the configured behaviour.
Type	Radio group (`Dialog` \| `Link`)	`Dialog`	Determines the action type.
Bind popup	Dropdown	-	Binds a pop-up window to display when the cell is clicked.

Action column buttons

The Action column buttons section is an array editor that configures the row-level action buttons. It has the following top-level properties:

Property	UI Control	Default	Description
Text mode	Toggle switch	On	Displays action buttons as text links rather than icon buttons.
Button visibility	Number input	`3`	Sets the maximum number of action buttons shown before additional buttons are collapsed into a menu.

You can click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove a button, or use the grip icon to reorder buttons. Click "Add an item +" to add a new action button. Each item has:

Property	UI Control	Default	Description
Text	i18n setter	Auto-generated	Sets the display text of the action button. Supports internationalisation.
Type	Dropdown (`Normal` \| `Primary` \| `Secondary`)	`Normal`	Sets the button style type.
Disabled	Toggle switch	Off	When enabled, prevents user interaction with the button.
Hidden	Toggle switch	Off	When enabled, hides the button from the action column.
Click event	Function Binding	-	Binds a function to be called when the button is clicked.
Filter	Function Binding	-	Binds a function to conditionally control the visibility of the button per row.

Action column

The Action column section configures the action column layout:

Property	UI Control	Default	Description
Title	i18n setter	`Operation`	Sets the header text of the action column. Supports internationalisation.
Width	Number input	-	Sets the width of the action column in pixels.
Column freeze	Radio group (`Left` \| `None` \| `Right`)	-	Freezes the action column when scrolling horizontally.

Action bar button

The Action bar button section is an array editor that configures the toolbar buttons above the table. It has the following top-level properties:

Property	UI Control	Default	Description
Text mode	Toggle switch	Off	Displays toolbar buttons as text links rather than icon buttons.
Button visibility	Number input	`3`	Sets the maximum number of toolbar buttons shown before additional buttons are collapsed.

Property	UI Control	Default	Description
Text	i18n setter	Auto-generated	Sets the display text of the toolbar button. Supports internationalisation.
Type	Dropdown (`Normal` \| `Primary` \| `Secondary`)	`Primary`	Sets the button style type.
Disabled	Toggle switch	Off	When enabled, prevents user interaction with the button.
Hidden	Toggle switch	Off	When enabled, hides the button from the toolbar.
Click event	Function Binding	-	Binds a function to be called when the button is clicked.

Datasource

The Datasource section configures the data displayed in the table.

Property	UI Control	Default	Description
Datasource	JSON setter	See code sample	Sets the data array to display. Each array item represents a row.

Datasource default code sample

[{
    "id": "id-2f5DdE2b-0",
    "date": "2013-06-12",
    "percent": 1.862,
    "documentAmount": 2022,
    "currency": "CNY",
    "company": "Ecquaria Technology Co., Ltd"
}, 
{
    "id": "id-2f5DdE2b-1",
    "date": "2013-06-12",
    "percent": 1.862,
    "documentAmount": 2022,
    "currency": "CNY",
    "company": "Ecquaria Technology Co., Ltd"
}, 
{
    "id": "id-2f5DdE2b-2",
    "date": "2013-06-12",
    "percent": 1.862,
    "documentAmount": 2022,
    "currency": "CNY",
    "company": "Ecquaria Technology Co., Ltd"
}, 
{
    "id": "id-2f5DdE2b-3",
    "date": "2013-06-12",
    "percent": 1.862,
    "documentAmount": 2022,
    "currency": "CNY",
    "company": "Ecquaria Technology Co., Ltd"
}, 
{
    "id": "id-2f5DdE2b-4",
    "date": "2013-06-12",
    "percent": 1.862,
    "documentAmount": 2022,
    "currency": "CNY",
    "company": "Ecquaria Technology Co., Ltd"
}]

Pagination configuration

The Pagination configuration section configures the table's pagination:

Property	UI Control	Default	Description
Show pagination	Toggle switch	On	Controls whether the pagination bar is displayed.
Type	Radio group (`Normal` \| `Simple` \| `Mini`)	`Normal`	Specifies the pagination style.
Navigation button style	Dropdown (`Normal` \| `Arrow-only` \| `Arrow-prev-only` \| `No-border`)	`Arrow-only`	Defines the style of the previous and next navigation buttons.
Size	Radio group (`Small` \| `Medium` \| `Large`)	`Medium`	Controls the visual size of the pagination bar.
Total records	Number input	`100`	Sets the total number of records in the dataset.
Current page	Number input	`1`	Sets the currently displayed page number.
Page size	Select / Number input	`20`	Specifies the number of rows displayed per page.
Selector type	Radio group (`None` \| `Filter` \| `Dropdown`)	`None`	Sets the type of page size selector control.
Page size list	Text input	`5,10,20`	Specifies the comma-separated list of available page size options (for example, `5,10,20`).
Page size alignment	Radio group (`Start` \| `End`)	`End`	Specifies the position of the page size selector.
Single page hide	Toggle switch	Off	Hides the pagination bar when only one page of data is available.
Show jump	Toggle switch	On	Shows a Go to Page input field in the pagination bar.
Jump link	Text input	-	Sets a URL template for page number buttons, using `{page}` as a placeholder.
OnChange	Function Binding	-	Customises the callback function triggered when the page number changes.
OnPageSizeChange	Function Binding	-	Customises the callback function triggered when the page size changes.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
New row position	Radio group (`Top` \| `Bottom`)	-	Specifies where new rows are inserted in the table when added.
Selection mode	Radio group (`None` \| `Multiple row` \| `Single row`)	`None`	Configures row selection behaviour.
Show row number	Toggle switch	Off	Displays a row number column on the left side of the table.
Enable settings button	Toggle switch	On	Shows a settings button in the table toolbar for column visibility control.
Empty value content	i18n setter	-	Sets the text displayed in cells that have no data. Supports internationalisation.
Table After Label	i18n setter	-	Sets a label displayed after the table. Supports internationalisation.
Max rows	Number input	-	Sets the maximum number of rows allowed in the table.
Min rows	Number input	-	Sets the minimum number of rows required in the table.
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML `name` attribute for form identification. Auto-generated from the component title. You can override this value manually.

Global style (Props sub-section)

Within the Props tab, a Global style collapsible section provides:

Property	UI Control	Default	Description
Show border	Toggle switch	Off	Displays borders around table cells and the table container.
Alternate row color	Toggle switch	Off	Applies alternating background colors to odd and even rows.
Fixed header	Toggle switch	Off	Keeps the table header fixed at the top when scrolling vertically.
Max body height	Number input	-	Sets the maximum height of the table body in pixels. Visible only when Fixed header is enabled.
Spacing	Radio group (`Compact` \| `Normal`)	`Normal`	Controls the row height and cell padding of the table.
Responsive table type	Radio group (`Default` \| `Collapse Row`)	`Default`	Sets the responsive layout behaviour on small screens.
Responsive breakpoint (px)	Number input	`500`	Sets the screen width in pixels at which the responsive layout activates. Visible only when Responsive table type is `Collapse Row`.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the EditTable without writing boilerplate code.

Binding an event

Click "Component native event" to select from the EditTable's supported events:
- onSave — Triggered when a row edit is saved
- onRemove — Triggered when a row is deleted
- onSort — Triggered when the sort order changes
- onSearch — Triggered when a column search is performed
The Event Binding window opens, allowing you to select an event and apply parameter settings.
After selecting an event, it appears in the Existing event table.

You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onSave handler is triggered when a row edit is saved:

onSave(row) {
  // row: the saved row data object
}

The onRemove handler is triggered when a row is deleted:

onRemove(row) {
  // row: the deleted row data object
}

The onSort handler is triggered when the sort order changes:

onSort(dataIndex, order) {
  // dataIndex: the field being sorted
  // order: 'asc' or 'desc'
}

The onSearch handler is triggered when a column search is performed:

onSearch(value, dataIndex) {
  // value: the search input value
  // dataIndex: the field being searched
}

Advanced

For more information, refer to Advanced.

ExpandTable

The ExpandTable component displays a parent-child table where each parent row can be expanded to reveal a nested child table. It supports configurable columns, action buttons, pagination, and row expansion state. In the App Designer, select an ExpandTable on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the ExpandTable. The table is organised into collapsible sections.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Data column	Array setter	-	Defines the columns displayed in the parent table. Expand to add, remove, or configure columns. Refer to Data column.
Sort icons desc	Icon setter	`descending`	Sets a custom icon for the descending sort state.
Sort icons asc	Icon setter	`ascending`	Sets a custom icon for the ascending sort state.
Action column buttons	Object setter	-	Configures the buttons in the row-level action column. Refer to Action column buttons.
Action column	Object setter	-	Configures the layout and behaviour of the action column. Refer to Action column.
Action bar button	Object setter	-	Configures the toolbar buttons displayed above the table. Refer to Action bar button.
Datasource	Switch setter (Array setter / Expression input / Variable input)	-	Sets the table data including child table configuration per row. Refer to Datasource.
Pagination configuration	Object setter	-	Configures the pagination controls. Refer to Pagination configuration.

Datasource

The Datasource section configures the data displayed in the table, including the child table configuration for each row. When you click the pencil icon on a datasource item, the item editor opens showing the row's field values and a ChildTable section.

Each datasource item displays fields that correspond to the columns defined in the Data column section (for example, company, documentAmount, currency, percent, date). These fields use text inputs and support variable binding.

Below the field values, a ChildTable section configures the nested child table displayed when the parent row is expanded. It contains the following sub-sections:

Sub-section	Description
Data column	Defines the columns displayed in the child table. Each column has a Title and Data type. The available data types are the same as the parent table's Data column.
Sort icons desc	Sets a custom icon for the descending sort state in the child table.
Sort icons asc	Sets a custom icon for the ascending sort state in the child table.
Action column buttons	Configures the row-level action buttons in the child table, including Text mode and Button visibility.
Action column	Configures the child table's action column layout, including Title, Width, and Column freeze.
Action bar button	Configures toolbar buttons above the child table, including Text mode and Button visibility.
DataSource	Sets the data array for the child table rows.
Pagination configuration	Configures pagination for the child table. The available properties are the same as the parent table's Pagination configuration.
Advanced	Provides advanced settings for the child table, including Show row number, Enable settings button, and Empty value content.
Global style	Provides global styling for the child table, including Show border, Alternate row color, and Fixed header.

Data column

The Data column section manages the list of table columns. Each column entry supports the following properties:

Property	UI Control	Default	Description
Title	i18n setter	-	Sets the column header text. Required. Supports internationalisation.
Data type	Dropdown (`Text` \| `Number` \| `Money` \| `Date` \| `Mobile phone number` \| `Currency` \| `Select` \| `Percentage` \| `Progress bar` \| `Link` \| `Pop-up notification` \| `Label`)	`Text`	Specifies how the column data is formatted and displayed. Required.
Select datasource	Expression input	-	Sets the datasource for selectable options. Visible only when Data type is `Select`.
Default value	Text input	-	Sets the default selected value. Visible only when Data type is `Select`.
Width	Number input	-	Sets the column width in pixels.
Label color	Dropdown (`Blue` \| `Green` \| `Orange` \| `Red` \| `Turquoise` \| `Yellow`)	-	Sets the tag label color. Visible only when Data type is `Label`.
Data field	Text input	`dataIndex`	Specifies the field name in the datasource that this column maps to.
Alignment	Radio group (`Left` \| `Center` \| `Right`)	-	Sets the horizontal alignment of cell content.
Column freeze	Radio group (`Left` \| `None` \| `Right`)	`None`	Freezes the column so it remains visible when scrolling horizontally.
Time format	Dropdown (`Yyyy mm dd hh:mm:ss` \| `Yyyy mm dd hh:mm` \| `Yyyy mm dd` \| `Yyyy mm` \| `Yyyy`)	-	Sets the date display format. Visible only when Data type is `Date`.
Tooltip description	i18n setter	-	Sets a tooltip shown on the column header. Supports internationalisation.
Allow sorting	Toggle switch	Off	Enables ascending and descending sorting on this column.
Allow searching	Toggle switch	Off	Toggles the visibility of a search box for this column.
Advanced settings	Behaviour setter	-	Configures click behaviour for the column. Visible only when Data type is `Link` or `Pop-up notification`. Contains the following sub-properties:

Advanced settings when Data type is Link

Property	UI Control	Default	Description
Event	Dropdown	`onCellClick`	Sets the event that triggers the configured behaviour.
Type	Radio group (`Dialog` \| `Link`)	`Link`	Determines the action type.
Target	Radio group (`Same window` \| `New window`)	`Same window`	Sets whether the link opens in the same window or a new window.
Target type	Radio group (`Internal page` \| `URL`)	`Internal page`	Sets whether the destination is an internal page or an external URL.
Destination	Text input	-	Sets the destination URL.

Advanced settings when Data type is Pop-up notification

Property	UI Control	Default	Description
Event	Dropdown	`onCellClick`	Sets the event that triggers the configured behaviour.
Type	Radio group (`Dialog` \| `Link`)	`Dialog`	Determines the action type.
Bind popup	Dropdown	-	Binds a pop-up window to display when the cell is clicked.

Action column buttons

The Action column buttons section configures the row-level action buttons:

Property	UI Control	Default	Description
Text mode	Toggle switch	On	Displays action buttons as text links rather than icon buttons.
Button visibility	Number input	`3`	Sets the maximum number of action buttons shown before additional buttons are collapsed into a menu.

Each item in the Action column buttons array has the following properties:

Property	UI Control	Default	Description
Text	i18n setter	Auto-generated (for example, `check`, `edit`, `delete`)	Sets the display text of the action button. Supports internationalisation.
Type	Dropdown (`Normal` \| `Primary` \| `Secondary`)	`Primary`	Sets the button style type.
Disabled	Toggle switch	Off	When enabled, prevents user interaction with the button.
Hidden	Toggle switch	Off	When enabled, hides the button from the action column.
Click event	Function Binding	-	Binds a function to be called when the button is clicked.
Filter	Function Binding	-	Binds a function to conditionally control the visibility of the button per row.

Action column

The Action column section configures the action column layout:

Property	UI Control	Default	Description
Title	i18n setter	`Operation`	Sets the header text of the action column. Supports internationalisation.
Width	Number input	-	Sets the width of the action column in pixels.
Column freeze	Radio group (`Left` \| `None` \| `Right`)	-	Freezes the action column when scrolling horizontally.

Action bar button

The Action bar button section configures the toolbar buttons above the table:

Property	UI Control	Default	Description
Text mode	Toggle switch	Off	Displays toolbar buttons as text links rather than icon buttons.
Button visibility	Number input	`3`	Sets the maximum number of toolbar buttons shown before additional buttons are collapsed.

Property	UI Control	Default	Description
Text	i18n setter	Auto-generated	Sets the display text of the toolbar button. Supports internationalisation.
Type	Dropdown (`Normal` \| `Primary` \| `Secondary`)	`Primary`	Sets the button style type.
Disabled	Toggle switch	Off	When enabled, prevents user interaction with the button.
Hidden	Toggle switch	Off	When enabled, hides the button from the toolbar.
Click event	Function Binding	-	Binds a function to be called when the button is clicked.

Datasource

The Datasource section sets the data array for the child table rows. Each item in the array represents a row in the child table. When you click the pencil icon on a datasource item, the item editor opens showing the row's field values.

Each datasource item displays fields that correspond to the columns defined in the child table's Data column section (for example, company, documentAmount, currency, percent, date). These fields use text inputs and support variable binding.

You can click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove a row, or use the grip icon to reorder rows. Click "Add an item +" to add a new data row.

Pagination configuration

The Pagination configuration section configures the table's pagination:

Property	UI Control	Default	Description
Show pagination	Toggle switch	Off	Controls whether the pagination bar is displayed.
Type	Radio group (`Normal` \| `Simple` \| `Mini`)	`Normal`	Specifies the pagination style.
Navigation button style	Dropdown (`Normal` \| `Arrow-only` \| `Arrow-prev-only` \| `No-border`)	`Arrow-only`	Defines the style of the previous and next navigation buttons.
Size	Radio group (`Small` \| `Medium` \| `Large`)	`Medium`	Controls the visual size of the pagination bar.
Total records	Number input	`100`	Sets the total number of records in the dataset.
Current page	Number input	`1`	Sets the currently displayed page number.
Page size	Select / Number input	`20`	Specifies the number of rows displayed per page.
Selector type	Radio group (`None` \| `Filter` \| `Dropdown`)	`None`	Sets the type of page size selector control.
Page size list	Text input	`5,10,20`	Specifies the comma-separated list of available page size options.
Page size alignment	Radio group (`Start` \| `End`)	`End`	Specifies the position of the page size selector.
Single page hide	Toggle switch	Off	Hides the pagination bar when only one page of data is available.
Show jump	Toggle switch	On	Shows a Go to Page input field in the pagination bar.
Jump link	Text input	-	Sets a URL template for page number buttons, using `{page}` as a placeholder.
OnChange	Function Binding	-	Customises the callback function triggered when the page number changes.
OnPageSizeChange	Function Binding	-	Customises the callback function triggered when the page size changes.

Expand (Props sub-section)

Within the Props tab, an Expand collapsible section provides:

Property	UI Control	Default	Description
Open row keys	Array setter	-	Specifies the primary keys of rows that are currently expanded. Used as a controlled state, typically in conjunction with the `onRowOpen` event.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
Selection mode	Radio group (`None` \| `Multiple row` \| `Single row`)	`None`	Configures row selection behaviour.
Show row number	Toggle switch	Off	Displays a row number column on the left side of the table.
Enable settings button	Toggle switch	On	Shows a settings button in the table toolbar for column visibility control.
Empty value content	i18n setter	-	Sets the text displayed in cells that have no data. Supports internationalisation.
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML `name` attribute for form identification. Auto-generated from the component title. You can override this value manually.

Global style (Props sub-section)

Within the Props tab, a Global style collapsible section provides:

Property	UI Control	Default	Description
Show border	Toggle switch	Off	Displays borders around table cells and the table container.
Alternate row color	Toggle switch	Off	Applies alternating background colors to odd and even rows.
Fixed header	Toggle switch	Off	Keeps the table header fixed at the top when scrolling vertically.
Max body height	Number input	-	Sets the maximum height of the table body in pixels. Visible only when Fixed header is enabled.
Spacing	Radio group (`Compact` \| `Normal`)	`Normal`	Controls the row height and cell padding of the table.
Responsive table type	Radio group (`Default` \| `Collapse Row`)	`Default`	Sets the responsive layout behaviour on small screens.
Responsive breakpoint (px)	Number input	`500`	Sets the screen width in pixels at which the responsive layout activates. Visible only when Responsive table type is `Collapse Row`.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the ExpandTable without writing boilerplate code.

Binding an event

Click "Component native event" to select from the ExpandTable's supported events:
- onBodyScroll — Triggered when the user scrolls within the table body
- onSearch — Triggered when a column search is performed
- onSort — Triggered when the sort order changes
- onRowOpen — Triggered when a parent row is expanded or collapsed
The Event Binding window opens, allowing you to select an event and apply parameter settings.
After selecting an event, it appears in the Existing event table.

You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onBodyScroll handler is triggered when the table body is scrolled:

onBodyScroll(e) {
  // e: the scroll event object
}

The onSearch handler is triggered when a column search is performed:

onSearch(value, dataIndex) {
  // value: the search input value
  // dataIndex: the field being searched
}

The onSort handler is triggered when the sort order changes:

onSort(dataIndex, order) {
  // dataIndex: the field being sorted
  // order: 'asc' or 'desc'
}

The onRowOpen handler receives the currently expanded row keys, the key of the toggled row, a flag indicating whether the row was expanded or collapsed, and the data record of the toggled row:

onRowOpen(openRowKeys, currentRowKey, expanded, currentRecord) {
  // openRowKeys: array of currently expanded row keys
  // currentRowKey: the key of the row that was toggled
  // expanded: true when expanding, false when collapsing
  // currentRecord: the data object of the toggled row
}

Advanced

For more information, refer to Advanced.

FilterTable

The FilterTable component displays a query filter form that allows users to narrow down table data. It supports configurable filter fields, column layout, label alignment, and action buttons for search and reset. In the App Designer, select a FilterTable on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the FilterTable. The table is organised into collapsible sections.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Global configuration	Object setter	-	Configures the overall layout and behaviour of the filter form. Refer to Global configuration.
Form item	Array setter	-	Defines the filter fields displayed in the form. Refer to Form item.
Action item	Switch Setter (Array setter / Variable input)	-	Configures the action buttons in the filter form. Refer to Action item.
Action items configuration	Switch Setter (Object setter / Variable input)	-	Configures the visibility and position of the action buttons. Refer to Action items configuration.

Global configuration

The Global configuration section configures the overall layout and state of the filter form:

Property	UI Control	Default	Description
Allow filtering	Toggle switch	Off	Determines whether users can apply filters to the filter form.
State	Radio group (`Read only` \| `Editable`)	`Editable`	Sets whether the filter form fields are read-only or editable.
Column span	Radio group (`One column` \| `Two columns` \| `Three columns` \| `Four columns`)	-	Sets the number of columns in the filter form grid layout.
Alignment	Radio group (`Top` \| `Left` \| `Within`)	`Top`	Specifies how field labels are positioned relative to their input controls.
Title width	Number input	`4`	Sets the column span for label width in the grid layout. Visible only when Alignment is `Left`.
Title offset	Number input	-	Sets the horizontal offset for labels. Visible only when Alignment is `Left`.
Content width	Number input	-	Sets the column span for input control width. Visible only when Alignment is `Left`.
Content offset	Number input	-	Sets the horizontal offset for input controls. Visible only when Alignment is `Left`.
Text alignment	Radio group (`Left` \| `Right`)	-	Sets the horizontal alignment of label text. Visible only when Alignment is `Left`.

Form item

The Form item section defines the filter fields displayed in the form. Each item in the array has the following properties:

Property	UI Control	Default	Description
Component	Dropdown	`Input`	Sets the type of input control for the filter field.
Label	i18n setter	`Form item`	Sets the label text for the filter field. Supports internationalisation.

You can click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove a field, or use the grip icon to reorder fields. Click "Add an item +" to add a new filter field.

Action item

The Action item section configures the action buttons in the filter form. Each item in the array has the following properties:

Property	UI Control	Default	Description
Action	Dropdown (`Submit` \| `Ok` \| `Cancel` \| `Reset` \| `Custom`)	`Ok`	Sets the action performed when the button is clicked.
Type	Dropdown (`Normal` \| `Primary` \| `Secondary`)	`Normal`	Sets the button style type.

Action items configuration

The Action items configuration section configures the Search and Reset button display:

Property	UI Control	Default	Description
Button visibility	Number input	`3`	Sets the number of action buttons that are visible before the remainder are collapsed (minimum 1, maximum 6).

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML `name` attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the FilterTable without writing boilerplate code.

Binding an event

Click "Component native event" to select from the FilterTable's supported events:
- onExpand — Triggered when the filter form is expanded or collapsed
- onSearch — Triggered when the Search button is clicked
- onReset — Triggered when the Reset button is clicked
The Event Binding window opens, allowing you to select an event and apply parameter settings.
After selecting an event, it appears in the Existing event table.

You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onExpand handler is triggered when the filter form is expanded or collapsed:

onExpand(expanded) {
  // expanded: true when the form is expanded, false when collapsed
}

The onSearch handler is triggered when the Search button is clicked:

onSearch(values) {
  // values: object containing the current filter field values
}

The onReset handler is triggered when the Reset button is clicked:

onReset() {
  // called when the user clicks the Reset button
}

Advanced

For more information, refer to Advanced.

GroupTable

The GroupTable component displays a table with rows organised into labelled groups. Each group has a header label, an optional trailing label, and its own set of data rows. It supports configurable columns, action buttons, pagination, and row selection. In the App Designer, select a GroupTable on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the GroupTable. The table is organised into collapsible sections.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Data column	Switch Setter (Array setter / Variable input)	-	Defines the columns displayed in the table. Expand to add, remove, or configure columns. Refer to Data column.
Sort icons desc	Icon setter	`descending`	Sets a custom icon for the descending sort state.
Sort icons asc	Icon setter	`ascending`	Sets a custom icon for the ascending sort state.
Action column buttons	Switch Setter (Object setter / Variable input)	-	Configures the buttons in the row-level action column. Refer to Action column buttons.
Action bar button	Switch Setter (Object setter / Variable input)	-	Configures the toolbar buttons displayed above the table. Refer to Action bar button.
Hide Setting Buttons	Toggle switch	Off	Hides the column settings button from the table toolbar.
Action column	Switch Setter (Object setter / Variable input)	-	Configures the layout and behaviour of the action column. Refer to Action column.
Group content	Switch Setter (Array setter / Variable input)	-	Defines the groups and their row data. Refer to Group content.
Empty value content	Toggle switch	On	Enables a custom message when the table has no data.
Empty content	i18n setter	`No data`	Sets the message displayed when the table has no data. Visible only when Empty value content is enabled. Supports internationalisation.

Data column

The Data column section manages the list of table columns. Each column entry supports the following properties:

Property	UI Control	Default	Description
Title	i18n setter	-	Sets the column header text. Required. Supports internationalisation.
Data type	Dropdown (`Text` \| `Number` \| `Money` \| `Date` \| `Mobile phone number` \| `Currency` \| `Select` \| `Percentage` \| `Progress bar` \| `Link` \| `Pop-up notification` \| `Label` \| `None`)	`Text`	Specifies how the column data is formatted and displayed. Required.
Time format	Dropdown (`Yyyy mm dd hh:mm:ss` \| `Yyyy mm dd hh:mm` \| `Yyyy mm dd` \| `Yyyy mm` \| `Yyyy`)	-	Sets the display format for date values. Visible only when Data type is `Date`.
Select datasource	Expression input	-	Sets the datasource for selectable options. Visible only when Data type is `Select`.
Default value	Text input	-	Sets the default selected value. Visible only when Data type is `Select`.
Width	Number input	-	Sets the column width in pixels.
Label colour	Dropdown (`Blue` \| `Green` \| `Orange` \| `Red` \| `Turquoise` \| `Yellow`)	-	Sets the tag label colour. Visible only when Data type is `Label`.
Data field	Text input	`dataIndex`	Specifies the field name in the datasource that this column maps to.
Alignment	Radio group (`Left` \| `Center` \| `Right`)	-	Sets the horizontal alignment of cell content.
Column freeze	Radio group (`Left` \| `None` \| `Right`)	`None`	Freezes the column so it remains visible when scrolling horizontally.
Tooltip description	i18n setter	-	Sets a tooltip shown on the column header. Supports internationalisation.
Allow sorting	Toggle switch	Off	Enables ascending and descending sorting on this column.
Allow searching	Toggle switch	Off	Toggles the visibility of a search box for this column.
Cell	Function Binding	-	Binds a custom function to render the cell content.
Render	Toggle switch + Function Binding	On	When enabled, binds a custom render function with parameters (`value,index,record`) to control how the cell is displayed.

Advanced settings when Data type is Link

Property	UI Control	Default	Description
Event	Dropdown	`onCellClick`	Sets the event that triggers the configured behaviour.
Type	Radio group (`Dialog` \| `Link`)	`Link`	Determines the action type.
Target	Radio group (`Same window` \| `New window`)	`Same window`	Sets whether the link opens in the same window or a new window.
Target type	Radio group (`Internal page` \| `URL`)	`Internal page`	Sets whether the destination is an internal page or an external URL.
Destination	Text input	-	Sets the destination URL.

Advanced settings when Data type is Pop-up notification

Property	UI Control	Default	Description
Event	Dropdown	`onCellClick`	Sets the event that triggers the configured behaviour.
Type	Radio group (`Dialog` \| `Link`)	`Dialog`	Determines the action type.
Bind popup	Dropdown	-	Binds a pop-up window to display when the cell is clicked.

Action column buttons

The Action column buttons section configures the row-level action buttons:

Property	UI Control	Default	Description
Text mode	Toggle switch	On	Displays action buttons as text links rather than icon buttons.
Button visibility	Number input	`3`	Sets the maximum number of action buttons shown before additional buttons are collapsed into a menu.

Each item in the Action column buttons array has the following properties:

Property	UI Control	Default	Description
Text	i18n setter	`operation`	Sets the display text of the action button. Supports internationalisation.
Type	Dropdown (`Normal` \| `Primary` \| `Secondary`)	`Normal`	Sets the button style type.
Disabled	Toggle switch	Off	When enabled, prevents user interaction with the button.
Hidden	Toggle switch	Off	When enabled, hides the button from the action column.
Click event	Function Binding	-	Binds a function to be called when the button is clicked.
Filter	Function Binding	-	Binds a function to conditionally control the visibility of the button per row.

Action bar button

The Action bar button section configures the toolbar buttons above the table:

Property	UI Control	Default	Description
Text mode	Toggle switch	Off	Displays toolbar buttons as text links rather than icon buttons.
Button visibility	Number input	`3`	Sets the maximum number of toolbar buttons shown before additional buttons are collapsed.

Property	UI Control	Default	Description
Text	i18n setter	`operation`	Sets the display text of the toolbar button. Supports internationalisation.
Type	Dropdown (`Normal` \| `Primary` \| `Secondary`)	`Normal`	Sets the button style type.
Disabled	Toggle switch	Off	When enabled, prevents user interaction with the button.
Hidden	Toggle switch	Off	When enabled, hides the button from the toolbar.
Click event	Function Binding	-	Binds a function to be called when the button is clicked.

Action column

The Action column section configures the action column layout:

Property	UI Control	Default	Description
Title	i18n setter	`Operation`	Sets the header text of the action column. Supports internationalisation.
Width	Number input	-	Sets the width of the action column in pixels.
Column freeze	Radio group (`Left` \| `None` \| `Right`)	-	Freezes the action column when scrolling horizontally.

Group content

The Group content section defines the groups and their row data. Each group entry supports the following properties:

Property	UI Control	Default	Description
Header label	i18n setter	`title`	Sets the heading text displayed at the top of the group. Required. Supports internationalisation.
Trailing label	i18n setter	`tail`	Sets the text displayed at the bottom of the group. Required. Supports internationalisation.
Group id	i18n setter	-	Sets a unique identifier for the group. Required.
Datasource	Switch Setter (Array setter / Variable input)	Auto-generated	Defines the row data for this group. The available fields are determined by the configured data columns. Click the pencil icon on a row to edit its field values. Refer to Datasource item configuration.

You can click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove a group, or use the grip icon to reorder groups. Click "Add an item +" to add a new group.

Datasource item configuration

Each row in the Datasource array displays fields that correspond to the columns defined in the Data column section. For example, if the table has columns for id, company, documentAmount, currency, percent, and date, each datasource row will have the following editable fields:

Property	UI Control	Default	Description
id	i18n setter	`This is a text`	Sets the row identifier. Supports internationalisation.
company	i18n setter	`This is the link`	Sets the company name. Supports internationalisation.
documentAmount	Text input	`123213.1232`	Sets the document amount.
currency	i18n setter	`CNY`	Sets the currency code. Supports internationalisation.
percent	Text input	`0.64`	Sets the percentage value.
date	i18n setter	`2021-08-18 20:52:33`	Supports internationalisation.
dataIndex	i18n setter	`This is a text`	Sets the `dataIndex` value. Supports internationalisation.

note

The fields shown in the datasource item editor are dynamic and depend on the columns configured in the Data column section.

Row selector (Props sub-section)

Within the Props tab, a Row selector collapsible section provides:

Property	UI Control	Default	Description
Enable row selection	Toggle switch	Off	Enables row selection checkboxes or radio buttons in the table.
Has children selection	Toggle switch	Off	Determines whether selection controls are rendered on child rows within groups.
Customise selection	Function Binding	-	Customises the default properties (such as `disabled`) of each row's selection control.
Primary Key	i18n setter	`id`	Specifies the field used as the unique identifier for row selection.
Selected row keys	Array setter	-	Sets the list of currently selected row primary keys.

Pagination configuration

The Pagination configuration section configures the table's pagination:

Property	UI Control	Default	Description
Show pagination	Toggle switch	On	Controls whether the pagination bar is displayed.
Type	Radio group (`Normal` \| `Simple` \| `Mini`)	`Normal`	Specifies the pagination style.
Navigation button style	Dropdown (`Normal` \| `Arrow-only` \| `Arrow-prev-only` \| `No-border`)	`Arrow-only`	Defines the style of the previous and next navigation buttons.
Size	Radio group (`Small` \| `Medium` \| `Large`)	`Medium`	Controls the visual size of the pagination bar.
Total records	Number input	`100`	Sets the total number of records in the dataset.
Current page	Number input	`1`	Sets the currently displayed page number.
Page size	Select / Number input	`20`	Specifies the number of rows displayed per page.
Selector type	Radio group (`None` \| `Filter` \| `Dropdown`)	`None`	Sets the type of page size selector control.
Page size list	Text input	`5,10,20`	Specifies the comma-separated list of available page size options.
Page size alignment	Radio group (`Start` \| `End`)	`End`	Specifies the position of the page size selector.
Single page hide	Toggle switch	Off	Hides the pagination bar when only one page of data is available.
Show jump	Toggle switch	On	Shows a Go to Page input field in the pagination bar.
Jump link	Text input	-	Sets a URL template for page number buttons, using `{page}` as a placeholder.
OnChange	Function Binding	-	Customises the callback function triggered when the page number changes.
OnPageSizeChange	Function Binding	-	Customises the callback function triggered when the page size changes.

Style (Props sub-section)

Within the Props tab, a Style collapsible section provides:

Property	UI Control	Default	Description
Responsive table type	Radio group (`Default` \| `Collapse Row`)	`Default`	Sets the responsive layout behaviour on small screens.
Responsive breakpoint (px)	Number input	`500`	Sets the screen width in pixels at which the responsive layout activates. Visible only when Responsive table type is `Collapse Row`.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML `name` attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the GroupTable without writing boilerplate code.

Binding an event

Click "Component native event" to select from the GroupTable's supported events:
- onSelect — Triggered when a row is selected or deselected
- onSelectAll — Triggered when the select-all checkbox is toggled
- onSort — Triggered when the sort order changes
- onRowClick — Triggered when a row is clicked
- onRowMouseEnter — Triggered when the mouse enters a row
- onRowMouseLeave — Triggered when the mouse leaves a row
The Event Binding window opens, allowing you to select an event and apply parameter settings.
After selecting an event, it appears in the Existing event table.

You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onSelect handler is triggered when a row's selection state changes:

onSelect(selectedRowKeys, record, selected) {
  // selectedRowKeys: array of currently selected row keys
  // record: the data object of the toggled row
  // selected: true when selected, false when deselected
}

The onSelectAll handler is triggered when the select-all control is toggled:

onSelectAll(selected, selectedRowKeys) {
  // selected: true when all rows are selected, false when deselected
  // selectedRowKeys: array of all selected row keys
}

The onSort handler is triggered when the sort order changes:

onSort(dataIndex, order) {
  // dataIndex: the field being sorted
  // order: 'asc' or 'desc'
}

The onRowClick handler is triggered when a row is clicked:

onRowClick(record, index, e) {
  // record: the data object of the clicked row
  // index: the row index
  // e: the native click event object
}

The onRowMouseEnter handler is triggered when the mouse enters a row:

onRowMouseEnter(record, index, e) {
  // record: the data object of the row
  // index: the row index
  // e: the native mouse event object
}

The onRowMouseLeave handler is triggered when the mouse leaves a row:

onRowMouseLeave(record, index, e) {
  // record: the data object of the row
  // index: the row index
  // e: the native mouse event object
}

Advanced

For more information, refer to Advanced.

Last updated on 20 May 2026

EditTable​

Props​

Datasource default code sample​

Data column​

Advanced settings when Data type is Link​

Advanced settings when Data type is Pop-up notification​

Action column buttons​

Action column​

Action bar button​

Datasource​

Datasource default code sample​

Pagination configuration​

Advanced (Props sub-section)​

Global style (Props sub-section)​

Styles​

Events​

Binding an event​

Handler signatures​

Advanced​

ExpandTable​

Props​

Datasource​

Data column​

Advanced settings when Data type is Link​

Advanced settings when Data type is Pop-up notification​

Action column buttons​

Action column​

Action bar button​

Datasource​

Pagination configuration​

Expand (Props sub-section)​

Advanced (Props sub-section)​

Global style (Props sub-section)​

Styles​

Events​

Binding an event​

Handler signatures​

Advanced​

FilterTable​

Props​

Global configuration​

Form item​

Action item​

Action items configuration​

Advanced (Props sub-section)​

Styles​

Events​

Binding an event​

Handler signatures​

Advanced​

GroupTable​

Props​

Data column​

Advanced settings when Data type is Link​

Advanced settings when Data type is Pop-up notification​

Action column buttons​

Action bar button​

Action column​

Group content​

Datasource item configuration​

Row selector (Props sub-section)​

Pagination configuration​

Style (Props sub-section)​

Advanced (Props sub-section)​

Styles​

Events​

Binding an event​

Handler signatures​

Advanced​

EditTable

Props

Datasource default code sample

Data column

Advanced settings when Data type is Link

Advanced settings when Data type is Pop-up notification

Action column buttons

Action column

Action bar button

Datasource

Datasource default code sample

Pagination configuration

Advanced (Props sub-section)

Global style (Props sub-section)

Styles

Events

Binding an event

Handler signatures

Advanced

ExpandTable

Props

Datasource

Data column

Advanced settings when Data type is Link

Advanced settings when Data type is Pop-up notification

Action column buttons

Action column

Action bar button

Datasource

Pagination configuration

Expand (Props sub-section)

Advanced (Props sub-section)

Global style (Props sub-section)

Styles

Events

Binding an event

Handler signatures

Advanced

FilterTable

Props

Global configuration

Form item

Action item

Action items configuration

Advanced (Props sub-section)

Styles

Events

Binding an event

Handler signatures

Advanced

GroupTable

Props

Data column

Advanced settings when Data type is Link

Advanced settings when Data type is Pop-up notification

Action column buttons

Action bar button

Action column

Group content

Datasource item configuration

Row selector (Props sub-section)

Pagination configuration

Style (Props sub-section)

Advanced (Props sub-section)

Styles

Events

Binding an event

Handler signatures

Advanced