layout.title

layout.subtitle

@ng-orbit/table

Table

A headless table controller for Angular apps that want consumer-owned data fetching, selection, sorting intent, and markup.

Use the directive as the stable contract, then plug in a renderer or your own templates without moving business logic into the visual layer.

Install @ng-orbit/table

    pnpm add @ng-orbit/table @ng-orbit/table-render-plain
  

Import

    import { OrbitTableDirective, type OrbitTableQuery } from '@ng-orbit/table';
import { OrbitTableRenderPlainComponent } from '@ng-orbit/table-render-plain';
  
@ng-orbit/table-render-plain

Plain

Reference semantic renderer with zero design-system dependencies.

Use this renderer when you want a ready-to-read baseline or when your team plans to fork the markup without bringing in Material or DaisyUI.

  • Install @ng-orbit/table-render-plain next to @ng-orbit/table.
  • Keep data fetching in the parent and update inputs from orbitTableQueryChange.

docs.shared.livePreview

Rendered inside the docs host using the real controller contract.

Select
Loading...

Plain renderer integration

    <section
  orbitTable
  #table="orbitTable"
  [rows]="rows()"
  [columns]="columns"
  [total]="total()"
  [loading]="loading()"
  [error]="error()"
  [query]="query()"
  [getRowId]="getRowId"
  (orbitTableQueryChange)="onQueryChange($event)"
>
  <orbit-table-render-plain [table]="table" />
</section>