CngxTreetableRow

DirectivePrimaryv0.1.0WCAG AA

projects/data-display/treetable/treetable-row.directive.ts

import { CngxTreetableRow } from '@cngx/data-display/treetable'

Row directive applied to every rendered table row in CngxTreetable. Handles depth-based CSS indentation, hover highlight, and selection styling.

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>

Bound classes: cngx-treetable__row--highlighted ← highlighted cngx-treetable__row--selected ← selected
Bound styles: --cngx-row-depth ← node().depth

highlight#

input()

When true, the row is highlighted while hovered. Typically driven by resolvedOptions().highlightRowOnHover.

default false

node#FlatNode

Required

The flat node this row represents. Required.

selected#

input()

When true, applies the cngx-treetable__row--selected CSS class. Driven by the selection model in CngxTreetable.

default false

Binding	Expression
`[style.--cngx-row-depth]`	`node().depth`
`[class.cngx-treetable__row--highlighted]`	`highlighted()`
`[class.cngx-treetable__row--selected]`	`selected()`