TreeTable | Neural UI v2

Hierarchy and expansion

Use TreeTable when hierarchical records also need columns, such as a work breakdown with task names and hours. It is an independent component: Tree shows hierarchy without columns; Table shows flat records.

Supply records in data and relationships in hierarchy. rowKey identifies each record; roots and child relations refer to those keys. A loaded empty child relation means a leaf, while unloaded means children have not been fetched. Apply expandedKeysChange.next to accept expansion or collapse.

Task	Hours
Design	24
Delivery	12

Expanded keys: —

Configurator

Change density, borders, stripes, sticky headings, indentation and selection mode. Expansion and selection remain interactive; the generated template reflects the applied settings.

Striped rows

Sticky header

Indentation (px)

Global search

Task	Hours
Design	24
Research	8
Prototype	16
Delivery	12

The generated template reflects the selected options. The Code tab includes data, imports and state.

Advanced options · 1

<neu-tree-table
  [data]="rows()"
  [columns]="columns()"
  [rowKey]="rowKey"
  [hierarchy]="hierarchy"
  [labels]="labels()"
  [appearance]='{
      "density": "normal",
      "borders": "rows",
      "striped": false,
      "stickyHeader": false,
      "responsive": "contained-scroll"
    }'
  [hierarchyOptions]='{
      "treeColumnId": "name",
      "indentSize": 20
    }'
  [expandedKeys]="expanded()"
  (expandedKeysChange)="expanded.set($event.next)"
  [selection]="selection()"
  [selectionOptions]='{
      "mode": "single",
      "indicator": "radio",
      "selectOnRowClick": true,
      "allowClear": false
    }'
  (selectionChange)="selection.set($event.next)"
  [query]="query()"
  (queryChange)="query.set($event)"
  [filterOptions]='{
      "surfaces": [],
      "globalFields": [],
      "predicates": {},
      "debounceMs": 0,
      "commit": "immediate"
    }'
  [exportOptions]="{ formats: ['csv'], defaultFilename: 'work-plan' }"
/>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

import { signal } from '@angular/core';

export const rows = signal([
  {
    "id": "design",
    "name": "Design",
    "hours": 24
  },
  {
    "id": "research",
    "name": "Research",
    "hours": 8
  },
  {
    "id": "prototype",
    "name": "Prototype",
    "hours": 16
  },
  {
    "id": "delivery",
    "name": "Delivery",
    "hours": 12
  }
]);

export const columns = signal([
  {
    "id": "name",
    "field": "name",
    "header": "Task"
  },
  {
    "id": "hours",
    "field": "hours",
    "header": "Hours"
  }
]);

export const rowKey = () => { /* Handler in the complete example. */ };

export const hierarchy = {
  "hierarchyRevision": 1,
  "queryRevision": 0,
  "roots": {
    "status": "loaded",
    "keys": [
      "design",
      "delivery"
    ],
    "relationRevision": 1,
    "appliedRequestId": null,
    "total": 2,
    "completeness": "complete"
  },
  "children": [
    {
      "parentKey": "design",
      "relation": {
        "status": "loaded",
        "keys": [
          "research",
          "prototype"
        ],
        "relationRevision": 1,
        "appliedRequestId": null,
        "total": 2,
        "completeness": "complete"
      }
    },
    {
      "parentKey": "research",
      "relation": {
        "status": "loaded",
        "keys": [],
        "relationRevision": 1,
        "appliedRequestId": null,
        "total": 0,
        "completeness": "complete"
      }
    },
    {
      "parentKey": "prototype",
      "relation": {
        "status": "loaded",
        "keys": [],
        "relationRevision": 1,
        "appliedRequestId": null,
        "total": 0,
        "completeness": "complete"
      }
    },
    {
      "parentKey": "delivery",
      "relation": {
        "status": "loaded",
        "keys": [],
        "relationRevision": 1,
        "appliedRequestId": null,
        "total": 0,
        "completeness": "complete"
      }
    }
  ]
};

export const labels = signal({
  "ariaLabel": "Work plan",
  "empty": "No tasks",
  "error": "Tasks could not be loaded",
  "loading": "Loading tasks",
  "pagination": "Pagination",
  "retry": "Retry",
  "selection": "Select task",
  "expand": "Expand",
  "collapse": "Collapse"
});

export const expanded = signal([
  "design"
]);

export const selection = signal({
  "kind": "keys",
  "keys": [
    "design"
  ]
});

export const query = signal({
  "page": 0,
  "pageSize": 25,
  "search": "",
  "sort": [],
  "filters": null
});

Data, callback and structured configuration inputs

These inputs require a model or function, not a checkbox. Edit the same-named field in the Source component and bind it in the template; data already used by this preview appears in the state above.

columns · readonly NeuTreeTableColumn<T, F>[]

In Source: define columns with this type and use [columns]="columns" (or columns() for a signal).

data · readonly T[]

In Source: define data with this type and use [data]="data" (or data() for a signal).

editingOptions · NeuTreeTableEditingOptions<T, K, F>

In Source: define editingOptions with this type and use [editingOptions]="editingOptions" (or editingOptions() for a signal).

editState · NeuTreeTableEditState<K>

In Source: define editState with this type and use [editState]="editState" (or editState() for a signal).

exportOptions · NeuTreeTableExportOptions

In Source: define exportOptions with this type and use [exportOptions]="exportOptions" (or exportOptions() for a signal).

hierarchy · NeuTreeTableHierarchy<K>

In Source: define hierarchy with this type and use [hierarchy]="hierarchy" (or hierarchy() for a signal).

interactionOptions · NeuTreeTableInteractionOptions

In Source: define interactionOptions with this type and use [interactionOptions]="interactionOptions" (or interactionOptions() for a signal).

labels · NeuTreeTableLabels

In Source: define labels with this type and use [labels]="labels" (or labels() for a signal).

layout · NeuTreeTableLayoutState

In Source: define layout with this type and use [layout]="layout" (or layout() for a signal).

paginationOptions · NeuTreeTablePaginationOptions

In Source: define paginationOptions with this type and use [paginationOptions]="paginationOptions" (or paginationOptions() for a signal).

rowKey · (value: T) => K

