Table | Neural UI v2

Display data

Pass records through data, describe visible fields with columns, and provide a stable rowKey. The key identifies a record across updates; do not use its current row position. This example supplies three customer orders and their column definitions.

Use Table for flat records. Choose TreeTable when rows have parent–child relationships, or Tree when hierarchy does not need columns.

Customer	Amount (€)	Region
Atlas	240	EU
Birch	180	US
Cedar	420	EU

Configurator

Try appearance, selection, sorting, global search, column filters, pagination, editing, row details and column actions. Each option updates the preview and its configuration code. Expand a group to explore its controls. Options that depend on another feature become available when you enable it.

Preview

6 rows; page 1; 0 selected; sort: none


Atlas	240	EU
Birch	180	US
Cedar	420	EU

Your configuration code

This snippet updates when you change options. The Code tab includes the complete component, data and templates.

Advanced options · 1

<neu-table
  [data]="records()"
  [columns]="columns()"
  [rowKey]="rowKey"
  [appearance]='{
    "density": "normal",
    "borders": "rows",
    "striped": false,
    "stickyHeader": false,
    "responsive": "contained-scroll"
  }'
  [selectionOptions]='{
    "mode": "none"
  }'
  [sortOptions]='{
    "mode": "single",
    "removable": true,
    "defaultDirection": "asc",
    "resetPageOnChange": true
  }'
  [filterOptions]='{
    "surfaces": [],
    "globalFields": [],
    "predicates": {},
    "debounceMs": 0,
    "commit": "immediate"
  }'
  [paginationOptions]='{
    "enabled": true,
    "pageSizeOptions": [
      3,
      6,
      10
    ],
    "position": "bottom",
    "report": "range",
    "showPageJump": false
  }'
  [columnOptions]='{
    "reorderable": false,
    "resizable": false,
    "hideable": false,
    "pinnable": false
  }'
  [editingOptions]='{
    "mode": "none",
    "activation": "click",
    "commitOnBlur": false
  }'
  [expansionOptions]='{
    "enabled": false,
    "toggleOnRowClick": false
  }'
  [interactionOptions]='{
    "navigation": "native",
    "wrapFocus": false,
    "announceChanges": true
  }'
  [query]="query()"
  (queryChange)="query.set($event)"
  [selection]="selection()"
  (selectionChange)="selection.set($event.next)"
  [layout]="layout()"
  (layoutChange)="layout.set($event.next)"
  [editState]="editState()"
  (editStateChange)="editState.set($event.next)"
  (editCommit)="save($event)"
  [expandedKeys]="expanded()"
  (expandedKeysChange)="expanded.set($event.next)"
>
  <!-- Include the editor and detail templates from the complete example. -->
</neu-table>

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 records = signal([
  {
    "id": 101,
    "customer": "Atlas",
    "amount": 240,
    "region": "EU"
  },
  {
    "id": 102,
    "customer": "Birch",
    "amount": 180,
    "region": "US"
  },
  {
    "id": 103,
    "customer": "Cedar",
    "amount": 420,
    "region": "EU"
  },
  {
    "id": 104,
    "customer": "Delta",
    "amount": 95,
    "region": "US"
  },
  {
    "id": 105,
    "customer": "Elm",
    "amount": 310,
    "region": "EU"
  },
  {
    "id": 106,
    "customer": "Fern",
    "amount": 160,
    "region": "US"
  }
]);

export const columns = signal([
  {
    "id": "customer",
    "field": "customer",
    "header": "Customer",
    "minWidth": "14rem",
    "sort": {
      "field": "customer"
    }
  },
  {
    "id": "amount",
    "field": "amount",
    "header": "Amount (€)",
    "minWidth": "10rem",
    "sort": {
      "field": "amount"
    }
  },
  {
    "id": "region",
    "field": "region",
    "header": "Region",
    "minWidth": "10rem",
    "sort": {
      "field": "region"
    }
  }
]);

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

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

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

export const layout = signal({
  "order": [],
  "hidden": [],
  "widths": {},
  "pinnedStart": [],
  "pinnedEnd": []
});

export const editState = signal({
  "kind": "none"
});

export const expanded = signal([]);

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.

data · readonly T[]

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

grouping · NeuTableGroupingState<F> | null

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

groupingOptions · NeuTableGroupingOptions<T, F>

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

labels · NeuTableLabels

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

metadata · NeuTableMetadata

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

rowKey · NeuRowKey<T, K>

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

rowOptions · NeuTableRowOptions<T, K>

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

rowTrackBy · NeuRowTrackBy<T> | undefined

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

virtualizationOptions · NeuTableVirtualizationOptions

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

Feature examples

Explore one feature at a time. Each example has its own state and complete source. The selected feature is included in the URL so you can share it or return to it directly.

Selection

Enable selection with selectionOptions and supply the selected keys through selection. selectionChange proposes next; applying it updates the checkboxes. The component does not replace your input.

This example selects loaded records only. Use all-matching selection only when your application can preserve the query scope and excluded keys across server pages.

Customer	Amount (€)	Region
Atlas	240	EU
Birch	180	US
Cedar	420	EU

Selected ids: —

Accessibility and keyboard

Core supplies table structure and controls for enabled features. Your application supplies meaningful column headings, useful cell content and names for custom template controls. Keep interactive cell content keyboard reachable and do not communicate selection or errors by color alone.

