Included with a Premium subscription

Premium capabilities

Explore all 11 licensed capability groups. Each section identifies runtime controls, shows the product-facing result, and provides the package API used to build it.

11 capabilitiesOne package. Monthly or yearly access.

1 / 11 · Card view

Responsive cards, shared table state

Switch between Table, Cards, and Auto without resetting search, pagination, or selection. Card view uses a renewable subscription restricted to your deployment origin.

Runtime options

modebreakpointminCardWidthselectionrenderCardrenderField

TypeScript · framework-neutral API

import { connectDataTableLicense } from 'wts-data-table/license';
import { createDataTableCardView } from 'wts-data-table/card-view';

const license = await connectDataTableLicense({ licenseKey: deploymentKey });
const cards = createDataTableCardView({
  license, origin: window.location.origin,
  table, mode: 'auto', breakpoint: 720, minCardWidth: '17rem',
  selection: true
});
cards.setMode('cards');
// When the component unmounts:
cards.destroy();
license.destroy();

View

Card view · Licensed. Cards share the same search, page, and row selection. Use Table for column controls and inline editing. Auto switches at a container width of 720px.

0 selectedLatest event: Table ready

All options & framework code →

Live licensed card-view component · official demo key

2 / 11 · Worker processing

Worker-powered processing

Keep 100,000 or 1,000,000 rows in a dedicated module worker while the table receives bounded pages and the interface stays responsive.

Runtime options

blockSizemaxBlocksmaxCacheBytesmaxWindowRows

TypeScript · framework-neutral API

import { createWorkerProcessingClient } from 'wts-data-table/worker-client';
import { createBrowserWorkerTransport } from 'wts-data-table/worker-browser';
import { createWorkerTableController } from 'wts-data-table/worker-table';

const license = await connectDataTableLicense({ licenseKey: deploymentKey });
const client = createWorkerProcessingClient({
  license,
  createTransport: () => createBrowserWorkerTransport(
    new URL('./worker.js', import.meta.url), { license }
  )
});
await client.loadSnapshot(snapshot);
const bridge = createWorkerTableController({
  license, client, blockSize: 100, maxBlocks: 3,
  ...tableAdapter
});
await bridge.refresh();

Large WTS Data Table dataset processed through a dedicated worker — Worker processing · bounded table pages

3 / 11 · Advanced row model

Remote data viewport

Request only visible blocks from an application-owned source while retaining a bounded row window, selection state, and native table interaction.

Runtime options

blockSizemaxBlocksrowHeightmaxWindowRows

TypeScript · framework-neutral API

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

const model = createRemoteRowModel({
  license, source, blockSize: 50, maxBlocks: 3
});
const remote = createRemoteViewportController({
  license, model, rowHeight: 60, maxWindowRows: 1000,
  getState: () => table.getState(),
  subscribe: listener => table.core.subscribe(listener),
  setRowWindow: (window, options) => table.setRowWindow(window, options),
  getViewportRange: () => table.getViewportRange(),
  scrollToRow: index => table.scrollToRow(index)
});
await remote.refresh();

Bounded WTS Data Table viewport backed by a remote dataset — Remote viewport · application-owned source

4 / 11 · Spreadsheet formulas

Formula workbook and editor

Keep canonical formulas stable while the table is sorted, filtered, or reordered, with an explicit formula bar and atomic commits.

Runtime options

maxCellsmaxDependenciesmaxChangesmaxFormulaBytes

TypeScript · framework-neutral API

import { createFormulaWorkbook } from 'wts-data-table/formula-engine';
import { createFormulaTableBridge } from 'wts-data-table/formula-table';
import { createFormulaEditor } from 'wts-data-table/formula-editor';

const workbook = createFormulaWorkbook({
  license, rowIds, columnIds
});
const bridge = createFormulaTableBridge({
  license, workbook, table
});
const editor = createFormulaEditor({
  license, container: formulaHost, bridge
});

Formula editor connected to calculated WTS Data Table cells — Formula workbook · atomic editor commits

5 / 11 · Indexed search

Database-aware search

Compose authorization scope, indexed full-text or trigram search, typed filters, stable sorting, and bounded PostgreSQL pagination.

Runtime options

searchModescopemaxLimitmaxOffset

TypeScript · framework-neutral API

import { createPostgresSearchAdapter } from 'wts-data-table/search';

const search = createPostgresSearchAdapter({
  license, executor: executeAuthorizedSql, table: 'public.customers',
  primaryKey: 'id', columns: ['id', 'name', 'region'],
  searchMode: { type: 'full-text', vectorColumn: 'search_vector',
    configuration: 'pg_catalog.english' },
  scope: { column: 'tenant_id', value: authorizedTenantId },
  maxLimit: 100
});
const result = await search.search({
  query: 'enterprise renewal', offset: 0, limit: 50, count: 'exact'
});

Indexed customer search with scoped filters and PostgreSQL query diagnostics — Application search UI · indexed server adapter

6 / 11 · Background export

Durable export jobs

Stream authorized CSV exports through bounded workers, persist progress, recover interrupted jobs, and expose owner-scoped downloads.

Runtime options

concurrencymaxPendingpageSizemaxRows

TypeScript · framework-neutral API

import { createExportJobManager } from 'wts-data-table/export-jobs';