In Source: define rowKey with this type and use [rowKey]="rowKey" (or rowKey() for a signal).

rowOptions · NeuTreeTableRowOptions<T>

In Source: define rowOptions with this type and use [rowOptions]="rowOptions" (or rowOptions() for a signal).

sortOptions · NeuTreeTableSortOptions

In Source: define sortOptions with this type and use [sortOptions]="sortOptions" (or sortOptions() for a signal).

virtualizationOptions · NeuTreeTableVirtualizationOptions

In Source: define virtualizationOptions with this type and use [virtualizationOptions]="virtualizationOptions" (or virtualizationOptions() for a signal).

Select loaded descendants

The example uses checkbox selection with loaded-subtree propagation. Selecting Design also selects its loaded children. selectionChange proposes next; the application applies it to selection.

Propagation is limited to loaded relationships. It does not select unknown descendants on the server. Choose propagation none when each node should be selected independently.

Load roots and children

In remote mode, dataRequest distinguishes roots from children requests. A children request includes parentKey; both carry query, hierarchy and relation revisions plus a requestId. Your application loads records and applies the matching relationship.

This is a local simulation with an explicit response button, not a network service. Apply the roots, expand Design, then apply its children. In production, preserve request identity and reject stale responses. A relation's loading, error and loaded states belong to application state.

Apply the roots response first. Then expand Design and apply its children response.

Task	Hours
No tasks

Pending request: —

Virtualize visible rows

Virtualization renders a window of visible hierarchical rows. Supply fixed itemSize and overscan values and keep row content within that height. Expansion changes the flattened visible sequence; it does not require replacing the hierarchy with Table data.

When virtualization is enabled, contained scrolling takes precedence over stacked responsive rows to preserve fixed-height geometry. rangeChange reports the window; remote hierarchy loading remains a separate roots/children contract.

Task	Hours
Task 1	1
Task 2	2
Task 3	3
Task 4	4
Task 5	5
Task 6	6
Task 7	7
Task 8	8
Task 9	1
Task 10	2
Task 11	3
Task 12	4
Task 13	5
Task 14	6

Accessibility and keyboard

Core supplies treegrid structure, hierarchy levels, expansion state and keyboard navigation. Your application supplies a meaningful table name, understandable headings and names for custom controls. A custom node template must retain the purpose and readable name of its node.

Use the tree column for hierarchy and keep focus visible when expanding, selecting or editing. Test loaded-subtree selection, remote error/retry paths and custom editors with your real content and assistive technology.

Key	Action
`Tab / Shift+Tab`	Enter and leave the treegrid and its enabled controls.
`ArrowUp / ArrowDown`	Move through visible rows when row navigation is enabled.
`ArrowRight / ArrowLeft`	Expand or collapse a node in hierarchical navigation.
`Enter / Space`	Activate the focused expansion or selection control.

API

