Data Table
Latest Update：Jul 26, 2023, 10:35:08
Scenarios
This is suitable for pages that require displaying content in a list format. You can use this container component for that purpose.
Basic Functions
This container is an integrated component-container, and you can select a data model for the container. You can choose data fields for each column in the container.
-
Quickly Select Data Model
As shown in the figure, you can directly choose a data table and configure query parameters. The table's internal requests come with built-in pagination, sorting, filtering, and other functions. By clicking in the upper right corner, you can navigate to the data table's management backend to view the data.
-
Select Query
After binding a data model to the data table, you need to call the data model's query method to retrieve data.
Selecting the data model's query list method will, by default, return the data that can be used in the data table and automatically render it in the data list.
-
Calling API Parameters Requirements
When choosing "APIs" as the "Data Source Type," you can bind API methods to query data and display it in the table. The method needs to include the following input and output parameters and meet the relevant requirements.
Method Input：
pageNo：Page number pageSize：Number of items per page orderBy：Name of the sorting field, can take values from various fields in the output (optional - sorting control won't be possible without this parameter) orderType：Sorting order, use "asc" for ascending and "desc" for descending (optional - sorting control won't be possible without this parameter)
total：Total number of records records： Multiple data records in an array of objects, where each element corresponds to a table column. Note: Each object in the array must include a unique identifier field, _id (text type), for features like pagination to function properly.
The field identifiers must be exactly consistent with the identifiers mentioned above, and they must all be top-level parameters.
Property Introduction
Properties received from external input for the component:
| Property Name | Property Description |
|---|---|
| Data Model | When using data from a data model, you need to select the data model |
| Static Data | In the absence of a model, users can choose static data for display |
| Data Filtering | Users can filter valid data for display |
| Sorting Field | The field by which the current list is sorted |
| Sorting Order | The sorting order for the currently selected sorting field: ascending or descending |
| No Data Prompt | The text displayed when the current table has no data |
| Items Per Page | The default value for the number of items displayed per page in the current table |
| Pagination | The mode in which the table uses pagination: paginator, click to load, scroll to load, no pagination |
| Show Data Total | Display the total number of data after the current query |
| Change Items Per Page | Whether the paginator can change the number of items displayed on the current page |
| Selectable Rows | Whether the first column of the current table rows can be selected |
| Conditional Filtering | Whether the current table supports default conditional filtering |
| Filter Fields | When conditional filtering is supported, filter the fields based on a certain condition |
| Exportable | Whether the current table supports exporting to Excel |
| Sort Buttons | Whether the columns in the table support sorting buttons |
| Column Management | Individual settings for columns in the table |
| Freeze From First Column | Settings to freeze the left-side columns of the table when dragging the table |
| Freeze To Last Column | Settings to freeze the right-side columns of the table when dragging the table |
| Display Action Column | The system automatically adds an "Action Column" to the table, which can include custom buttons |
| Display Button Group | The button group at the top of the table, where you can add custom action buttons |
| Special Style Rows | When a certain value meets specific conditions, it is displayed in a special color |
| Enable Zebra Stripes | Enable zebra stripes for the current table to make it easier for users to view rows |
| Cell Borders | Display cell borders |
Events
| Property Name | Property Description |
|---|---|
| Page Load | An event triggered when the current component loads |
| Selected Rows in Table | An event triggered when the current component loads |
| Pagination Callback | An event triggered when the current component loads |