Framework wrappers

Install the wrapper beside wts-data-table. Framework runtimes stay peer dependencies, so React, Vue, and Angular are never bundled into the core package.

• Angular 17–22: standalone component, ready/destroyed outputs, two-way state, and template directives.
• React 18/19: forwarded controller ref, controlled state, and native render functions.
• Vue 3: v-model state, scoped slots, a typed factory, and a composable.

Replacing data updates rows in place and preserves view state. Replacing the options object intentionally reconstructs configuration. Memoize options in React and keep a stable reference in Angular and Vue unless remounting is intended.

Cells, headers, filters, menus, details, empty/loading states, and footers can use framework-owned views. Wrappers reclaim those views on redraw and destroy the controller on unmount.

This recipe focuses on the integration pattern. Replace application-specific values and callbacks with your own data and services.

@Component({
  imports: [WtsDataTableAngularComponent],
  template: `<wts-data-table-angular
    [data]="people()"
    [options]="options"
    [(state)]="state"
    (ready)="table = $event"
  />`
})
export class PeopleTable {}