TreeTable has its own public types and template contexts. Do not substitute Table options or events just because names resemble each other. Inputs hold applied state; proposal outputs ask your application to apply next state. There are no two-way models on TreeTable.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`appearance`	`NeuTreeTableAppearance`	`{ density: 'normal', borders: 'rows', striped: false, stickyHeader: false, responsive: 'contained-scroll', }`	`[appearance]`	Density, border mode, stripes, sticky headings and responsive presentation.
`columns`	`readonly NeuTreeTableColumn<T, F>[]`	`[]`	`[columns]`	TreeTable column ids, headings, fields and optional feature descriptors.
`data`	`readonly T[]`	`[]`	`[data]`	Loaded node records; hierarchy references them by rowKey.
`dataMode`	`NeuTreeTableDataMode`	`'client'`	`[dataMode]`	client uses loaded relationships; remote emits requests for roots and children.
`editingOptions`	`NeuTreeTableEditingOptions<T, K, F>`	`{ mode: 'none' }`	`[editingOptions]`	None, cell or row editing and an optional validator returning true or an error message.
`editState`	`NeuTreeTableEditState<K>`	`{ kind: 'none', }`	`[editState]`	Applied active node cell or row editing session, or kind none.
`expandedKeys`	`readonly K[]`	`[]`	`[expandedKeys]`	Applied keys of expanded nodes.
`exportOptions`	`NeuTreeTableExportOptions`	`{ formats: [], defaultFilename: 'tree-table', }`	`[exportOptions]`	Enabled export formats and the default file name.
`filterOptions`	`NeuTreeTableFilterOptions<T, F>`	`{ surfaces: [], globalFields: [], predicates: {}, debounceMs: 0, commit: 'immediate' }`	`[filterOptions]`	Filter surfaces, global fields, predicates, debounce and immediate or explicit commit.
`hierarchy`	`NeuTreeTableHierarchy<K>`	`EMPTY_HIERARCHY as NeuTreeTableHierarchy<K>`Derived default	`[hierarchy]`	Roots and child relations, with loaded/loading/error/unloaded state and revision identities.
`hierarchyOptions`	`NeuTreeTableHierarchyOptions`	Required	`[hierarchyOptions]`	Column used for the tree and indentation in pixels per depth level.
`interactionOptions`	`NeuTreeTableInteractionOptions`	`{ navigation: 'row', wrapFocus: false, announceChanges: false, contextMenuAction: false, }`	`[interactionOptions]`	Row keyboard navigation, focus wrapping, announcements and context-menu action.
`labels`	`NeuTreeTableLabels`	`{ ariaLabel: 'Tree table', empty: 'No data', loading: 'Loading', error: 'Unable to load tree data', retry: 'Retry', expand: 'Expand node', collapse: 'Collapse node', selection: 'Selection', pagination: 'Pagination', }`	`[labels]`	Localized treegrid name, expansion, selection, pagination and state messages.
`layout`	`NeuTreeTableLayoutState`	`{ order: [], hidden: [], widths: {}, pinnedStart: [], pinnedEnd: [], }`	`[layout]`	Applied column order, visibility, widths and pinning.
`paginationOptions`	`NeuTreeTablePaginationOptions`	`{ enabled: false, pageSizeOptions: [], position: 'bottom', report: 'none', }`	`[paginationOptions]`	TreeTable pagination policy and root-page controls.
`query`	`NeuTreeTableQuery<F>`	`{ page: 0, pageSize: 25, search: '', sort: [], filters: null, }`	`[query]`	Applied page, size, search, sort and filter expression using TreeTable types.
`rowKey`	`(value: T) => K`	Required	`[rowKey]`	Required stable unique key function for a node record.
`rowOptions`	`NeuTreeTableRowOptions<T>`	`{}`	`[rowOptions]`	Optional className function returning application CSS classes for a node row.
`selection`	`NeuTreeTableSelection<K>`	`{ kind: 'keys', keys: [], }`	`[selection]`	Applied selected node keys. Selection does not modify hierarchy or data.
`selectionOptions`	`NeuTreeTableSelectionOptions<T>`	`{ mode: 'none' }`	`[selectionOptions]`	Mode, indicators, row-click selection, modifiers, ranges and loaded-subtree propagation.
`sortOptions`	`NeuTreeTableSortOptions`	`{ mode: 'single', removable: true, defaultDirection: 'asc', resetRootPageOnChange: true, }`	`[sortOptions]`	Single or multiple sorting, initial direction, removal and root-page reset behavior.
`virtualizationOptions`	`NeuTreeTableVirtualizationOptions`	`{ enabled: false }`	`[virtualizationOptions]`	Enable a fixed-height visible-row window with itemSize and overscan.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`dataRequest`	`NeuTreeTableDataRequest<K, F>`	`(dataRequest)="onDataRequest($event)"`	Requests roots or children with query/hierarchy/relation revisions and request id; children include parentKey.
`editCancel`	`NeuTreeTableEditCancel<T, K>`	`(editCancel)="onEditCancel($event)"`	Reports cancellation of node editing without committing the draft.
`editCommit`	`NeuTreeTableEditCommit<T, K, F>`	`(editCommit)="onEditCommit($event)"`	Proposes a node draft with its key, field, original value and source; apply accepted changes to data.
`editStateChange`	`NeuTreeTableEditChange<K>`	`(editStateChange)="onEditStateChange($event)"`	Proposes the next editing session through next.
`expandedKeysChange`	`NeuTreeTableExpandedKeysChange<K>`	`(expandedKeysChange)="onExpandedKeysChange($event)"`	Proposes next expanded keys, changedKey and toggle/keyboard source.
`exportRequest`	`NeuTreeTableExportRequest<F>`	`(exportRequest)="onExportRequest($event)"`	Requests an application-managed hierarchical export.
`featureError`	`NeuTreeTableFeatureError`	`(featureError)="onFeatureError($event)"`	Reports a typed hierarchy or feature diagnostic.
`layoutChange`	`NeuTreeTableLayoutChange`	`(layoutChange)="onLayoutChange($event)"`	Proposes a column layout update; the application owns the applied layout.
`queryChange`	`NeuTreeTableQuery<F>`	`(queryChange)="onQueryChange($event)"`	Proposes the complete next TreeTable query; apply $event to query.
`rangeChange`	`NeuTreeTableRangeChange`	`(rangeChange)="onRangeChange($event)"`	Reports the visible/rendered hierarchical row window.
`rowAction`	`NeuTreeTableRowAction<T, K>`	`(rowAction)="onRowAction($event)"`	Reports a node row interaction with its node identity.
`selectionChange`	`NeuTreeTableSelectionChange<T, K>`	`(selectionChange)="onSelectionChange($event)"`	Proposes next selection with added/removed keys, loaded values and propagation policy.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`NeuTreeTableCaptionDirective` Above the table	Public template directive (entrypoint) A heading identifies this data set.	`ng-template[neuTreeTableCaption]` Context used: `—`
`NeuTreeTableCellDirective` Body cell	Public template directive (entrypoint) Customer names or planned hours use your own presentation.	`ng-template[neuTreeTableCell]` Context used: `$implicit` template.d.ts import type { NeuTreeTableCellContext } from '@neural-ui/core/tree-table'; import type { NeuTreeTableKey } from '@neural-ui/core/tree-table'; import type { NeuTreeTableTemplateDirective } from '@neural-ui/core/tree-table'; import { NeuTreeTableCellDirective } from '@neural-ui/core/tree-table'; // Public declaration (reference only) export declare class NeuTreeTableCellDirective<T extends object, K extends NeuTreeTableKey, F extends string> implements NeuTreeTableTemplateDirective<NeuTreeTableCellContext<T, K, F>> { // Public input neuTreeTableCell (required) readonly columnId: InputSignal<string>; }
`NeuTreeTableEditorDirective` Active cell editor	Public template directive (entrypoint) Click an editable cell, change its value, then save or cancel.	`ng-template[neuTreeTableEditor]` Context used: `draftValue, update, commit, cancel` template.d.ts import type { NeuTreeTableEditorContext } from '@neural-ui/core/tree-table'; import type { NeuTreeTableKey } from '@neural-ui/core/tree-table'; import type { NeuTreeTableTemplateDirective } from '@neural-ui/core/tree-table'; import { NeuTreeTableEditorDirective } from '@neural-ui/core/tree-table'; // Public declaration (reference only) export declare class NeuTreeTableEditorDirective<T extends object, K extends NeuTreeTableKey, F extends string> implements NeuTreeTableTemplateDirective<NeuTreeTableEditorContext<T, K, F>> { // Public input neuTreeTableEditor (required) readonly columnId: InputSignal<string>; }
`NeuTreeTableEmptyDirective` Empty data area	Public template directive (entrypoint) Choose Empty in the example to see this message.	`ng-template[neuTreeTableEmpty]` Context used: `—`
`NeuTreeTableErrorDirective` Failed data area	Public template directive (entrypoint) Choose Error, then use Retry to request the data again.	`ng-template[neuTreeTableError]` Context used: `retry` template.d.ts `import type { NeuTreeTableStateContext } from '@neural-ui/core/tree-table'; import type { NeuTreeTableTemplateDirective } from '@neural-ui/core/tree-table'; import { NeuTreeTableErrorDirective } from '@neural-ui/core/tree-table'; // Public declaration (reference only) export declare class NeuTreeTableErrorDirective implements NeuTreeTableTemplateDirective<NeuTreeTableStateContext> { }`
`NeuTreeTableFooterDirective` Column footer	Public template directive (entrypoint) A label appears below the data in the specified column.	`ng-template[neuTreeTableFooter]` Context used: `—` template.d.ts import type { NeuTreeTableHeaderContext } from '@neural-ui/core/tree-table'; import type { NeuTreeTableTemplateDirective } from '@neural-ui/core/tree-table'; import { NeuTreeTableFooterDirective } from '@neural-ui/core/tree-table'; // Public declaration (reference only) export declare class NeuTreeTableFooterDirective<T extends object, F extends string> implements NeuTreeTableTemplateDirective<NeuTreeTableHeaderContext<T, F>> { // Public input neuTreeTableFooter (required) readonly columnId: InputSignal<string>; }
`NeuTreeTableHeaderDirective` Column heading	Public template directive (entrypoint) The heading uses the column label with custom markup.	`ng-template[neuTreeTableHeader]` Context used: `column` template.d.ts import type { NeuTreeTableHeaderContext } from '@neural-ui/core/tree-table'; import type { NeuTreeTableTemplateDirective } from '@neural-ui/core/tree-table'; import { NeuTreeTableHeaderDirective } from '@neural-ui/core/tree-table'; // Public declaration (reference only) export declare class NeuTreeTableHeaderDirective<T extends object, F extends string> implements NeuTreeTableTemplateDirective<NeuTreeTableHeaderContext<T, F>> { // Public input neuTreeTableHeader (required) readonly columnId: InputSignal<string>; }
`NeuTreeTableLoadingDirective` Loading data area	Public template directive (entrypoint) Choose Loading to display a status message.	`ng-template[neuTreeTableLoading]` Context used: `—` template.d.ts `import type { NeuTreeTableStateContext } from '@neural-ui/core/tree-table'; import type { NeuTreeTableTemplateDirective } from '@neural-ui/core/tree-table'; import { NeuTreeTableLoadingDirective } from '@neural-ui/core/tree-table'; // Public declaration (reference only) export declare class NeuTreeTableLoadingDirective implements NeuTreeTableTemplateDirective<NeuTreeTableStateContext> { }`
`NeuTreeTableNodeDirective` Hierarchy column	Public template directive (entrypoint) Expand Design to see child tasks and their depth.	`ng-template[neuTreeTableNode]` Context used: `$implicit, depth` template.d.ts import type { NeuTreeTableKey } from '@neural-ui/core/tree-table'; import type { NeuTreeTableNodeContext } from '@neural-ui/core/tree-table'; import type { NeuTreeTableTemplateDirective } from '@neural-ui/core/tree-table'; import { NeuTreeTableNodeDirective } from '@neural-ui/core/tree-table'; // Public declaration (reference only) export declare class NeuTreeTableNodeDirective<T extends object, K extends NeuTreeTableKey> implements NeuTreeTableTemplateDirective<NeuTreeTableNodeContext<T, K>> { }
`NeuTreeTableSummaryDirective` Below the table	Public template directive (entrypoint) An application-owned total accompanies the table.	`ng-template[neuTreeTableSummary]` Context used: `—`
`NeuTreeTableToolbarDirective` Before the rows	Public template directive (entrypoint) Instructions or application actions accompany the data.	`ng-template[neuTreeTableToolbar]` Context used: `—`

