From install to
production table.

Install the package

The main package contains the typed core, complete DOM renderer, modular entry points, styles, export tools, persistence, server clients, and licensed advanced feature code.

npm install wts-data-table

Integrate your framework

The wrappers own host creation, reactive data updates, SSR safety, and teardown. They expose the same table options and controller rather than implementing another table engine.

import { Component } from '@angular/core';
import { WtsDataTableAngularComponent } from '@wts-data-table/angular';
import 'wts-data-table/styles.css';

@Component({
  standalone: true,
  imports: [WtsDataTableAngularComponent],
  template: `<wts-data-table-angular
    [data]="projects"
    [options]="options"
    (ready)="table = $event"
  />`
})
export class ProjectTableComponent {
  readonly projects = projects;
  readonly options = {
    columns,
    getRowId: (row: Project) => row.id,
    responsive: { breakpoint: 720, details: 'inline' }
  };
}

Lifecycle: Data updates rows in place. A new options object remounts the controller; ready exposes its instance.

Choose a renderer

Start with Complete. Move to Base when bundle composition matters, Lite for compact read-heavy grids, or Core when your framework must own all DOM.

import { DataTable } from 'wts-data-table/base';
import { selectionFeature } from 'wts-data-table/features/selection';
import { responsiveFeature } from 'wts-data-table/features/responsive';
import 'wts-data-table/base.css';

new DataTable({
  ...options,
  features: [selectionFeature(), responsiveFeature()]
});

Feature guide

These are the standard capabilities available to the controller and wrappers. Each item names the option, method, or package entry point to start with.

Build a production configuration

Use stable row IDs, typed columns, an accessible name, and only the interaction features your product needs. Wrapper components receive the same object without element or data.

const table = new DataTable<Project>({
  element: '#projects',
  ariaLabel: 'Project delivery',
  data: projects,
  getRowId: (row) => row.id,
  columns: [
    { accessor: 'name', header: 'Project', responsive: 'always' },
    { accessor: 'status', header: 'Status', filterVariant: 'select' },
    { accessor: 'budget', header: 'Budget', dataType: 'number', aggregation: 'sum' }
  ],
  initialState: {
    pagination: { pageSize: 25 },
    sorting: [{ id: 'name', direction: 'asc' }]
  },
  showGlobalFilter: true,
  columnFilters: { mode: 'collapsible' },
  columnMenu: true,
  selectionMode: 'multiple',
  bulkActions: true,
  responsive: { breakpoint: 720, details: 'inline' },
  pagination: { mode: 'pages', showPageJump: true },
  summaryRows: { label: 'Total', columns: { budget: 'sum' }, scope: 'filtered' },
  onStateChange: (state, reason) => saveView(state, reason)
});

Own state and lifecycle

getState() returns sorting, filters, paging, grouping, expansion, selection, and column layout. Mutator methods update one concern without reconstructing the table.

const state = table.getState();
const selected = table.getSelectedRows();

table.setGlobalFilter('platform');
table.setSorting([{ id: 'budget', direction: 'desc' }]);
table.setPageSize(50);
table.setData(nextProjects, totalRowCount);
table.applyTransaction({
  add: [newProject],
  update: [{ id: changed.id, data: changed }],
  remove: [deletedId]
});

await table.ready();
await table.destroyAsync();

Licensed advanced features

Advanced capabilities ship inside the same wts-data-table package under feature-named imports. There is no separate Pro package or /premium namespace. A signed entitlement unlocks purchased capabilities.

import { verifyDataTableLicense } from 'wts-data-table';
import { createRemoteRowModel } from 'wts-data-table/remote';

const license = await verifyDataTableLicense(entitlementToken);
const rows = createRemoteRowModel({
  license,
  origin: window.location.origin,
  ...options
});

Developer guides

Continue with site-native guides for complete workflows, edge cases, security boundaries, server protocols, and production decisions.