C&C Docs
Log in

cnc-view

A read-only detail view: label-and-value pairs from one record. Given no columns it shows every key the record has, deriving titles from the field names.

Quick start

Bind a record to detail. With no columns the widget lists every key in it, so the quickest useful view is one property.

Labels come from the keys: firstName becomes "First Name", team_name becomes "Team Name". 

<cnc-view $detail="record"></cnc-view>

<!-- or naming the fields and their titles -->
<cnc-view
  $detail="record"
  $columns="[{ name: 'firstName', title: 'Given name' }, 'jobTitle']"
></cnc-view>

Usage guidance

Name your columns for anything a user sees. Leaving it empty renders EVERY key in the record, which will happily show internal ids, timestamps and flags that came along with the row — and it puts them in whatever order the object happens to have.

Give explicit titles wherever a field name contains an abbreviation. The camelCase split works on ordinary words and mangles ID, URL and the like.

It is display only — no editing, no events. Pair it with a cnc-form for the edit view, or reach for cnc-table when you are showing MANY records rather than one.

← Back to Widgets