WTS Data Table
Playground

Editable data table with inline validation

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

Update in context

Inline editing

Double-click editable cells, validate changes, and connect commits to your own persistence layer.

Keyboard edit flowOptimistic commit hookDirty-cell tracking
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: false,
    columnFilters: false,
    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: 'none',
    bulkActions: false,
    cellSelection: true,
    editing: true,
    autoFill: false,
    responsive: { breakpoint: 760, details: 'inline' },
    showGrouping: false,
    rowExpansion: false,
    rowReordering: false,
    rowPinning: false,
    stickyHeader: true,
    virtualization: false,
    summaryRows: false,
    stickyFooter: false,
});
await table.ready();
// On page or component teardown:
function destroy() { table.destroy(); }