Ⅰ. View Characteristics

• View Type: TABLE
• Data Type: List
• DSL Feature: Only represents the relative order of elements; no layout functionality.
• Common Behaviors for Data Structures:
  • Query Behaviors: Pagination, sorting, searching.
  • Interaction Behaviors: Single selection, multiple selections.
• Table-Specific Behaviors:
  • Interaction Behaviors: Inline editing, tree table, expandable rows, etc.
• Common Interfaces: (Default Data Manager Functions)
  • queryPage: Supports query functions such as pagination, sorting, and searching.
  • create: Inline editing for creation. (pk is null)
  • update: Inline editing for updates. (pk is not null)
  • delete: Delete action.

Ⅱ. DSL Structure

A simplified view can be structured as follows: ("Simplified" means each tag has fewer attributes, not fewer nodes.)

<view type="TABLE" model="demo.DemoModel" name="demo_table_view">
    <template slot="searchFields">
        <field data="code" />
        <field data="name" />
    </template>
    <template slot="actions">
        <action name="redirectCreatePage" label="创建" />
        <action name="delete" label="删除" />
    </template>
    <template slot="fields">
        <field data="id" invisible="true" />
        <field data="code" />
        <field data="name" />
    </template>
    <template slot="rowActions">
        <action name="redirectUpdatePage" label="编辑" />
        <action name="redirectDetailPage" label="详情" />
    </template>
</view>

• In this DSL, fields and actions are defined based on the demo.DemoModel model, and placed in corresponding positions through slots provided by the layout.
• The top-to-bottom order of elements in a slot represents their relative positions; changing the sequence will change their rendered position on the page.
• The field tag uses the data attribute to declare the model’s corresponding field, which maps to the ModelField#field field code.
• The action tag uses the name attribute to declare the model’s corresponding action, which maps to the Action#name action name. All action types inherit from the Action model. The label attribute specifies the text displayed for the action on the page; if not defined, the system retrieves the text in the following order: label > displayName > name.

Tip

The DSL chapter provides a detailed introduction to slots and the working principles of layouts and DSL. All slot names here are derived from the default layout.

For more information about Layouts, please refer to: Layout

For more information about DSL, please refer to: DSL

Ⅲ. Default Field Components

In the above DSL, we did not specify the widget attribute. In this case, the Widget framework will obtain the corresponding default component based on the field metadata attributes. The following lists all default components currently used in Table views:

Field Type	Multi-value	Default Component	Read-only TypeScript Class	Edit-mode TypeScript Class
Text (STRING)	No	Text (Input)	TableStringFieldWidget	FormStringInputFieldWidget
	Yes	Tag (Tag)	TableStringTagFieldWidget	FormStringMultiTagFieldWidget
Multi-line Text (TEXT)	No	Multi-line Text (TextArea)	TableTextFieldWidget	TableEditorTextFieldWidget
Rich Text (HTML)	No	Rich Text (RichText)	TableHtmlRichTextFieldWidget	FormHtmlRichTextFieldWidget
Phone (PHONE)	No	Phone (Phone)	TableStringFieldWidget	FormPhoneFieldWidget
Email (EMAIL)	No	Email (Email)	TableStringFieldWidget	FormEmailFieldWidget
Integer (INTEGER)	No	Integer (Integer)	TableNumberWidget	FormIntegerFieldWidget
	Yes	Tag (Tag)	TableMultiNumberWidget	FormIntegerTagFieldWidget
Float (FLOAT)	No	Number (Float)	TableNumberWidget	FormFloatFieldWidget
	Yes	Tag (Tag)	TableMultiNumberWidget	-
Money (MONEY)	No	Currency (Currency)	TableCurrencyFieldWidget	FormMoneyFieldWidget
Boolean (BOOLEAN)	No	Text (Yes/No)	TableBooleanFieldWidget	FormBooleanSwitchFieldWidget
Enumeration (ENUM)	No	Dropdown Single-select (Select)	TableEnumFieldWidget	FormEnumFieldWidget
	Yes	Dropdown Multi-select (Select)	TableEnumFieldWidget	FormEnumMultiSelectFieldWidget
