@wts-data-table/angular

Official standalone Angular 17–22 wrapper for wts-data-table.

Installation

npm install wts-data-table @wts-data-table/angular @angular/core @angular/common

import {
  WtsDataTableAngularComponent,
  WtsDataTableCellTemplateDirective,
  WtsDataTableFilterTemplateDirective,
  WtsDataTableHeaderTemplateDirective,
} from '@wts-data-table/angular';
import { standardPreset } from 'wts-data-table/presets';

@Component({
  imports: [
    WtsDataTableAngularComponent,
    WtsDataTableCellTemplateDirective,
    WtsDataTableFilterTemplateDirective,
    WtsDataTableHeaderTemplateDirective,
  ],
  template: `
    <wts-data-table-angular
      [data]="people()"
      [options]="tableOptions"
      [(state)]="tableState"
      (ready)="table = $event"
    >
      <ng-template wtsDataTableHeader="name"><strong>Person</strong></ng-template>
      <ng-template wtsDataTableCell="name" let-value>
        <app-person-link [name]="value" />
      </ng-template>
      <ng-template
        wtsDataTableFilter="name"
        let-value="value"
        let-setValue="setValue"
      >
        <app-name-filter [value]="value" (valueChange)="setValue($event)" />
      </ng-template>
    </wts-data-table-angular>
  `,
})
export class PeopleComponent {}

Set tableOptions.features = standardPreset<Person>(), or use focused imports from wts-data-table/features/*. The wrapper passes modules directly to the full renderer; no Angular provider or module registration is required.

Import wts-data-table/styles.css in the application stylesheet. Row input changes update the existing controller. Replacing options remounts it. The component is SSR-safe and creates DOM state only in the browser.

Template directives are available for Cell, Header, Filter, Menu, Detail, Empty, Loading, and Footer. Use "*" as a column template ID to provide a fallback for every column. Embedded views are attached to Angular change detection and destroyed automatically after a table redraw.

Modular base renderer

Use the standalone base component to omit unimported runtime behavior:

import { WtsDataTableAngularBaseComponent } from '@wts-data-table/angular';
import { selectionFeature } from 'wts-data-table/features/selection';

@Component({
  standalone: true,
  imports: [WtsDataTableAngularBaseComponent],
  template: `
    <wts-data-table-angular-base
      [data]="people()"
      [options]="baseOptions"
      (ready)="table = $event"
    />
  `,
})
export class PeopleBaseComponent {
  baseOptions = {
    columns: [{ accessor: 'name', header: 'Name' }],
    features: [selectionFeature({ mode: 'multiple' })],
    getRowId: (row: Person) => row.id,
  };
}

Import wts-data-table/base.css. The controller is DataTableBase<T> and the component supports reactive data/state/row-count/summary inputs plus the same SSR-safe lifecycle events. Angular template directives remain attached to the complete WtsDataTableAngularComponent renderer.