Skip to main content

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
  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. image 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. image

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. image

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

]})
  1. Field Property Description
PropertyDescriptionTypeDefault ValueRequired
nameThe name value of the filter field, corresponding to the name value of the data source fieldstring-Yes
labelCustom TitlestringData Source Field NameNo
valueInitial value of the filter fieldstring/string[]-No
filterTypeDefault filter calculation methodstringRefer to the default filter value listNo
filterTypeOptionList of supported calculation methods for the filter fieldstring[]Refer to the default filter value listNo
relationFieldNameConfigures the display name for relationship filter options, corresponding to the 'name' field value of the data sourcestring[]Displays main column field by defaultNo
  1. Filter Default Value List
Data Source FieldList of Default Supported Calculation MethodsDefault Calculation Method
Date/Time/Number/Age Field
Rangescopescope
Equalseq
Not Equalsneq
Greater Thangt
Less Thanlt
Greater Than or Equal Togte
Less Than or Equal Tolte
String/Email/URL/Mobile Number/Telephone Number/Chinese Name Fields
Containssearch_cisearch_ci
Does Not Containnsearch_ci
Equalseq
Not Equalsneq
Starts WithstartWith
Boolean Field / Enum Multiple Selection
Equals Anyinin
Not Equals Anynin
Enum Single Select / Master-Detail / Relationship
Equalseqeq
Not Equalsneq

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.
  1. 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 sourcedataSourceTypestring

Select data source type

Example: "data-model"

data modelbindMetadataobject

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

expressiondataSourceDataarray

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 keyrecordKeystring

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 statusloadingboolean

Data loading status will be shown when enabled

data filterqueryConditionarray

Click fx to support editing data filter expressions View format

Filter data

Sorting method.orderTypestring

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 sortingisSupportMultipleSortboolean

Example: false

data sortingsorterarray

可设置数据排序规则,支持拖拽调整排序优先级,数组下标越小优先级越高。绑定数据示例:[{"orderBy":"updatedAt","orderType":"desc"}],升序传值asc,降序传值desc

Example: [ { "orderBy": "updatedAt", "orderType": "desc", "label": "更新时间" } ]

filterfilterFieldsobject

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: {}

APIsbindConnectMetadataobject

Data display APIs source selection

calling methodconnectorMethodobject

The method's input/output parameters must meet the component requirements. View document

Select data API calling method

Query input parametersconnectorParamsstring

对APIs 调用方法获取的数据进行筛选过滤。例如 {name:'',value:''}

Field query scopeselectFieldTypestring

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 fieldselectFieldsarray
Column managementcolumnSetsarray

Configure table columns, support drag-and-drop column sort

Example: []

Operation list (last column)enableCellCustomOptionboolean

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 tagsenableRelationTagboolean

After being enabled, the relationship between and enumeration fields in the table are shown as tags by default.

Default value: true

Operation list headingcustomOptionTitlestring

Default value: "操作"

Left freezefixedFrontstring

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 rightfixedEndstring

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 selectioncolumnSelectTypestring

Control the style of select column in table data

Default value: "select"

Disable row selectionrowDisabledobject

Disable Table Row selection feature, can be selected based on given records to determine whether disabled (disabled records are not selectable)

Empty status promptemptyTextstring

Prompt note when no data exists, do not display if content is empty

Default value: "暂无数据"

background colorrowColorstring

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 pageisSuspendHeaderboolean

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 tableenableBottomTipSlotboolean

Enabled, supports bottom content slot in spreadsheets

Display pagerenablePaginationboolean

Enabled, supports spreadsheet pagination

Default value: true

Number of rows per pagedefaultPageSizenumber

Configure rows per page by default in PC spreadsheet

Default value: 10

Default page number on PCdefaultPageIndexnumber

Configure the initial page number by default in PC spreadsheet

Default value: 1

Pager hovers at the bottom of the pageisSuspendFooterboolean

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 paginationenableTotalboolean

Client-side pagination by default. Enabled for dynamic loading of data.

Enabled, supports server-side pagination

Example: false

Total datatotalnumber

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 buttonsenableTableHeightSizeBtnboolean

Once enabled, row height adjustment is supported

Default value: true

