See every behavior
in context.
Focused, runnable examples with live options and framework-specific implementation code.
Card view
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
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: 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();
const cards = createDataTableCardView({
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.
// Call when the page or component is removed.
function destroy() {
cards.destroy();
table.destroy();
}