Use focusCell when application navigation needs a specific rendered cell; check its boolean result. scrollTo can bring a row into view. Test custom editors, row details and remote loading messages as part of your application's keyboard flow.

Key	Action
`Tab / Shift+Tab`	Move between enabled controls and interactive template content.
`Enter / Space`	Activate the focused native control, such as sorting or expansion.
`Enter / Escape`	In the example editor, commit or cancel the draft.

API

Inputs configure the table and supply application-owned state. Change outputs propose updates; they are not two-way models. Expand the referenced interfaces to inspect every option and event payload. Public methods act on the current table instance; they do not replace data or perform networking.

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`	`NeuTableAppearance`	`{ density: 'normal', borders: 'rows', striped: false, stickyHeader: false, responsive: 'contained-scroll', }`	`[appearance]`	Density, borders, stripes, sticky heading and contained-scroll or stacked responsive layout.
`columnOptions`	`NeuTableColumnOptions`	`{}`	`[columnOptions]`	Opt into column resizing, reordering, hiding or pinning. All controls are off by default. Apply layoutChange.next to layout to accept changes.
`columns`	`readonly NeuTableColumn<T, F>[]`	`[]`	`[columns]`	Column ids, headings, value fields and optional sorting, filtering or editing descriptors.
`data`	`readonly T[]`	`[]`	`[data]`	Records to render. In remote mode supply the response rows, not an assumed complete dataset.
`dataMode`	`NeuTableDataMode`	`'client'`	`[dataMode]`	client processes loaded records; remote delegates data loading to the application.
`editingOptions`	`NeuTableEditingOptions<T, K, F>`	`{ mode: 'none' }`	`[editingOptions]`	Editing mode, activation gesture, optional validation and blur commit behavior.
`editState`	`NeuTableEditState<K>`	`{ kind: 'none', }`	`[editState]`	Applied active cell or row editing session, or kind none.
`expandedKeys`	`readonly K[]`	`[]`	`[expandedKeys]`	Applied keys whose row-detail regions are expanded.
`expansionOptions`	`NeuTableExpansionOptions<T>`	`{ enabled: false, toggleOnRowClick: false, }`	`[expansionOptions]`	Enable details, restrict expandable rows and optionally toggle on row click.
`filterOptions`	`NeuTableFilterOptions<T, F>`	`{ surfaces: [], globalFields: [], predicates: {}, debounceMs: 0, commit: 'immediate', }`	`[filterOptions]`	Filter surfaces, global fields, custom predicates, debounce and commit strategy.
`grouping`	`NeuTableGroupingState<F> \| null`	`null`	`[grouping]`	Applied grouping fields and expanded group ids; null disables grouping.
`groupingOptions`	`NeuTableGroupingOptions<T, F>`	`{ mode: 'subheader', scope: 'loaded', }`	`[groupingOptions]`	Loaded-data group rendering mode and optional value/aggregate functions.
`interactionOptions`	`NeuTableInteractionOptions`	`{ navigation: 'native', wrapFocus: false, announceChanges: false, }`	`[interactionOptions]`	Native, row or cell keyboard navigation, focus wrapping and change announcements.
`labels`	`NeuTableLabels`	`{ ariaLabel: 'Data table', empty: 'No data', loading: 'Loading', error: 'Unable to load data', retry: 'Retry', selection: 'Selection', pagination: 'Pagination', }`	`[labels]`	Localized table control and state messages.
`layout`	`NeuTableLayoutState`	`{ order: [], hidden: [], widths: {}, pinnedStart: [], pinnedEnd: [], }`	`[layout]`	Applied column order, visibility, widths and start/end pinning.
`metadata`	`NeuTableMetadata`	`{ totalItems: null, loading: false, error: null, queryRevision: 0, appliedRequestId: null, }`	`[metadata]`	Remote total, loading/error state and response identity (queryRevision and appliedRequestId).
`paginationOptions`	`NeuTablePaginationOptions`	`{ enabled: false, pageSizeOptions: [], position: 'bottom', report: 'none', showPageJump: false, }`	`[paginationOptions]`	Enable and position pagination, choose page sizes and the visible report.
`query`	`NeuTableQuery<F>`	`{ page: 0, pageSize: 25, search: '', sort: [], filters: null, }`	`[query]`	Applied page, page size, search, sort and filter expression. Apply queryChange to accept changes.
`rowKey`	`NeuRowKey<T, K>`	Required	`[rowKey]`	Required function returning a stable unique key for each record.
`rowOptions`	`NeuTableRowOptions<T, K>`	`{ reorderable: false, }`	`[rowOptions]`	Row disabled state, classes, pinning and reorder availability.
`rowTrackBy`	`NeuRowTrackBy<T> \| undefined`	No default	`[rowTrackBy]`	Optional Angular row identity function; it does not replace rowKey's state identity.
`selection`	`NeuTableSelection<K, F>`	`{ kind: 'keys', keys: [], }`	`[selection]`	Applied selected keys or all-matching scope with exclusions.
`selectionOptions`	`NeuTableSelectionOptions<T>`	`{ mode: 'none' }`	`[selectionOptions]`	Selection mode, indicators, row-click behavior, modifiers, ranges and select-all scope.
`sortOptions`	`NeuTableSortOptions`	`{ mode: 'single', removable: true, defaultDirection: 'asc', resetPageOnChange: true, }`	`[sortOptions]`	Single or multiple sorting, default direction, removal and page-reset behavior.
`virtualizationOptions`	`NeuTableVirtualizationOptions`	`{ enabled: false }`	`[virtualizationOptions]`	Enable fixed-height row virtualization with itemSize and overscan; remote requests may use requestStep.

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`	`NeuTableDataRequest<F>`	`(dataRequest)="onDataRequest($event)"`	Requests application-owned loading with query, revisions, request id and optional range.
`editCancel`	`NeuTableEditCancel<T, K>`	`(editCancel)="onEditCancel($event)"`	Reports cancellation of an editing session; do not persist a draft.
`editCommit`	`NeuTableEditCommit<T, K, F>`	`(editCommit)="onEditCommit($event)"`	Emitted when an edit is saved. Contains key (row) and changes (field and new value). Validate and apply changes to data in your handler; Table does not mutate or persist your records.
`editStateChange`	`NeuTableEditChange<K>`	`(editStateChange)="onEditStateChange($event)"`	Emits next when an editing session starts or ends. Update editState with $event.next to open or close the editor.
`expandedKeysChange`	`NeuTableExpandedKeysChange<K>`	`(expandedKeysChange)="onExpandedKeysChange($event)"`	Emits next with expanded detail keys and the changed row. Update expandedKeys with $event.next.
`exportRequest`	`NeuTableExportRequest<F>`	`(exportRequest)="onExportRequest($event)"`	Requests an application-handled export when it cannot be generated from the available data.
`featureError`	`NeuTableFeatureError`	`(featureError)="onFeatureError($event)"`	Reports the failed feature, its cause and whether recovery is possible.
`groupingChange`	`NeuTableGroupingChange<F>`	`(groupingChange)="onGroupingChange($event)"`	Emits next when a group expands or collapses. Update grouping with $event.next to retain its state.
`layoutChange`	`NeuTableLayoutChange`	`(layoutChange)="onLayoutChange($event)"`	Emits next with column order, widths, visibility and pinning. Update layout with $event.next.
`queryChange`	`NeuTableQuery<F>`	`(queryChange)="onQueryChange($event)"`	Emits the complete query when the page, search, sort or filters change. Update query with $event: query.set($event).
`rangeChange`	`NeuTableRangeChange`	`(rangeChange)="onRangeChange($event)"`	Reports visible/rendered virtual ranges and the cause of the change.
`rowAction`	`NeuTableRowAction<T, K>`	`(rowAction)="onRowAction($event)"`	Reports activation of a row action with its row and key.
`rowReorder`	`NeuTableRowMove<K>`	`(rowReorder)="onRowReorder($event)"`	Proposes a row move. Your application changes the record order after accepting it.
`selectionChange`	`NeuTableSelectionChange<T, K, F>`	`(selectionChange)="onSelectionChange($event)"`	Emits next with the new selection, added or removed keys and the source. Update selection with $event.next: selection.set($event.next).

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
`NeuTableCaptionDirective` Above the table View example	Public template directive (entrypoint) A heading identifies this data set.	`ng-template[neuTableCaption]` Context used: `—`
`NeuTableCellDirective` Body cell View example	Public template directive (entrypoint) Customer names or planned hours use your own presentation.	`ng-template[neuTableCell]` Context used: `$implicit`
`NeuTableEditorDirective` Custom cell editor View example	Public template directive (entrypoint) Use the row’s pencil, edit the customer, then save or cancel using its actions.	`ng-template[neuTableEditor]` Context used: `valueSignal, setValue, commit, cancel, errors`
`NeuTableEmptyDirective` Empty data area View example	Public template directive (entrypoint) Choose Empty in the example to see this message.	`ng-template[neuTableEmpty]` Context used: `—`
`NeuTableErrorDirective` Failed data area View example	Public template directive (entrypoint) Choose Error, then use Retry to request the data again.	`ng-template[neuTableError]` Context used: `retry`
`NeuTableFilterDirective` Column filter in a row or menu View example	Public template directive (entrypoint) Type a customer name to filter the rows. Clear restores them; apply and clear propose queryChange, which the application accepts.	`ng-template[neuTableFilter]` Context used: `column, sort, value, rule, apply(value, rule?), clear()`
`NeuTableFooterDirective` Column footer View example	Public template directive (entrypoint) A label appears below the data in the specified column.	`ng-template[neuTableFooter]` Context used: `—`
`NeuTableGroupFooterDirective` After each group View example	Public template directive (entrypoint) The group footer counts its records.	`ng-template[neuTableGroupFooter]` Context used: `rows`
`NeuTableGroupHeaderDirective` Before each group View example	Public template directive (entrypoint) Enable grouping to see the region and number of orders.	`ng-template[neuTableGroupHeader]` Context used: `value, rows`
`NeuTableHeaderDirective` Column heading View example	Public template directive (entrypoint) The heading uses the column label with custom markup.	`ng-template[neuTableHeader]` Context used: `column`
`NeuTableLoadingDirective` Loading data area View example	Public template directive (entrypoint) Choose Loading to display a status message.	`ng-template[neuTableLoading]` Context used: `—`
`NeuTablePaginatorDirective` Enabled top/bottom paginator View example	Public template directive (entrypoint) Previous and Next use the applied page and filtered total. Page is zero-based; remote totals and pageCount can be null. Actions propose queryChange without mutating application state.	`ng-template[neuTablePaginator]` Context used: `page, pageSize, humanPage, pageCount, total, rangeStart, rangeEnd, canFirst, canPrevious, canNext, canLast, pageSizeOptions, changePage(page), changePageSize(size)`
`NeuTableRowDetailDirective` Below an expanded row View example	Public template directive (entrypoint) Expand a row to see its order details.	`ng-template[neuTableRowDetail]` Context used: `$implicit`
`NeuTableSummaryDirective` Below the table View example	Public template directive (entrypoint) An application-owned total accompanies the table.	`ng-template[neuTableSummary]` Context used: `—`
`NeuTableToolbarDirective` Before the rows View example	Public template directive (entrypoint) Instructions or application actions accompany the data.	`ng-template[neuTableToolbar]` Context used: `—`

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Table caption

