Configuration and usage of table with progress charts - DataV

This topic provides a guide for using the table with progress charts.

Component overview

The table with progress charts combines a progress chart and a table, where each row may represent a task and each column displays various properties, such as task name, progress, and deadline. The progress chart visually conveys the execution status of tasks through length, percentage, and color, enabling clear comparison and understanding of each task's current status. The platform allows customization of the table's content and style, including hyperlinks and carousel animations, and supports operations for row dimensions like editing and deleting. It also offers conditional filtering to select specific rows or cells.

Scenarios

The table with progress charts is ideal for quickly assessing the execution or running status of tasks across various indicators. It is particularly useful for work progress reports, where it can display the progress of multiple employees.

Effect display

Example: The component carousel display, with the first row featuring a hyperlink and the "Hangzhou" cell selected through conditional control.

D69A1F86-3D2B-4E6E-921D-BB371D2CBE3E

Prerequisites

A data dashboard is available that supports creation using a template, a blank canvas.
Business data is ready for use. For more information, see Data Source.

Add table with progress charts

Access the DataV console.
Navigate to Workbench > > All Applications > > Data Dashboard and select the desired dashboard to access the canvas editing page.
In the Component Library > Table list on the left-side navigation pane, click the Table With Progress Charts component to add it to the canvas.

You can also use global search to add related components.

Connect business data

After adding the component, connect the prepared business data for display. Click the table with progress charts, and in the right-side Data Source tab, select the data for the component.

The data fields received by the table with progress charts are as follows.

Field	Description
Custom parameter	The content of the table can be customized with multiple field values, which need to be used in conjunction with Style > Table Column > Column Configuration > Column Field Name.

The data structure of the sample table with progress charts is as follows.

[
  {
    "id": 1,
    "value": "https://img.alicdn.com/imgextra/i3/O1CN01WlrRFN1NsIPslloOW_!!6000000001625-2-tps-180-108.png",
    "sales": 23,
    "proportion": 20,
    "city": "Beijing",
  },
  {
    "id": 2,
    "value": "https://img.alicdn.com/imgextra/i2/O1CN01Sh9r2s1FAJSLux0h0_!!6000000000446-2-tps-180-108.png",
    "sales": -34,
    "proportion": 45,
    "city": "Shanghai"
  },
  {
    "id": 3,
    "value": "https://img.alicdn.com/imgextra/i3/O1CN01vyRtik1JCq6bvTVwd_!!6000000000993-2-tps-180-108.png",
    "sales": 24,
    "proportion": 80,
    "city": "Hangzhou"
  },
  {
    "id": 4,
    "value": "https://img.alicdn.com/imgextra/i3/O1CN01WlrRFN1NsIPslloOW_!!6000000001625-2-tps-180-108.png",
    "sales": 80,
    "proportion": 20,
    "city": "Shenzhen"
  },
  {
    "id": 5,
    "value": "https://img.alicdn.com/imgextra/i3/O1CN01vyRtik1JCq6bvTVwd_!!6000000000993-2-tps-180-108.png",
    "sales": -31,
    "proportion": 45,
    "city": "Hefei"
  },
  {
    "id": 6,
    "value": "https://img.alicdn.com/imgextra/i3/O1CN01WlrRFN1NsIPslloOW_!!6000000001625-2-tps-180-108.png",
    "sales": 55,
    "proportion": 80,
    "city": "Chengdu"
  }
]

The key configuration items for the data source are as follows.

