See every behavior
in context.
Focused, runnable examples with live options and framework-specific implementation code.
Inline editing
Double-click editable cells, validate changes, and connect commits to your own persistence layer.
Keyboard edit flowOptimistic commit hookDirty-cell tracking
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.
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' }] },
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();
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();
}