NeuTableCaptionDirective

**Customer orders**
Customer	Amount (€)	Region
Atlas	240	EU
Birch	180	US
Cedar	420	EU

Result summary

NeuTableSummaryDirective

Customer	Amount (€)	Region
Atlas	240	EU
Birch	180	US
Cedar	420	EU
Displayed orders: 3 · Total amount: 840 €

Column header

NeuTableHeaderDirective

Customer Business account	Amount (€)	Region
Atlas	240	EU
Birch	180	US
Cedar	420	EU

Cell content

NeuTableCellDirective

Customer	Amount (€)	Region
AtlasOrder #101	240	EU
BirchOrder #102	180	US
CedarOrder #103	420	EU

Custom filter

NeuTableFilterDirective

Customer	Amount (€)	Region
Filter customers
Atlas	240	EU
Birch	180	US
Cedar	420	EU

Custom editor

NeuTableEditorDirective

Use the row’s pencil to edit its customer. Save changes or cancel using that row’s actions.

Customer	Amount (€)	Region
Atlas	240	EU
Birch	180	US
Cedar	420	EU

Row detail

NeuTableRowDetailDirective

Expansion

Atlas

240

EU

Order detail #101

Amount (€)	Region
240	EU

Birch

180

US

Cedar

420

EU

Group header