Configuration Item	Description
Select Data Source	Supports integrating various types of data such as CSV files, APIs, and various databases. For more information, see Data Source. You can edit data fields using a visual table or code.
Configure Filter (Optional)	Used to customize filter code to achieve data structure transformation, filtering, display, and simple calculations. For more information, see Manage Data Filters.
Configure Data Mapping	Used to map fields from the selected data source to the corresponding fields of the widget to achieve real-time data matching. Click the icon to configure field styles.
View Response Results	Used to display the data integrated into the widget in real-time. When the widget data source changes, the latest data will be displayed here. Click the data response result to view the code of the data fields written. Click to view the example to see the array type and code example received by the data source. You can refer to the example to write related fields. Other data request configurations: Disable Loading State: When selected, the loading content during widget initialization will not be displayed when updating or previewing the data dashboard. Controlled Mode: When selected, the widget will not request data in the initialization state. At this time, data requests can only be initiated through the blueprint editor or global variable events. Automatic Update Request: When selected, the platform will dynamically poll and update data according to the polling time you set. If not selected, you need to manually refresh the page or trigger a request to update data through the blueprint editor and global variable events.

Configure table with progress charts

Click the table with progress charts component to configure its basic style, global variables, interaction occurrences, and advanced configurations, along with blueprint interaction configuration, in the right-side panel.

Style configuration

In the Style panel, configure the table details, text font, background color, carousel animation, and other styles of the table with progress charts. The related configuration items are introduced as follows.

Note

Click the icon to quickly locate configuration items through keyword search, which supports fuzzy match. For more information, see search configuration items.

