AG-Grid React Series #53: Context API Integration with AG-Grid

AG-Grid is an exceptionally powerful data grid for React applications, offering unparalleled flexibility and performance for displaying and managing complex tabular data. As applications grow, so does the need for efficient state management, especially when different parts of your component tree require access to shared data or functions without tedious prop drilling. This is precisely where React's Context API shines, providing a elegant solution for global state management.

In this installment of our AG-Grid React series, we'll dive deep into integrating the React Context API with AG-Grid. You'll learn how to leverage Context to manage grid-related configurations, themes, or even grid API access, making your AG-Grid implementations more modular, maintainable, and reactive.

Why Integrate Context API with AG-Grid?

While prop drilling works for simpler cases, larger applications benefit immensely from a centralized state management solution. Here's why integrating Context API with AG-Grid is a game-changer:

• Global Configuration Management: Easily manage grid-wide settings such as themes, locales, default column definitions, or data sources from a central location, accessible by any component in the tree.
• Cross-Component Communication: Enable components that are not direct children or parents of the AG-Grid instance (e.g., a toolbar, a settings panel in a sidebar) to interact with the grid. This could involve applying filters, changing columns, or triggering data refreshes.
• Avoiding Prop Drilling: Pass down vital application-level state or functions to custom cell renderers, custom header components, or other deeply nested AG-Grid components without passing props through every intermediate component.
• Dynamic UI Updates: Effortlessly change the grid's behavior or appearance based on user preferences or global application state stored within the Context.

Understanding the Core Tools

Before we jump into the integration, let's quickly recap the fundamental concepts we'll be using:

• AG-Grid in React: We'll be working with the <AgGridReact /> component, which allows us to configure the grid using props and access its powerful gridApi and columnApi via the onGridReady callback.
• React Context API: This API consists of three main parts:
  • React.createContext(): Creates a Context object.
  • Context.Provider: A React component that allows consuming components to subscribe to context changes. It accepts a value prop to be passed to its descendants.
  • useContext(Context): A React Hook that lets you read context and subscribe to its changes within a functional component.

Step-by-Step Integration Guide: Dynamic Theme Switching with Context

Let's illustrate the integration with a practical example: allowing users to dynamically switch the AG-Grid theme from an external component using the Context API.

1. Setting Up the Context

First, we'll create our React Context. This context will hold the current theme and a function to update it.

Create a file named src/contexts/ThemeContext.js:

import React, { createContext, useContext, useState } from 'react';

// Create the Context
export const ThemeContext = createContext();

// Create a custom hook for easier consumption
export const useTheme = () => useContext(ThemeContext);

// Create a Provider component
export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('ag-theme-alpine'); // Default theme

  const toggleTheme = (newTheme) => {
    setTheme(newTheme);
  };

  const contextValue = {
    theme,
    toggleTheme,
  };

  return (
    <ThemeContext.Provider value={contextValue}>
      {children}
    </ThemeContext.Provider>
  );
};

2. Integrating with the AG-Grid Component

Now, we'll wrap our main application component (or specifically, the component containing <AgGridReact />) with our ThemeProvider. Then, we'll consume the theme from the context and pass it as a prop to AG-Grid.

In your src/App.js (or a similar parent component):

import React, { useState, useMemo, useRef, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css'; // Core grid CSS
import 'ag-grid-community/styles/ag-theme-alpine.css'; // Alpine theme
import 'ag-grid-community/styles/ag-theme-alpine-dark.css'; // Alpine Dark theme
import 'ag-grid-community/styles/ag-theme-quartz.css'; // Quartz theme
import 'ag-grid-community/styles/ag-theme-quartz-dark.css'; // Quartz Dark theme

import { ThemeProvider, useTheme } from './contexts/ThemeContext';
import ThemeSwitcher from './components/ThemeSwitcher';

const GridComponent = () => {
  const gridRef = useRef();
  const { theme } = useTheme(); // Consume the theme from context

  const [rowData] = useState([
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 },
  ]);

  const [columnDefs] = useState([
    { field: 'make' },
    { field: 'model' },
    { field: 'price' },
  ]);

  const defaultColDef = useMemo(() => ({
    flex: 1,
    minWidth: 100,
    resizable: true,
  }), []);

  const onGridReady = useCallback((params) => {
    console.log('AG-Grid is ready:', params.api);
  }, []);

  return (
    <div style={{ height: 300, width: 600 }} className={theme}> {/* Apply theme class here */}
      <AgGridReact
        ref={gridRef}
        rowData={rowData}
        columnDefs={columnDefs}
        defaultColDef={defaultColDef}
        onGridReady={onGridReady}
        animateRows={true}
      />
    </div>
  );
};

const App = () => {
  return (
    <ThemeProvider>
      <div style={{ padding: '20px' }}>
        <h1>AG-Grid with React Context for Theme Switching</h1>
        <ThemeSwitcher />
        <GridComponent />
      </div>
    </ThemeProvider>>
  );
};

export default App;

Notice how GridComponent uses the useTheme() hook to get the current theme and applies it as a CSS class to the container <div> that wraps <AgGridReact />. AG-Grid themes are applied by adding the appropriate CSS class (e.g., ag-theme-alpine) to the grid's parent container.

3. Implementing a Theme Switcher (External Component)

Now, let's create a separate component that will allow users to change the theme. This component doesn't need to be a direct child of the grid; it just needs to be rendered somewhere within the ThemeProvider.

Create a file named src/components/ThemeSwitcher.js:

import React from 'react';
import { useTheme } from '../contexts/ThemeContext';

