Updated on 2025-03-24 GMT+08:00

Tree Table

The tree table is a type of text widget. It clearly displays data in a table on visualized applications.

On the large screen design page, drag the tree table widget from the All > Text area to the blank area of the canvas, as shown in Figure 1.

Figure 1 Tree table widget
Figure 2 Margin style

Card

A card wraps a chart widget. A widget consists of card elements (card title, chart, card background, and card border) and chart elements.

Figure 3 Card
  • Card style: You can select a card style based on your service requirements. You can click the clear style button to clear the configured style.
  • Background
    • Background color: Background color of the widget card.
    • Border: Border of the widget card. Options: no border, full border, and corner border. For full border and corner border, you can set the line type and rounded corners of the outer border of the widget.
    • Style: Image display style. The options are normal, center, stretch, and tiled.
    • Choose image: Use a local image as the widget background. Directories and subdirectories can be added to facilitate image management by category. JPG, JPEG, PNG, or GIF images are recommended. The size of each image cannot exceed 50 MB.
  • Special effect: Widget highlighted status. Displayed by default or on page load.
  • Padding: Distance between the chart and the four sides (top, bottom, left, and right as shown in Figure 2) of the widget. The default value is 0, indicating that the chart stretches to fill the entire widget.
  • Title settings
    • Title: Whether to display the widget title.
    • Title content: Content of the title.
    • Title row height: Row height of the title, in pixels.
    • Background color: Background color of the title.
    • Text position: Position (center, left, right, or custom) of the text in the title.
    • Font: Font, size, and color of the title.
  • Table operations
    • Show/Hide column: Whether the columns to be displayed or hidden in the runtime environment. After enabling the show/hide column function, you can set the hover display, icon color, and icon selected color.
      Figure 4 Column display effect
    • Table export: Whether to enable the table export function. After enabling table export, you can set the hover display, icon color, and icon selected color.
    • Hover display: Once enabled, the corresponding button is displayed when you move the cursor to the table widget.
    • Icon color: Icon color of the button.
    • Selected icon color: Color of the selected button icon.

Configuration

You can set the background color, number of rows, table header, and cells of the widget.

Figure 5 Configuration
  • Global style
    • Background color: Background color of the table.
    • Number of rows in the table: Number of rows displayed in the current table.
    • Border: Border style of the table.
  • Title settings
    • Overflow text: Display style of extra-long text in the table, for example, ellipsis (...) and line break.
    • Table header alignment: Alignment mode of the table header, for example, left, center, and right.
    • Header row height ratio (%): Header row height of the table in percentage.
    • Table header background color: Background color of the table header, which applies to all columns at the same time.
    • Table header font: Header font, which applies to all columns at the same time.
    • Border: Border style of the table header.
  • Cell
    • Overflow text: Display style of extra-long text in the table, for example, ellipsis (...), line break, and scroll.
    • Content alignment: Alignment mode of content in the cells, for example, left, center, and right. The mode applies to all content at the same time.
    • Content font: Font of cell content, which applies to all columns at the same time.
    • Border: Border style of the cells.
  • Tree table
    • Lazy load: Once enabled, global variables and interaction events must be configured.
    • Expand level: Number of levels to expand in the tree table.
  • Add condition style: Add a condition style. As shown in Figure 6, the widget name is displayed in red if the success rate meets the configured condition (80.4%). Otherwise, it is displayed in the normal color.

    The condition style of the tree table takes effect only when Relationship and Response Column are of single-line text and number types, respectively.

    Figure 6 Adding a condition

Graphic

A graphic is a specific graphical expression element that visualizes data in a widget, for example, a slice in a pie chart, a bar in a bar chart, a line or a kink point in a line chart.

Figure 7 Tree table graphic
  • Unified configuration
    • Icon selection color: Icon color when frontend sorting or filtering is selected.
      Figure 8 Icon color displayed for frontend sorting
    • Frontend sorting: Whether to enable the frontend sorting function. Once enabled, the icon shown below will appear when previewing the table and is used for sorting data.
      Figure 9 Sorting data on the frontend
    • Frontend filtering: Whether to enable the frontend filtering function. Once enabled, the icon shown below will appear when previewing the table and is used for filtering data.
      Figure 10 Filtering data on the frontend
  • Data series: An array that contains multiple series. You can use one or more series to configure cyclic rendering.
    Figure 11 Data series

    You can drag a series to form a hierarchy with other series. A maximum of three levels are supported.

    • Original data name: Default series name in the raw data. You can modify the name by setting column name. The text content comes from values of the data model, such as the widget name, delay, and success rate.
    • Type: Data type, including single-line text, multi-line text, number, trend, image, mini bar chart, mini line chart, and mini progress bar. The displayed parameters vary according to the data type. The actual parameters displayed on the page are used. The mini bar chart and mini line chart can be zoomed in.
    • Column name: Series name in the customized data.
    • Data series: Whether to display data series in the chart. For example, if you enable the widget name series, the widget name column will be displayed in the chart; otherwise, it will be hidden.
      Figure 12 Data series enabled
      Figure 13 Data series disabled
    • Frontend sorting: Whether to enable the frontend sorting function. Once enabled, the icon shown below will appear when previewing the table and is used for sorting data. Displayed only when the data series function is enabled.
      Figure 14 Sorting data on the frontend
    • Frontend filtering: Whether to enable the frontend filtering function. Once enabled, the icon shown below will appear when previewing the table and is used for filtering data.
      Figure 15 Filtering data on the frontend
    • Column width ratio (%): Ratio of the corresponding series in the chart.
    • Table header alignment: Alignment mode of the table header, for example, left and center.
    • Table header background color: Background color of the table header.
    • Table header font: Font, color, and size of the table header.
    • Content alignment: Alignment mode of the table content, for example, left and center.
    • Content font: Font, color, and size of the table content.

Data

In the data settings, you can set the data source of the tree table widget. For more information, see Data Access.

Interaction

In the interaction settings, you can configure interactions between the tree table widget and other widgets or pages. For details, see Interaction Configuration.