@odx/addon-ag-grid

The @odx/addon-ag-grid package ships an ODX-branded theme for AG Grid. It gives you a turn-key way to align data grids with the ODX Design System while keeping access to every AG Grid capability.

Features

• ODX visual language: Applies typography, spacing, color, and elevation tokens from the ODX Design System out of the box.
• Composable parts: Start from the base themeOdx and opt into button, checkbox, input, and tab refinements as needed.
• Icon bundle included: Ships with iconSetOdx, so grid controls pick up the full ODX iconography set without extra wiring.
• AG Grid ready: Works with ag-grid-community v34+ and respects the new Theme API for smooth integration.

Install

npm install @odx/addon-ag-grid --save

Requirements

• @odx/design-tokens (peer dependency for tokens)
• @odx/icons (peer dependency for icon glyphs)
• ag-grid-community v34 or newer

Usage

Import the theme and optional parts you want to enable. The base theme already registers the full icon bundle, so you only need to opt into extra controls when you are ready to style them.

import {
  buttonStyleOdx,
  checkboxStyleOdx,
  inputStyleOdx,
  tabStyleOdx,
  themeOdx,
} from '@odx/addon-ag-grid';
import type { GridOptions } from 'ag-grid-community';

const odxTheme = themeOdx
  .withPart(buttonStyleOdx)
  .withPart(checkboxStyleOdx)
  .withPart(inputStyleOdx)
  .withPart(tabStyleOdx);

export const gridOptions: GridOptions = {
  // your existing grid configuration
  columnDefs: [],
  rowData: [],
  theme: odxTheme,
};

Add or remove parts to match the AG Grid features you are using. Each part maps to an AG Grid Theme API feature, so you only pay the CSS cost for controls you adopt.

Theme Parts

• themeOdx - Registers the core ODX theme tokens, layout primitives, ODX typography, and density.
• iconSetOdx - Supplies the ODX icon bundle for grid controls out of the box.
• buttonStyleOdx - Gives grid buttons the ODX look, spacing, and interaction states.
• checkboxStyleOdx - Aligns selection checkboxes with ODX shapes and color tokens.
• inputStyleOdx - Matches filter and inline inputs to the ODX form pattern.
• tabStyleOdx - Styles grid tabs (in development for AG Grid Enterprise tab support).

Custom Parts

Extend the theme with your own part when you need bespoke styling:

import { createPart } from 'ag-grid-community';

const myCustomAddon = createPart({
  feature: 'myCustomAddon',
  css: `
    /* write styles inline or import from a CSS module */
  `,
});

const odxTheme = themeOdx
  .withPart(buttonStyleOdx)
  .withPart(checkboxStyleOdx)
  .withPart(inputStyleOdx)
  .withPart(tabStyleOdx)
  // last part
  .withPart(myCustomAddon);

Documentation

For advanced usage, customization strategies, and best practices, refer to our documentation.

Contact

For questions, feedback, or support, please reach out via our contact page.