Date Time (DATETIME)	No	Date Time (DateTimePicker)	TableDateTimeFieldWidget	FormDateTimeFieldWidget
Date (DATE)	No	Date (DatePicker)	TableDateFieldWidget	FormDateFieldWidget
Time (TIME)	No	Time (TimePicker)	TableTimeFieldWidget	FormTimeFieldWidget
Year (YEAR)	No	Year (YearPicker)	TableYearFieldWidget	FormYearFieldWidget
Key-Value Pair (MAP)	No	Key-Value Pair (Map)	TableMapFieldWidget	FormMapFieldWidget
Many-to-One (M2O)	No	Dropdown Single-select (Select)	TableM2OFieldWidget	FormM2OSelectFieldWidget
One-to-Many (O2M)	Yes	Dropdown Multi-select (Select)	TableO2MFieldWidget	FormO2MSelectFieldWidget
Many-to-Many (M2M)	Yes	Dropdown Multi-select (Select)	TableM2MFieldWidget	FormM2MFieldSelectWidget

Ⅳ. Optional Field Components

For each field type, in addition to the corresponding default components mentioned above, there are additional components that can be used by specifying the widget attribute. The following lists the existing field components currently used in Table views:

Field Type	Multi-value	Component	Read-only TypeScript Class	Edit-mode TypeScript Class
Text (STRING)	No	Color (ColorPicker)	TableStringColorPickerFieldWidget	FormStringColorPickerFieldWidget
		File (Upload)	TableStringUploadWidget	FormStringUploadFieldWidget
		Image (UploadImg)	TableStringUploadImageFieldWidget	FormStringUploadImgFieldWidget
		Hyperlink (Hyperlinks)	TableStringHyperlinksFieldWidget	FormStringHyperlinksFieldWidget
		Media Player (MediaPlayer)	TableStringMediaPlayerFieldWidget	FormStringMediaPlayerFieldWidget
	Yes	File (Upload)	TableStringMultiUploadWidget	FormStringUploadFieldWidget
		Image (UploadImg)	TableStringMultiUploadImageFieldWidget	FormStringUploadImgFieldWidget
Multi-line Text (TEXT)	No	File (Upload)	TableStringMultiUploadWidget	FormStringUploadFieldWidget
		Image (UploadImg)	TableStringMultiUploadImageFieldWidget	FormStringUploadImgFieldWidget
Boolean (BOOLEAN)	No	Switch (Switch)	TableBooleanSwitchFieldWidget	FormBooleanSwitchFieldWidget
		Dropdown Single-select (Select)	TableBooleanSelectFieldWidget	FormBooleanSelectFieldWidget
		Radio Button (Radio)	TableBooleanRadioFieldWidget	FormBooleanRadioFieldWidget
Enumeration (ENUM)	No	Radio Button (Radio)	TableEnumFieldWidget	FormEnumRadioWidget
	Yes	Checkbox (Checkbox)	TableEnumFieldWidget	FormEnumMultiCheckboxFieldWidget
Many-to-One (M2O)	No	Tree Selection (TreeSelect)	TableM2OFieldWidget	FormM2OTreeSelectFieldWidget
		Cascading Selection (Cascader)	TableM2OFieldWidget	FormM2OCascaderFieldWidget
One-to-Many (O2M)	Yes	Tree Selection (TreeSelect)	TableO2MFieldWidget	FormO2MTreeSelectFieldWidget
		Cascading Selection (Cascader)	TableO2MFieldWidget	FormO2MCascaderFieldWidget
Many-to-Many (M2M)	Yes	Tree Selection (TreeSelect)	TableM2MFieldWidget	FormM2MTreeSelectFieldWidget
		Cascading Selection (Cascader)	TableM2MFieldWidget	FormM2MCascaderFieldWidget

