CnCapabilityTable

A capability comparison your app supplies as JSON, rendered as a searchable table. Readers arrive at it two ways. One is shopping for a feature, the sellable bundle they can name in a tender. The other is checking a single capability they know they need. The grouping toggle serves the first, the search box serves the second, and both run over the same rows.

Wraps: NcTextField, NcButton, NcEmptyContent

When to use

Inside <CnFeaturesAndRoadmapView>, by passing that view a capabilityComparison document. The view then grows a third stop on its header toggle and mounts this table there. Mount it directly when you want the comparison on a page of your own.

The document

Everything the table renders comes from one object. systems, areas and capabilities are the shape the fleet already ships. The rest is optional, and a document without any of it renders the table your app renders today.

{
  "systems": [
    { "key": "dossiq", "name": "Dossiq", "isSelf": true },
    { "key": "opencase", "name": "OpenCase" }
  ],
  "areas": [
    { "key": "intake", "name": "Intake", "name_nl": "Intake" }
  ],
  "features": [
    { "key": "case-types", "name": "Case types", "name_nl": "Zaaktypen" }
  ],
  "providers": [
    { "key": "dossiq", "name": "Dossiq", "kind": "self" },
    { "key": "openregister", "name": "OpenRegister", "kind": "app" },
    { "key": "nextcloud", "name": "Nextcloud", "kind": "platform" }
  ],
  "capabilities": [
    {
      "id": "1.1",
      "area": "intake",
      "name": "Citizen web form per case type",
      "name_nl": "Webformulier voor burgers per zaaktype",
      "dossiq": "partial",
      "opencase": "no",
      "provider": "openregister",
      "providerHow": "ledger-change",
      "feature": "case-types",
      "featureConfidence": "high"
    }
  ]
}

Field	Where	What it does
id	row	The audit's own number, rendered in the first column. Repeat one or leave it out and the row still renders — the table keys its rows by position, not by this.
provider	row	Key into providers. Renders the provided-by column.
providerHow	row	Free text naming the mechanism. Rendered under the provider name, as given.
feature	row	Key into features. Turns on feature grouping.
featureConfidence	row	low marks the row as a judgement, with a hint a screen reader reads.
features	document	Labels for the feature keys. Optional: an unlabelled key shows raw.
providers	document	Labels and kinds for the provider keys. kind is self, app or platform.

No row ever disappears

This is the rule the table is built around, because a silently dropped row reads exactly like a row nobody wrote.

• A provider key that providers does not declare renders as the raw key.
• A kind outside the three renders the name with no kind word beside it.
• An area or feature key the document never declares gets a group of its own, headed by the raw key.
• A row with no feature lands under "Not yet mapped to a feature".
• A rating outside yes, partial and no counts and renders as Unknown.
• A missing or repeated id costs the row nothing: rows are keyed by their position in their group.

The search matches on both languages of every label — the row's, the area's, the feature's and the provider's — whatever the reader's own locale, so a Dutch reader still finds a row by the English term they read in a tender document.

Usage

<CnCapabilityTable :comparison="comparison" />

Pass groupBy to lock the grouping and hide the toggle, searchable to turn the search box off when your host already filters the rows, and locale to override the reader's Nextcloud language when picking name or name_nl.

<CnCapabilityTable
  :comparison="comparison"
  groupBy="area"
  :searchable="false"
  locale="nl" />

Accessibility

• The search box carries a real label through NcTextField's label prop, not a placeholder standing in for one.
• The result count sits in a role="status" region, so a screen reader hears the new count after the reader stops typing.
• Each group stays a real <table> with a <caption>, scope="col" headers and a scope="row" header per row, before and after a filter.
• The grouping toggle marks its state with aria-pressed, and the provider kind is a word beside the name rather than a colour on its own.

Reference

OpenRegister reliance

none: this component does not touch OpenRegister, directly or through anything it imports. 0 direct references, 0 files reached through imports.

See the reliance overview for the filterable list.

Props

Name	Type	Required	Default	Description
comparison	object		null	The comparison document the host app supplies. Shape: {systems, areas, features?, providers?, capabilities}. Every key beyond systems, areas and capabilities is optional, and a document without them renders the table this component's consumers already had. Deprecated, with the whole component: publish the comparison on the app's docs site and link to it (as dossiq #3312 and pipelinq #2195 did). Still rendered; removal waits for a major version. A development build warns once when a comparison is given.
locale	string		''	BCP 47 locale used to pick name or name_nl on every labelled entry. Defaults to the reader's Nextcloud language.
searchable	boolean		true	Render the search box. Leave it on unless the host already filters the rows it passes.
groupBy	string		''	Force a grouping: feature or area. When empty the table opens on features if any row carries one, and on areas otherwise, and the reader can switch.

• Implementation: src/components/CnCapabilityTable/CnCapabilityTable.vue
• Pure logic: src/utils/capabilityComparison.js

Deprecated

The in-app capability comparison (capabilityComparison on CnFeaturesAndRoadmapView and CnFeaturesAndRoadmapPage, the features_roadmap_capabilities initial state key, and CnCapabilityTable) is deprecated. Publish the comparison on the app's docs site and link to it instead, as dossiq #3312 and pipelinq #2195 did. It still renders; removal waits for a major version. A development build warns once per page load when a comparison is given.