# Styling

> Change table colors, spacing, and CSS without replacing its controls.

Source: https://docs.inertiax.dev/table/guide/styling/

Pass theme tokens to `TableProvider` to style every table:

**React**

```tsx
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**

```tsx
<AppTable prop="users" customization={{ theme: { tokens: { primary: '#1d4ed8' } } }} />
```

Settings resolve built-in → provider → component. Unspecified token values are inherited. The [React customization API](https://docs.inertiax.dev/table/reference/react/) lists every token and class target.

## Choose the stylesheet

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

**React**

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

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

**React**

```ts
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**

```tsx
<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**

```css
.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](https://docs.inertiax.dev/table/reference/react/#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](https://docs.inertiax.dev/table/guide/text/), [Custom columns](https://docs.inertiax.dev/table/guide/custom-columns/), or [Custom renderers](https://docs.inertiax.dev/table/guide/custom-renderers/).