Data Table

WdTable

Practical Guide

• Implementing Batch Updates in Data Tables

• Form/Table Component Binding query Practice

• Implement Merged Columns Display in Table Components

• Table Column JSON Expression Writing Guide

• Implementing Pagination Caching in Data Tables

Applicable Scenarios

Display multiple rows of data in tabular form, supporting data sorting, searching, pagination, and customization of display content and operations.

Basic Capabilities Description

Model Page Automatically Generates Table Components

When creating model applications and model pages, the table component is automatically generated on the data management table page, establishing associations with data creation/update/view pages to implement corresponding page navigation logic.

Configure Table Data

Table data can be selected from data tables or bound expressions.

1. Quickly select a data table

As shown below, directly select a data table and configure query parameters. Table requests automatically include features such as pagination, sorting, and filtering. Clicking the upper-right corner navigates to the management backend of that data table to view data.

2. Binding Expression

Expressions can be static data or variables. You can connect to built-in data tables and external APIs, etc., via Query, and then bind a query in the expression.

For specific implementation, refer to the data list binding a query to implement dynamic pagination

3. Binding APIs (removed in the latest version)

NoteStarting from the v2.30.0 component version, APIs invocation for Data Table has been removed. Please use expressions to select Query for querying APIs.

Parameter Requirements for Calling APIs

1. When the 'Data Source Type' is set to APIs, you can bind an APIs method to query data and display it in the table. The method must include the following input/output parameters and meet relevant requirements.

   1. Method input parameters:

      • pageNo: Page number
      • pageSize: Page size
      • orderBy: Sort field name. Can be any field in the output parameter 'records' (optional; sorting control will be unavailable if this parameter is omitted).
      • orderType: Sort order. Pass 'asc' for ascending order or 'desc' for descending order (optional; sorting control will be unavailable if this parameter is omitted).

   2. Method output parameters:

      • total: Total number of records
      • records: An array of objects containing multiple data records, with each object representing table column fields. Note: Each object in the array must contain a unique identifier field _id (text type) for pagination features like page turning to function properly.

   3. Field identifiers must exactly match the identifiers above and be top-level parameters; they cannot be nested within other object parameters. You can refer to the parameter format of the "query list method" in any data model.

2. For the input/output parameter format of APIs connector methods, refer to the preset "query list" method parameters in any data model.

   

Set table column sorting

Table columns are sorted by default according to the field order in the bound data model. You can drag to adjust column order in the 'Column Management' properties.

Add Table Columns

Table columns do not display system fields by default, including "data identifier, creation time, update time, owner, created by, modified by, belonging department". You can click the "Add Column" button in the "Column Management" properties to add system fields or previously deleted fields.

Column Settings

When a column item in "Column Management" is selected, a column settings pop-up window will be displayed, allowing configuration of the column header, content display type, column width, alignment, sorting, exporting, and other effects.

Field Query Scope Settings

Data tables, after supporting the v2 query protocol, enable on-demand configuration of field query scopes to improve query performance. Field Query Scope Settings support the following three methods:

• All Fields: returns all fields, including those from this table and associated tables.
• Table Column Fields: returns all fields of the current table, excluding fields from associated tables. (default setting)
• Custom Query Fields: supports on-demand configuration of main table fields to be returned and whether to return associated table fields.

Mobile-Side Operations Column Configuration

• On the pc side, the operation column area is located in the last column of the table. On the h5 side, the operation column area is displayed in a pop-up window, triggered by configuring a click event on the table row to invoke the method for opening the operation column pop-up.

Extended Scenarios Description

Configuring Custom Columns for Customized Display Content and Styles

1. Set the table column's display content property to "custom content" to create a slot that allows other components to be placed.
2. The properties of components within the slot can access current row information through expressions. For example: drag a text component into the slot of a custom column, select the component, click the data binding button on the right side of the "Text Content" property, then select row data fields or write other function content in the expression editor to display the required information.

Defining Dynamic Row Background

Table component supports evaluating row data content to display different background colors, example below:

1. In "Code Editor - Current Page - handler", create a new method

export default function ({ event, data }) {
  // In event.detail, values such as record, rowkey, and recordIndex can be obtained for determining and controlling the row background color.
  return event.detail.recordIndex % 2 === 0
    ? 'rgb(199,237,204)'
    : 'rgb(250,249,222)';
}

