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-daisy

Daisy

A renderer for Tailwind + DaisyUI stacks that want class-based styling.

Use it when you already have DaisyUI in the host app and want to adopt ng-orbit without inventing table markup on day one.

  • Install Tailwind + DaisyUI in the consuming app.
  • The renderer remains presentation-only and expects the parent to own query changes.

docs.shared.livePreview

Rendered inside the docs host using the real controller contract.

Daisy renderer integration

    import { OrbitTableDirective } from '@ng-orbit/table';
import { OrbitTableRenderDaisyComponent } from '@ng-orbit/table-render-daisy';

@Component({
  standalone: true,
  imports: [OrbitTableDirective, OrbitTableRenderDaisyComponent],
  template: `
    <section
      orbitTable
      #table="orbitTable"
      [rows]="rows()"
      [columns]="columns"
      [total]="total()"
      [loading]="loading()"
      [error]="error()"
      [query]="query()"
      [getRowId]="getRowId"
      (orbitTableQueryChange)="onQueryChange($event)"
    >
      <orbit-table-render-daisy [table]="table" />
    </section>
  `
})
export class UsersDaisyTableComponent {}