rx-datatable API
    Preparing search index...

    Interface TableColors

    The stylesheet datatable.css contains all structural styling under stable, prefixed class names (.dtbl-*). Every color/spacing decision in it reads a CSS custom property (--dtbl-*) whose fallback value is the built-in default theme (lightTheme). A theme is a typed bundle of those custom properties, split into two halves that can be mixed and matched freely with an object spread:

    • TableColors: color scheme (backgrounds, borders, text and selection colors)
    • TableMetrics: everything else (cell/item padding, tree indent, resize cursor)
    • TableTheme is simply TableColors & TableMetrics, so any combination such as { ...darkColors, ...compactMetrics } is a complete theme.

    Applying a theme sets the variables on the component's outer element (never on :root), so tables with different themes can coexist on one page.

    Ways to apply a theme:

    • App-wide/subtree default: <TableConfig theme={darkTheme}>...</TableConfig>

    • Whole page, including portals and *Core components: applyTheme(darkTheme)

    • Per table: <DataTable theme={myTheme} .../> (overrides the TableConfig theme)

    • Stylesheet-based: pass a string; it is added as a class to the outer element, and your stylesheet defines the --dtbl-* variables under that class, e.g.

      .compact-blue { --dtbl-cell-padding: 2px 4px; --dtbl-selected-bg: #cde; }

    When using DataTableCore/TreeListCore/ListCore (which render no outer element), apply the theme to your own container: <table {...themeProps(myTheme)}>.

    interface TableColors {
        colorScheme?: string;
        headerBackground?: string;
        hoverSelectedBackground?: string;
        hoverUnselectedBackground?: string;
        parentSelectedBackground?: string;
        resizeCursor?: string;
        rowBackground?: string;
        rowBorder?: string;
        selectedBackground?: string;
        textColor?: string;
    }

    Hierarchy (View Summary)

    Index
    colorScheme? headerBackground? hoverSelectedBackground? hoverUnselectedBackground? parentSelectedBackground? resizeCursor? rowBackground? rowBorder? selectedBackground? textColor?
    colorScheme?: string

    Sets the CSS color-scheme property on the container (not a --dtbl-* variable). 'light dark' makes light-dark(...) color values (as used by the auto* presets) follow the browser's light/dark preference; 'light'/'dark' also render matching scrollbars inside the scrollable wrapper. Note: applyTheme targets <html> by default, where color-scheme: dark affects the whole page's form controls and default canvas — theme a subtree or table instead if that's unwanted.

    headerBackground?: string

    Background of the sticky header cells (--dtbl-header-bg; default: inherit, i.e. the row background, which the header row must repaint to cover scrolled data rows).

    hoverSelectedBackground?: string

    Background of hovered selected rows (--dtbl-hover-selected-bg).

    hoverUnselectedBackground?: string

    Background of hovered unselected rows (--dtbl-hover-unselected-bg).

    parentSelectedBackground?: string

    Background of rows whose (grand)parent row is selected, when the highlightChildrenOfSelectedParents item prop is enabled (--dtbl-parent-selected-bg).

    resizeCursor?: string

    CSS cursor shown over the column-resize drag handle (--dtbl-resize-cursor). Can be a url(...) x y, fallback value; defaults to defaultResizeCursor.

    rowBackground?: string

    Background of data rows and list items (--dtbl-row-bg).

    rowBorder?: string

    Bottom border of all cells, as a full CSS border value (--dtbl-row-border).

    selectedBackground?: string

    Background of selected rows/items (--dtbl-selected-bg).

    textColor?: string

    Text color of rows and items (--dtbl-text; default: inherit from the page).

    Settings
    Member Visibility

    On This Page
    Theming
    Properties