2. In the table component's "Row Background Color" property, click the data binding button to open the pop-up, then enter $w.page.handler.color in the expression module to make odd and even rows display different backgrounds.

Operation column button navigates to the form page, passing the current row data's _id parameter to achieve data editing and updating

1. In the operation column node of the table component, drag and place a button component.

2. Adjust the button content to "Edit"; to ensure the button style is appropriate and aesthetically pleasing, you can also change the button type to a link.

   

3. Create a form page, place a form container component, bind the same data model as the table component, and set the form scenario to update.

4. Then, in the outline tree, select the page node, create a URL parameter named "id", and bind this parameter to the form container's data identifier property.

   

5. Return to the table page, select the button component added earlier, configure the On Click event - to open the table page configured earlier, and bind an expression to the page parameter id by selecting the 'Data Identifier' field.

   

6. After completing the above configurations, clicking the "Edit" button will navigate to the form page, display the form data for editing. After modification, click the "Submit" button to update the data and return to the table page.

   

Get the selected value of the checkbox column

The "Selected Row Change" event of the table component can retrieve the data information of the selected multiple rows.

1. The "Selected Row Change" event of the table component can retrieve the data information of the selected multiple rows, which can be assigned to a variable in array format.

   

Custom Configuration Filter

1. The 'Filter' property of the table component supports variable binding to implement custom filter configurations.

2. Variable Binding Example

({filterConfig:[
    {
        name: '_id',
        value: '111',
        label: 'Data Identifier111',
        filterType:'search_ci',
        filterTypeOption:['search_ci']

    },
       {
        name: 'createdAt',
        value: ['2023-07-04 00:00:00','2023-08-17 00:00:00'],
        label: 'Creation Time111',

    },
       {
        name: 'date',
        value:['2023-07-04','2023-08-17 00:00:00'],
        label: 'Date111',

    },
       {
        name: 'mjdx11',
        value:'110101',

    },
       {
        name: 'mjdx',
        value:['110101','110102'],
        label: 'Enum Multi-select111',

    },{
        name:'belx',
        value:[true, false, null]
    },
    {
        name: 'glgxddy',
        label: 'Many-to-One Association',
        relationFieldName: 'dh', // Configures the display name for association relationship options, corresponding to the 'name' field value in the data source
        value:'36789d86636cf9590079242c054308e8'
    }

]})

3. Field Property Description

Property	Description	Type	Default Value	Required
name	The name value of the filter field, corresponding to the name value of the data source field	string	-	Yes
label	Custom Title	string	Data Source Field Name	No
value	Initial value of the filter field	string/string[]	-	No
filterType	Default filter calculation method	string	Refer to the default filter value list	No
filterTypeOption	List of supported calculation methods for the filter field	string[]	Refer to the default filter value list	No
relationFieldName	Configures the display name for relationship filter options, corresponding to the 'name' field value of the data source	string[]	Displays main column field by default	No

4. Filter Default Value List

Data Source Field	List of Default Supported Calculation Methods		Default Calculation Method
Date/Time/Number/Age Field
	Range	scope	scope
	Equals	eq
	Not Equals	neq
	Greater Than	gt
	Less Than	lt
	Greater Than or Equal To	gte
	Less Than or Equal To	lte
String/Email/URL/Mobile Number/Telephone Number/Chinese Name Fields
	Contains	search_ci	search_ci
	Does Not Contain	nsearch_ci
	Equals	eq
	Not Equals	neq
	Starts With	startWith
Boolean Field / Enum Multiple Selection
	Equals Any	in	in
	Not Equals Any	nin
Enum Single Select / Master-Detail / Relationship
	Equals	eq	eq
	Not Equals	neq

Note:

• The value range of the default filter calculation method (filterType) is the value of the calculation methods supported by the corresponding data source field.
• The filter option list (filterTypeOption) is an array of the value of calculation methods supported by the corresponding data source field. If not provided, it defaults to the list of calculation methods supported by that field.

5. The real-time filter configuration can be accessed via $w.componentId.filterConfig

Example

Interactive Preview

Style API Custom Styles

// Table styles need to be used in conjunction with id selectors.
#wd-page-root .wd-table {
  background-color: #ecebf6;
}
#wd-page-root .wd-table__header {
  background-color: #d7d3f0;
}
#wd-page-root .wd-table--bordered {
  border: 1px solid #d7d3f0;
}

CSS Variables Custom Styles