Configuration item	Description	Illustration
Global configuration	Defines the position distribution, transparency, and interaction penetration of the widget in the data dashboard. Opacity: The smaller the value, the more transparent the widget. The value range is within `0~1`. Interaction Penetration: When enabled, the mouse can penetrate this widget to avoid the widget blocking the interaction between the mouse and the underlying widget when there are many widgets on the dashboard.
Table configuration	Defines the carousel effect, table content and table header style, hover style, and ordinal number column style of the table with progress charts. Carousel: When enabled, the table with progress charts will carousel with animation style. You can set the carousel interval time, carousel mode, etc. It supports setting full-screen scrolling and scrolling one by one. Full-screen scrolling is carousel by the current page, similar to a page-turning effect. Number Of Rows Per Page: The number of rows displayed per page in the table with progress charts. Table content style: Supports setting the text, background, border, and cell padding styles of the table with progress charts. The main explanations are as follows: Text style: Set the font, color, font size, and thickness of the text. Basic style: Set the overall background color, row height, content alignment, and whether to enable zebra stripes. When zebra stripes are enabled, the background color of odd rows is the same as the table background color, and the background color of even rows can be set as needed. Note The alignment here is the global text alignment of the table with progress charts. If you need to set the alignment of a specific column separately, you can set it in the Table Column configuration item. Empty data style: When there is empty data in the table, you can customize the display style of the empty data here. The default display style is a blue background with the text No data available. Overflow text: Defines whether the overflow text scrolls for display. You can customize the scrolling speed or scrolling duration. If scrolling is not enabled, the overflow text will be truncated and cannot be displayed. Table Header: When enabled, a table header will be added to the table with progress charts. You can set the content alignment, text style, sorting selected style, border style, background color, row height, etc. of the table header. When disabled, the table will not have a table header. Note Sorting Selected Style refers to the color displayed when the sorting button of a column in the table header is clicked during the preview and release of the table with progress charts component. This parameter is only effective when the Table Column Configuration enables the Sorting function for the corresponding column. Hover Highlight: Sets whether the text content of the specified row in the table with progress charts is highlighted when the mouse hovers over it in preview or release status. The following highlight styles can be set: Text font, thickness, size, color, and other styles. Row background color, shadow offset degree, and shadow color. Ordinal Number Column: When enabled, an ordinal number column will be generated on the far left of the table with progress charts. You can configure it as needed. General configuration: Supports configuring the column name, column width, text font, color, font size, background, and other styles of the column. Special items: If you need to set the first N rows of the ordinal number column to present special content (such as images), you can enable this configuration. Custom Field: The configuration content here needs to be consistent with the image field in the data source for this parameter to take effect. For example, if the data source is configured with `imgSrc: 'https://xxxx.png'`, configure it here as imgSrc. Custom Image: Use a custom image. Please upload the image link required for the corresponding row as needed. To obtain dynamic images, you need to configure image-related fields in the data source. Note The custom image field content in the data source has a higher priority than the image content configured here. Click the or icon to add or delete an image data. Click the or icon to configure the arrangement style of multiple image data. Click the icon to copy the currently selected image data.
Pager configuration	The pager , usually located below the table with progress charts, is used for manual page turning. Here you can set the size, number of pages displayed, text content, margin, and other styles of the pager. Pager visibility settings: Hide Pager: When enabled, the pager will be hidden. Hide Single Page: When enabled, if the table with progress charts has only one page of content, the pager will be hidden. General settings: Set the size, position, and display style of the pager. Page number style settings: Number Of Page Numbers: Defines the number of page numbers displayed by the pager when there are many pages. The middle page numbers will be replaced by an ellipsis `...`. Input Box: When enabled, you can quickly jump to the specified page by entering the page number when there are many page numbers. Page number style: Defines the text and background color of the page number in different states. Custom Text: Defines the display text of the previous and next pages of the pager.
Table column configuration	Defines the column content and style of the table with progress charts. This configuration item is an array that can configure multiple columns (excluding the ordinal number column). The editor will traverse the data to render the data through the configuration of custom columns. The order of the columns here is the display order of the columns in the table with progress charts. You can adjust the order as needed. Column Style: Supports defining the field name, display name, column width, and whether it can be sorted, among other styles. Column Field Name: Needs to come from the field name in the data source. After configuration, the column in the table with progress charts will obtain the content of the corresponding field in the data source for display. Column Display Name: Displayed as the table header content of the column. Column Width: When the value is 0, the column width will be adaptive. If the content width exceeds the set value of the column width, you can use this width to ensure accurate content display. Sorting: When enabled, the data of the current column can be sorted in ascending or descending order. When the column data is a progress chart, sorting is not supported. Text Style: You can set the font, size, color, and other styles of the text. Note When the Data Type is Image, this parameter is not involved in the configuration. Alignment: You can set the alignment of the content of the current column. Data Type: You can specify the type and display style of the column data. Different types involve different configuration items. Please refer to the actual interface for details. Numeric type: You can set the precision of the number precision. Category type: Used to represent a limited number of categories or classifications. For example, cities (Beijing, Shanghai, etc.). Time type: Multiple formats can be selected, usually `YYYY/MM/DD HH:mm:ss`. Image: You can set the width, height, and border radius style of the image. Trend chart: Used to visually view the trend of a certain indicator. You can set trend icons, colors of different trends, indicator display styles, etc. Indicator settings: Set the base value and numeric suffix (such as %). Base Value indicates using this value as the base to calculate the trend of the chart, with a default of 0. It is recommended to use the initial value in the data as the base value. Thousands separator: Thousands separator. The separator can be up to one character long. If it exceeds one character, the first character is taken. Numbers cannot be used as separators. Display: Controls whether to display non-compliant data types. When enabled, even if the data does not meet the data types supported by the trend chart, the data will still be displayed in the table with progress charts. Progress chart: You can choose to display it as a bar chart or a ring chart. The data is usually of the Number type. You can set the precision, suffix, color, font, and other styles of the number. Other operations: Click the or icon to add or delete a column. Click the or icon to change the arrangement style of the custom column configuration area. Click the icon to copy the currently selected column.
Advanced configuration	Defines whether to add a selection column, operation column, hyperlink, virtual scrolling, etc., to the table with progress charts. Selection Column: When enabled, a selection column will be added to the far left of the table with progress charts. Users can check the specified row as needed to perform further operations. Default selection: You can set the default selected rows, separated by commas in English `,`. This configuration item matches the id field in the data source. You need to enter the id corresponding value to trigger it. Note If there is no id field in the data source or the id field content is empty, this configuration item is invalid. Related styles: You can configure the size, background color, and the color and size of the checkmark (√) in the selected state of the button. Operation Column: When enabled, an operation column will be added to the far right of the table with progress charts. Users can configure the corresponding style and operation type (such as editing, deleting) as needed. Column style: You can set the column display name, column width, and the size and color of the text and button in the normal and hover states. Column operation: You can define the operation type to be performed as needed. It supports displaying as a button or text. Click the or icon to add or delete an operation. Click the or icon to change the arrangement style of multiple operations in the configuration area. Click the icon to copy the currently selected operation item. Hyperlink Configuration: When enabled, the hyperlink configured in the data source of the table with progress charts will take effect. Hyperlink field name: The name configured here needs to be consistent with the hyperlink field set in the Data Source panel (for example, `link`). After setting a hyperlink for a row in the table, click any position in the row to jump to the corresponding link. The code example in the data source is as follows. `{ "link": "https://www.aliyun.com/" }` Open in a new window: When enabled, clicking the corresponding hyperlink in the preview or release page will open a new window in the browser to present the jump link content. If not enabled, the link content will be presented on the current page. Virtual Scrolling: When enabled, you can view the content of the table with progress charts by scrolling with the mouse. You can set the scrolling area height and border style. When using this function, please ensure that the id value of the data is unique. Note This parameter can only be configured when the Carousel function is disabled.
Conditional configuration	You can control the selection of specified cells or rows that meet the conditions in the table with progress charts and present them in the configured style. The main explanations are as follows: Condition Name: Configure the condition content to be executed. For example, filter out the cells where the city field is equal to Hangzhou. For more information on condition style configuration, see condition tree usage instructions. Selected Range: Defines the specified cell or entire row to be selected when the configured conditions are met. When the Selected Range is configured as a cell, if the Custom Display Column is enabled, the cell where the custom column is located will be rendered. The Column Display Name needs to come from the fields in the data source. Data Type: You can choose Progress Chart or Trend Chart. After selecting different types, you can configure the corresponding type's color, font, and other styles according to the interface guide. Other operations: Click the or icon to add or delete a condition style. Click the or icon to configure the arrangement style of multiple conditions. Click the icon to copy the currently selected condition style.

