WTS Data Table
Interactive gallery

See every behavior
in context.

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

Understand the data

Grouping and totals

Group rows by status and keep aggregate budget totals visible as the view changes.

Interactive group controlsExpandable groupsFiltered aggregate totals
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

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

Vanilla TS
import { DataTable } from 'wts-data-table';
import { createDataTableCardView } from 'wts-data-table/card-view';
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' }], grouping: ['status'] },
    selectionMode: 'none',
    bulkActions: false,
    cellSelection: false,
    editing: false,
    autoFill: false,
    responsive: { breakpoint: 760, details: 'inline' },
    showGrouping: true,
    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();
const cards = createDataTableCardView({
  table, mode: 'table', breakpoint: 720, minCardWidth: '17rem',
      selection: false, showToggle: false
});

// Wire your Table / Cards / Auto buttons to cards.setMode(mode).
// This changes the layout without resetting table state.

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