Key-Value Table

Component overview

The key-value table displays data in a two-column format, with keys on the left and corresponding values on the right, enabling quick information retrieval within visualization applications.

Scenarios

Ideal for displaying simple key-value pairs, such as user registration details.

Effect display

The following example shows user registration information in a key-value table.

Prerequisites

• Create a data dashboard. You can use a template, use a blank canvas, or use AI to generate one.

• Your business data is prepared. For more information, see Data Source.

Add Key-Value Table

1. Access the DataV console.

2. On the Workbench page, in the Data Dashboards area, hover over the target dashboard and click Edit. The canvas editor opens.

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

After adding the widget, click it and select your data source in the right-side Data Source tab.

• The following table describes 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"
    }
  ]

• This section describes the core configuration items for the data source.

  Configuration	Description
  Select Data Source	Supports various data types, such as CSV files, APIs, and different databases. For more information, see Supported data source types. Edit data fields in a visual table or in code.
  Configure Filter (Optional)	Customize filter code to transform, filter, display, and perform simple calculations on data. For more information, see Manage data filters.
  Configure Data Mapping	Map fields from the selected data source to the widget's fields. This enables real-time data matching. Click the icon to configure field styles.
  View Response Result	Displays the data connected to the widget in real time. When the widget's data source changes, this section shows the latest data. Click the data response result to view the data field code. Click View Example to see the array type and sample code that the data source accepts. You can write your fields based on the example. Other data request configurations: Disable Loading State: If you check this box, the widget's initial loading content does not appear when the widget updates or when you preview the data dashboard. Controlled Mode: If you check this box, the widget does not request data when it initializes. Data requests can only be started by the blueprint editor or by global variable events. Auto Update Request: If you check this box, the platform polls for data updates at the interval you set. If you do not check this box, you must refresh the page manually or use the blueprint editor or global variable events to trigger data updates.

Configure Key-Value Table

Click the key-value table widget to configure styles, interactions, and advanced settings in the right-side panel.

{ 
  // Movement type. Absolute positioning: to, relative positioning: by. Default: to.
    "positionType": "to",
  // Specified position. x-coordinate, y-coordinate.
  "attr": {
   "x": 0,
   "y": 0
   },
  // Animation method.
  "animation": {
    "enable": false,
    // Animation duration.
   "animationDuration": 1000,
    // Animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo.
   "animationEasing": "linear"
  }
}

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