Themes and customization
Theme adapters map WTS structure to an existing design system without loading framework CSS or adding runtime dependencies.
Automatic and named themes
#Use theme: auto to detect supported framework CSS already present, or select bootstrap5, bulma, foundation, fomantic, jquery-ui, or tailwind explicitly.
Product design tokens
#The stylesheet exposes 87 supported --wts-table-* custom properties for color, type, spacing, controls, menus, pinned areas, groups, details, scrollbars, and layering.
Custom adapters
#Use defineDataTableTheme when class mapping is more appropriate than token overrides. Keep application CSS responsible for the actual framework styles.
Override only product tokens
#This recipe focuses on the integration pattern. Replace application-specific values and callbacks with your own data and services.
#people-table {
--wts-table-accent: #7c3aed;
--wts-table-background: #fff;
--wts-table-border: #e5e7eb;
--wts-table-row-height: 3rem;
--wts-table-cell-padding-inline: .75rem;
--wts-table-radius: 1rem;
}The framework quick start includes install commands, a typed data file, and the component that renders it.
Go to the quick start →Ready to try it with real data?
Explore configurable examples ↗