Material Renders | Table

@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.

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

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

@ng-orbit/table-render-material

Material

A ready-made Material-flavored renderer for teams already on Angular Material.

The renderer talks only to OrbitTableDirective. Your feature component still handles the backend contract, errors, and row updates.

Install Angular Material in the host app.
Keep the same controller wiring you use for any other renderer.

docs.shared.livePreview

Rendered inside the docs host using the real controller contract.

    import { OrbitTableDirective } from '@ng-orbit/table';
import { OrbitTableRenderMaterialComponent } from '@ng-orbit/table-render-material';

@Component({
  standalone: true,
  imports: [OrbitTableDirective, OrbitTableRenderMaterialComponent],
  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-material [table]="table" />
    </section>
  `
})
export class UsersMaterialTableComponent {}