Custom Table¶
The Custom Table is a table you build by hand. You add the rows and cells yourself, decide which rows are headers, footers or captions, merge cells where you need to, and type or bind the content of each cell. Use it for layouts a regular table cannot express, such as a summary box with merged header cells or a two-column fact sheet.
See also Data Table and Data List.
Using it¶
Drop a Custom Table onto the page. It starts as a small grid. Select a row to set its Level (header, data, footer or caption), then select a cell to type its Text or bind it to a value such as {$data.invoice.total}. Merge cells with Cols Span and Rows Span. To repeat a row for each record of a data source, set a repeat source on that row.
Options¶
The table is a tree of header, data, footer and caption rows. Each cell carries its own content and styling.
| Option | Values | Default | Description |
|---|---|---|---|
| Content Type | Text or HTML | Text | Whether the cell shows plain text or HTML |
| Text / HTML | Any text or template | Empty | The content of the cell |
| Level | Header, Data, Footer, Caption | Data | Which part of the table the row belongs to |
| Cols Span / Rows Span | Numbers | 1 | How many columns or rows the cell covers |
| Visible Expression | An expression | Empty | Hides the row or cell when the expression is false |
| Font Family / Font Size / Font Weight | Typography | From theme | Text styling for this cell |
| Text Color / Background / Border / Padding | CSS | From theme | Appearance of this cell |
| Text Transform | None, Uppercase, Lowercase, Capitalize | From theme | Casing of the cell text |
| Box Style | Sizing and spacing | None | The box around the table |
Tips¶
Two things to keep in mind before choosing this widget.
- Rows and cells can repeat over a data source, so a hand-built table can still show live data.
- Everything here is manual, including the header row. If a Data Table can show what you need, it is the faster choice.