Ⅴ. DSL Attribute Configuration

(Ⅰ) Table Attribute Configuration

<element widget="Table">
    ......
</element>

1. Appearance Attributes

• emptyText: Empty data prompt text (string)
• emptyImage: Empty data prompt image (url)
• height: Height (string | number)
• minHeight: Minimum height (string | number)
• maxHeight: Maximum height (string | number)
• lineHeight: Row height (number)
• minLineHeight: Minimum row height (number)
• autoLineHeight: Automatic row height (boolean)
• activeCount: Number of inline actions (number)
• operatorColumnDirection: Arrangement direction of actions in the operation column ('horizontal' | 'vertical')
• operatorColumnWidth: Width of the operation column (string | number)
• operatorColumnButtonType: Action type in the operation column (ButtonType)
• usingSimpleUserPrefer: Use simple-style user preferences (boolean)

2. Control Attributes

Interaction Attributes

• sortable: Allow sorting (boolean)
• ordering: Sorting rule (string) Example: 'field1 asc, field2 desc'
• showPagination: Display pagination (boolean)
• paginationStyle: Pagination style ('STANDARD' | 'SIMPLE')
• pageSizeOptions: Optional page sizes (number[]) Example: '10,15,30,50,100,200'
• defaultPageSize: Default page size (must be included in page size options) (number)
• filter: Invisible filter condition (rsql)
• domain: Visible filter condition (rsql)
• load: Loading function code, FunctionDefinition#fun (string)
• selectMode: Selection mode (must be used with the corresponding column type) ('checkbox' | 'radio')

Inline Editing

• editable: Allow inline editing (boolean)
• editorTrigger: Inline editing trigger method ('manual' | 'click' | 'dblclick')
• editorMode: Inline editing mode ('row' | 'cell')
• editorCloseTrigger: Inline editing close trigger method ('manual' | 'auto')
• editorShowIcon: Whether to display the editable icon in the header (boolean)
• rowEditorCreateFun: Inline editing creation function code, FunctionDefinition#fun (string)
• rowEditorUpdateFun: Inline editing update function code, FunctionDefinition#fun (string)

Statistics

• showFooter: Display footer statistics row (must be used with field statistics attributes) (boolean)
• statisticsLabel: Footer statistics title text (string)
• emptyStatisticsText: Empty statistics content (string)
• statisticsFun: Specify server-side statistics function code, FunctionDefinition#fun (string)
• refreshRemoteStatistics: Refresh statistics row data during search or pagination (boolean)

Expandable Rows

(To be used with expandable columns)

• expandAccordion: Use accordion mode for expandable rows (boolean)
• expandAll: Expand all rows on initial load (boolean)
• expandOperationField: Specify the field name where the expand icon for expandable rows is located (string)

Row Click

• allowRowClick: Enable row click (boolean)
• rowClickMode: Row click mode (('click' | dblclick)[]) Example: 'click,dblclick'
• rowClickActionName: Specify the single-click row action name (must be used with the action tag configured in the click slot) (string)
• rowDblClickActionName: Specify the double-click row action name (must be used with the action tag configured in the click slot) (string)

Tree Table

• enabledTreeConfig: Enable tree table (boolean)
• treeRelationField: Tree table relation field (string)
• treeExpandAll: Expand all tree nodes on initial load (boolean)
• treeLazy: Enable lazy loading for tree table (boolean)
• treeHasChildField: Field name used to determine if a tree node has children (string) Example: hasChild
• expandTreeField: Specify the field name where the expand icon for the tree table is located (string)

(Ⅱ) Common Column Attribute Configuration