Usage example

Import TreeTable directives, not Table directives. neuTreeTableNode customizes the hierarchy column content; neuTreeTableCell customizes a specific column. The context includes the node, depth and state. Its editor uses draftValue and update, not Table's editor contract. Use the state selector to inspect empty, loading and error content.

**Work plan**
Task	Hours
Design(level 0)	24 h
Research(level 1)	8 h
Prototype(level 1)	16 h
Delivery(level 0)	12 h
	Planned hours
Available tasks: 4

Public methods

Name	Contract
`export`	`export(request: NeuTreeTableExportRequest<F>): Promise<NeuTreeTableExportOutcome>;` Export visible, loaded, or selected data. Check the returned outcome and handle delegated requests in your application. example.ts `await table()?.export({ format: 'csv', scope: 'visible' });`
`focus`	`focus(target: NeuTreeTableFocusTarget<K>): void;` Focus a node, a cell, or the first or last visible node. This does not expand collapsed parents. example.ts `table()?.focus({ kind: 'node', key: 'design' });`
`retryData`	`retryData(target: NeuTreeTableRetryTarget<K>): void;` Retry loading roots or the children of one parent. The application handles the resulting dataRequest. example.ts `table()?.retryData({ kind: 'children', parentKey: 'design' });`
`scrollTo`	`scrollTo(target: NeuTreeTableScrollTarget<K>): void;` Scroll to a node, row index, or pixel offset. Choose the target kind explicitly. example.ts `table()?.scrollTo({ kind: 'node', key: 'design' });`

Public Types

Open a type to inspect its definition and interface fields.

NeuTreeChildRelationTypeScript

import type { NeuTreeRelation } from '@neural-ui/core/tree-table';
import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeChildRelation } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeChildRelation<K extends NeuTreeTableKey> {
  readonly parentKey: K;
  readonly relation: NeuTreeRelation<K>;
}

NeuTreeEditColumnTypeScript

import type { NeuTreeValueAccessor } from '@neural-ui/core/tree-table';

import type { NeuTreeEditColumn } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeEditColumn<T, F extends string> {
  readonly field: F;
  readonly read?: NeuTreeValueAccessor<T>;
  readonly write?: (value: T, candidate: unknown) => T;
}

NeuTreeErrorRelationTypeScript

import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeErrorRelation } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeErrorRelation<K extends NeuTreeTableKey> {
  readonly appliedRequestId: number | null;
  readonly error: unknown;
  readonly keys: readonly K[];
  readonly relationRevision: number;
  readonly status: 'error';
  readonly total: number | null;
}

NeuTreeFilterColumnTypeScript

import type { NeuTreeFilterConstraint } from '@neural-ui/core/tree-table';
import type { NeuTreeValueAccessor } from '@neural-ui/core/tree-table';

