The Table appearance displays multiple data records in a configurable tabular format with support for various cell types,
conditional formatting, filtering, sorting, and pagination.
Settings
Data Settings
| Setting | Description |
|---|
| Column Keys | Define column structure (see Cell Types below) |
| Conditional formatting | Apply rules for styling based on values |
| Filtering | Filter rows based on conditions |
| Sorting | Sort data by column |
| Image folder | Folder to search for images (for [file] columns) |
| Base event ID | Identifier for table events (default: "table") |
| Number max value | Maximum value for [number] type columns |
| Progressbar max value | Maximum value for [progressbar] type columns |
| Color max value | Maximum value for [color] type columns |
How to define columns
Define which columns to display and their types. Enter one column per line in the Column Keys field.
[type][flags]columnKey|Alias
The |Alias part is optional. If provided, the alias is displayed as the header text instead of the column key. To create a column with a blank header, use a pipe followed by one or more spaces (e.g., columnKey| ). A pipe with nothing after it is not valid and will be ignored.
Column Types
Flags
Special format flags are used to add column specific styling, which overrides the settings inside the editor. Styling flags affect both the header cell and the data cells of that column.
| Flag | Description | Value | Unit | Default (when no value given) |
|---|
size | Column width percentage | Number | % (auto) | Equal split |
bgcolor | Background color | CSS color code | - | #ffffff |
fontcolor | Text color | CSS color code | - | #000000 |
fontsize | Font size | Number | px (auto) | 16 |
bold | Bold text | None | - | - |
italic | Italic text | None | - | - |
underline | Underlined text | None | - | - |
h-align | Horizontal alignment | left, center, right | - | center |
v-align | Vertical alignment | top, center, bottom | - | center |
padding | Cell padding on all sides | Number | px (auto) | - |
p-top | Cell padding top override | Number | px (auto) | - |
p-right | Cell padding right override | Number | px (auto) | - |
p-bottom | Cell padding bottom override | Number | px (auto) | - |
p-left | Cell padding left override | Number | px (auto) | - |
prefix | Text prepended to the value ([text] only) | String | - | - |
postfix | Text appended to the value ([text] only) | String | - | - |
Flags that require a value use the [flag:value] syntax (e.g., [size:25], [fontcolor:#ff0000]). Flags that accept no value are written as [flag] (e.g., [bold], [italic]). Flags that accept an optional value will use the default shown above when no value is provided (e.g., [h-align] defaults to center).
For numeric flags, units are appended automatically where marked with (auto) -- provide only the number (e.g., [fontsize:16] becomes 16px, [size:25] becomes 25%). Color flags require a full CSS color code including the # prefix (e.g., [fontcolor:#ff0000]).
Examples
[text][bold]name|Employee Name
[italic]Id|Employee Id
[numberformat][size:25]salary|Annual Salary
[progressbar]progress
[date]startDate|Start Date
[file]avatar|Photo
[text][padding:10]description|Description
[text][p-top:5][p-left:10]notes|Notes
[linechart]sparkline|Trend
[text][h-align:left][fontcolor:#336699]category|Category
[text][h-align]centered|Centered Column
[text][prefix:$]price|Price
[text][postfix: USD]amount|Amount
[text][prefix:(][postfix:)]note|Note
[text]internalId|
In the last internalId example, internalId| (pipe followed by a space) uses a space as the alias, resulting in a blank header for that column.
Apply dynamic styling to cells based on data conditions.
Access via the "Conditional formatting" button to open the condition editor.
Filtering
Filter rows based on conditions. Only rows matching the filter are displayed.
Access via the "Filtering" button to open the filtering editor.
Sorting
Sorts the table rows by column values.
Access via the "Sorting" button to open the sorting editor.
Layout Settings
| Setting | Description |
|---|
| Table Orientation | Vertical (standard) or Horizontal (rotated) |
| Maximum num of rows | Limit displayed rows (0 = show all) |
| Table data row/column sizing | Auto (fit to container) or Fixed (specified %) |
| Data row/column fixed size | Size percentage when using Fixed sizing |
| Enable scrolling | Allow scrolling when content overflows (only with Fixed sizing) |
Background Settings
| Setting | Description |
|---|
| Enable Even-Odd Row styling | Alternate row colors for readability |
| Background Color | Uniform background (when Even-Odd is OFF) |
| Even-Row Background Color | Color for even-numbered rows |
| Odd-Row Background Color | Color for odd-numbered rows |
| Setting | Description | Range |
|---|
| Enable pagination | Split data across multiple pages | - |
| Pagination animation | Transition effect: None or Fade | - |
| Time on page | Seconds before auto-advancing | 5-300 |
| Setting | Description |
|---|
| Disable header | Hide the header row entirely |
| Background color | Header row background |
| Vertical alignment | Top, Center, or Bottom |
| Horizontal alignment | Left, Center, or Right |
| Font settings | Family, Size, Style, Color |
| Header Size | Height percentage of header row |
Border Settings
Outer Border
| Setting | Description |
|---|
| Border rounding | Corner radius for the table |
| Outer Border width | Thickness of outer border |
| Outer Border style | Solid, Dotted, Dashed, Double, Groove, Ridge |
| Outer Border Color | Color of outer border |
| Outer Border Placement | Every, Top, Bottom, Left, Right, Top-Bottom, Left-Right |
Inner Border
| Setting | Description |
|---|
| Inner Border width | Thickness of cell dividers |
| Inner Border style | Same options as outer border |
| Inner Border Color | Color of cell dividers |
| Inner Border Placement | Every, Vertical only, Horizontal only |
Separate width, style, and color settings for the header row border.
Visible only when scrolling is enabled
| Setting | Description |
|---|
| Sticky header | Keep header visible while scrolling |
| Size | Scrollbar width/height |
| Rounding | Scrollbar corner radius |
| Thumb Color | Scrollbar handle color |
| Thumb Hover Color | Handle color on mouse hover |
| Track Color | Scrollbar track background |
Cell Padding Settings
| Setting | Description | Range |
|---|
| Padding Top | Top padding for all cells (px) | 0-100 |
| Padding Right | Right padding for all cells (px) | 0-100 |
| Padding Bottom | Bottom padding for all cells (px) | 0-100 |
| Padding Left | Left padding for all cells (px) | 0-100 |
These global padding values apply to every cell in the table. They can be overridden on a per-column basis using the [padding:X] shorthand flag (sets all 4 sides) or the specific [p-top:X], [p-right:X], [p-bottom:X], [p-left:X] flags in the column key definition. Per-column specific flags take priority over the shorthand, and the shorthand takes priority over global settings.
Cell Type Specific Settings
Text Cell
| Setting | Description |
|---|
| Vertical/Horizontal alignment | Cell content alignment |
| Font settings | Family, size, style, color |
Date Cell
| Setting | Description |
|---|
| Pattern | Format pattern (e.g., "YYYY-MM-dd", "dd/MM/YYYY HH:mm") |
| Use 12-hour format | Toggle AM/PM display |
| Locale Code | Localization (e.g., "en-US", "de-DE") |
| Alignment | Vertical and horizontal |
| Font settings | Family, size, style, color |
| Setting | Description |
|---|
| Separator | Thousands separator |
| Decimal Separator | Character for decimal point |
| Decimal points | Number of decimal places (-1 = keep original, 0-4) |
| Prefix/Suffix | Text before/after number |
| Currency Symbol | Currency indicator |
| Currency Position | Prefix or suffix |
| Compact mode | Display as 1K, 1M, 1B |
| Compact threshold | When to start compacting |
| Percentage mode | Display as percentage |
| Percentage multiply | Multiply by 100 for percentage |
Image Cell
| Setting | Description |
|---|
| Image fit | Stretch, Cover, or Contain |
Linechart Cell
Displays a mini line chart inside a table cell. The data source value for this column must be an array of numbers (e.g., [10, 25, 18, 30, 22]). Missing or null values in the array are treated as gaps in the line.
Line
| Setting | Description | Default |
|---|
| Line color | Color of the chart line | #4CAF50 |
| Line width | Thickness of the line (1-10) | 5 |
| Line smoothing | Curve tension (0 = straight lines, 0.4 = smooth curves) | 0 |
| Fill under line | Fill the area between the line and the X axis | Off |
| Fill color | Color of the fill area (visible when fill is enabled) | rgba(76, 175, 80, 0.2) |
Axes
| Setting | Description | Default |
|---|
| Axis color | Color of the X and Y axis lines | #666666 |
| Axis width | Thickness of the axis lines (0 = hidden) | 4 |
| Begin Y axis at zero | Force the Y axis to always start at zero | Off |
Missing Values
Controls how gaps from missing or null data points are handled.
| Setting | Description | Default |
|---|
| Connect across gaps | Draw a line across missing values instead of leaving a gap | Off |
| Gap line style | Style of the bridging line: Solid, Dashed, or Dotted (visible when connect is enabled) | Dashed |
| Gap line color | Color of the bridging line (visible when connect is enabled) | #999999 |
| Gap fill color | Fill color under gap segments (visible when both connect and fill are enabled) | rgba(153, 153, 153, 0.2) |
Y Axis Labels
| Setting | Description | Default |
|---|
| Show Y axis range labels | Display min and max values on the Y axis | Off |
| Font settings | Family, size, style, and color for the labels (visible when labels are enabled) | - |
Sensor Events
Events use the configured eventId setting, as the prefix (default: table).
| Event Name | Payload | Trigger |
|---|
| eventId-page-changed | page index | Page navigation occurred |
| eventId-pages-count-changed | total pages | Total page count changed |
| eventId-clicked | pageIndex, rowIndex, cellIndex, cellValue, datasourceValue | Cell was clicked |
External Commands
| Command | Parameters | Description |
|---|
setTablePageTo | value: number | Navigate to page index |
setTableIndexNext | none | Go to next page |
setTableIndexPrev | none | Go to previous page |