global buttonenableGlobalButtonboolean

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 buttonenableRefreshBtnboolean

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 rowtabTableRowobject
  • record: array选中行记录

    选中行记录

    • object
    • rowKey: string选中行记录id

      选中行记录id

    • recordIndex: number选中行index

      选中行index

    Mobile,PC

    Click a row in the spreadsheet to trigger

    click the table columncellClickobject
    • 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 alteredrowsSelectedobject
        • data: array选中行记录

          选中行记录

          • object
          Mobile,PC

          Click data selection (multiple choice/single-choice column), trigger when altering selected rows.

          query succeededquerySuccessobject
          • data: object 查询结果,查询条件

            查询结果,查询条件

            • data:
            • query:
          Mobile,PC

          Triggered every time a data query succeeds, including when switching pages or modifying filter conditions.

          query is emptyqueryEmptyobject
          • data: object

            查询结果,查询条件

            • data:
            • query:
          Mobile,PC

          Triggered every time a data query succeeds, including when switching pages or modifying filter conditions.

          Query failedqueryFailobject
          • 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 Sortsortobject
          • sort: array当前引起变更的排序信息

            当前引起变更的排序信息

            • object
              • orderType: string
              • orderBy: string
          Mobile,PC

          Click Sort

          Click the Refresh buttononRefreshBtnClickMobile,PC

          Click the Refresh button

          Page transitiononPagingChangeobject
          • query: object 分页信息

            分页信息

            • pageIndex: number
            • pageSize: number
          Mobile,PC

          Page transition

          filter values adjustmentonFilterChangeobject
          • 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)rowsSelectMobile,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 sourcedataSourceTypestring

          Select data source type

          data modelbindMetadataobject

          Data display data source, including data model/view

          expressiondataSourceDataarray

          Data shown in the table, selectable variables.

          Data primary keyrecordKeystring

          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 managementcolumnSetsarray

          Configure table columns, support drag-and-drop column sort

          Number of rows per pagedefaultPageSizenumber

          Configure rows per page by default in PC spreadsheet

          Default page number on PCdefaultPageIndexnumber

          Configure the initial page number by default in PC spreadsheet

          Table datarecordsarray

          Table data

          Total number of spreadsheet datatotalnumber

          Total number of spreadsheet data

          Page number.pageNonumber

          Spreadsheet current page

          Page lengthpageSizenumber

          Number of rows per page

          Selected data in the tableselectedRecordsarray

          Selected data in the table

          Error message.errorobject

          Error info within component

          Data sorted in a tablesortarray

          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 datafilter

          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 versiondataSourceVersionstring

          When the data source type is data model, the current table supports protocol version

          Filter panel configurationfilterConfigarray

          Filter panel configuration

          Table Row real-time valuevaluearray

          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
          importimport

          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 dataexport

          Support exporting the currently selected data as excel

          Delete a single data recorddeleteOnestring删除数据的标识

          Deletion is supported for row data only when the data source is a data model.

          Delete selected datadeleteSelected

          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 filtersresetFilter

          Reset filters

          Clear selectionclearSelection

          Clear selection

          Enable row selectionsetSelectedKeysobject
          • 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-wrapData 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-tableWrite 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-tableWrite 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>divHeader text style
          
                  :scope .wd-table__box th>div {
                    font-size: 20px;
                    color: gray;
                  }
                
          Header background style.wd-table__box thHeader background style
          
                  :scope .wd-table__box th {
                    background-color: red;
                  }
                
          Text style in a table.wd-table__box td>divText style in a table
          
                  :scope .wd-table__box td>div {
                    font-size: 20px;
                    color: gray;
                  }
                
          Text style in a table.wd-table__box tdText style in a table
          
                  :scope .wd-table__box td {
                    background-color: lightgray;
                    height: 36px;
                  }
                
          Table Content Text Element.wd-table__box td .wd-text-overflowSpreadsheet filter panel root element
          
                  :scope .wd-table__box td .wd-text-overflow {
                    border: 2px solid gray;
                    border-radius: 10px;
                  }
                
          Table body style.wd-tableTable body style
          
                  :scope .wd-table {
                    border: 2px solid gray;
                    border-radius: 10px;
                  }
                
          Spreadsheet filter panel root element.wd-tableSpreadsheet 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.
          1. 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.
            1. 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.
          1. 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.