import type { NeuTreeFilterColumn } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeFilterColumn<T, F extends string> {
  readonly defaultRule: NeuTreeFilterConstraint<F>['rule'];
  readonly field: F;
  readonly rules: readonly NeuTreeFilterConstraint<F>['rule'][];
  readonly value?: NeuTreeValueAccessor<T>;
}

NeuTreeFilterConstraintTypeScript

import type { NeuTreeFilterConstraint } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeFilterConstraint<F extends string> {
  readonly field: F;
  readonly kind: 'condition';
  readonly rule: 'equals' | 'notEquals' | 'contains' | 'notContains' | 'startsWith' | 'endsWith' | 'lessThan' | 'lessThanOrEqual' | 'greaterThan' | 'greaterThanOrEqual' | 'between' | 'in' | 'notIn' | 'isNull' | 'isNotNull' | 'isEmpty' | 'isNotEmpty';
  readonly value: unknown;
}

NeuTreeFilterExpressionTypeScript

import type { NeuTreeFilterConstraint } from '@neural-ui/core/tree-table';
import type { NeuTreeFilterGroup } from '@neural-ui/core/tree-table';

import type { NeuTreeFilterExpression } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export type NeuTreeFilterExpression<F extends string> = NeuTreeFilterConstraint<F> | NeuTreeFilterGroup<F>;

NeuTreeFilterGroupTypeScript

import type { NeuTreeFilterExpression } from '@neural-ui/core/tree-table';
import type { NeuTreeFilterOperator } from '@neural-ui/core/tree-table';

import type { NeuTreeFilterGroup } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeFilterGroup<F extends string> {
  readonly children: readonly NeuTreeFilterExpression<F>[];
  readonly kind: 'group';
  readonly operator: NeuTreeFilterOperator;
}

NeuTreeFilterOperatorTypeScript

NeuTreeFilterPredicateTypeScript

import type { NeuTreeFilterPredicateContext } from '@neural-ui/core/tree-table';

import type { NeuTreeFilterPredicate } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export type NeuTreeFilterPredicate<T, F extends string> = (context: NeuTreeFilterPredicateContext<T, F>) => boolean;

NeuTreeFilterPredicateContextTypeScript

import type { NeuTreeFilterPredicateContext } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeFilterPredicateContext<T, F extends string> {
  readonly candidate: unknown;
  readonly field: F;
  readonly filterValue: unknown;
  readonly value: T;
}

NeuTreeFilterSurfaceTypeScript

import type { NeuTreeFilterSurface } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export type NeuTreeFilterSurface = 'row' | 'menu' | 'builder';

NeuTreeLoadedRelationTypeScript

import type { NeuTreeRelationCompleteness } from '@neural-ui/core/tree-table';
import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeLoadedRelation } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeLoadedRelation<K extends NeuTreeTableKey> {
  readonly appliedRequestId: number | null;
  readonly completeness: NeuTreeRelationCompleteness;
  readonly keys: readonly K[];
  readonly relationRevision: number;
  readonly status: 'loaded';
  readonly total: number | null;
}

NeuTreeLoadingRelationTypeScript

import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeLoadingRelation } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeLoadingRelation<K extends NeuTreeTableKey> {
  readonly appliedRequestId: number;
  readonly keys: readonly K[];
  readonly relationRevision: number;
  readonly status: 'loading';
  readonly total: number | null;
}

NeuTreeRelationTypeScript

import type { NeuTreeErrorRelation } from '@neural-ui/core/tree-table';
import type { NeuTreeLoadedRelation } from '@neural-ui/core/tree-table';
import type { NeuTreeLoadingRelation } from '@neural-ui/core/tree-table';
import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';
import type { NeuTreeUnloadedRelation } from '@neural-ui/core/tree-table';

import type { NeuTreeRelation } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export type NeuTreeRelation<K extends NeuTreeTableKey> = NeuTreeUnloadedRelation<K> | NeuTreeLoadingRelation<K> | NeuTreeErrorRelation<K> | NeuTreeLoadedRelation<K>;

NeuTreeRelationCompletenessTypeScript

import type { NeuTreeRelationCompleteness } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export type NeuTreeRelationCompleteness = 'partial' | 'complete';

NeuTreeRelationStatusTypeScript

import type { NeuTreeRelationStatus } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export type NeuTreeRelationStatus = 'unloaded' | 'loading' | 'error' | 'loaded';

NeuTreeSortColumnTypeScript

import type { NeuTreeValueAccessor } from '@neural-ui/core/tree-table';

import type { NeuTreeSortColumn } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeSortColumn<T, F extends string> {
  readonly compare?: (left: T, right: T) => number;
  readonly field: F;
  readonly value?: NeuTreeValueAccessor<T>;
}

NeuTreeSortDirectionTypeScript

NeuTreeSortEntryTypeScript

import type { NeuTreeSortDirection } from '@neural-ui/core/tree-table';

import type { NeuTreeSortEntry } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeSortEntry<F extends string> {
  readonly direction: NeuTreeSortDirection;
  readonly field: F;
}

NeuTreeTableAppearanceTypeScript

import type { NeuTreeTableAppearance } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableAppearance {
  readonly borders: 'none' | 'rows' | 'cells';
  readonly density: 'compact' | 'normal' | 'relaxed';
  readonly responsive: 'contained-scroll' | 'stacked';
  readonly stickyHeader: boolean;
  readonly striped: boolean;
}

NeuTreeTableCellContextTypeScript

import type { NeuTreeTableColumn } from '@neural-ui/core/tree-table';
import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';
import type { NeuTreeTableNodeContext } from '@neural-ui/core/tree-table';

import type { NeuTreeTableCellContext } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableCellContext<T, K extends NeuTreeTableKey, F extends string> extends NeuTreeTableNodeContext<T, K> {
  readonly column: NeuTreeTableColumn<T, F>;
  readonly columnIndex: number;
  readonly logicalIndex: number;
}

NeuTreeTableChildrenRequestTypeScript

import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';
import type { NeuTreeTableRequestBase } from '@neural-ui/core/tree-table';

import type { NeuTreeTableChildrenRequest } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableChildrenRequest<K extends NeuTreeTableKey, F extends string> extends NeuTreeTableRequestBase<F> {
  readonly kind: 'children';
  readonly parentKey: K;
  readonly reason: 'expand' | 'query' | 'retry';
  readonly relationRevision: number;
}

