Basic Table
The basic 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 basic table widget from All > Text to the blank area of the canvas.

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

- 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.
- Header 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.
- 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: After this function is enabled, the corresponding button is displayed only 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
On the configuration page, you can set the global style, table header, row, and serial number of the widget.

- Global style
- Background color: Background color of the table.
- Number of table rows: Number of rows displayed on the current page.
- Border: Border style of the table.
- Header 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.
- Row configuration
- Odd row background color: Background color of odd rows.
- Even row background color: Background color of even rows.
- 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.
- Serial number: Serial number for the table.
- Serial number: Whether to use the serial number in the table.
- Serial name: Name of the serial number.
- Column width ratio (%): Column width ratio of the serial number in the table.
- Background color: Background color of the serial number.
- Radius: Radius of the serial number.
- Rounded corners: Round corner of the serial number. The value 0 indicates right angle.
- Font: Font, size, and color of the serial number.
- Carousel
- Carousel: Whether to enable the carousel function. Once enabled, the carousel speed can be set.
- Carousel speed: Carousel speed (range: 0.1 to 5.0). Higher values indicate faster playback.
- Pagination
- Foreground pagination: Whether the table is displayed with multiple pages. This mode does not support the carousel function.
- Row height: Row height of the pages, in pixels.
- Page size: Number of records displayed on each page. Multiple records are separated with commas (,).
- Text position: Position of text displayed on each page. The text can be displayed on the left, right, or center.
- Background color: Background color of each page.
- Font: Font, size, and color of each page.
- Check box color: Color of the border when a page is selected, including the border of each page or item, the border of the current page, and the border of the page to be displayed.
- Page box width: Width of the page box, in pixels.
- Background color of the drop-down list box: Background color of the drop-down list box.
- Font color of the drop-down list box: Font color of the drop-down list box.
- Background color of the selected state in the drop-down list box: Background color of the drop-down list box when selected.
- Color of the selected font in the drop-down list box: Font color of the drop-down list box when selected.
- Background color of the drop-down list box when the mouse is hovered: background color of the drop-down list box when you hover over it.
- Font color of the drop-down list box when the mouse is hovered: font color of the drop-down list box when you hover over it.
- Add condition style: Add a condition style.
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.

- Unified configuration
- Selected icon color: Color of a selected icon, which is valid for all columns.
- Foreground sorting: Whether to enable the foreground sorting function (all columns in the table) to sort data in the table.
- Foreground filtering: Whether to enable the foreground filtering function (all columns in the table) to filter data in the table.
- Data series: Set the attributes of the widget name, delay, and success rate.
- Original data name: Default series name in the raw data. You can modify the name by setting column name. The text content comes from the value in the data model.
- Column name: Display name of the data series in the chart.
- Data series: Whether to display data series in a chart.
- Foreground sorting: Whether to enable the foreground sorting function (specified columns in the table). Once enabled, the icon shown in the following figure will be displayed when you preview the table. The icon is used to sort data in the table.
Figure 6 Sorting data on the frontend
- Foreground filtering: Whether to enable the foreground filtering function (specified columns in the table). Once enabled, the icon shown in the following figure will be displayed when you preview the table. The icon is used to filter data in the table.
Figure 7 Filtering data on the frontend
- Column width ratio (%): Column width ratio in the table.
- 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 basic table widget. For more information, see Data Access.
Interaction
In the interaction settings, you can configure interactions between the basic table widget and other widgets or pages. For details, see Interaction Configuration.
Feedback
Was this page helpful?
Provide feedbackThank you very much for your feedback. We will continue working to improve the documentation.See the reply and handling status in My Cloud VOC.
For any further questions, feel free to contact us through the chatbot.
Chatbot