#wd-page-root .wd-table {
  // Table background color
  --wd-table-color-bg: #f7ffee;
  // Hover row background color
  --wd-table-row-color-bg-hover: #c7e1bf;
  // Table header background color
  --wd-table-header-color-bg: #c7e1bf;
  // Selected row color
  --wd-table-row-color-bg-selected: #cadbc0;
  // Table border color
  --wd-table-color-border: #c7e1bf;
  // Default table row height (medium row height)
  --wd-table-td-height-md: 70px;
}

Properties

External properties received by the component

Property Name	Property Identifier	Type	Description

Data source	dataSourceType	string	Select data source type Example: "data-model"
data model	bindMetadata	object	When the data model field has changed, click the refresh icon above to synchronize the data model structure. When projects are added, configure the latest field table column display via the column management below - add column. Data display data source, including data model/view
expression	dataSourceData	array	New feature: The spreadsheet supports binding expression data via append. The original APIs are optimized for expressions with path optimization. The data displayed in the spreadsheet is in array format. View example Data shown in the table, selectable variables.
Data primary key	recordKey	string	Used to distinguish different data, impacting row selection, row edit and other features. A unique auto-increment ID in the database is generally used. Used to distinguish different data, impacting row selection, row edit and other features. A unique auto-increment ID in the database is generally used. Example: "_id"
data loading status	loading	boolean	Data loading status will be shown when enabled
data filter	queryCondition	array	Click fx to support editing data filter expressions View format Filter data
Sorting method.	orderType	string	Customizable in ascending or descending order. When binding an expression, transfer values as asc for ascending and desc for descending. Default value: "desc"
Enable multi-field sorting	isSupportMultipleSort	boolean	Example: false
data sorting	sorter	array	可设置数据排序规则，支持拖拽调整排序优先级，数组下标越小优先级越高。绑定数据示例：[{"orderBy":"updatedAt","orderType":"desc"}],升序传值asc，降序传值desc Example: [ { "orderBy": "updatedAt", "orderType": "desc", "label": "更新时间" } ]
filter	filterFields	object	By enabling fx and binding expressions, you can configure default filter values, filtering methods, and other features. View example Configure the running state filter in the table, support data binding for object type, attribute field is filterConfig Example: {}
APIs	bindConnectMetadata	object	Data display APIs source selection
calling method	connectorMethod	object	The method's input/output parameters must meet the component requirements. View document Select data API calling method
Query input parameters	connectorParams	string	对APIs 调用方法获取的数据进行筛选过滤。例如 {name:'',value:''}
Field query scope	selectFieldType	string	Only fields in the query scope can be referenced in spreadsheet custom columns. For details, see Field Query Scope Configuration Instructions Default query spreadsheet column fields Default value: "table"
Custom query field	selectFields	array
Column management	columnSets	array	Configure table columns, support drag-and-drop column sort Example: []
Operation list (last column)	enableCellCustomOption	boolean	The operation list area on the H5 side is displayed in a pop-up. For details, see the configuration (https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/database/WdTable#%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%85%8D%E7%BD%AE%E6%93%8D%E4%BD%9C%E5%88%97) After enabled, drag-and-drop components such as buttons into the operation list node of the outline tree or the operation list area of the spreadsheet. Example: true
Display associated/enumeration field tags	enableRelationTag	boolean	After being enabled, the relationship between and enumeration fields in the table are shown as tags by default. Default value: true
Operation list heading	customOptionTitle	string	Default value: "操作"
Left freeze	fixedFront	string	Freeze first column to selected column, only takes effect on PC When left and right freeze property configured columns intersect or duplicate, the freeze property automatically disables to avoid spreadsheet horizontal scrolling.
Freeze on the right	fixedEnd	string	Freeze selected columns to the end, effective on PC only When left and right freeze property configured columns intersect or duplicate, the freeze property automatically disables to avoid spreadsheet horizontal scrolling.
data selection	columnSelectType	string	Control the style of select column in table data Default value: "select"
Disable row selection	rowDisabled	object	Disable Table Row selection feature, can be selected based on given records to determine whether disabled (disabled records are not selectable)
Empty status prompt	emptyText	string	Prompt note when no data exists, do not display if content is empty Default value: "暂无数据"
background color	rowColor	string	Set a fixed value or bind a low-code method to alter the background color of a row
Header hover at the top of the page	isSuspendHeader	boolean	Valid only on PC; may cause attribute failure due to style interference from parent components. If it does not take effect, please ensure the parent element does not have the overflow property set to hidden, scroll, or auto. These attributes can cause position: sticky to fail. Moreover, if the webpage already has fixed elements, hover may not be visible, so you may need to manually adjust the hover position via style. Default value: true
Open the slot at the bottom of the table	enableBottomTipSlot	boolean	Enabled, supports bottom content slot in spreadsheets
Display pager	enablePagination	boolean	Enabled, supports spreadsheet pagination Default value: true
Number of rows per page	defaultPageSize	number	Configure rows per page by default in PC spreadsheet Default value: 10
Default page number on PC	defaultPageIndex	number	Configure the initial page number by default in PC spreadsheet Default value: 1
Pager hovers at the bottom of the page	isSuspendFooter	boolean	Valid only on PC; may cause attribute failure due to style interference from parent components. If it does not take effect, please ensure the parent element does not have the overflow property set to hidden, scroll, or auto. These attributes can cause position: sticky to fail. Moreover, if the webpage already has fixed elements, hover may not be visible, so you may need to manually adjust the hover position via style. Default value: true
Enable server-side pagination	enableTotal	boolean	Client-side pagination by default. Enabled for dynamic loading of data. Enabled, supports server-side pagination Example: false
Total data	total	number	Defaults to the array length of expression input. Enter the actual total data of the table. See backend pagination guide By default, the array length is the expression input. Enter the actual total data of the data table.
Beauty filter buttons	enableTableHeightSizeBtn	boolean	Once enabled, row height adjustment is supported Default value: true
global button	enableGlobalButton	boolean	After enabled, drag-and-drop components such as buttons into the global button node of the outline tree or the global button area of the spreadsheet. Example: true
refresh button	enableRefreshBtn	boolean	When enabled, the refresh button can be shown Default value: true

Events

Events exposed by the component. You can listen to component events to trigger external actions

Event Name	Event Code	Event Output Parameters event.detail	Applicable Scenarios	Description

click the table row	tabTableRow	object record: array选中行记录 选中行记录 object rowKey: string选中行记录id 选中行记录id recordIndex: number选中行index 选中行index	Mobile,PC	Click a row in the spreadsheet to trigger
click the table column	cellClick	object record: array选中行记录 选中行记录 object column: array选中列表头 选中列表头 object rowKey: string选中行记录id 选中行记录id recordIndex: number选中行index 选中行index columnIndex: number选中列index 选中列index	Mobile,PC	Click a column in the spreadsheet to trigger
Selected row altered	rowsSelected	object data: array选中行记录 选中行记录 object	Mobile,PC	Click data selection (multiple choice/single-choice column), trigger when altering selected rows.
query succeeded	querySuccess	object data: object 查询结果,查询条件 查询结果,查询条件 data: query:	Mobile,PC	Triggered every time a data query succeeds, including when switching pages or modifying filter conditions.
query is empty	queryEmpty	object data: object 查询结果,查询条件 data: query:	Mobile,PC	Triggered every time a data query succeeds, including when switching pages or modifying filter conditions.
Query failed	queryFail	object error: object 错误信息 组件内部抛出的错误信息 requestid: string请求 id 如果是接口相关错误会提供请求 id message: string错误提示信息 code: string错误码 original: 原始错误	Mobile,PC	Triggered every time a data query fails, including when switching pages or modifying filter conditions.
Click Sort	sort	object sort: array当前引起变更的排序信息 当前引起变更的排序信息 object orderType: string orderBy: string	Mobile,PC	Click Sort
Click the Refresh button	onRefreshBtnClick		Mobile,PC	Click the Refresh button
Page transition	onPagingChange	object query: object 分页信息 分页信息 pageIndex: number pageSize: number	Mobile,PC	Page transition
filter values adjustment	onFilterChange	object searchValues: object 变更的目标值 变更的目标值 key: string val: string rel: string filterConfig: array object name: string数据源字段 数据源字段的name值 label: string筛选字段标题 value: 筛选字段值 filterType: string默认筛选计算方式 filterTypeOption: array string筛选字段支持的计算方式列表	Mobile,PC	Filter panel search value adjustment/Query trigger callback
Selected row (abandoned)	rowsSelect		Mobile,PC	Click data selection (multiple selection/single-choice column), trigger when altering selected rows. Use $w.component id.selectedRecords to get details of selected rows.

Property API

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name	Property Identifier	Type	Description

Data source	dataSourceType	string	Select data source type
data model	bindMetadata	object	Data display data source, including data model/view
expression	dataSourceData	array	Data shown in the table, selectable variables.
Data primary key	recordKey	string	Used to distinguish different data, impacting row selection, row edit and other features. A unique auto-increment ID in the database is generally used.
Column management	columnSets	array	Configure table columns, support drag-and-drop column sort
Number of rows per page	defaultPageSize	number	Configure rows per page by default in PC spreadsheet
Default page number on PC	defaultPageIndex	number	Configure the initial page number by default in PC spreadsheet
Table data	records	array	Table data
Total number of spreadsheet data	total	number	Total number of spreadsheet data
Page number.	pageNo	number	Spreadsheet current page
Page length	pageSize	number	Number of rows per page
Selected data in the table	selectedRecords	array	Selected data in the table
Error message.	error	object	Error info within component
Data sorted in a table	sort	array	The sorted data of the table is used for table request queries, and the format matches the current data source protocol. See query protocol example
Filtered table data	filter		The sorted data of the table is used for table request queries, and the format matches the current data source protocol. See query protocol example
Data source protocol version	dataSourceVersion	string	When the data source type is data model, the current table supports protocol version
Filter panel configuration	filterConfig	array	Filter panel configuration
Table Row real-time value	value	array	Real-time value of spreadsheet row data, used to obtain form component values in custom slots.

Method API

Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

Method Name	Method Identifier	Parameters	Method Description

import	import		Importing is supported only when the data source is a data model scenario. You can upload an excel file and enter data as a template.
Data export (optional export mode)	exportOptionalMode		Support exporting table data to excel. Options: export all data, filtered data, selected data
export selected data	export		Support exporting the currently selected data as excel
Delete a single data record	deleteOne	string删除数据的标识	Deletion is supported for row data only when the data source is a data model.
Delete selected data	deleteSelected		Deletion is supported for the selected row record only when the data source is a data model.
Refresh table (View data on page 1)	refresh		Refresh table (View data on page 1)
Refresh table (View current page data)	refreshKeepPage		Refresh table (View current page data)
Open the operation list popup (mobile terminal only)	openOperationDialog		Toggle on the operation list popup
Reset filters	resetFilter		Reset filters
Clear selection	clearSelection		Clear selection
Enable row selection	setSelectedKeys	object selectedKeys: array数据标识 设置行选中。数据标识字段默认为_id，表达式场景可以通过数据主键来指定其他字段。默认示例：[id1,id2]，其中id1和id2对应选中行数据标识。 string数据标识	Enable row selection

Style API

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name	Class Name	Description and Examples

root element	.wd-table-wrap	Data table component root element /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-table-wrap { /* Write CSS styles here */ }
PC-side table component root element	.wd-pc-table	Write styles for PC spreadsheets /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-pc-table { /* Write CSS styles here */ }
H5 table component root element	.wd-h5-table	Write style for H5 spreadsheet /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-h5-table { /* Write CSS styles here */ }
Header text style	.wd-table__box th>div	Header text style :scope .wd-table__box th>div { font-size: 20px; color: gray; }
Header background style	.wd-table__box th	Header background style :scope .wd-table__box th { background-color: red; }
Text style in a table	.wd-table__box td>div	Text style in a table :scope .wd-table__box td>div { font-size: 20px; color: gray; }
Text style in a table	.wd-table__box td	Text style in a table :scope .wd-table__box td { background-color: lightgray; height: 36px; }
Table Content Text Element	.wd-table__box td .wd-text-overflow	Spreadsheet filter panel root element :scope .wd-table__box td .wd-text-overflow { border: 2px solid gray; border-radius: 10px; }
Table body style	.wd-table	Table body style :scope .wd-table { border: 2px solid gray; border-radius: 10px; }
Spreadsheet filter panel root element	.wd-table	Spreadsheet filter panel root element .wd-table-wrap-filter__body { border: 2px solid gray; border-radius: 10px; }

Learn about Style API

CSS Variables

.wd-table-wrap {
  // Default background color
  --wd-table-color-bg: var(--wd-color-bg-container);
  // Table header background color
  --wd-table-header-color-bg: var(--wd-color-bg-secondarycontainer);

  // Row background color - default
  --wd-table-box-header-tr-color-bg: transparent;
  // Row background color - hover
  --wd-table-row-color-bg-hover: var(--wd-color-bg-container-hover);
  // Row background color - selected state
  --wd-table-row-color-bg-selected: var(--wd-color-brand-light);

  // Table text font size
  --wd-table-font-size: var(--wd-font-size-default);
  // Table text color
  --wd-table-color-text: var(--wd-color-text-default);
  // Table text font-weight
  --wd-table-color-text-weight: var(--wd-color-text-default);

  // Header text color
  --wd-table-header-color-text: var(--wd-color-text-default);
  // Header text font-weight
  --wd-table-header-font-weight: var(--wd-font-weight-medium);

  // Table row height - low
  --wd-table-td-height-sm: 3rem;
  // Table row height - medium
  --wd-table-td-height-md: 3.375rem;
  // Table row height - high
  --wd-table-td-height-lg: 5.125rem;

  // Table outer border color
  --wd-table-color-border: var(--wd-color-border-default);
  // Table inner border color
  --wd-table-color-border-inner: var(--wd-color-border-separator);

  // Table rounded corners
  --wd-table-border-radius: calc(var(--wd-border-radius) * 2);

  // Mobile bottom button area border color
  --wd-table-footer-border-color: var(--wd-color-border-default);
}

Version Changes

• This upgrade provides brand-new table styles for PC/mobile
• Enhance filter and table column configuration capabilities
• Added row click event
• Standardize component property names and categorization

Query Protocol Example

• Table sorting data, used for table request queries, follows the same format as the current data source protocol. After upgrading to component version 2.30.0, newly added table components will have their data model query protocol upgraded to v2, while existing table components will continue using the v1 protocol. Example of v1 protocol parameter structure: [{"orderBy":"updateAt","orderType":"desc"}]. Example of v2 protocol parameter structure: [{"updateAt":"desc"}].
• Table filter data, used for table request queries, follows the same format as the current data source protocol. After upgrading to component version 2.30.0, newly added table components will have their data model query protocol upgraded to v2, while existing table components will continue using the v1 protocol. Example of v1 protocol parameter structure: [{"key":"test","val":"1","rel":"search"}]. Example of v2 protocol parameter structure: {"where":{"$and":[{"test":{"$search":"1"}}]}}.

Upgrade Guide

1. For old table components, click the upgrade button on the right to upgrade to the new table with one click. The action column and global buttons are upgraded to slots, allowing drag-and-drop of components such as buttons into the table's global button slot or action column slot.

2. Global Buttons and Action Column Configuration

After the table is upgraded, the original global buttons and action column buttons are upgraded to slot+button components, and the previously configured selection events are correspondingly upgraded to button events. For complex parameter-passing scenarios, parameters need to be manually reconfigured. Refer to the following example:

This scenario involves table deletion. Bind the table deletion event to the button while configuring input parameters.

• 1. Select the button that needs adjustment, choose the button event, and select the corresponding component and component method.
• 2. Edit the input parameter [Identifier for Data Deletion]. You can select the current row record via prompts and click to select the parameters to be passed.
  • 
  • 

3. Feature Upgrade

After upgrading to component version 3.18.0, the mobile filter has undergone a style upgrade, enhancing the query experience on mobile devices. Users with custom styling requirements can adjust the filter appearance using the form component's style api.

Frequently Asked Questions

When using data container components, must other components be placed inside them?

The Data Container is the core component for page-data interaction, capable of directly querying and displaying data. On our platform, multiple data container components are available, such as ListView, DataView, WdForm, and WdTable.

The Data Container enables deep integration of data and page components. This greatly simplifies data operation processes. In addition to providing data, the Data Container also supports common page interaction features, such as pagination loading, loading status, and error prompts.

When using data containers, if a component relies on data returned by the data container, it is recommended to place the component inside the data container component. For example, to display an image from a specific field in a data detail, it is better to place the component inside the corresponding data container. This way, the data container can automatically handle loading states, loading failures, etc., without needing to worry about rendering timing.

If you only need to use the data container to obtain data without performing UI interactions, you can directly use the Query function to query data.

How do you refresh other components when an event is triggered?

When you need to refresh other components upon an event trigger, bind a variable to the target component's property, for example by referencing this variable in a filter parameter expression. Then change the variable's value in the triggering event to update the corresponding target component's content.