NeuTreeTableColumnTypeScript

import type { NeuTreeEditColumn } from '@neural-ui/core/tree-table';
import type { NeuTreeFilterColumn } from '@neural-ui/core/tree-table';
import type { NeuTreeSortColumn } from '@neural-ui/core/tree-table';
import type { NeuTreeValueAccessor } from '@neural-ui/core/tree-table';

import type { NeuTreeTableColumn } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableColumn<T, F extends string> {
  readonly align?: 'start' | 'center' | 'end';
  readonly edit?: NeuTreeEditColumn<T, F>;
  readonly field?: F;
  readonly filter?: NeuTreeFilterColumn<T, F>;
  readonly header: string;
  readonly id: string;
  readonly maxWidth?: string;
  readonly minWidth?: string;
  readonly sort?: NeuTreeSortColumn<T, F>;
  readonly value?: NeuTreeValueAccessor<T>;
  readonly width?: string;
}

NeuTreeTableDataModeTypeScript

import type { NeuTreeTableDataMode } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export type NeuTreeTableDataMode = 'client' | 'remote';

NeuTreeTableDataRequestTypeScript

import type { NeuTreeTableChildrenRequest } from '@neural-ui/core/tree-table';
import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';
import type { NeuTreeTableRootsRequest } from '@neural-ui/core/tree-table';

import type { NeuTreeTableDataRequest } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export type NeuTreeTableDataRequest<K extends NeuTreeTableKey, F extends string> = NeuTreeTableRootsRequest<F> | NeuTreeTableChildrenRequest<K, F>;

NeuTreeTableEditCancelTypeScript

import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeTableEditCancel } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableEditCancel<T, K extends NeuTreeTableKey> {
  readonly key: K;
  readonly reason: 'escape' | 'gesture' | 'hidden' | 'destroy';
  readonly value: T;
}

NeuTreeTableEditChangeTypeScript

import type { NeuTreeTableEditState } from '@neural-ui/core/tree-table';
import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeTableEditChange } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableEditChange<K extends NeuTreeTableKey> {
  readonly next: NeuTreeTableEditState<K>;
  readonly source: 'gesture' | 'keyboard' | 'commit' | 'cancel' | 'hidden';
}

NeuTreeTableEditCommitTypeScript

import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeTableEditCommit } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableEditCommit<T, K extends NeuTreeTableKey, F extends string> {
  readonly draft: Readonly<Partial<T>>;
  readonly field: F | null;
  readonly key: K;
  readonly source: 'cell' | 'row';
  readonly value: T;
}

NeuTreeTableEditingOptionsTypeScript

import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeTableEditingOptions } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableEditingOptions<T, K extends NeuTreeTableKey, F extends string> {
  readonly mode: 'none' | 'cell' | 'row';
  readonly validate?: (context: {
    readonly value: T;
    readonly key: K;
    readonly field: F | null;
    readonly draft: Readonly<Partial<T>>;
}) => true | string;
}

NeuTreeTableEditorContextTypeScript

import type { NeuTreeTableCellContext } from '@neural-ui/core/tree-table';
import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeTableEditorContext } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableEditorContext<T, K extends NeuTreeTableKey, F extends string> extends NeuTreeTableCellContext<T, K, F> {
  readonly cancel: () => void;
  readonly commit: () => void;
  readonly draftValue: unknown;
  readonly field: F | null;
  readonly update: (value: unknown) => void;
}

NeuTreeTableEditStateTypeScript

import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeTableEditState } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export type NeuTreeTableEditState<K extends NeuTreeTableKey> = {
    readonly kind: 'none';
} | {
    readonly kind: 'cell';
    readonly key: K;
    readonly columnId: string;
} | {
    readonly kind: 'row';
    readonly key: K;
};

NeuTreeTableExpandedKeysChangeTypeScript

import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeTableExpandedKeysChange } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableExpandedKeysChange<K extends NeuTreeTableKey> {
  readonly changedKey: K;
  readonly next: readonly K[];
  readonly source: 'toggle' | 'keyboard';
}

NeuTreeTableExportOptionsTypeScript

import type { NeuTreeTableExportOptions } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableExportOptions {
  readonly defaultFilename: string;
  readonly formats: readonly ('csv' | 'json' | 'xlsx')[];
}

NeuTreeTableExportOutcomeTypeScript

import type { NeuTreeTableExportOutcome } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export type NeuTreeTableExportOutcome = {
    readonly status: 'downloaded';
    readonly filename: string;
    readonly rowCount: number;
} | {
    readonly status: 'delegated';
} | {
    readonly status: 'unsupported';
    readonly reason: string;
} | {
    readonly status: 'failed';
    readonly error: unknown;
};

NeuTreeTableExportRequestTypeScript

import type { NeuTreeTableQuery } from '@neural-ui/core/tree-table';

import type { NeuTreeTableExportRequest } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableExportRequest<F extends string> {
  readonly filename?: string;
  readonly format: 'csv' | 'json' | 'xlsx';
  readonly query: NeuTreeTableQuery<F>;
  readonly scope: 'visible' | 'loaded' | 'selected';
}

NeuTreeTableFeatureErrorTypeScript

import type { NeuTreeTableFeatureError } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export type NeuTreeTableFeatureError = {
    readonly feature: 'hierarchy';
    readonly code: 'cycle' | 'duplicate-key' | 'duplicate-parent' | 'missing-root' | 'missing-node' | 'duplicate-child' | 'orphan' | 'invalid-tree-column';
    readonly error: unknown;
} | {
    readonly feature: 'advanced-filter' | 'editor' | 'export';
    readonly error: unknown;
};

NeuTreeTableFilterOptionsTypeScript

import type { NeuTreeFilterPredicate } from '@neural-ui/core/tree-table';
import type { NeuTreeFilterSurface } from '@neural-ui/core/tree-table';

