DataTable theming

The values listed below are exposed as --rozie-data-table-* custom properties, each with a built-in fallback, so DataTable works with zero configuration and re-skins by remapping tokens. The structural rules compile per-leaf and are not consumer-overridable.

Scope, stated plainly: remapping the public tokens re-skins the table's primary surfaces — type, borders, background, header, row, cell padding, accent, and the max-height. It does NOT reach every cosmetic value. 58 of the 82 internal tokens have no public counterpart today, including the grid active-cell ring, the range highlight, the fill handle, the invalid-cell outline, the group tokens, the filter row, the per-header column ⋯ menu (its panel is a composed @rozie-ui/popover, so its background, border and shadow follow --rozie-popover-bg, --rozie-popover-border and --rozie-popover-shadow, set at the same ancestor), most of the pagination bar (only --rozie-data-table-control-border-color, --rozie-data-table-radius, and --rozie-data-table-disabled-opacity are public — its background, padding, and status-text size are not), and the chrome column widths. Those remain internal and may be renamed; a design system that needs them should set the --rdt-* name directly and accept that it is not yet a stable API. Those two counts are <DataTable>'s own; the sibling <GroupBar> reads 9 further internal tokens (--rdt-group-drop-zone-*, --rdt-group-drop-marker, --rdt-focus-ring), none of them public and all of them likewise inline-defaulted. One Lit-specific rule: set the public tokens at or ABOVE the <rozie-data-table> element (:root, a wrapper, or the element itself), never on the .rozie-data-table / .rozie-data-table-wrap classes — on that target both of those render inside the component's shadow root, where a document stylesheet cannot reach them. The tokens themselves inherit across the boundary, and the component carries the mapping internally, so every one of the 18 works there.

:root {
  --rozie-data-table-fg: currentColor;
  --rozie-data-table-font: 14px system-ui, sans-serif;
  --rozie-data-table-header-bg: #f7f7f7;
  --rozie-data-table-sort-indicator-opacity: 0.7;
}

Tokens

palette (the few values most consumers will set)

currentColor for color is the inherited text colour: the table takes its container's colour unless the token is set. The accent is read through the two tokens that default to it — the selection checkboxes (next line) and the resize grip while dragging — so it follows an accent set on any ancestor.

Token	Default
--rozie-data-table-fg	currentColor
--rozie-data-table-select-accent	var(--rozie-data-table-accent, #0066cc)
--rozie-data-table-accent	#0066cc
--rozie-data-table-border-color	rgba(0, 0, 0, 0.08)
--rozie-data-table-control-border-color	rgba(0, 0, 0, 0.2)
--rozie-data-table-radius	4px

typography / cell metrics

Token	Default
--rozie-data-table-font	14px system-ui, sans-serif
--rozie-data-table-cell-padding	0.5rem 0.75rem

header

OPAQUE (was rgba(0,0,0,0.03)): a translucent header lets the scrolling body bleed through in sticky mode. #f7f7f7 ≈ the old 3%-black tint over white, but solid — matching the opaque header backgrounds the design-system themes already ship.

Token	Default
--rozie-data-table-header-bg	#f7f7f7
--rozie-data-table-header-weight	600

sort indicator

Token	Default
--rozie-data-table-sort-indicator-opacity	0.7

The grip while dragging defaults to the accent, resolved at the table.

Token	Default
--rozie-data-table-resize-grip-color	rgba(0, 0, 0, 0.12)
--rozie-data-table-resize-grip-active	var(--rozie-data-table-accent, #0066cc)

pin controls

Token	Default
--rozie-data-table-pin-active-bg	rgba(0, 0, 0, 0.1)

column-visibility menu

Token	Default
--rozie-data-table-menu-bg	#fff
--rozie-data-table-menu-shadow	0 2px 8px rgba(0, 0, 0, 0.12)

disabled pagination controls

Token	Default
--rozie-data-table-disabled-opacity	0.4

virtual scroll (row windowing)

Read with NO fallback at its one use site (max-height: var(--rozie-data-table-max-height); on .rdt-scroll) — when unset the property is invalid at computed-value time and the rule behaves as if max-height were never declared there, i.e. none (unbounded). No bridge maps it, so its default is declared, at zero specificity on the document root: none is the render-neutral equivalent of that unset behavior, made explicit and overridable.

Token	Default
--rozie-data-table-max-height	none

Design-system bridges

Each package ships token presets that map DataTable's tokens onto a known design system's published CSS variables — import base.css first, then a bridge:

import '@rozie-ui/data-table-react/themes/base.css';
import '@rozie-ui/data-table-react/themes/bootstrap.css';
import '@rozie-ui/data-table-react/themes/material.css';
import '@rozie-ui/data-table-react/themes/shadcn.css';

See also

• DataTable — showcase & API — the full prop / event / slot / handle reference.
• DataTable — API reference — every prop, event, slot, and handle verb.
• DataTable — usage examples — idiomatic per-framework consumption code.
• DataTable comparison — how it stacks up against the per-framework libraries.
• DataTable — live demo — the real package running in the page.