WTS Data Table
Playground

JavaScript data table with sorting and pagination

Focused, runnable examples with live options and framework-specific implementation code.

Start here

Complete portfolio table

A production-style view combining search, filters, selection, responsive details, pagination, and summaries.

Global and column filtersResponsive row detailsPagination and summary rows
Table options Search, layout, editing, and more
Live configuration

Change the options

These controls update the running table and the framework code below. Data-source contracts, callbacks, custom renderers, and lower-level APIs remain in the full reference.

Search and filtering
Interaction
Columns and layout
Paging and performance
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
Framework examples

Use this configuration

Table-only examples need no key. Card and Auto layouts require your own renewable card-view entitlement for your deployment origin. License setup →

Vanilla TS
import { DataTable } from 'wts-data-table';
import 'wts-data-table/styles.css';

const table = new DataTable<Project>({
  element: '#project-table',
  data: projects,
    columns,
    getRowId: (row: Project) => row.id,
    showGlobalFilter: true,
    columnFilters: { mode: 'collapsible' },
    showColumnManager: true,
    columnMenu: true,
    advancedFiltering: false,
    searchPanes: false,
    pagination: { mode: 'pages', showFirst: true, showLast: true, showPageJump: true },
    pageSizes: [5, 8, 14],
    initialState: { pagination: { pageSize: 8 }, sorting: [{ id: 'due', direction: 'asc' }] },
    selectionMode: 'multiple',
    bulkActions: true,
    cellSelection: false,
    editing: false,
    autoFill: false,
    responsive: { breakpoint: 760, details: 'inline' },
    showGrouping: false,
    rowExpansion: false,
    rowReordering: false,
    rowPinning: false,
    stickyHeader: true,
    virtualization: false,
    summaryRows: { label: 'Portfolio total', labelColumnId: 'name', columns: { budget: 'sum' }, scope: 'filtered' },
    stickyFooter: false,
});
await table.ready();
// On page or component teardown:
function destroy() { table.destroy(); }