C&C Docs
Log in

cnc-filter-view

The removable-tag strip that shows which filters are currently applied. It DISPLAYS a filter someone else collected — it has no inputs of its own — and lets the user clear entries one at a time.

Quick start

Pass the same config your table uses and the current filter map. The widget renders a tag for each filterable column that has a value, and hides itself entirely when none do.

Filter By
Name ada × Team Platform ×

filter: {"name":"ada","team":"Platform"}

Remove both tags and the strip disappears. 

<cnc-filter-view
  $config="tableConfig"
  $filter="filter"
  @filter-change="filter = $event.detail; reload()"
></cnc-filter-view>

Usage guidance

This is a readout, not an input. It shows what is filtered and removes entries; collecting the values is somebody else's job — cnc-filter, a search box, a set of selects. Pair it with whichever of those you use.

Reuse the table's config. The point of taking the same object is that a column marked filterable is described once, so the labels on these tags match the column headings without a second list to keep in step.

Mind the two shapes it does not share with its siblings: filterable fields must sit under columns[].children, and filter-change's detail is the filter map ITSELF rather than an object wrapping it.

← Back to Widgets