NeuTableGroupHeaderDirective

Expand a region to see its orders.

Customer	Amount (€)	Region

Group summary

NeuTableGroupFooterDirective

Expand a region to see its orders and summary.

Customer	Amount (€)	Region

Empty state

NeuTableEmptyDirective

Customer	Amount (€)	Region
No orders yet New orders will appear here.

Loading state

NeuTableLoadingDirective

Customer	Amount (€)	Region
Loading orders… Retrieving your results.

Error state and retry

NeuTableErrorDirective

Customer	Amount (€)	Region
Orders could not be loaded.

Custom pagination

NeuTablePaginatorDirective

Customer	Amount (€)	Region
Atlas	240	EU
Birch	180	US
Cedar	420	EU

Public methods

Name	Contract
`export`	`export(request: NeuTableExportRequest<F>): Promise<NeuTableExportOutcome>;` Create an export from the requested scope. Inspect the outcome; a delegated export requires application handling. The Export example shows the complete call and result. example.ts `await table()?.export({ format: 'csv', scope: 'view' });`
`focusCell`	`focusCell(target: { readonly key: K; readonly columnId: string; }): boolean;` Move focus to a rendered cell by stable row key and column id. The boolean result reports whether focus could be placed. example.ts `table()?.focusCell({ key: 101, columnId: 'customer' });`
`retryData`	`retryData(): void;` Request another attempt for the current remote query. Handle dataRequest in the application; this method does not fetch data itself. example.ts `table()?.retryData();`
`scrollTo`	`scrollTo(target: { readonly index?: number; readonly key?: K; }): Promise<void>;` Scroll to a row by index or key. Await completion when a subsequent action depends on the row being visible. example.ts `await table()?.scrollTo({ key: 101 });`

Public Types

Open a type to inspect its definition and interface fields.

NeuFilterConstraintTypeScript

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

// Public declaration (reference only)
export interface NeuFilterConstraint<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;
}

NeuFilterExpressionTypeScript

import type { NeuFilterConstraint } from '@neural-ui/core/table';
import type { NeuFilterGroup } from '@neural-ui/core/table';

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

// Public declaration (reference only)
export type NeuFilterExpression<F extends string> = NeuFilterConstraint<F> | NeuFilterGroup<F>;

NeuFilterGroupTypeScript

import type { NeuFilterExpression } from '@neural-ui/core/table';
import type { NeuFilterOperator } from '@neural-ui/core/table';

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

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

NeuFilterOperatorTypeScript

NeuRowKeyTypeScript

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

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

// Public declaration (reference only)
export type NeuRowKey<T, K extends NeuTableKey> = (row: T) => K;

NeuRowTrackByTypeScript

NeuSortDirectionTypeScript

NeuSortEntryTypeScript

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

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

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

NeuTableAppearanceTypeScript

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

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

NeuTableCellContextTypeScript

import type { NeuTableKey } from '@neural-ui/core/table';
import type { NeuTableRowContext } from '@neural-ui/core/table';

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

