CngxTreetableRow
projects/data-display/treetable/treetable-row.directive.ts
Import#
import { CngxTreetableRow } from '@cngx/data-display/treetable'
Description#
Row directive applied to every rendered table row in CngxTreetable.
Handles depth-based CSS indentation, hover highlight, selection styling,
and the APG treegrid row semantics (aria-level, aria-posinset,
aria-setsize, aria-expanded, aria-selected).
Sets the --cngx-row-depth CSS custom property on the host element so that
cell padding can drive indentation via calc() in component stylesheets.
<div cngxTreetableRow [node]="node" [highlight]="highlight"></div>Metadata#
Host#
Relationships
Index#
Methods
Outputs
Derived State
HostBindings
HostListeners
Inputs#
boolean | nullExpansion state announced via aria-expanded. true / false for
parent rows; null (the default) for leaves, which suppresses the
attribute entirely - APG treegrid leaves carry no aria-expanded.
nullWhen true, the row is highlighted while hovered.
Typically driven by resolvedOptions().highlightRowOnHover.
falseWhen true, applies the cngx-treetable__row--selected CSS class.
Driven by the selection model in CngxTreetable.
falseGates the aria-selected binding. When false (the default) the
attribute is suppressed; when true it reflects selected(). Emit
the state only when selection applies - a non-selectable grid must
not announce every row as "not selected".
falseOutputs#
Fires when DOM focus lands inside the row (Tab, click, or programmatic focus). CngxTreetable binds this to keep its logical focus row in sync with the real focus position.
Methods#
HostBindings#
| Binding | Expression |
|---|---|
[style.--cngx-row-depth] | node().depth |
[class.cngx-treetable__row--highlighted] | highlighted() |
[class.cngx-treetable__row--selected] | selected() |
[attr.aria-level] | node().depth + 1 |
[attr.aria-posinset] | node().posinset |
[attr.aria-setsize] | node().setsize |
[attr.aria-expanded] | expanded() |
[attr.aria-selected] | selectionEnabled() ? selected() : null |
HostListeners#
| Event | Handler |
|---|---|
(focusin) | focusin() |