cnc-list
A row list with per-row action buttons. Like cnc-table it takes columns and rows
rather than markup, but the actions live on the ROW — each row carries its own, so
different rows can offer different ones.
Quick start
Pass columns and rows. A column with
type: "actions"
renders each row's own $actions list as buttons.
press an action
<cnc-list
@action="run($event.detail.action, $event.detail.row)"
$columns='[
{ "label": "Name", "path": "name" },
{ "type": "actions" }
]'
$rows='[
{ "name": "invoice-1042.pdf", "$actions": [ { "label": "Open" } ] }
]'
></cnc-list>Column keys
| Key | Purpose |
|---|---|
| label | The column heading. |
| path |
A DOT PATH into the row, so nested fields need no flattening. A value that is an object
with value and href renders as a link.
|
| type |
"actions"
turns the column into the per-row button strip. Any other column shows data.
|
| id | An identifier for the column. |
| href | A fallback link target for the column, used when the cell value carries none. |
Usage guidance
Actions belong to the ROW, in its own $actions array, which is the difference worth
exploiting: a paid invoice can offer different buttons from a pending one without any
conditional markup. Build that array when you build the row.
Nothing happens without an @action handler. The widget reports the press and does
not act, so a Delete button with no handler is decoration — and one WITH a handler deletes
immediately, so wrap destructive actions in a confirmation of your own.
Use cnc-table when the data is a grid of comparable values and the columns want
sorting or resizing; use this when each row is an ENTITY the user acts on. The two take
deliberately similar configs, so switching is cheap if you pick wrong.