Skip to main content
cngx-src documentation

CngxDataGridRow

ComponentPrimaryOnPushNo encapsulationv0.1.0WCAG AA

projects/ui/data-grid-accordion/data-grid-row.component.ts

Import#

import { CngxDataGridRow } from '@cngx/ui/data-grid-accordion'

Description#

A disclosure row in a CngxDataGridAccordion. Renders the APG-correct trio: a role="heading" wrapper carrying the group's aria-level, a cngxAccordionPanel summary <button> that is the full-row disclosure trigger, and a role="region" detail zone named back at the primary cell via aria-labelledby. Expansion is derived from the coordinator (Pillar 1); the button self-wires keyboard nav through the registration brain, so arrow keys rove across rows even though each summary lives in its own component view.

The projected cngxDgaCells are laid OVER the trigger, not inside it: a <button> accepts phrasing content only, so a cell holding flow content (a chart, a table, a nested list) could never live in the button. The cells share the button's grid row, painted above it, and are pointer-events: none, so a click on a passive cell falls through to the trigger and toggles the row, while interactive cell content (a link, a control) re-enables its own clicks. The cell marked primary supplies the row's accessible name through the button's aria-labelledby (falling back to the whole cells row when none is marked), so a screen reader hears a list of expandable sections rather than a wall of cell text.

https://cngxjs.github.io/cngx/examples/#/ui/data-grid-accordion/master-detail https://cngxjs.github.io/cngx/examples/#/ui/data-grid-accordion/report https://cngxjs.github.io/cngx/examples/#/ui/data-grid-accordion/lazy-row

Metadata#

Content Slots#

Host#

Dependencies#

CNGX_DATA_GRID_ACCORDIONinject()grid

Relationships

Index#

Inputs#

errorMessage#
input()

Error message announced in the error state. English default; override per locale.

default 'Failed to load'
panelId#string
input()

Stable id this row registers under in the coordinator's open-set. Defaults to a generated id; bind [panelId] to a stable row value to address the row through the group's [(openIds)] model - so a sorted row stays open while it moves. Mirrors CngxAccordionItem.panelId.

default nextUid('cngx-dga-row-')
input()

Semantic severity reflected onto the [data-severity] host attribute for skins that render it (the log-stream skin fills a coloured left edge from the matching --cngx-color-danger / -warning / -info token). Purely visual, no ARIA impact.

The row's async lifecycle, communicated to assistive tech. Accepts a raw AsyncStatus or a CngxAsyncState the consumer already owns - the row reads only the status discriminator, never the payload, so it stays non-generic. A pure data input (the row injects no CNGX_STATEFUL), so no empty-string transform: a bare string status must survive untouched. Mirrors CngxAccordionItem.state; the consumer wires the fetch, the row only communicates the state it is handed.

Instance Properties#

busySlot#unknown
contentChild()ProtectedReadonly

Per-instance busy slot; absent means the CSS skeleton default renders.

contentChild(CngxDgaRowBusy)
cells#unknown
contentChildren()Readonly

Projected cells; the primary one supplies the row's accessible name. Public so CngxDataGridAccordion can read the primary-column index (for the grow default) and use the first row as the column source when no header exists.

contentChildren(CngxDgCell)
cellsId#unknown
ProtectedReadonly
nextUid('cngx-dga-cells-')
errorSlot#unknown
contentChild()ProtectedReadonly

Per-instance error slot; absent means the CSS error affordance default renders.

contentChild(CngxDgaRowError)
headerId#unknown
ProtectedReadonly
nextUid('cngx-dga-header-')
regionId#unknown
ProtectedReadonly
nextUid('cngx-dga-region-')

HostBindings#

BindingExpression
[attr.data-expanded]expanded() ? '' : null
[attr.data-severity]severity() ?? null