Display tabular data — amortization schedules, comparison grids, or any rows and columns driven by formulas and templates.
In the builder: Elements → Results Widgets → Table
Widget Settings
Variable
| UI field | Description |
|---|---|
| Name | Table identifier (required). |
Table Data
Click Edit Table to define columns, rows, and cell values. Each cell is a string — see Variables, formulas, and templates in cells below.
Visibility
Expand Visibility to show or hide the widget based on an active View Mode or a formula. See Show and Hide Fields with Conditional Logic.
| UI field | Description |
|---|---|
| Show | Always or Conditionally |
| Active mode is | Name of the View Mode that must be active for this widget to appear (when Show is Conditionally). |
| Formula result is positive | Optional formula; evaluated on Calculate |
Design
Expand Design to style individual parts of the widget. Prefer project themes for a consistent look; per-widget styling is optional.
| Part | What it represents |
|---|---|
| Table wrapper | The full table (.cp-table). |
| Header Cell | Column header cells (<th>). |
| Cell | Data cells (<td>, .cp-table-value). |
Custom CSS — useful selectors and classes:
| Selector / class | Targets |
|---|---|
#cp-{ID} |
Entire widget (ID from the Element panel header). |
| Custom CSS Classes | Classes you add in Design; applied to the outer widget container. |
.cp-table |
Table wrapper. |
.cp-table-value |
Cell content. |
table |
The HTML table inside the widget. |
Variables, formulas, and templates in cells
Each table cell is a string. On Calculate, every cell is resolved in this order:
| Cell content | Behavior |
|---|---|
Starts with = |
Formula — evaluated with all form variables plus $index (current row, 0-based) |
Contains {{ }} |
Template — variable substitution and pipes (same five pipes as Custom Text) |
| Matches a variable Name | Substitutes that variable's current value |
| Otherwise | Literal text ([icon] shortcodes expanded in literals) |
Formulas in cells
Yes — formulas work in table cells. Prefix the cell value with =:
| Year (header) | Payment (header) |
|---|---|
Year |
Payment |
={{ $index + 1 }} |
={{ monthly_payment }} |
$index— 0-based row index (first data row =0). Use={{ $index + 1 }}for row numbers 1, 2, 3…- Reference any variable Name, e.g.
={{ principal * rate / 100 }}
Simple example — three-column schedule (headers in row 1, data from row 2):
| Column A | Column B | Column C |
|---|---|---|
Year |
Payment |
Balance |
={{ $index + 1 }} |
={{ monthly_payment }} |
={{ remaining_balance }} |
Mark header cells using the row/column header checkbox in the table editor (<th> vs <td>).
Templates and pipes in cells
Use the same {{ }} syntax as Custom Text:
| Cell value | Result |
|---|---|
{{ monthly_payment | currency:2:USD }} |
Currency-formatted payment |
{{ interest_rate | percent:1 }} |
5.3% when interest_rate is 0.053 |
Total: {{ subtotal | currency:PLN }} |
Literal text mixed with a formatted variable |
{{ plan_name | capitalize }} |
Capitalized plan label |
All formatting pipes
| Pipe | Syntax | Example value | Output |
|---|---|---|---|
| number | {{ value | number:D }} |
1234.5, D=2 |
1234.50 |
| percent | {{ rate | percent:D }} |
0.0525, D=1 |
5.3% (value × 100, then %) |
| currency | {{ amount | currency:D:CODE }} |
1000, D=2, CODE=PLN |
zł1,000.00 |
| capitalize | {{ name | capitalize }} |
monthly report |
Monthly report |
| raw | {{ html | raw }} |
HTML string | Unescaped HTML — use carefully |
Currency arguments (order is flexible):
| Syntax | Meaning |
|---|---|
{{ amount | currency:PLN }} |
PLN, 2 decimal places (default) |
{{ amount | currency:2 }} |
USD, 2 decimal places |
{{ amount | currency:2:EUR }} |
EUR, 2 decimal places |
{{ amount | currency:EUR:0 }} |
EUR, no decimal places |
Expressions inside {{ }} support simple arithmetic with variable names, e.g. {{ loan_amount * 0.1 | currency:2:USD }} or {{ (price + tax) | number:2 }}.
Literal variable shorthand
A cell containing only a variable Name (no = or {{ }}) inserts that variable's value directly, e.g. monthly_payment → current value of the Result or Number widget with that name.
See Understanding Formulas and Variables and Custom Text for the same pipe syntax in paragraphs.