Advanced configuration

Define the interaction and data transmission relationships between the table with progress charts and other components. The related configuration items are introduced as follows.

Configuration item

Description

Illustration

Interaction Occurrence

Defines the interaction behavior with other components to achieve component linkage. Click the icon to define the related interaction occurrence and interaction action.

Associate Global Variables

You can associate global parameters in the component to achieve parameter transmission between components and perform component interaction. Click the icon to enable the corresponding instruction and associate the required global variable for the instruction.

When Clicking A Single Row: The temporary variable thrown when a row in the table with progress charts is clicked. By default, it throws the id, value, sales, proportion, and city fields in the data.
Note
This field is a default example field. Please refer to your data for specific field names.
When Clicking Pagination: The temporary variable thrown when the pagination button of the table with progress charts is clicked. By default, it throws the custom current field in the data.
When Clicking Sorting: The temporary variable thrown when the sorting button of a field in the table with progress charts is clicked. By default, it throws the custom columnName and order fields in the data.
When Clicking Multiple Selections: The temporary variable thrown when multiple rows in the table with progress charts are checked. By default, it throws the custom id, value, sales, proportion, and city fields in the data.
When Clicking Operation Item: The temporary variable thrown when an operation item in the operation column of the table with progress charts is clicked. By default, it throws the custom operateType and dataItem fields in the data.

For more information, see component interaction configuration.

Blueprint interaction

Use the blueprint editor to visually define interaction relationships and behavior logic between components.

Procedure

On the canvas editing page, click the icon at the top menu bar's left side to enter the blueprint editor.
In the layer node list, hover over the table with progress charts component and click the icon to add the component to the main canvas.
Configure the blueprint interaction effects of related components as needed using the connection method.
Here is an example.

Configuration item introduction

The related interaction occurrences and actions are introduced as follows.

Note

Click the icon after the event or action on the right side of the blueprint configuration interface to view detailed parameter introductions.