• label: Header (string)
• columnType: Column type ('checkbox' | 'radio' | 'seq' | 'expand')
• width: Width (string | number)
• minWidth: Minimum width (string | number)
• resizable: Allow drag-and-drop to adjust column width (boolean)
• align: Horizontal alignment ('left' | 'center' | 'right')
• headerAlign: Header alignment ('left' | 'center' | 'right')
• footerAlign: Footer alignment ('left' | 'center' | 'right')
• fixed: Fixed column ('left' | 'right')
• className: Additional className for cells (string)
• headerClassName: Additional className for header cells (string)
• footerClassName: Additional className for footer cells (string)

(Ⅲ) Functional Column Attribute Configuration

1. Checkbox Column (checkbox)

<element widget="Table" checkbox="false">
    <element widget="checkbox-column" />
</element>

Inherits from Common Column Attribute Configuration, with columnType fixed as checkbox.

Tip

Due to historical design reasons, the checkbox attribute on the table would automatically add a checkbox column. When explicitly declaring a checkbox column in the DSL, set the checkbox attribute to false to avoid duplicate checkbox columns.

2. Radio Column (radio)

<element widget="Table" checkbox="false">
    <element widget="radio-column" />
</element>

Inherits from Common Column Attribute Configuration, with columnType fixed as radio.

3. Sequence Column (seq)

<element widget="sequence-column" />

Inherits from General Column Property Configuration, with columnType fixed as seq.

4. Operation Column (operation)

<element widget="operation-column" />

Inherits from General Column Property Configuration

Note

The rowActions provided in the default layout and the TypeScript Class associated with the aforementioned operation-column are actually the same TableOperationColumnWidget component. rowActions is planned to be removed in future major versions.

5. Expand Row Column (expand)

<element widget="expand-column" />

Inherits from General Column Property Configuration

Example: Configure Expand Row to Set Current View

Configure using fields and expandRow slots:

<view type="TABLE" model="demo.DemoModel" name="demo_table_view">
	<template slot="fields">
		<field data="id" invisible="true" />
		<field data="code" />
		<field data="name" />
	</template>
	<template slot="expandRow">
		<view type="DETAIL">
			<template slot="fields">
				<field data="id" invisible="true" />
				<field data="code" />
				<field data="name" />
			</template>
		</view>
	</template>
</view>

Configure using table and expandRow slots:

<view type="TABLE" model="demo.DemoModel" name="demo_table_view">
	<template slot="table">
		<template slot="expandRow">
			<view type="DETAIL">
				<template slot="fields">
					<field data="id" invisible="true" />
					<field data="code" />
					<field data="name" />
				</template>
			</view>
		</template>
		<field data="id" invisible="true" />
		<field data="code" />
		<field data="name" />
	</template>
</view>

Note

The final rendered results of these two methods are identical. For readers unfamiliar with layout and DSL slots, please refer to: DSL

Example: Configure Expand Row to Set Associated Model

When configuring an expand row view using a Many-to-One (M2O) field, you can only configure view types that use an Object data structure, such as Form or Detail. This allows the expand row view to automatically initiate a queryOne request through the association of the M2O field. As shown below:

<view type="TABLE" model="demo.DemoModel" name="demo_table_view">
	<template slot="table" expandOperationField="code">
		<template slot="expandRow" />
		<field data="id" invisible="true" />
		<field data="code" />
		<field data="name" />
		<field data="m2o">
			<view type="DETAIL">
				<template slot="fields">
					<field data="id" invisible="true" />
					<field data="code" />
					<field data="name" />
				</template>
			</view>
		</field>
	</template>
</view>

When configuring an expand row view using a One-to-Many (O2M) field, you can only configure view types that use a List data structure, such as Table. This allows the expand row view to automatically initiate a queryPage request through the association of the O2M field. As shown below:

<view type="TABLE" model="demo.DemoModel" name="demo_table_view">
	<template slot="table" expandOperationField="code">
		<template slot="expandRow" />
		<field data="id" invisible="true" />
		<field data="code" />
		<field data="name" />
		<field data="o2m">
			<view type="TABLE">
				<template slot="fields">
					<field data="id" invisible="true" />
					<field data="code" />
					<field data="name" />
				</template>
			</view>
		</field>
	</template>
