Grid Theming

Graphite Grid provides minimal styles for core functionality. Easily override these to customize the Grid's appearance. Three main settings control theming:

1. Grid Theme: Applies to the entire grid.
2. Header Theme: Styles the grid header.
3. Cell Theme: Styles individual cells.

Each setting starts with a base theme. Variants can override the base theme. The themeKey property determines the active variant.

The base and variant themes combine to form the overall theme. Further, customize headers or cells using headerTheme or cellTheme on the Column Definition.

Base Theme

Override the default base theme to customize the Grid's look, e.g., for dark mode. Use these properties:

• baseGridTheme: Styles the entire grid.
• baseCellTheme: Styles cells.
• baseHeaderTheme: Styles the header.

These merge with the default theme to provide a custom appearance.

const grid = useGraphiteGrid({
  initial: {
    baseGridTheme: {
      rowBorderHorizontalColor: "transparent",
    },
    baseCellTheme: {
      align: "center",
      justify: "center",
    },
    baseHeaderCellTheme: {
      align: "center",
      justify: "center",
    },
    // Other grid properties
  },
});CopyCopied!

Update base themes dynamically using the API:

• setBaseGridTheme: Sets the base grid theme
• getBaseGridTheme: Returns the current base grid theme
• setBaseCellTheme: Sets the base cell theme
• getBaseCellTheme: Returns the current base cell theme
• setBaseHeaderCellTheme: Sets the base header cell theme
• getBaseHeaderCellTheme: Returns the current base header cell theme

Update base themes anytime, e.g., in response to user interactions.

Theme Variants

Theme variants allow different styles based on themeKey. Define initial variants using:

• gridThemeVariants
• cellThemeVariants
• headerCellThemeVariants

Manage variants dynamically via the API:

• addOrUpdateGridThemeVariant: Adds or updates a grid theme variant
• addOrUpdateCellThemeVariant: Adds or updates a cell theme variant
• addOrUpdateGridHeaderCellThemeVariant: Adds or updates a header cell variant

Graphite Grid includes a basic dark theme variant. The example demonstrates applying different variants. Clicking "Cycle Theme" updates the theme key.

// Import the dark theme provided by Graphite Grid
import {
  darkCellTheme,
  darkGridTheme,
  darkHeaderTheme,
  useGraphiteGrid,
  GraphiteGridDom,
} from "@1771technologies/graphite-grid-react";
 
// Define our theme cycle (for demo purposes)
const themes = [null, "dark", "highContrast"];
const themeLabels = ["Light", "Dark", "High Contrast"];
 
export function GridTheme() {
  const [themeIndex, setThemeIndex] = useState(0);
  const grid = useGraphiteGrid({
    initial: {
      gridThemeVariants: {
        dark: darkGridTheme,
        highContrast: {
          rowBorderHorizontalColor: "yellow",
          rowBorderVerticalColor: "yellow",
          headerBorderHorizontalColor: "yellow",
          headerBorderVerticalColor: "yellow",
        },
      },
      cellThemeVariants: {
        dark: darkCellTheme,
        highContrast: {
          color: "white",
          backgroundColor: "black",
          fontFamily: "monospace",
        },
      },
      headerCellThemeVariants: {
        dark: darkHeaderTheme,
        highContrast: {
          color: "white",
          backgroundColor: "black",
          fontFamily: "monospace",
        },
      },
      // Other grid properties
    },
  });
 
  return (
    <div>
      <Button
        onClick={() => {
          const nextIndex = (themeIndex + 1) % themes.length;
          grid.api.setThemeKey(themes[nextIndex]);
          setThemeIndex(nextIndex);
        }}
      >
        Cycle Theme: {themeLabels[themeIndex]}
      </Button>
      <div style={{ height: 200 }}>
        <GraphiteGridDom state={grid} />
      </div>
    </div>
  );
}CopyCopied!

Getting the Current Theme

Retrieve the current theme using the following:

• getCurrentGridTheme: Returns the current grid theme.
• getCurrentCellTheme: Returns the current cell theme.
• getCurrentHeaderCellTheme: Returns the current header theme.

These methods return the complete theme considering the base theme and any applied variants.

Keeping Grid Theme In Sync With Color Scheme

Keep the Grid theme in sync with light/dark modes or other color schemes using React hooks like useEffect with theme context:

const theme = useTheme();
 
const state = useGraphiteGrid({
  initial: {
    themeKey: theme,
    // other properties
  },
});
 
useEffect(() => {
  state.api.setThemeKey(theme ?? null);
}, [state.api, theme]);CopyCopied!

This updates the Grid theme whenever the page theme changes, providing a consistent experience across color modes.