Appearance
Data Table
A table of rows from a dataset, with sort, filter and row select.
In Studio
In Studio, double-click Data Table in the Components category of the Components panel. It is added to the open view, where you can drag it into place.
When to use
Use Data Table for batches, run logs and query results. Pick cards on a phone or Lens screen, and compact density for long lists.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Variant | hairline, striped, cards | hairline | How it looks: hairline (default, thin row dividers), striped (header plate, zebra rows) or cards (each row a card). |
| Density | comfortable, compact | comfortable | comfortable (default) or compact row spacing. |
| Row Key | String | (none) | The column that identifies a row, so the selection survives a refresh or a sort. Blank identifies rows by position. |
| Sortable | true, false | true | Lets the operator sort by clicking a column header: ascending, descending, source order. |
| Filter Box | false, true | false | Shows a filter box above the table. |
| Row Select | true, false | true | Lets the operator select a row. |
| Empty Text | String | No rows | Shown when there are no rows. |
| Range Column | String | (none) | A timestamp column to filter by Range Start and Range End. Blank turns the range off. |
| Range Start | String | (none) | Start of the range, in epoch milliseconds. Bind it to a Date / Time Range's start. |
| Range End | String | (none) | End of the range, in epoch milliseconds. Bind it to a Date / Time Range's end. |
| Rows | Dataset | (empty) | The data: a list of row objects, one key per column. Bind it to a Named Query, a script or a dataset. With no columns set, the first row's keys become the columns. |
Binding
This component has no single value binding.
Bind the rows property to a Named Query (or any dataset). columns lists key, label, width, align and format per column; leave it empty to get one column per key. Selecting a row publishes selectedRow, selectedIndex and selectedKey as live values and fires the On Action Performed event with the row.