Data Table
WdTable
Practical Guide
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
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.
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).
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.
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.
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
- Set the table column's display content property to "custom content" to create a slot that allows other components to be placed.

- 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:
- 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)';
}

- 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
In the operation column node of the table component, drag and place a button component.

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.

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.

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.


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.

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.
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
The 'Filter' property of the table component supports variable binding to implement custom filter configurations.

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'
}
]})
- 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 |
- 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.
- 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 | 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. Example: "_id" |
| data loading status | loading | boolean | Data loading status will be shown when enabled |
| data filter | queryCondition | array | 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 | 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 | Select data API calling method |
| Query input parameters | connectorParams | string | 对APIs 调用方法获取的数据进行筛选过滤。例如 {name:'',value:''} |
| Field query scope | selectFieldType | string | 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 | 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 | 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 | 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 | 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 | 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 | Enabled, supports server-side pagination Example: false |
| Total data | total | number | 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
| Mobile,PC | Click a row in the spreadsheet to trigger |
| click the table column | cellClick | object
| Mobile,PC | Click a column in the spreadsheet to trigger |
| Selected row altered | rowsSelected | object
| Mobile,PC | Click data selection (multiple choice/single-choice column), trigger when altering selected rows. |
| query succeeded | querySuccess | object
| Mobile,PC | Triggered every time a data query succeeds, including when switching pages or modifying filter conditions. |
| query is empty | queryEmpty | object
| Mobile,PC | Triggered every time a data query succeeds, including when switching pages or modifying filter conditions. |
| Query failed | queryFail | object
| Mobile,PC | Triggered every time a data query fails, including when switching pages or modifying filter conditions. |
| Click Sort | sort | object
| Mobile,PC | Click Sort |
| Click the Refresh button | onRefreshBtnClick | Mobile,PC | Click the Refresh button | |
| Page transition | onPagingChange | object
| Mobile,PC | Page transition |
| filter values adjustment | onFilterChange | object
| 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
| 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 |
| PC-side table component root element | .wd-pc-table | Write styles for PC spreadsheets |
| H5 table component root element | .wd-h5-table | Write style for H5 spreadsheet |
| Header text style | .wd-table__box th>div | Header text style |
| Header background style | .wd-table__box th | Header background style |
| Text style in a table | .wd-table__box td>div | Text style in a table |
| Text style in a table | .wd-table__box td | Text style in a table |
| Table Content Text Element | .wd-table__box td .wd-text-overflow | Spreadsheet filter panel root element |
| Table body style | .wd-table | Table body style |
| Spreadsheet filter panel root element | .wd-table | Spreadsheet filter panel root element |
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
- 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.

- 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.
- Select the button that needs adjustment, choose the button event, and select the corresponding component and component method.

- Select the button that needs adjustment, choose the button event, and select the corresponding component and component method.
- 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.
- 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.

