WTS Data Table
Playground

Responsive table-to-card view

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

Licensed layout

Card view

A licensed responsive card layout, enabled when the demo subscription is active for this origin. Explore projects as responsive cards. Switch between Table, Cards, and Auto without losing search, pagination, or row selection. Auto uses cards when the table container is 720px wide or smaller.

Table / Cards / AutoShared search and selectionResponsive card grid
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 { createDataTableCardView, type DataTableCardViewController } from 'wts-data-table/card-view';
import { connectDataTableLicense, type DataTableLicenseSession } from 'wts-data-table/license';

// Replace with your deployment key registered for this origin and card-view.
const deploymentKey = 'YOUR_DEPLOYMENT_KEY';
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: 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: '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: false,
    stickyFooter: false,
});

await table.ready();
// If verification fails, the standard table remains available.
const license = await connectDataTableLicense({ licenseKey: deploymentKey });
const cards = createDataTableCardView({
  license, origin: window.location.origin,
      table, mode: 'cards', breakpoint: 720, minCardWidth: '17rem',
      selection: true, showToggle: false
});

// Wire your Table / Cards / Auto buttons to cards.setMode(mode).
// This changes the layout without resetting table state.
// On expiry, disable card controls. After renewal: await license.refresh(),
// then recreate disposed cards. Save drafts in application-owned state.

// Call when the page or component is removed.
function destroy() {
  cards.destroy();
  license.destroy();
  table.destroy();
}