← All developer guidesDeveloper guide

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
#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;
}