import type { NeuTreeTableFilterOptions } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableFilterOptions<T, F extends string> {
  readonly commit: 'immediate' | 'explicit';
  readonly debounceMs: number;
  readonly equals?: (left: unknown, right: unknown) => boolean;
  readonly globalFields: readonly F[];
  readonly predicates: Readonly<Record<string, NeuTreeFilterPredicate<T, F>>>;
  readonly surfaces: readonly NeuTreeFilterSurface[];
}

NeuTreeTableFocusTargetTypeScript

import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeTableFocusTarget } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export type NeuTreeTableFocusTarget<K extends NeuTreeTableKey> = {
    readonly kind: 'node';
    readonly key: K;
} | {
    readonly kind: 'cell';
    readonly key: K;
    readonly columnId: string;
} | {
    readonly kind: 'first' | 'last';
};

NeuTreeTableHeaderContextTypeScript

import type { NeuTreeTableColumn } from '@neural-ui/core/tree-table';

import type { NeuTreeTableHeaderContext } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableHeaderContext<T, F extends string> {
  readonly column: NeuTreeTableColumn<T, F>;
  readonly columnIndex: number;
}

NeuTreeTableHierarchyTypeScript

import type { NeuTreeChildRelation } from '@neural-ui/core/tree-table';
import type { NeuTreeRelation } from '@neural-ui/core/tree-table';
import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeTableHierarchy } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableHierarchy<K extends NeuTreeTableKey> {
  readonly children: readonly NeuTreeChildRelation<K>[];
  readonly hierarchyRevision: number;
  readonly queryRevision: number;
  readonly roots: NeuTreeRelation<K>;
}

NeuTreeTableHierarchyOptionsTypeScript

import type { NeuTreeTableHierarchyOptions } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableHierarchyOptions {
  readonly indentSize: number;
  readonly treeColumnId: string;
}

NeuTreeTableInteractionOptionsTypeScript

import type { NeuTreeTableInteractionOptions } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableInteractionOptions {
  readonly announceChanges: boolean;
  readonly contextMenuAction: boolean;
  readonly navigation: 'row';
  readonly wrapFocus: boolean;
}

NeuTreeTableKeyTypeScript

NeuTreeTableLabelsTypeScript

import type { NeuTreeTableLabels } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableLabels {
  readonly ariaLabel: string;
  readonly collapse: string;
  readonly empty: string;
  readonly error: string;
  readonly expand: string;
  readonly loading: string;
  readonly pagination: string;
  readonly retry: string;
  readonly selection: string;
}

NeuTreeTableLayoutChangeTypeScript

import type { NeuTreeTableLayoutState } from '@neural-ui/core/tree-table';

import type { NeuTreeTableLayoutChange } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableLayoutChange {
  readonly next: NeuTreeTableLayoutState;
  readonly source: 'resize' | 'reorder' | 'visibility' | 'pin';
}

NeuTreeTableLayoutStateTypeScript

import type { NeuTreeTableLayoutState } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableLayoutState {
  readonly hidden: readonly string[];
  readonly order: readonly string[];
  readonly pinnedEnd: readonly string[];
  readonly pinnedStart: readonly string[];
  readonly widths: Readonly<Record<string, string>>;
}

NeuTreeTableNodeContextTypeScript

import type { NeuTreeRelationStatus } from '@neural-ui/core/tree-table';
import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeTableNodeContext } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableNodeContext<T, K extends NeuTreeTableKey> {
  readonly $implicit: T;
  readonly childStatus: NeuTreeRelationStatus;
  readonly depth: number;
  readonly disabled: boolean;
  readonly expanded: boolean;
  readonly indeterminate: boolean;
  readonly key: K;
  readonly parentKey: K | null;
  readonly path: readonly K[];
  readonly selected: boolean;
  readonly siblingCount: number | null;
  readonly siblingIndex: number;
  readonly toggleExpansion: () => void;
  readonly toggleSelection: () => void;
  readonly value: T;
}

NeuTreeTablePaginationOptionsTypeScript

import type { NeuTreeTablePaginationOptions } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTablePaginationOptions {
  readonly enabled: boolean;
  readonly pageSizeOptions: readonly number[];
  readonly position: 'top' | 'bottom' | 'both';
  readonly report: 'none' | 'roots';
}

NeuTreeTableQueryTypeScript

import type { NeuTreeFilterExpression } from '@neural-ui/core/tree-table';
import type { NeuTreeSortEntry } from '@neural-ui/core/tree-table';

import type { NeuTreeTableQuery } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableQuery<F extends string> {
  readonly filters: NeuTreeFilterExpression<F> | null;
  readonly page: number;
  readonly pageSize: number;
  readonly search: string;
  readonly sort: readonly NeuTreeSortEntry<F>[];
}

NeuTreeTableRangeTypeScript

import type { NeuTreeTableRange } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableRange {
  readonly end: number;
  readonly start: number;
}

NeuTreeTableRangeChangeTypeScript

import type { NeuTreeTableRange } from '@neural-ui/core/tree-table';

import type { NeuTreeTableRangeChange } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableRangeChange {
  readonly projectionRevision: number;
  readonly reason: 'scroll' | 'resize' | 'programmatic' | 'hierarchy';
  readonly render: NeuTreeTableRange;
  readonly visible: NeuTreeTableRange;
}

NeuTreeTableRequestBaseTypeScript

import type { NeuTreeTableQuery } from '@neural-ui/core/tree-table';

import type { NeuTreeTableRequestBase } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableRequestBase<F extends string> {
  readonly hierarchyRevision: number;
  readonly query: NeuTreeTableQuery<F>;
  readonly queryRevision: number;
  readonly requestId: number;
}

NeuTreeTableRetryTargetTypeScript

import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeTableRetryTarget } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export type NeuTreeTableRetryTarget<K extends NeuTreeTableKey> = {
    readonly kind: 'roots';
} | {
    readonly kind: 'children';
    readonly parentKey: K;
};

NeuTreeTableRootsRequestTypeScript

import type { NeuTreeTableRequestBase } from '@neural-ui/core/tree-table';

import type { NeuTreeTableRootsRequest } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableRootsRequest<F extends string> extends NeuTreeTableRequestBase<F> {
  readonly kind: 'roots';
  readonly reason: 'initial' | 'query' | 'page' | 'retry';
  readonly relationRevision: number;
}