const exports = createExportJobManager({
  license,
  columns: [{ header: 'ID', value: row => row.id },
    { header: 'Name', value: row => row.name }],
  limits: { concurrency: 2, maxPending: 16, pageSize: 500 },
  loadPage: (query, cursor, limit, signal, job) =>
    database.readAuthorizedPage({ owner: job.owner, query, cursor, limit, signal }),
  createSink: job => storage.createCsvSink(job)
});
const job = exports.submit(authenticatedOwner, authorizedQuery);
const completed = await exports.wait(authenticatedOwner, job.id);

Background export job queue showing progress and completed downloads — Application job UI · durable export runtime

7 / 11 · Live data

Resumable live ingestion

Apply ordered real-time changes through bounded batches, detect sequence gaps, recover by replay or snapshot, and keep table updates atomic.

Runtime options

flushIntervalMsmaxReconnectsmaxBufferedBytesmaxBatchBytes

TypeScript · framework-neutral API

import { createLiveDataController } from 'wts-data-table/live-data';

const live = createLiveDataController({
  license, scopeId: authorizedScope,
  loadSnapshot: ({ scopeId, signal }) =>
    fetchAuthorizedSnapshot(scopeId, signal),
  createTransport: liveTransport, sink: atomicTableSink,
  limits: { flushIntervalMs: 50, maxReconnects: 5 }
});
await live.start();
await live.flush();

Live operations feed showing ordered sequence processing and replay health — Application stream UI · live controller

8 / 11 · Server analytics

Server-side pivot builder

Configure bounded sparse pivots, calculate authoritative totals on the server, and drill into permitted source rows without loading the full dataset.

Runtime options

maxGridCellsmaxDimensionsmaxMeasuresmaxDrillRows

TypeScript · framework-neutral API

import { createPivotController } from 'wts-data-table/pivot-controller';
import { createPivotBuilder } from 'wts-data-table/pivot-builder';

const controller = createPivotController({
  license, catalog, source,
  initialRequest: { rowDimensions: ['region'], columnDimensions: ['quarter'],
    values: [{ id: 'revenue', columnId: 'revenue', operation: 'sum' }] },
  limits: { maxGridCells: 8192, maxDrillRows: 100 }
});
const builder = createPivotBuilder({
  license, container: pivotHost, catalog, controller
});
await controller.refresh();

Server-side revenue pivot builder with dimensions measures and totals — Native pivot builder · authorized data source

9 / 11 · Collaborative editing

Authoritative multi-user editing

Synchronize canonical cell revisions, keep drafts separate from committed state, surface advisory presence, and reconcile conflicts explicitly.

Runtime options

rowIdscolumnIdsmaxRowsmaxCells

TypeScript · framework-neutral API

import { DataTable } from 'wts-data-table';
import { createCollaborationClient } from 'wts-data-table/collaboration-client';
import { createCollaborationTableBridge, projectCollaborationRows }
  from 'wts-data-table/collaboration-table';

const client = createCollaborationClient({ license, authority, source });
await client.start();
const projection = projectCollaborationRows({ license, client });
const table = new DataTable({ element: tableHost, data: projection.rows,
  columns: projection.columns, getRowId: row => row.id,
  cellSelection: true, editing: true });
const collaboration = createCollaborationTableBridge({ license, client, table });

Collaborative capacity table showing active editors and a selected cell — Native table projection · collaboration client

10 / 11 · Governed editing

Policy-backed review workflow

Submit immutable cell-change proposals, apply independent approval rules, retain an audit trail, and execute approved work with fencing tokens.

Runtime options

listStatuslistPageSizeauditPageSizemaxRenderedProposals

TypeScript · framework-neutral API

import { createGovernanceClient } from 'wts-data-table/governance-client';
import { createGovernancePanel } from 'wts-data-table/governance-panel';

const client = createGovernanceClient({
  license, authority: localDocumentScope, source: governanceSource,
  listStatus: 'pending', listPageSize: 50, auditPageSize: 100
});
await client.start();
const panel = createGovernancePanel({
  license, container: governanceHost, client
});

Governed editing panel showing a pending proposal and approval actions — Native governance panel · authoritative client

11 / 11 · Report designer

Server-driven report designer

Build versioned metric, chart, and table layouts over bounded authoritative results with linked filters and explicit persistence.

Runtime options

maxConcurrentmaxCacheEntriesmaxRenderedWidgetsmaxTablePageHistory

TypeScript · framework-neutral API

import { createReportController } from 'wts-data-table/report-controller';
import { createReportDesigner } from 'wts-data-table/report-designer';

const controller = createReportController({
  license, catalog, spec, source,
  limits: { maxConcurrent: 4, maxCacheEntries: 64 }
});
const designer = createReportDesigner({
  license, container: reportHost, catalog, controller,
  authoring: { persistSpec: saveVersionedReport }
});
await controller.refresh();

Executive report designer showing metrics chart filters and a data table — Native report designer · server-driven widgets

One package, explicit entitlement

These capabilities are included in wts-data-table under feature-named imports. Card-view licensing starts with version 1.1.0; published 1.0.x remains unchanged. Advanced factories require a verified renewable subscription. The controllers are framework-neutral, so Angular, React, Vue, and JavaScript applications use the same feature APIs and connect them to their own component lifecycle.

Pricing & licensing →