@rivinia/table

A headless Angular table controller with typed columns, spans, selection, and optional grid UI.

Package version: 1.0.4

import { Component } from '@angular/core';
import { createTable, tableColumn } from '@rivinia/table';
import { RvTable } from '@rivinia/table/ui';
@Component({ imports: [RvTable], template: '<rv-table aria-label="Invoices" [columns]="table.visibleColumns()" [rows]="table.pageRows()" />' })
export class InvoicesPage {
  readonly table = createTable<Invoice>(() => ({
    columns: () => [tableColumn<Invoice>().accessor('number', { header: 'Invoice' })],
    data: () => this.invoices(),
  }));
}

Why @rivinia/table

• The signal pipeline is headless and testable without rendering a grid.
• Typed columns, spans, paging, filters, sorting, and selection share one model.
• The optional grid renders the model and can be replaced with custom markup.

Install

npm install @rivinia/table

Quick start

1. Install the package and import createTable and tableColumn.
2. Create the controller in an Angular injection context.
3. Render <rv-table> with its columns and rows.

Two ways to use it

| Ready-made UI | Headless controller | | --- | --- | | @rivinia/table/ui | @rivinia/table |

The UI and controller are independent; use either or combine them.

Compatibility

| Angular | Node | Browser verification | | --- | --- | --- | | ^22.0.0 | ^22.22.3 or ^24.15.0 or >=26.0.0 | Chromium and Firefox; native Safari not verified |

Go further

| Topic | Read | | --- | --- | | Overview | Overview | | Install | Install | | Quick start | Quick start | | Columns | Columns | | Row and column spans | Row and column spans | | Selection | Selection | | Paging and state | Paging and state | | Ready-made UI | Ready-made UI | | Theming | Theming | | Accessibility | Accessibility | | Scope and limits | Scope and limits |