NeuTreeTableRowActionTypeScript

import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeTableRowAction } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableRowAction<T, K extends NeuTreeTableKey> {
  readonly key: K;
  readonly source: 'click' | 'double-click' | 'keyboard' | 'context-menu';
  readonly value: T;
}

NeuTreeTableRowOptionsTypeScript

import type { NeuTreeTableRowOptions } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableRowOptions<T> {
  readonly className?: (value: T) => string | readonly string[] | null;
}

NeuTreeTableScrollTargetTypeScript

import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeTableScrollTarget } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export type NeuTreeTableScrollTarget<K extends NeuTreeTableKey> = {
    readonly kind: 'node';
    readonly key: K;
    readonly behavior?: ScrollBehavior;
} | {
    readonly kind: 'index';
    readonly index: number;
    readonly behavior?: ScrollBehavior;
} | {
    readonly kind: 'offset';
    readonly offset: number;
    readonly behavior?: ScrollBehavior;
};

NeuTreeTableSelectionTypeScript

import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeTableSelection } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableSelection<K extends NeuTreeTableKey> {
  readonly keys: readonly K[];
  readonly kind: 'keys';
}

NeuTreeTableSelectionChangeTypeScript

import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';
import type { NeuTreeTableSelection } from '@neural-ui/core/tree-table';

import type { NeuTreeTableSelectionChange } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableSelectionChange<T, K extends NeuTreeTableKey> {
  readonly addedKeys: readonly K[];
  readonly loadedValues: readonly T[];
  readonly next: NeuTreeTableSelection<K>;
  readonly propagation: 'none' | 'loaded-subtree';
  readonly removedKeys: readonly K[];
  readonly source: 'row' | 'radio' | 'checkbox' | 'keyboard' | 'toggle-all';
}

NeuTreeTableSelectionOptionsTypeScript

import type { NeuTreeTableSelectionOptions } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export type NeuTreeTableSelectionOptions<T> = {
    readonly mode: 'none';
} | {
    readonly mode: 'single';
    readonly indicator: 'none' | 'radio';
    readonly selectOnRowClick: boolean;
    readonly allowClear: boolean;
    readonly isNodeDisabled?: (value: T) => boolean;
} | {
    readonly mode: 'multiple' | 'checkbox';
    readonly indicator: 'none' | 'checkbox';
    readonly selectOnRowClick: boolean;
    readonly modifier: 'replace' | 'platform' | 'toggle';
    readonly range: boolean;
    readonly propagation: 'none' | 'loaded-subtree';
    readonly toggleAllScope: 'visible' | 'loaded';
    readonly isNodeDisabled?: (value: T) => boolean;
};

NeuTreeTableSortOptionsTypeScript

import type { NeuTreeSortDirection } from '@neural-ui/core/tree-table';

import type { NeuTreeTableSortOptions } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableSortOptions {
  readonly defaultDirection: NeuTreeSortDirection;
  readonly mode: 'single' | 'multiple';
  readonly removable: boolean;
  readonly resetRootPageOnChange: boolean;
}

NeuTreeTableStateContextTypeScript

import type { NeuTreeTableStateContext } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableStateContext {
  readonly retry: () => void;
}

NeuTreeTableTemplateDirectiveTypeScript

import type { NeuTreeTableTemplateDirective } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeTableTemplateDirective<C> {
  readonly templateRef: TemplateRef<C>;
}

NeuTreeTableVirtualizationOptionsTypeScript

import type { NeuTreeTableVirtualizationOptions } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export type NeuTreeTableVirtualizationOptions = {
    readonly enabled: false;
} | {
    readonly enabled: true;
    readonly itemSize: number;
    readonly overscan: number;
};

NeuTreeUnloadedRelationTypeScript

import type { NeuTreeTableKey } from '@neural-ui/core/tree-table';

import type { NeuTreeUnloadedRelation } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export interface NeuTreeUnloadedRelation<K extends NeuTreeTableKey> {
  readonly appliedRequestId: number | null;
  readonly keys: readonly K[];
  readonly relationRevision: number;
  readonly status: 'unloaded';
  readonly total: number | null;
}

NeuTreeValueAccessorTypeScript

import type { NeuTreeValueAccessor } from '@neural-ui/core/tree-table';

// Public declaration (reference only)
export type NeuTreeValueAccessor<T> = (value: T) => unknown;

Appearance and tokens

Use appearance to choose density, borders, stripes and sticky headings. These options change TreeTable's own renderer. Keep responsive contained-scroll for wide data or use stacked for short non-virtual layouts.

The local example overrides TreeTable cell block/inline padding and selection background. Shared surface, text and focus tokens also affect other components inside the wrapper. Select a density and border mode to compare their actual effect; use the selection example above to understand selected rows.

Specific tokens

Token	Purpose	State / variant	Default / source	Fallback
`--neu-tree-table-cell-block`	Base vertical padding; compact uses 60%, relaxed 140%.	Table cells	`0.625rem`Component fallback	`No token alias`
`--neu-tree-table-cell-inline`	Horizontal cell padding, independent of tree indentation.	Table cells	`var(--neu-space-3)`Component fallback	`--neu-space-3`
`--neu-tree-table-selected-background`	Selected-node row background, above alternating stripes.	Selected row	`color-mix(in srgb, currentColor 9%, transparent)`Component fallback	`No token alias`
`--neu-tree-table-virtual-block-size`	Height of the virtualized hierarchy viewport.	Virtualization	`24rem`Root declaration	`No token alias`

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-focus-color`	Visible keyboard-focus outline	Shared by other Core consumers; scope the override.	`var(--neu-primary)`
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-surface-2`	Secondary surfaces and alternating rows	Shared by other Core consumers; scope the override.	`#f1f5f9`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-text-muted`	Secondary labels and supporting content	Shared by other Core consumers; scope the override.	`#475569`
`--neu-space-1`	Spacing between content and controls	Shared by other Core consumers; scope the override.	`0.25rem`
`--neu-space-3`	Spacing between content and controls	Shared by other Core consumers; scope the override.	`0.75rem`

Related components

Choose Tree when you need only hierarchy; choose Table when records have no parent–child relationship.