GET STARTED

Import

Import NeuralTable and only the template directives used by the standalone consumer.

import { Component } from '@angular/core';
import { NeuralButton } from '@neural-ng/core/button';
import { NeuralCheckbox } from '@neural-ng/core/checkbox';
import { NeuralInput } from '@neural-ng/core/input';
import { NeuralInputNumber } from '@neural-ng/core/input-number';
import { NeuralPaginator } from '@neural-ng/core/paginator';
import { NeuralSelect } from '@neural-ng/core/select';
import {
  NeuralTable,
  NeuralTableCellDirective,
  NeuralTableEditorDirective,
  NeuralTableFilterDirective,
  NeuralTableExpansionDirective,
  NeuralTableFooterDirective,
  NeuralTableGroupFooterDirective,
  NeuralTableGroupHeaderDirective,
  NeuralTableHeaderDirective,
  NeuralTableHeaderGroupDirective,
  NeuralTableLoadingDirective,
  type NeuralTableColumn,
} from '@neural-ng/core/table';

@Component({
  imports: [
    NeuralButton,
    NeuralCheckbox,
    NeuralInput,
    NeuralInputNumber,
    NeuralPaginator,
    NeuralSelect,
    NeuralTable,
    NeuralTableCellDirective,
    NeuralTableEditorDirective,
    NeuralTableFilterDirective,
    NeuralTableExpansionDirective,
    NeuralTableFooterDirective,
    NeuralTableGroupFooterDirective,
    NeuralTableGroupHeaderDirective,
    NeuralTableHeaderDirective,
    NeuralTableHeaderGroupDirective,
    NeuralTableLoadingDirective,
  ],
})
export class InventoryPage {}

Basic table

A Table needs only a typed row collection and column model. It renders a native table, keeps the source array immutable and requires no module or wrapper markup.

Typed column model

Column definitions carry field access, alignment and formatting without hiding the row type from TypeScript.

interface Product {
  readonly id: number;
  readonly code: string;
  readonly name: string;
  readonly category: string;
  readonly price: number;
}

readonly columns: readonly NeuralTableColumn<Product>[] = [
  { id: 'code', header: 'Code', field: 'code' },
  { id: 'name', header: 'Product', field: 'name' },
  { id: 'category', header: 'Category', field: 'category' },
  {
    id: 'price',
    header: 'Price',
    field: 'price',
    align: 'end',
    formatter: (value) => `$${Number(value).toLocaleString('en-US')}`,
  },
];

Formatting and pipes

Cell templates accept Angular's built-in and standalone custom pipes. Formatting stays in the presentation layer, while Table continues to sort and filter the original price, date and inventory values.

import { CurrencyPipe, DatePipe, DecimalPipe } from '@angular/common';
import { Component, Pipe, type PipeTransform } from '@angular/core';
import { NeuralTable, NeuralTableCellDirective } from '@neural-ng/core/table';

@Pipe({ name: 'availabilityLabel', standalone: true })
export class AvailabilityLabelPipe implements PipeTransform {
  transform(value: Product['status']): string {
    if (value === 'In stock') return 'Available now';
    if (value === 'Low stock') return 'Limited availability';
    return 'Unavailable';
  }
}

@Component({
  imports: [
    NeuralTable,
    NeuralTableCellDirective,
    CurrencyPipe,
    DatePipe,
    DecimalPipe,
    AvailabilityLabelPipe,
  ],
})
export class InventoryPage {}

Type note: Angular cannot infer a property type from the runtime column id on a projected template. $any(row) is therefore limited to the binding boundary; the Table value and column definitions remain typed as Product.

Interactive inventory

The same client-side rows are globally filtered, filtered per column, sorted and expanded without mutating the input array.

Density and visual variants

Density controls spacing independently from striped rows, hover feedback and gridlines. Every combination still resolves through Table tokens.

Paginator integration

Table owns client slicing while NeuralPaginator owns navigation, its localized report and the NeuralSelect page-size control. Both components bind the same Signal models.

Advanced selection

Checkbox and radio controls, row clicks, Shift ranges, Ctrl/Meta toggles, disabled-row callbacks and page/filtered/all scopes share one key-safe model.

Expandable rows

Stable row keys control disclosure state. The typed expansion template receives the full row without replacing native table semantics or keyboard behavior.

Cell and row editing

Editable columns open typed drafts. Enter saves, Escape cancels and Tab validates before moving. Row mode shares one draft and supports asynchronous validation.

Scroll and column layout

Sticky edges, constrained scrolling, fit/expand resizing, visibility and pointer/keyboard reordering remain controlled models.

Grouped headers and summaries

Nested definitions resolve native colspan and rowspan from visible leaf columns. Header/footer templates can replace any resolved group.

Footer summaries

Typed footer templates receive the processed rows, so totals, averages, minimums and maximums stay aligned with the active filter and can remain frozen with the table footer.

Row grouping and aggregation

Subheader and rowspan modes accept nested paths or callbacks. Typed group contexts expose rows plus sum, average, minimum and maximum helpers.

Remote data and enterprise state

Remote mode never transforms supplied rows. Every request carries a monotonic requestId; state can be serialized to URL parameters or persisted through local, session or custom adapters.

// Browser storage: restores after hydration.
<neural-table
  #table
  stateKey="inventory-table"
  stateStorage="session"
  [value]="products"
  [columns]="columns"
/>

// URL/router integration remains application-owned and JSON-safe.
const queryValue = table.serializeState();
table.restoreState(queryValue);

// Replace browser storage when enterprise persistence is required.
readonly stateAdapter: NeuralTableStateAdapter = {
  load: (key) => this.preferences.load(key),
  save: (key, state) => this.preferences.save(key, state),
  remove: (key) => this.preferences.remove(key),
};

Loading, empty and error

Message or skeleton loading, empty results and errors preserve table geometry and each accepts a typed replacement template.

Unstyled and typed slots

Native table markup, state hooks and interaction remain while Tailwind owns every visible layer.

Beta boundaries

Table owns data presentation and interaction, not API transport or virtualization. Bind VirtualScroller for very large flat collections and keep remote fetching in application state.

Native semantics

Use caption or ariaLabel/ariaLabelledby for a name and ariaDescribedby for surrounding guidance. Grouped headers resolve valid colspan, rowspan and scope relationships.

Sorting and filtering

Sortable headers use real buttons and aria-sort. Filter controls receive column-specific labels and remain reachable in predictable document order.

Selection keyboard model

Selectable rows use roving tabindex. Arrow Up/Down and Home/End move focus; Space or Enter selects. Disabled rows are skipped by navigation and Shift ranges.

Editing keyboard model

Enter starts or saves, Escape cancels, and Tab commits before advancing to the next editable cell. Async validation retains focus and exposes its error.

Loading and live state

aria-busy communicates loading. Error and empty content remain inside correctly spanned table rows; resize and reorder announcements use localized labels.

SSR, hydration and cleanup

Storage is browser-guarded. Pending filter timers, pointer listeners, edit validation and persistence operations are cancelled or invalidated during destruction.

Inputs and models

Outputs

Typed templates

Public methods

Column contract

Typed class slots

Public types

Pure utilities

Legacy alias

TableComponent remains available for compatibility. New human and AI-generated code should import NeuralTable.

Surfaces and content

Interaction and state

Layout, shadow and editing