Power Plus - Renderer Table

The Table Renderer displays data in a classic HTML <table> with a header row (<thead>) and data rows (<tbody>). It produces semantic, accessible HTML table markup — which means screen readers and search engines can understand the data structure natively. This makes it the best choice for straightforward, read-only data tables where accessibility and SEO matter.

The Table renderer is simpler than the Grid renderer: it doesn’t support row grouping, custom footer calculations, or interactive input fields. But its simplicity is a strength — it’s the easiest renderer to configure and produces the cleanest, most accessible markup.

Configuration

Field	Type	Description
Name	Text	A unique identifier (e.g. `contacts_table`, `data_table`). The List module references this name.

Fields (Repeating Group)

Each field defines a column in the table. The order of fields determines the left-to-right order of columns. Each column gets a <th> in the header row and a <td> in each data row.

Field Property	Description
Name	A CSS class suffix for styling specific columns. `email` produces class `pwr-list-field-email` on both the `<th>` and `<td>` elements. Use this to target columns for custom alignment, width, or formatting.
Title	Rich text for the column header (`<th>`). This is what the visitor sees in the header row. Supports JSONata for dynamic headers (rare, but possible). Example: `Full Name`, `<strong>Email</strong>`, `Date Added`.
Display	The cell content type. `text` — renders your Content template inside a `<td>`. `image` — renders an `<img>` tag. `input` — renders a form input. `link` — renders an `<a>` tag. For read-only tables, `text` is the most common.
Value	A JSONata expression for the data value. Used for `image` src and `input` default values.
Content	Rich text with embedded JSONata for `text` display. This is the cell content template. Example: `[[object.firstname]] [[object.lastname]]` concatenates first and last name. You can use any HTML inside, including conditional expressions and formatting functions.
Width	CSS width for this column. Use standard CSS values: `120px`, `2fr`, `auto`, `200px`. The table distributes remaining space proportionally when you use `fr` units.
Link	Makes cells in this column clickable. Configure the URL (JSONata expression), target, and rel attributes.

Layout Options

Field	Default	Description
Items Per Page	25	Number of data rows per page. Tables typically show more items per page than card layouts because rows are compact. 25 is a good default; increase to 50 or 100 for dense reference tables.
Spacing	`default`	Gap between rows. `default` adds subtle spacing for readability. `none` removes all gaps for a tight, spreadsheet-like look.
Mobile Mode	`none`	How the table adapts to small screens. `none` — table stays as-is (may overflow). `scroll_hori` — table becomes horizontally scrollable. `stack_rows` — each row becomes a vertical card with label-value pairs.

Visual Style

Style	Description
`default`	Standard table with styled header row (bold text, subtle background) and clean body rows.
`custom`	Use a custom CSS file for complete design control.

Advanced

Field	Description
Renderer	The JavaScript renderer class. Default: `TableRenderer`. You can create a custom class extending `TableRenderer` for specialized behavior (e.g. adding row click handlers or conditional row styling).

Example: Contact Directory

A searchable, sortable table of contacts from the CRM:

Renderer Module:
  Name: contacts_table
  Style: default
  Items Per Page: 25
  Mobile Mode: stack_rows
  Fields:
    - Name: name
      Title: Full Name
      Display: text
      Content: [[object.firstname]] [[object.lastname]]
      Width: 2fr
    - Name: email
      Title: Email
      Display: text
      Content: [[object.email]]
      Width: 2fr
    - Name: company
      Title: Company
      Display: text
      Content: [[object.company]]
      Width: 1fr
    - Name: created
      Title: Date Added
      Display: text
      Content: [[ $fromMillis(object.createdate, "[D01]/[M01]/[Y0001]") ]]
      Width: 120px

The $fromMillis() JSONata function converts an epoch timestamp to a formatted date string. The format pattern [D01]/[M01]/[Y0001] produces dates like 15/01/2024.

Example: HubDB Resource Table

A table listing resources from a HubDB table with clickable names:

Renderer Module:
  Name: resources_table
  Style: default
  Items Per Page: 50
  Mobile Mode: scroll_hori
  Fields:
    - Name: title
      Title: Resource
      Display: text
      Content: <strong>[[object.values.name]]</strong>
      Width: 2fr
      Link: [[object.values.link]]
    - Name: type
      Title: Type
      Display: text
      Content: [[object.values.type.label]]
      Width: 1fr
    - Name: date
      Title: Published
      Display: text
      Content: [[ $fromMillis(object.values.publish_date, "[MNn] [D], [Y]") ]]
      Width: 150px

Table vs Grid: When to Use the Table

Choose the Table renderer when: - You need semantic HTML table markup — screen readers announce “row 3 of 25, column 2 of 4” which helps visually impaired users navigate data. The Grid renderer uses <div> elements which don’t convey this structure automatically. - Your data is simple and read-only — no editable fields, no footer calculations, no row grouping. - SEO matters — search engines can parse <table> elements and may display them as rich snippets. - You want the simplest configuration — fewer options means fewer decisions and less room for misconfiguration.

Choose the Grid Renderer instead when you need grouping, interactive inputs, custom footer calculations, or more layout flexibility.

Feature	Table Renderer	Grid Renderer
HTML output	`<table>`, `<thead>`, `<tbody>`, `<tr>`, `<td>`	CSS Grid `<div>` elements
Screen reader support	Native table semantics	Needs ARIA attributes
Footer row	Not supported	Supported (custom content)
Row grouping	Not supported	Supported
Input fields	Limited	Full support (cart quantities, etc.)
Custom renderers	Extensible	Extensible (CartRenderer, etc.)

Mobile: Stacked Rows

When Mobile Mode is set to stack_rows, the table transforms on small screens. Instead of displaying data in a wide horizontal table that overflows the screen, each row becomes a vertical card where the column title appears as a label next to each value:

Table Mobile Stacking

This transformation happens automatically via CSS — no JavaScript is involved — so it’s fast and reliable.