Data Table¶
Renders rows from a data source as a table, with generated columns, grouping, aggregates and conditional styling.
Table components · element type data-table · binds through a data source, $record and $group in expressions
Related: Custom Table · Key-Value Table · Repeating Elements
Examples¶
Getting a table on the page takes three steps: pick a Data source, press Generate columns, then open Column settings to rename headers and set formats.
// A computed column, set as the column's Value Expression
// The result is formatted by the column's format type
{$record.itemAmount} + {$record.vatAmount}
// A formatted cell, set as the column's Text
// Nothing is formatted for you here, so include the format
{$record.itemAmount:currency;USD;2}
// A group total, in a group caption or footer
{$group.total:currency;USD;2}Data¶
| Option | Values | Default | Description |
|---|---|---|---|
| Data source | A data source | None | The rows to display. The adjacent buttons preview rows, edit or create the source, and open Transform data — sort, filter, top N and grouping steps applied to this table only |
| Generate columns | Action | — | Creates columns from the data source fields |
| Automatically regenerate columns | On · Off | Off | Updates columns when the data source structure changes |
| Is tree? | On · Off | Off | Displays hierarchical data with expandable rows |
| Children field | Field name | Empty | With Is tree? on, the field holding each row's child rows |
| Empty text | Text | Empty | Shown when the source returns no rows, e.g. "No data to show" |
Default formats¶
Each of these sets the format for a whole type of column, and any column can override it in Column settings.
| Option | Example | Default | Description |
|---|---|---|---|
| Number | n;2 |
From theme | Default format for numeric columns |
| Percent | p;1 |
From theme | Default format for percentage columns |
| Date | dt;MMMyy |
From theme | Default format for date columns |
| Currency | currency;USD;0;2 |
currency;;2 |
Default format for currency columns — the report culture's currency, two decimals |
See text formats for the full syntax.
Layout¶
| Option | Values | Default | Description |
|---|---|---|---|
| Allow this component to break across multiple pages | On · Off | Off | Lets a long table continue onto the next page |
| Use fixed table layout | On · Off | Off | Equal column widths, unless a width is set in Column settings |
| Disable cell text wrap | On · Off | Off | Keeps cell content on one line |
| Disable header text wrap | On · Off | Off | Keeps header content on one line |
| Show vertical lines | On · Off | Off | Draws rules between columns |
| Preserve group order | On · Off | Off | Keeps groups in the order the data arrives instead of sorting them |
| Second / Third row line visibility expression | Expression | Empty | Controls whether a row's second or third line is drawn |
Column settings¶
| Option | Values | Description |
|---|---|---|
| Field | Data source field | The field bound to this column |
| Format type | Number · Date · Percentage · Currency · Expression · Custom | Expression resolves the format at generation time; Custom takes a format string |
| Custom format | Format string | e.g. dt;yyyyMMdd — see text formats |
| Align / Vertical Align | Left · Center · Right / Top · Middle · Bottom | Alignment of cell content |
| Row Span / Col Span | Number | How many rows or columns the cell spans |
| Width | Any CSS unit | Column width |
| Merge Cells | Merge options | Combines repeating cells |
| Value Renderer | See below | How the cell content is produced |
| Custom Style | Expression + Style + Class | Conditional styling per cell |
Value renderers¶
| Renderer | Description |
|---|---|
| Value Expression | Returns a number or text, formatted automatically. Empty means "show Field" |
| Text | A text template with no automatic formatting — put the format in the template |
| HTML | A text template rendered as HTML, for line breaks and inline styling |
| Custom Component | A reusable custom component, with parameter binding |
| Elements | Other components inside the cell — images, barcodes, charts |
| Renderer Function | Custom JavaScript returning HTML, for cases the others cannot express |
| Row Number | An auto-incrementing row number. A grouping level's Reset row numbers restarts it per group |
Headers, footers and captions¶
| Option | Values | Description |
|---|---|---|
| Header1 / Header2 / Header3 | Header level | Switches which of the three header rows you are editing |
| Enabled | On · Off | Shows or hides the selected header, footer or caption |
| Type | Text · HTML Template | Header content type |
| Text | Text or template | The content |
| Align / Vertical Align / Row Span / Col Span | As for columns | |
| Aggregate | Sum · Count · Average · … | The aggregation used in a footer or caption |
| Aggregate Field / Aggregate Value / Aggregate Alias | Field · expression · name | What is aggregated, and the name the result is available under |
| Weight Field | Field | Field used for weighted aggregates |
Notes¶
- In any expression,
$recordis the current row and$groupis the surrounding group's aggregates - Transform data changes the rows for this table only — the data source itself is untouched, so two tables can shape the same source differently
- Turn on Allow this component to break across multiple pages for anything that might outgrow one page; without it the table is kept whole and may overflow