Table with expansion panel

Who it’s for

Anyone building a table of entities who occasionally needs more detail than columns allow asks “can I see this row’s full picture without leaving the table or opening a separate dashboard?” A support engineer scanning a device list wants to check one unit’s extra readings without navigating away. A fleet manager reviewing a table of vehicles wants a note or a history entry visible right under the one row that needs attention, and closed again just as easily for every other row.

What it does

A row for Pump-04 shows its usual name and status columns; clicking the row or its chevron expands a panel underneath showing “Entity ID: 3f2a…” and “Latest temperature: 78.2” — built by a JavaScript function you write from the row’s full entity data, not just the columns already on screen.

• Expands and collapses per row — clicking a row or its chevron reveals a detail panel underneath it with a smooth transition, and clicking again collapses it
• Detail content comes from a JavaScript function you write, which can build anything — formatted text, small layouts, links, icons — from the row’s entity and its full data, not just the columns shown as cells
• Detail styling comes from CSS you write, injected scoped to the widget instance, so the custom markup can be styled without touching any component code
• A key can feed the detail panel without ever appearing as a column — turn off that key’s own Show in table to keep it out of the table while still making it available to the expand function
• Renders whatever the function returns; it does not validate or sanitize that HTML itself, and if the function is missing or throws, the expanded panel just stays empty

How to set up

Data keys

Key	Role	Type	Description
Data keys (any number, user-configured)	Table column and/or detail input	Timeseries or Attribute	Each key becomes a column by default; turning off its own Show in table hides the column while still passing its value into the expand function

Add data keys the same way as any table widget. Every key’s own settings dialog carries a Show in table toggle — turn it off to keep a key out of the visible columns while still making its latest value part of the entity data your expandable content function receives. With no data keys bound, the table has no columns and nothing to expand.

Expandable row content

Configured under the widget’s Appearance tab, in the Expandable row content group.

Setting	Default	Effect
Expandable content function	None	A JavaScript function that receives the entity and its full data — every bound key, not just the ones shown as columns — and must return an HTML string to render inside the expanded row
Expandable content CSS	None	Injected into a <style> tag scoped to this widget instance, so you can style whatever markup the function returns

Without a function set here, expanding a row opens an empty panel — the chevron and the transition still work, but there is nothing inside. If the function is invalid or throws, the panel stays empty the same way.

How to customize

• To let viewers search the table — turn on Enable search.
• To hide or show pagination controls — turn off or on Display pagination.
• To let viewers choose which columns are visible — turn on Enable column display selection.
• To let viewers export the table — turn on Enable export.
• To open the table pre-sorted — set Default sort order to a column and direction.
• To run custom behavior on a row or cell — wire up Row click, Row double click, Cell click, or Action cell button under the widget’s Actions tab; Action cell button and Cell click can each hold more than one action, and Action cell button actions can each carry their own show condition.

Tips

• Keep the expandable content function fast and defensive — it runs every time a row is expanded, and returning malformed HTML (an unclosed tag, say) can distort the row below it.
• Scope every rule in Expandable content CSS to a class or wrapper your function actually outputs (like .entity-detail), since the style tag applies to the whole widget instance and could otherwise leak into the table itself.
• Reach for a key’s own Show in table toggle when a reading matters for the detail panel but would just add clutter as a fourteenth column.