Styling

Pass theme tokens to InertiaXProvider to style every table:

import { InertiaXProvider, type TableCustomizationOptions } from '@inertiax/react';

const tableTheme = {
  theme: {
    tokens: {
      primary: '#166534',
      ring: '#16a34a',
      controlRadius: '0.4rem',
      tableRadius: '0.85rem',
      cellPaddingY: '0.7rem',
    },
  },
} satisfies TableCustomizationOptions;

<InertiaXProvider table={tableTheme}>{children}</InertiaXProvider>;

Override individual values on one table:

<InertiaX prop="users" table={{ theme: { tokens: { primary: '#1d4ed8' } } }} />

Settings resolve built-in → provider → component. Unspecified token values are inherited. The React customization API lists every token and class target.

Choose the stylesheet

The complete stylesheet is compiled and scoped, with no Tailwind setup required:

import '@inertiax/react/styles.css';

If your design system supplies all visual styling, import the functional foundation instead:

import '@inertiax/react/base.css';

base.css retains accessibility helpers, focus visibility, overflow, portal safety, and reduced-motion behavior. Your application styles the visible controls and states. Do not import both: styles.css already includes the base layer.

Add CSS classes

<InertiaX
  prop="users"
  table={{
    theme: {
      classNames: {
        root: 'audit-table',
        tableWrapper: { add: 'my-table-frame' },
      },
    },
  }}
/>

A string appends classes. The object form supports add, remove, and replace. Replacing a complete class value also takes responsibility for that region’s layout.

Target a table part

.audit-table [data-inertiax-part='table-header-cell'] {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.audit-table [data-inertiax-part='table-row'][data-state='selected'] {
  background: color-mix(in oklab, var(--inx-table-primary) 12%, transparent);
}

Use data-inertiax-part for selectors. Generated utility classes, data-slot, and DOM depth are not stable styling APIs. The columns-popover is portaled outside the root; target its part directly or use the tokens propagated to it.

Share a theme

Export compiled CSS and a TableCustomizationOptions object from your design-system package. Import base.css and your CSS once, then pass the preset to the provider.

For content changes, see Text & translation, Custom columns, or Custom renderers.