Styling

Pass theme tokens to TableProvider to style every table:

React

import { TableProvider, type TableCustomizationOptions } from '@inertiax/react-table';

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

<TableProvider customization={appCustomization}>{children}</TableProvider>;

Override individual values on one table:

React

<AppTable prop="users" customization={{ 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:

React

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

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

React

import '@inertiax/react-table/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

React

<AppTable
  prop="users"
  customization={{
    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

React

.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);
}

[data-inertiax-part='filter-editor'] {
  border-radius: 0.75rem;
}

Use data-inertiax-part for selectors. Generated utility classes, data-slot, and DOM depth are not stable styling APIs. Filter editors and the column picker render in portals outside the table root, so root-scoped selectors such as .audit-table do not reach them. Target their parts directly or use theme tokens, which also apply to portals. See Filter appearance for filter parts and per-table portal selectors.

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.