</view>

Note

In these two examples, we use the expandOperationField attribute to configure the field name where the expand row icon is located. Since we use the table slot, we also need to retain the expandRow slot to ensure the expand row component works properly after merging the layout and DSL.

(Ⅳ) General Field Property Configuration

1. Appearance Properties

• label: Header (string)
• width: Width (string | number)
• minWidth: Minimum Width (string | number)
• resizable: Allow Drag-to-Resize Column Width (boolean)
• align: Horizontal Alignment ('left' | 'center' | 'right')
• headerAlign: Header Alignment ('left' | 'center' | 'right')
• footerAlign: Footer Alignment ('left' | 'center' | 'right')
• fixed: Fixed Column ('left' | 'right')
• className: Additional CSS Class for Cell (string)
• headerClassName: Additional CSS Class for Header Cell (string)
• footerClassName: Additional CSS Class for Footer Cell (string)

2. Control Properties

Read-Only Mode Control Properties

• sortable: Allow Sorting (boolean)
• invisible: Column Hidden (boolean | expression)
• invisibleContent: Cell Content Hidden (boolean | expression)
• enableClick: Enable Cell Content Click Functionality (boolean)
• clickMethod: Cell Content Click Method ('click' | 'dblclick')
• clickActionName: Specify Inline Action Name for Cell Content Click (string)

Edit Mode Control Properties

• editable: Allow Inline Editing (boolean)
• required: Mandatory (boolean | expression)
• editorConfirm: Secondary Confirmation Text Content (string)
• editorConfirmType: Secondary Confirmation Type ('popper' | 'modal')
• editorConfirmPosition: Secondary Confirmation Popover Position (PopconfirmPlacement)
• editorEnterText: Text for Secondary Confirmation [Confirm] Button (string)
• editorCancelText: Text for Secondary Confirmation [Cancel] Button (string)

(V) Field Component Property Configuration

1. String (STRING)

TableStringFieldWidget

<field data="stringField" />

• type: String Type ('text' | 'password')

TableStringColorPickerFieldWidget

<field data="stringField" widget="ColorPicker" />

TableStringUploadWidget

<field data="stringField" widget="Upload" />

• cdnKey: Specify Upload CDN Key, used with Backend OSS Configuration (string)
• privateLink: Use Backend for File Upload/Download, used when OSS Direct Upload from Client is Not Available (boolean)

TableStringUploadImageFieldWidget

<field data="stringField" widget="UploadImg" />

TableStringHyperlinksFieldWidget

<field data="stringField" widget="Hyperlinks" />

• target: Link Opening Method ('OPEN_WINDOW' | 'ROUTER')
• text: Link Display Text (string)
• defaultValue: Default Display Text for Link (string)

TableStringMediaPlayerFieldWidget

<field data="stringField" widget="MediaPlayer" />

TableStringTagFieldWidget

<field data="stringMultiField" />

TableStringMultiUploadWidget

<field data="stringMultiField" widget="Upload" />

TableStringMultiUploadImageFieldWidget

<field data="stringMultiField" widget="UploadImg" />

2. Multi-Line Text (TEXT)

TableTextFieldWidget

<field data="textField" />

TableStringMultiUploadWidget

<field data="textMultiField" widget="Upload" />

TableStringMultiUploadImageFieldWidget

<field data="textMultiField" widget="UploadImg" />

3. Rich Text (HTML)

TableHtmlRichTextFieldWidget

<field data="htmlField" />

4. Phone (PHONE)

TableStringFieldWidget

<field data="phoneField" />

5. Email (EMAIL)

TableStringFieldWidget

<field data="emailField" />

6. Integer (INTEGER)

TableNumberWidget

<field data="integerField" />

• showThousandth: Display Thousand Separators (boolean | expression)

TableMultiNumberWidget

