# AG Grid

A pre-configured [AG Grid](https://www.ag-grid.com/) theme that matches the Gaia design system.

## Installation

Install `ag-grid-community` in the consuming app — it is not bundled or declared as a peer dependency.

```sh
pnpm add ag-grid-community ag-grid-react
```

## Usage

The Gaia design-tokens stylesheet must be loaded once so the `--ga-*` variables are defined at runtime. Then import `gaiaTheme` and pass it to the grid via the `theme` prop.

```tsx

export function MyGrid() {
  return <AgGridReact theme={gaiaTheme} rowData={rows} columnDefs={columns} />;
}
```

No AG Grid CSS imports are needed — the Theming API injects styles at runtime.

## Customization

`gaiaTheme` is a standard AG Grid theme object and composes with `withParams` / `withPart` like any other. Prefer `var(--ga-*)` references over literal values.

```ts

export const myGridTheme = gaiaTheme.withParams({
  rowHeight: 'var(--ga-size-48)',
  headerBackgroundColor: 'var(--ga-color-neutral-20)',
});
```