Category	Subcategory	Description
Event	When Data Is Updated	This event is thrown when the component data is updated.
	When Data Request Status Changes	This event is thrown when the data request status changes. The status values include Void, Loading, Success, Error.
	When Clicking A Single Row	This event is thrown when a row in the table with progress charts is clicked, and the content changes with the data response result. The data example is as follows. `{ "id": 1, "value": 1, "sales": 1, "proportion": 1, "city": "Beijing" }`
	When Clicking Pagination	This event is thrown when a pagination in the table with progress charts is clicked, and the data of the current page is thrown. The data example is as follows. `{ "current": 1 //The pagination number displayed in the pager. }`
	When Clicking Sorting	This event is thrown when the sorting button of a field in the table with progress charts is clicked, and the current sorting data is thrown. The data example is as follows. `{ "columnName": "id", //The field being sorted. "order": "desc" //The order of sorting, desc indicates descending order, asc indicates ascending order. }`
	When Clicking Multiple Selections	This event is thrown when multiple rows of data in the table with progress charts are checked, and the component content changes with the data response result. The data example is as follows. `{ "id": 1, "value": 1, "sales": 1, "proportion": 1, "city": "Beijing" }`
	When Clicking Operation Item	This event is thrown when an operation item in the operation column of the table with progress charts is clicked, and the current operation item data is thrown. The data example is as follows. Note The `operateType` field value corresponds to the content of Style > Advanced Configuration > Operation Column > Column Configuration. `{ "operateType": "edit", "dataItem": { "id": 1, "value": 1, "sales": 1, "proportion": 1, "city": "Beijing" } }`
Action	Import Data	After processing the data according to the component drawing format, import the component and redraw it. There is no need to request server-side data again.
	Request Data	Request server-side data again. The data thrown by the input data processing node or layer node will be used as a parameter. For example, if the API data source configured for the table with progress charts is `https://api.test`, and the data passed to the Request Data action is `{ id: '1'}`, the final request will be `https://api.test?id=1`.
	Jump To	Makes the component page jump to a certain page, starting from 0 by default. The data example is as follows. `{ "current":3 //Indicates jumping to the 4th page. }`
	Highlight Table Row	Sets which data in the table row needs to be highlighted and sets the corresponding highlight style. The data example is as follows. `{ "data": { //The data that needs to be highlighted. id:3, name:'Zhang San' }, "style": { //The style of the highlighted data. color:'#ff0', background:'#f00' } }`
	Cancel Row Highlight	Cancels the highlight effect of the table row.
	Clear Highlight	Clears all highlight effects of the component without parameters.
	Open Selection Column and Close Selection Column	Opens or closes the data content corresponding to the selection column of the table with progress charts without parameters.
	Open Operation Column and Close Operation Column	Opens or closes the data content corresponding to the operation column of the table with progress charts without parameters.
	Set Selected Value	Sets the parameter content of the selected column and triggers it using the `id` field in the data source corresponding to the value. The data example is as follows. `{ "value": 3 //Indicates selecting the row with id=3. }`
	Move	Move the widget to a specified position. The data example is as follows. `{ // Movement method. Absolute positioning: to, relative positioning: by. Default value: to. "positionType": "to", // Specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // Animation method. "animation": { "enable": false, // Animation delay. "animationDuration": 1000, // Animation curve. Optional values are: linear\|easeInOutQuad\|easeInOutExpo. "animationEasing": "linear" } }`
	Toggle Visibility	Switch the widget to show or hide. The data example is as follows. `{ "animationType": "fade", "animationDuration": 1000, "animationEasing": "linear" }` animationType: Animation method. It can be configured as appear (appear/disappear), fade (fade in/fade out), slideToUp (fly in/fly out). If not configured, it means no animation. animationDuration: Animation delay, default is 1000ms. animationEasing: Animation curve. It can be configured as linear (uniform speed), easeInOutQuad (smooth), easeInOutExpo (slow-fast-slow).
	Show
	Hide
	Update Component Configuration	Dynamically update the style configuration of the widget. First, in the Style panel of the widget, click Copy Configuration To Clipboard to obtain the configuration data of the widget. As needed, change the field values of the corresponding style in the data processing node on the blueprint editor configuration page.