Table with expansion panel

Table with Expansion Panel

Displays entity data as a table where every row can be expanded in place to reveal additional, fully custom detail content. The expanded content is generated by a user-supplied JavaScript function and styled with user-supplied CSS — so each row can show extra readings, history, or notes without navigating away from the table.

Features

• Expand/collapse per row — clicking a row (or its chevron button) reveals a detail panel underneath it with a smooth transition; clicking again collapses it.
• Custom detail content — the expanded panel’s HTML is produced by a widget-level JavaScript function, so it can render anything (formatted text, mini layouts, links, icons) built from the row’s entity and its data.
• Custom detail styling — an optional CSS block is injected into the widget so the custom detail markup can be styled without touching component code.

Data key configuration

Every data key’s settings dialog has a Show in table toggle. Turn it off to hide that key from the table while still making its value available to the detail content function.

Widget settings

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

Example expandable content function

var latest = data.find(function (d) { return d.dataKey.name === 'temperature'; });
var value = latest && latest.data.length ? latest.data[0][1] : 'n/a';

return '<div class="entity-detail">' +
  '<b>Entity ID:</b> ' + entityId.id + '<br/>' +
  '<b>Latest temperature:</b> ' + value +
  '</div>';

Example expandable content CSS

.entity-detail {
  font-size: 13px;
  color: #444B52;
}