C&C Docs
Log in

cnc-table

A data table driven by a column CONFIG rather than markup: sortable headers, dot-path cell lookups and columns the user can resize by dragging. Sorting is reported, not performed — the widget never reorders your rows.

Quick start

Pass a config naming the columns and a rows array. A column's path is a dot path into the row, so nested data needs no flattening.

Name ▲ ▼
Role ▲ ▼
Team
Ada Lovelace
Engineer
Platform
Grace Hopper
Architect
Compilers
Alan Turing
Researcher
Theory

click a row, or a sortable header

<cnc-table
  @sort="applySort($event.detail.sort)"
  $config='{ "columns": [
    { "label": "Name", "path": "name", "sortable": true, "size": "2fr" },
    { "label": "Team", "path": "team.name" }
  ]}'
  $rows="people"
></cnc-table>

Column keys

Key Purpose
label The header text.
path A DOT PATH into the row — team.name reaches a nested field, so rows need no reshaping.
sortable Makes the header clickable and gives it a direction arrow.
size The column's share of the grid, in CSS grid units (2fr, 200px). Defaults to 1fr.
hidden Leaves the column out entirely.

Usage guidance

Handle sort or turn sortable off. A clickable header that reorders nothing is worse than a plain one, and it is the easiest thing to leave out because the arrow still moves.

Use dot paths rather than flattening rows. The table reaches into nested objects itself, so records can be passed as they arrive from an API.

Column widths the user drags are remembered for the session only. They are held in widget state and reported nowhere, so a table whose layout should persist needs size values you control.

Reach for cnc-treetable2 when rows nest, and for cnc-list when each row wants action buttons rather than a grid of values.

← Back to Widgets