// Public declaration (reference only)
export interface NeuTableCellContext<T, K extends NeuTableKey> extends NeuTableRowContext<T, K> {
  readonly columnId: string;
  readonly value: unknown;
}

NeuTableColumnTypeScript

import type { NeuTableEditColumn } from '@neural-ui/core/table';
import type { NeuTableFilterColumn } from '@neural-ui/core/table';
import type { NeuTableSortColumn } from '@neural-ui/core/table';
import type { NeuTableValueAccessor } from '@neural-ui/core/table';

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

// Public declaration (reference only)
export interface NeuTableColumn<T, F extends string> {
  readonly align?: 'start' | 'center' | 'end';
  readonly edit?: NeuTableEditColumn<T, F>;
  readonly field?: F;
  readonly filter?: NeuTableFilterColumn<T, F>;
  readonly header: string;
  readonly id: string;
  readonly maxWidth?: string;
  readonly minWidth?: string;
  readonly sort?: NeuTableSortColumn<T, F>;
  readonly value?: NeuTableValueAccessor<T>;
  readonly width?: string;
}

NeuTableColumnOptionsTypeScript

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

// Public declaration (reference only)
export interface NeuTableColumnOptions {
  readonly hideable?: boolean;
  readonly pinnable?: boolean;
  readonly reorderable?: boolean;
  readonly resizable?: boolean;
}

NeuTableDataModeTypeScript

NeuTableDataRequestTypeScript

import type { NeuTableDataRequestReason } from '@neural-ui/core/table';
import type { NeuTableQuery } from '@neural-ui/core/table';
import type { NeuTableRange } from '@neural-ui/core/table';

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

// Public declaration (reference only)
export interface NeuTableDataRequest<F extends string> {
  readonly query: NeuTableQuery<F>;
  readonly queryRevision: number;
  readonly range?: NeuTableRange;
  readonly reason: NeuTableDataRequestReason;
  readonly requestId: number;
}

NeuTableDataRequestReasonTypeScript

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

// Public declaration (reference only)
export type NeuTableDataRequestReason = 'initial' | 'query' | 'viewport' | 'retry';

NeuTableDetailContextTypeScript

import type { NeuTableKey } from '@neural-ui/core/table';
import type { NeuTableRowContext } from '@neural-ui/core/table';

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

// Public declaration (reference only)
export interface NeuTableDetailContext<T, K extends NeuTableKey> extends NeuTableRowContext<T, K> {
}

NeuTableEditCancelTypeScript

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

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

// Public declaration (reference only)
export interface NeuTableEditCancel<T, K extends NeuTableKey> {
  readonly key: K;
  readonly reason: 'escape' | 'consumer' | 'data-change';
  readonly row: T;
}

NeuTableEditChangeTypeScript

import type { NeuTableEditState } from '@neural-ui/core/table';
import type { NeuTableKey } from '@neural-ui/core/table';

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

// Public declaration (reference only)
export interface NeuTableEditChange<K extends NeuTableKey> {
  readonly next: NeuTableEditState<K>;
  readonly source: 'pointer' | 'keyboard' | 'programmatic' | 'commit' | 'cancel';
}

NeuTableEditColumnTypeScript

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

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

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

NeuTableEditCommitTypeScript

import type { NeuTableEditValueChange } from '@neural-ui/core/table';
import type { NeuTableKey } from '@neural-ui/core/table';

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

// Public declaration (reference only)
export interface NeuTableEditCommit<T, K extends NeuTableKey, F extends string> {
  readonly changes: readonly NeuTableEditValueChange<F>[];
  readonly key: K;
  readonly row: T;
}

NeuTableEditErrorTypeScript

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

// Public declaration (reference only)
export interface NeuTableEditError {
  readonly code: string;
  readonly columnId?: string;
  readonly message: string;
}

NeuTableEditingOptionsTypeScript

import type { NeuTableEditValidation } from '@neural-ui/core/table';
import type { NeuTableKey } from '@neural-ui/core/table';

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

// Public declaration (reference only)
export type NeuTableEditingOptions<T, K extends NeuTableKey, F extends string> = {
    readonly mode: 'none';
} | {
    readonly mode: 'cell' | 'row';
    readonly activation: 'click' | 'double-click' | 'enter' | 'f2';
    readonly validate?: NeuTableEditValidation<T, K, F>;
    readonly commitOnBlur: boolean;
};

NeuTableEditorContextTypeScript

import type { NeuTableCellContext } from '@neural-ui/core/table';
import type { NeuTableEditError } from '@neural-ui/core/table';
import type { NeuTableKey } from '@neural-ui/core/table';

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

// Public declaration (reference only)
export interface NeuTableEditorContext<T, K extends NeuTableKey, F extends string> extends NeuTableCellContext<T, K> {
  readonly cancel: () => void;
  readonly commit: () => void;
  readonly errors: Signal<readonly NeuTableEditError[]>;
  readonly setValue: (value: unknown) => void;
  readonly valueSignal: Signal<unknown>;
}

NeuTableEditStateTypeScript

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

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

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

NeuTableEditValidationTypeScript

import type { NeuTableEditCommit } from '@neural-ui/core/table';
import type { NeuTableEditError } from '@neural-ui/core/table';
import type { NeuTableKey } from '@neural-ui/core/table';

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