<field data="integerMultiField" />

7. Float (FLOAT)

TableNumberWidget

<field data="floatField" />

• showThousandth: Display Thousand Separators (boolean | expression)
• decimal: Number of Decimal Places (number | expression)

TableMultiNumberWidget

<field data="floatMultiField" />

8. Money (MONEY)

TableCurrencyFieldWidget

<field data="moneyField" />

9. Boolean (BOOLEAN)

TableBooleanFieldWidget

<field data="booleanField" />

TableBooleanSwitchFieldWidget

<field data="booleanField" widget="Switch" />

• truthyAction: Submit Action Name Executed When Toggled to On (string)
• falsyAction: Submit Action Name Executed When Toggled to Off (string)

TableBooleanSelectFieldWidget

<field data="booleanField" widget="Select" />

• optionColorStyle: Option Color Style ('COLORFUL' | 'SIMPLICITY')
• option.name: Fixed Value ('true' | 'false')
• option.label: Display Text (string)
• option.color: Font Color (color)
• option.backgroundColor: Background Color (color)
• option.borderColor: Border Color (color)

Example: Add Color Configuration for Options

<field data="booleanField" widget="Select">
  <options>
    <option name="true" label="Yes" color="#035dff" backgroundColor="#035dff1a" />
    <option name="false" label="No" color="#6dd400" backgroundColor="#6dd4001a" />
  </options>
</field>

TableBooleanRadioFieldWidget

<field data="booleanField" widget="Radio" />

• optionColorStyle: Option Color Style ('COLORFUL' | 'SIMPLICITY')
• option.name: Fixed Value ('true' | 'false')
• option.label: Display Text (string)
• option.color: Font Color (color)
• option.backgroundColor: Background Color (color)
• option.borderColor: Border Color (color)

10. Enumeration (ENUM)

TableEnumFieldWidget

<field data="enumField" />

• optionColorStyle: Option Color Style ('COLORFUL' | 'SIMPLICITY')
• option.name: Enum Name (string)
• option.label: Display Text (string)
• option.color: Font Color (color)
• option.backgroundColor: Background Color (color)
• option.borderColor: Border Color (color)

11. Date and Time Types

TableDateTimeFieldWidget

<field data="datetimeField" />

• format: DateTime Format Text (string)

TableDateFieldWidget

<field data="dateField" />

• format: Date Format Text (string)

TableTimeFieldWidget

<field data="timeField" />

• format: Time Format Text (string)

TableYearFieldWidget

<field data="yearField" />

• format: Year Format Text (string)

12. Key-Value Pair (MAP)

TableMapFieldWidget

<field data="mapField" />

13. Many-to-One (M2O)

TableM2OFieldWidget

<field data="m2oField" />

• optionLabel: Display Text (string | expression)

14. One-to-Many (O2M)

TableO2MFieldWidget

<field data="o2mField" />

• optionLabel: Display Text (string | expression)
• separator: Separator, effective when concatenating labelFields without configuring optionLabel (string)

15. Many-to-Many (M2M)

TableM2MFieldWidget

<field data="m2mField" />

• optionLabel: Display Text (string | expression)
• separator: Separator, effective when concatenating labelFields without configuring optionLabel (string)

(Ⅵ) Composite Column Property Configuration

1. TableDateTimeRangeFieldWidget

<element widget="DateTimeRangePicker">
  <field data="start" />
  <field data="end" />
</element>

• separator: Separator (string)

2. TableDateRangeFieldWidget

<element widget="DateRangePicker">
  <field data="start" />
  <field data="end" />
</element>

• separator: Separator (string)

3. TableTimeRangeFieldWidget

<element widget="TimeRangePicker">
  <field data="start" />
  <field data="end" />
</element>

• separator: Separator (string)

4. TableYearRangeFieldWidget

<element widget="YearRangePicker">
  <field data="start" />
  <field data="end" />
</element>

• separator: Separator (string)