Data Table

Overview

The data table can place the data table from the system module in the dashboard for synchronized display, and you can set the data display conditions, fields, operation functions and other configuration items.

Settings

Setting Item	Description
Data Table	Select the data source for the card.
Filter	Set the filtering conditions for data included in the card.
Data Volume	Set the number of data entries included in the card.
Sort Field	Set the sorting method for displayed data.
Allow Export	After enabling, you can export the current data table data to Excel.
Allow View Details	After enabling, you can view the record details by clicking on the data.
Dark Mode	Enable dark mode, so the card can be used with dark backgrounds.
Display Type	Adjust the display type of the data table. Options: Table, Card
Table Style	Set the table display style. Options: Display Serial Number, Display Borders, Display Stripes
Table Row Height	The height of each row in the table. Options: Small, Medium, Large
Field Display and Order	You can set the field content and order displayed in the data table card.
Cell Format	Set the display format of cells that meet the conditions through expressions, including Background Color, Text Color, Bold, Italic, Strikethrough, Underline, Style Expression

Style Expression

Supports calculating CSS properties using Expressions and returns a JS object. In the corresponding JS object, the Key is the camelCase CSS property name, and the Value is the string of the CSS property value corresponding to the Key. For example, setting the font size to 20 pixels:

{
  fontSize: "20px";
}

Usage Scenarios

Display list data in table format. The following is an example using a grade table.

Configuration Method

• Configure a grade management table with the following fields:

Field Name	Field Type
Name	Single Line Text
Subject	List Selection
Score	Decimal

• Configuration steps:

1. Configure Data Table as Grade Management
2. Add all fields in Field Display and Order
3. Configure When Conditions Are Met in Cell Format to Inline Record.Score >= 80
4. Configure Set Field in Cell Format to Score
5. Select Style Form Expression in Style in Cell Format
6. Configure Style Form Expression in Cell Format to ${ {backgroundColor: "green", color: "#fff"} }