// Public declaration (reference only)
export type NeuTableEditValidation<T, K extends NeuTableKey, F extends string> = (event: NeuTableEditCommit<T, K, F>) => readonly NeuTableEditError[] | Promise<readonly NeuTableEditError[]>;

NeuTableEditValueChangeTypeScript

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

// Public declaration (reference only)
export interface NeuTableEditValueChange<F extends string> {
  readonly columnId: string;
  readonly field?: F;
  readonly previous: unknown;
  readonly value: unknown;
}

NeuTableExpandedKeysChangeTypeScript

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

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

// Public declaration (reference only)
export interface NeuTableExpandedKeysChange<K extends NeuTableKey> {
  readonly expanded: boolean;
  readonly key: K;
  readonly next: readonly K[];
  readonly source: 'toggle' | 'keyboard' | 'programmatic';
}

NeuTableExpansionOptionsTypeScript

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

// Public declaration (reference only)
export interface NeuTableExpansionOptions<T> {
  readonly enabled: boolean;
  readonly isExpandable?: (row: T) => boolean;
  readonly toggleOnRowClick: boolean;
}

NeuTableExportFormatTypeScript

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

// Public declaration (reference only)
export type NeuTableExportFormat = 'csv' | 'json' | 'xlsx';

NeuTableExportOutcomeTypeScript

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

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

// Public declaration (reference only)
export type NeuTableExportOutcome = {
    readonly kind: 'generated';
    readonly result: NeuTableExportResult;
} | {
    readonly kind: 'delegated';
};

NeuTableExportRequestTypeScript

import type { NeuTableExportFormat } from '@neural-ui/core/table';
import type { NeuTableExportScope } from '@neural-ui/core/table';
import type { NeuTableQuery } from '@neural-ui/core/table';

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

// Public declaration (reference only)
export interface NeuTableExportRequest<F extends string> {
  readonly fileName: string;
  readonly format: NeuTableExportFormat;
  readonly query: NeuTableQuery<F>;
  readonly scope: NeuTableExportScope;
}

NeuTableExportResultTypeScript

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

// Public declaration (reference only)
export interface NeuTableExportResult {
  readonly bytes: Uint8Array;
  readonly fileName: string;
  readonly mediaType: string;
}

NeuTableExportScopeTypeScript

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

// Public declaration (reference only)
export type NeuTableExportScope = 'page' | 'loaded' | 'filtered' | 'selected' | 'all';

NeuTableFeatureErrorTypeScript

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

// Public declaration (reference only)
export interface NeuTableFeatureError {
  readonly cause: unknown;
  readonly feature: 'filters' | 'editing' | 'virtualization' | 'export';
  readonly recoverable: boolean;
}

NeuTableFilterColumnTypeScript

import type { NeuFilterConstraint } from '@neural-ui/core/table';
import type { NeuTableValueAccessor } from '@neural-ui/core/table';

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

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

NeuTableFilterContextTypeScript

import type { NeuFilterConstraint } from '@neural-ui/core/table';
import type { NeuTableHeaderContext } from '@neural-ui/core/table';

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

// Public declaration (reference only)
export interface NeuTableFilterContext<T, F extends string> extends NeuTableHeaderContext<T, F> {
  readonly apply: (value: unknown, rule?: NeuFilterConstraint<F>['rule']) => void;
  readonly clear: () => void;
  readonly rule: NeuFilterConstraint<F>['rule'];
  readonly value: unknown;
}

NeuTableFilterOptionsTypeScript

import type { NeuTableFilterPredicate } from '@neural-ui/core/table';
import type { NeuTableFilterSurface } from '@neural-ui/core/table';

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

// Public declaration (reference only)
export interface NeuTableFilterOptions<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, NeuTableFilterPredicate<T, F>>>;
  readonly surfaces: readonly NeuTableFilterSurface[];
}

NeuTableFilterPredicateTypeScript

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

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

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

NeuTableFilterPredicateContextTypeScript

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

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

NeuTableFilterSurfaceTypeScript

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

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

NeuTableGroupContextTypeScript

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

// Public declaration (reference only)
export interface NeuTableGroupContext<T> {
  readonly expanded: boolean;
  readonly id: string;
  readonly level: number;
  readonly rows: readonly T[];
  readonly value: unknown;
}

NeuTableGroupingChangeTypeScript

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

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

// Public declaration (reference only)
export interface NeuTableGroupingChange<F extends string> {
  readonly next: NeuTableGroupingState<F>;
  readonly source: 'toggle' | 'programmatic';
}

NeuTableGroupingOptionsTypeScript

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

// Public declaration (reference only)
export interface NeuTableGroupingOptions<T, F extends string> {
  readonly aggregate?: (rows: readonly T[], field: F) => unknown;
  readonly mode: 'subheader' | 'rowspan';
  readonly scope: 'loaded';
  readonly value?: (row: T, field: F) => unknown;
}

NeuTableGroupingStateTypeScript

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

// Public declaration (reference only)
export interface NeuTableGroupingState<F extends string> {
  readonly by: readonly F[];
  readonly expandedGroupIds: readonly string[];
}

NeuTableHeaderContextTypeScript

import type { NeuSortEntry } from '@neural-ui/core/table';
import type { NeuTableColumn } from '@neural-ui/core/table';

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