const ThemeSwitcher = () => {
  const { toggleTheme } = useTheme();

  return (
    <div style={{ marginBottom: '20px' }}>
      <strong>Select Theme:</strong>
      <button onClick={() => toggleTheme('ag-theme-alpine')} style={{ marginLeft: '10px' }}>
        Alpine
      </button>
      <button onClick={() => toggleTheme('ag-theme-alpine-dark')} style={{ marginLeft: '5px' }}>
        Alpine Dark
      </button>
      <button onClick={() => toggleTheme('ag-theme-quartz')} style={{ marginLeft: '5px' }}>
        Quartz
      </button>
      <button onClick={() => toggleTheme('ag-theme-quartz-dark')} style={{ marginLeft: '5px' }}>
        Quartz Dark
      </button>
    </div>
  );
};

export default ThemeSwitcher;

The ThemeSwitcher component simply uses our useTheme() hook to access the toggleTheme function and updates the theme in the context. Since GridComponent is also consuming the same context, it automatically re-renders with the new theme class, effectively changing the grid's appearance.

Advanced Scenarios and Best Practices

Accessing Grid API via Context

You might need to access AG-Grid's gridApi or columnApi from components external to the grid itself (e.g., an export button in a global toolbar). You can store these APIs in your context as well.

// In your GridContext.js (or similar)
import React, { createContext, useContext, useState, useRef } from 'react';

export const GridContext = createContext();

export const useGridApi = () => useContext(GridContext);

export const GridApiProvider = ({ children }) => {
  const [gridApi, setGridApi] = useState(null);
  const [columnApi, setColumnApi] = useState(null);

  const contextValue = {
    gridApi,
    columnApi,
    setGridApi,
    setColumnApi,
  };

  return (
    <GridContext.Provider value={contextValue}>
      {children}
    </GridContext.Provider>
  );
};

// In your GridComponent.js
import { AgGridReact } from 'ag-grid-react';
import { useGridApi } from './contexts/GridContext';

const GridComponent = () => {
  const { setGridApi, setColumnApi } = useGridApi();

  const onGridReady = useCallback((params) => {
    setGridApi(params.api);
    setColumnApi(params.columnApi);
  }, [setGridApi, setColumnApi]);

  return (
    <AgGridReact
      onGridReady={onGridReady}
      // ... other props
    />
  );
};

// In an external component (e.g., Toolbar.js)
import { useGridApi } from './contexts/GridContext';

const Toolbar = () => {
  const { gridApi } = useGridApi();

  const exportCsv = () => {
    if (gridApi) {
      gridApi.exportDataAsCsv();
    }
  };

  return (
    <button onClick={exportCsv}>Export CSV</button>
  );
};

Context for Custom Components (Cell Renderers, Headers)

When creating custom cell renderers or header components, you often need to pass data or functions that originate higher up in your component tree. Context API eliminates the need to pass these through the grid's frameworkComponents prop (which can get messy with complex objects) or as part of colDef.cellRendererParams if the data is global.

// In your GridContext.js
export const AppSettingsContext = createContext();
export const useAppContext = () => useContext(AppSettingsContext);

// In your App.js (or parent)
<AppSettingsProvider value={{ currentUser: 'John Doe', canEdit: true }}>
  <GridComponent />
</AppSettingsProvider>

// In a custom Cell Renderer (e.g., EditButtonRenderer.js)
import React from 'react';
import { useAppContext } from '../contexts/AppSettingsContext';

const EditButtonRenderer = (props) => {
  const { canEdit } = useAppContext();

  const handleEdit = () => {
    alert(`Editing row ID: ${props.node.id}`);
    // Use gridApi if available, or call a function from context
  };

  if (!canEdit) {
    return <span>No access</span>;
  }

  return (
    <button onClick={handleEdit}>Edit</button>
  );
};
export default EditButtonRenderer;

// In your GridComponent's columnDefs
const [columnDefs] = useState([
  // ... other columns
  {
    field: 'actions',
    headerName: 'Actions',
    cellRenderer: 'editButtonRenderer', // Register this component with AG-Grid
  },
]);

// ... in GridComponent, register frameworkComponents
const components = useMemo(() => ({
  editButtonRenderer: EditButtonRenderer,
}), []);

<AgGridReact
  // ...
  frameworkComponents={components}
/>

Performance Considerations

A critical aspect of using Context API is understanding its re-rendering behavior. When the value prop of a Context.Provider changes, all consuming components (that use useContext) will re-render, even if they only use a small part of the context value.

• Split Contexts: For large, unrelated state, consider creating multiple, smaller contexts instead of one giant context. For example, a ThemeContext and a separate GridApiContext.
• Memoization: Use React.memo for functional components, and useMemo/useCallback for values and functions passed into the context provider's value prop to prevent unnecessary re-creations of the context object on every parent render.

  
  // In ThemeContext.js example:
  // The contextValue is already memoized implicitly by useState and its setter function.
  // If you had derived values or functions, use useMemo/useCallback:
  
  const contextValue = useMemo(() => ({
    theme,
    toggleTheme,
  }), [theme, toggleTheme]); // toggleTheme is stable as it's a setter, but if it were custom, useCallback would be needed
          

When to use Context vs. Other State Managers

React Context API is excellent for "prop drilling" avoidance and managing medium-complexity global state. For very complex applications with intricate state logic, side effects, and async operations, dedicated state management libraries like Redux, Zustand, or Recoil might offer more robust patterns and tooling. However, for many AG-Grid specific global concerns (like theme, locale, or direct grid API access), Context API is often sufficient and simpler to implement.

Conclusion

Integrating React's Context API with AG-Grid provides a powerful and flexible way to manage global state and interactions within your data grid applications. By centralizing configurations, enabling cross-component communication, and eliminating prop drilling, you can build more modular, readable, and maintainable AG-Grid solutions. Experiment with different contexts for various grid-related concerns, and you'll quickly discover the enhanced developer experience it brings to complex data grid implementations.