DataV:Key-Value Table

Component overview

The key-value table is a widget that displays data in a two-column format, with keys on the left and their corresponding values on the right. It is designed for clear and efficient data presentation within visualization applications, facilitating quick information retrieval and comprehension.

Scenarios

This widget is ideal for showcasing simple key-value pairs, such as user registration details.

Effect display

For instance, user registration information is neatly organized in a key-value table format.

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 Key-Value Table

1. Access the DataV console.

2. Navigate to Workbench > > All Applications > > Data Dashboard and select the desired dashboard to access the canvas editing page.

3. In the left-side navigation pane, under the Component Library > Table section, click the Key-value Table widget to add it to the canvas.

You can also use global search to find and add widgets.

Connect business data

Once the widget is added, connect your prepared business data for display. Click the key-value table, and in the right-side Data Source tab, select the data for the widget.

• Below is an introduction to the data fields accepted by the key-value table.

  Field	Description	Explanation
  label	(Optional) The table header content of the first column.	Only when the Style > Table Header > First Row As Table Header is enabled, the label and value fields represent the table header.
  value	(Optional) The table header content of the second column.
  Custom field	Defines the main data of the table. The format is {"Key of the first column":"Value of the second column",...}. The data can be customized and distributed in the corresponding rows and columns of the table according to the actual data order.	The key-value table only supports two columns and cannot add new columns. You can increase the number of rows in the key-value table by configuring custom fields.

  The data structure for a sample key-value table is as follows.

  [
    {
      "label": "Supports two data formats",
      "value": "This is the first type"
    },
    {
      "key0": "value0",
      "key1": "value1",
      "key2": "value2",
      "key3": "value3"
    }
  ]

• 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 Key-Value Table

Click the key-value table widget to configure its basic styles, interaction occurrences, and advanced settings, along with blueprint interaction configurations, in the right-side panel.

    {
      // 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"
      }
    }

{
  "animationType": "fade",
  "animationDuration": 1000,
  "animationEasing": "linear"
}