// Public declaration (reference only)
export interface NeuTableHeaderContext<T, F extends string> {
  readonly column: NeuTableColumn<T, F>;
  readonly sort: readonly NeuSortEntry<F>[];
}

NeuTableInteractionOptionsTypeScript

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

// Public declaration (reference only)
export interface NeuTableInteractionOptions {
  readonly announceChanges: boolean;
  readonly navigation: 'native' | 'rows' | 'cells';
  readonly wrapFocus: boolean;
}

NeuTableKeyTypeScript

NeuTableLabelsTypeScript

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

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

// Public declaration (reference only)
export interface NeuTableLabels {
  readonly ariaLabel: string;
  readonly empty: string;
  readonly error: string;
  readonly loading: string;
  readonly messages?: Partial<Record<NeuTableMessage, string>>;
  readonly pagination: string;
  readonly retry: string;
  readonly selection: string;
}

NeuTableLayoutChangeTypeScript

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

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

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

NeuTableLayoutStateTypeScript

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

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

NeuTableMessageTypeScript

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

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

// Public declaration (reference only)
export type NeuTableMessage = 'stateAnnouncement' | 'firstPage' | 'previousPage' | 'nextPage' | 'lastPage' | 'page' | 'of' | 'goToPage' | 'rowsPerPage' | 'searchTable' | 'search' | 'clearSearch' | 'clear' | 'advancedFilters' | 'hiddenColumns' | 'showColumn' | 'expansion' | 'selectAll' | 'filterColumn' | 'filter' | 'moveLeft' | 'moveRight' | 'pinColumn' | 'pin' | 'hideColumn' | 'hide' | 'resizeColumn' | 'rule' | 'value' | 'applyColumnFilter' | 'clearColumnFilter' | 'cancelFilter' | 'filterRule' | 'filterValue' | 'apply' | 'collapseRow' | 'expandRow' | 'selectRow' | 'sortAction' | 'ascending' | 'descending' | 'none' | 'field' | 'join' | 'and' | 'or' | 'applyAdvancedFilter' | 'cancelAdvancedFilter' | 'edit' | 'save' | 'cancel' | 'validating' | NeuFilterConstraint<string>['rule'];

NeuTableMetadataTypeScript

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

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

// Public declaration (reference only)
export interface NeuTableMetadata {
  readonly appliedRequestId: number | null;
  readonly dataRange?: NeuTableRange;
  readonly error: unknown | null;
  readonly loading: boolean;
  readonly queryRevision: number;
  readonly totalItems: number | null;
}

NeuTablePaginationOptionsTypeScript

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

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

NeuTablePaginatorContextTypeScript

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

// Public declaration (reference only)
export interface NeuTablePaginatorContext {
  readonly canFirst: boolean;
  readonly canLast: boolean;
  readonly canNext: boolean;
  readonly canPrevious: boolean;
  readonly changePage: (page: number) => void;
  readonly changePageSize: (pageSize: number) => void;
  readonly humanPage: number;
  readonly page: number;
  readonly pageCount: number | null;
  readonly pageSize: number;
  readonly pageSizeOptions: readonly number[];
  readonly rangeEnd: number;
  readonly rangeStart: number;
  readonly total: number | null;
}

NeuTableQueryTypeScript

import type { NeuFilterExpression } from '@neural-ui/core/table';
import type { NeuSortEntry } from '@neural-ui/core/table';

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

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

NeuTableRangeTypeScript

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

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

NeuTableRangeChangeTypeScript

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

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

// Public declaration (reference only)
export interface NeuTableRangeChange {
  readonly reason: 'scroll' | 'resize' | 'programmatic' | 'query';
  readonly render: NeuTableRange;
  readonly visible: NeuTableRange;
}

NeuTableRowActionTypeScript

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

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

// Public declaration (reference only)
export interface NeuTableRowAction<T, K extends NeuTableKey> {
  readonly action: 'activate' | 'double-activate' | 'context-menu';
  readonly index: number;
  readonly key: K;
  readonly row: T;
}

NeuTableRowContextTypeScript

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

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

// Public declaration (reference only)
export interface NeuTableRowContext<T, K extends NeuTableKey> {
  readonly $implicit: T;
  readonly disabled: boolean;
  readonly expanded: boolean;
  readonly index: number;
  readonly key: K;
  readonly row: T;
  readonly selected: boolean;
}

NeuTableRowMoveTypeScript

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

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

// Public declaration (reference only)
export interface NeuTableRowMove<K extends NeuTableKey> {
  readonly beforeKey: K | null;
  readonly fromIndex: number;
  readonly key: K;
  readonly toIndex: number;
}

NeuTableRowOptionsTypeScript

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

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

// Public declaration (reference only)
export interface NeuTableRowOptions<T, K extends NeuTableKey> {
  readonly className?: (row: T) => string | readonly string[] | null;
  readonly isDisabled?: (row: T) => boolean;
  readonly pin?: (row: T, key: K) => 'start' | 'end' | null;
  readonly reorderable: boolean;
}

NeuTableSelectionTypeScript

import type { NeuTableKey } from '@neural-ui/core/table';
import type { NeuTableSelectionScope } from '@neural-ui/core/table';

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

// Public declaration (reference only)
export type NeuTableSelection<K extends NeuTableKey, F extends string> = {
    readonly kind: 'keys';
    readonly keys: readonly K[];
} | {
    readonly kind: 'all-matching';
    readonly scope: NeuTableSelectionScope<F>;
    readonly excludedKeys: readonly K[];
};

NeuTableSelectionChangeTypeScript

import type { NeuTableKey } from '@neural-ui/core/table';
import type { NeuTableSelection } from '@neural-ui/core/table';

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

// Public declaration (reference only)
export interface NeuTableSelectionChange<T, K extends NeuTableKey, F extends string> {
  readonly addedKeys: readonly K[];
  readonly loadedRows: readonly T[];
  readonly next: NeuTableSelection<K, F>;
  readonly removedKeys: readonly K[];
  readonly source: 'row' | 'radio' | 'checkbox' | 'keyboard' | 'toggle-all';
}

NeuTableSelectionOptionsTypeScript

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

// Public declaration (reference only)
export type NeuTableSelectionOptions<T> = {
    readonly mode: 'none';
} | {
    readonly mode: 'single';
    readonly indicator: 'none' | 'radio';
    readonly selectOnRowClick: boolean;
    readonly allowClear: boolean;
    readonly isRowDisabled?: (row: T) => boolean;
} | {
    readonly mode: 'multiple';
    readonly indicator: 'none' | 'checkbox';
    readonly selectOnRowClick: boolean;
    readonly modifier: 'replace' | 'platform' | 'toggle';
    readonly range: boolean;
    readonly toggleAllScope: 'rendered' | 'page' | 'loaded' | 'all-matching';
    readonly isRowDisabled?: (row: T) => boolean;
};

NeuTableSelectionScopeTypeScript

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

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

// Public declaration (reference only)
export interface NeuTableSelectionScope<F extends string> {
  readonly filters: NeuFilterExpression<F> | null;
  readonly globalFields: readonly F[];
  readonly search: string;
}

NeuTableSortColumnTypeScript

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

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

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

NeuTableSortOptionsTypeScript

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

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

// Public declaration (reference only)
export interface NeuTableSortOptions {
  readonly defaultDirection: NeuSortDirection;
  readonly mode: 'single' | 'multiple';
  readonly removable: boolean;
  readonly resetPageOnChange: boolean;
}

NeuTableStateTemplateContextTypeScript

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

// Public declaration (reference only)
export interface NeuTableStateTemplateContext {
  readonly error: unknown | null;
  readonly loading: boolean;
  readonly retry: () => void;
}

NeuTableValueAccessorTypeScript

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

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

NeuTableVirtualizationOptionsTypeScript

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

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

Appearance and tokens

Use appearance to choose density, borders, stripes, sticky headings and responsive layout. The configurator above demonstrates these options independently of column actions and keyboard navigation. Public CSS tokens let you customize surfaces, text, spacing and focus within a scope.

Specific tokens

Token	Purpose	State / variant	Default / source	Fallback
`--neu-table-cell-block`	Vertical cell padding at normal density.	density="normal"	`0.625rem`Root declaration	`No token alias`
`--neu-table-cell-block-compact`	Vertical cell padding at compact density.	density="compact"	`0.375rem`Root declaration	`No token alias`
`--neu-table-cell-block-relaxed`	Vertical cell padding at relaxed density.	density="relaxed"	`0.875rem`Root declaration	`No token alias`
`--neu-table-cell-inline`	Horizontal cell padding.	Table cells	`var(--neu-space-3)`Root declaration	`--neu-space-3`
`--neu-table-group-background`	Background of group heading rows.	Group heading	`color-mix(in srgb, currentColor 4%, transparent)`Root declaration	`No token alias`
`--neu-table-header-height`	Header cell height; wrapped content can require more room.	Column heading	`44px`Root declaration	`No token alias`
`--neu-table-max-height`	Maximum non-virtual viewport height; taller data scrolls inside it.	Non-virtual viewport	`480px`Root declaration	`No token alias`
`--neu-table-selected-background`	Selected-row background, taking precedence over stripes.	Selected row	`color-mix(in srgb, currentColor 9%, transparent)`Root declaration	`No token alias`
`--neu-table-space-sm`	Spacing in table controls and action groups.	Controls and actions	`var(--neu-space-2)`Root declaration	`--neu-space-2`
`--neu-table-space-xs`	Small gaps between adjacent table controls.	Controls and actions	`var(--neu-space-1)`Root declaration	`--neu-space-1`
`--neu-table-state-block`	Vertical padding of empty, loading and error content.	Empty / loading / error	`var(--neu-space-6)`Root declaration	`--neu-space-6`
`--neu-table-sticky-offset`	Top offset of the header when stickyHeader is enabled.	stickyHeader	`0px`Root declaration	`No token alias`
`--neu-table-stripe-background`	Alternating-row background when striped is enabled.	striped	`color-mix(in srgb, currentColor 4%, transparent)`Root declaration	`No token alias`
`--neu-table-virtual-block-size`	Height of the virtualized scroll 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-border-hover`	Control borders on hover	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.16)`
`--neu-focus-color`	Visible keyboard-focus outline	Shared by other Core consumers; scope the override.	`var(--neu-primary)`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-primary-soft`	Subtle selected or active surface	Shared by other Core consumers; scope the override.	`var(--neu-primary-50)`
`--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`

Related components

Use TreeTable for hierarchical rows and Tree for a hierarchy without table columns.