AG-Grid-React-Series-#55-AG-Grid-with-TypeScript-in-React

Why TypeScript for AG-Grid in React?

AG-Grid is a powerful, feature-rich data grid that has become a go-to solution for displaying complex datasets in web applications. When combined with React, it offers an incredibly flexible and performant experience. However, the sheer breadth of AG-Grid's API and configuration options can sometimes be a double-edged sword, especially in larger applications where maintaining consistency and preventing runtime errors is crucial.

This is where TypeScript shines. Integrating AG-Grid with TypeScript in your React projects brings a host of benefits that transform development from a guesswork game to a highly predictable and enjoyable experience. Here’s why it’s a game-changer:

• Strong Typing for Data: Ensure your row data adheres to a strict structure, preventing mismatches between your data model and what AG-Grid expects.
• Enhanced Developer Experience: Benefit from intelligent autocompletion, parameter hints, and immediate feedback on type errors directly in your IDE, significantly speeding up development and reducing cognitive load.
• Compile-Time Error Checking: Catch potential issues like misspelled properties or incorrect API usage before your code even runs in the browser, leading to more robust and stable applications.
• Improved Maintainability: Clear type definitions act as living documentation, making your codebase easier to understand, refactor, and maintain by individuals and teams.

Getting Started: Project Setup

Before we dive into the type-safe world of AG-Grid, let's ensure you have a standard React TypeScript project set up and the necessary AG-Grid dependencies installed.

1. Create a React TypeScript Project

If you don't already have one, you can quickly spin up a new project using Create React App or Vite:

# Using Create React App
npx create-react-app my-ag-grid-ts-app --template typescript
cd my-ag-grid-ts-app

# Or using Vite (recommended for faster development)
npm create vite@latest my-ag-grid-ts-app -- --template react-ts
cd my-ag-grid-ts-app
npm install

2. Install AG-Grid Dependencies

Next, install the core AG-Grid library and its React wrapper component:

npm install ag-grid-community ag-grid-react
# or
yarn add ag-grid-community ag-grid-react

Building a Basic Type-Safe AG-Grid

Let's create a simple AG-Grid that displays car data, ensuring every piece of data and configuration is strictly typed.

1. Define Your Row Data Interface

The first step towards type safety is defining the structure of your data. Create an interface that represents a single row in your grid.

// src/types/Car.ts
export interface Car {
  make: string;
  model: string;
  price: number;
  year: number; // Added for more examples
}

2. Implement the Grid Component

Now, let's create our main application component (`App.tsx`) and integrate AG-Grid, leveraging our new `Car` interface.

// src/App.tsx
import React, { useState, useMemo, useRef, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react'; // The AG Grid React Component
import { ColDef, GridReadyEvent, GridApi } from 'ag-grid-community'; // Core AG Grid types
import 'ag-grid-community/styles/ag-grid.css'; // Core grid CSS
import 'ag-grid-community/styles/ag-theme-quartz.css'; // A theme

import { Car } from './types/Car'; // Import our Car interface

function App() {
  // Use useRef to get a reference to the AG-Grid API, typed with Car
  const gridRef = useRef<AgGridReact<Car>>(null);

  // Define row data with explicit type Car[]
  const [rowData] = useState<Car[]>([
    { make: "Tesla", model: "Model Y", price: 64950, year: 2023 },
    { make: "Ford", model: "F-Series", price: 33850, year: 2022 },
    { make: "Toyota", model: "Corolla", price: 29600, year: 2024 },
    { make: "Honda", model: "CR-V", price: 30000, year: 2023 },
  ]);

  // Define column definitions with explicit type ColDef<Car>[]
  // This ensures 'field' properties correspond to keys in the Car interface
  const [colDefs] = useState<ColDef<Car>[]>([
    { field: 'make', sortable: true, filter: true },
    { field: 'model', sortable: true, filter: true },
    { field: 'price', sortable: true, filter: 'agNumberColumnFilter' },
    { field: 'year', sortable: true, filter: 'agNumberColumnFilter' },
  ]);

  // Define default column definition with explicit type ColDef<Car>
  const defaultColDef = useMemo<ColDef<Car>>(() => {
    return {
      flex: 1,
      minWidth: 100,
      editable: true,
      filter: true,
      floatingFilter: true,
    };
  }, []);

  // Callback for when the grid is ready, typed with GridReadyEvent<Car>
  const onGridReady = useCallback((params: GridReadyEvent<Car>) => {
    console.log("Grid is ready! The API object is:", params.api);
    // params.api is now of type GridApi<Car>, allowing type-safe interaction
    // For example: params.api.sizeColumnsToFit();
  }, []);

  // Example function to interact with the grid API, typed with GridApi<Car>
  const deselectAllRows = useCallback(() => {
    gridRef.current?.api.deselectAll();
    // gridRef.current?.api.updateRowData([]); // Type-safe methods on API
  }, []);

  return (
    <div style={{ width: '100%', height: 'calc(100vh - 20px)', padding: '10px' }}>
      <h1>AG-Grid with TypeScript in React</h1>
      <p>A type-safe implementation of AG-Grid displaying car data.</p>
      <button onClick={deselectAllRows} style={{ marginBottom: '10px', padding: '8px 15px' }}>
        Deselect All Rows
      </button>

      <div className="ag-theme-quartz" style={{ height: '70%', width: '100%' }}>
        <AgGridReact<Car> // Explicitly type the AgGridReact component itself
          ref={gridRef}
          rowData={rowData}
          columnDefs={colDefs}
          defaultColDef={defaultColDef}
          onGridReady={onGridReady}
          animateRows={true} // Optional: for smooth row animations
          rowSelection="multiple" // Optional: enable row selection
        />
      </div>
    </div>
  );
}

export default App;

In this example:

• We explicitly typed the `useState` hooks for `rowData` and `colDefs` with `Car[]` and `ColDef[]` respectively.
• The `AgGridReact` component itself is typed as `AgGridReact`, ensuring all its props, like `rowData`, are checked against the `Car` interface.
• The `useRef` for `gridRef` is typed to `AgGridReact`, allowing type-safe access to the `GridApi`.
• The `onGridReady` callback's `params` object is typed as `GridReadyEvent`, making `params.api` (which is `GridApi`) fully type-safe.

Advanced Type Safety with AG-Grid Components

Beyond basic setup, TypeScript becomes even more invaluable when dealing with AG-Grid's custom components like cell renderers, cell editors, and header components.

1. Typing Custom Cell Renderers

Custom cell renderers are a common pattern in AG-Grid. TypeScript ensures that the props passed to your custom components match what you expect.

// src/components/PriceCellRenderer.tsx
import React from 'react';
import { ICellRendererParams } from 'ag-grid-community';
import { Car } from '../types/Car';

// Define props interface for our custom renderer
// ICellRendererParams<TData, TValue> where TData is the row data type (Car)
// and TValue is the value type for this specific cell (number for price).
interface PriceCellRendererProps extends ICellRendererParams<Car, number> {
  // You can add any custom props specific to this renderer here
  // e.g., currencySymbol?: string;
}

const PriceCellRenderer: React.FC<PriceCellRendererProps> = (props) => {
  // props.value is now explicitly typed as 'number'
  // props.data is explicitly typed as 'Car' (or undefined if no row data)
  const formattedPrice = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
  }).format(props.value || 0); // Use 0 if value is undefined

  // Accessing other row data properties with full type safety
  const make = props.data?.make; // 'make' is type-safe as string | undefined
  // const nonExistentProp = props.data?.nonExistent; // This would cause a TypeScript error!

  return (
    <span>
      {make}: <em>{formattedPrice}</em>
    </span>
  );
};

export default PriceCellRenderer;

Now, update your `App.tsx` to use this custom renderer:

// src/App.tsx (Update colDefs)
// ... other imports ...
import PriceCellRenderer from './components/PriceCellRenderer'; // Import the renderer

// ... inside App component, update colDefs ...
const [colDefs] = useState<ColDef<Car>[]>([
    { field: 'make', sortable: true, filter: true },
    { field: 'model', sortable: true, filter: true },
    {
      field: 'price',
      sortable: true,
      filter: 'agNumberColumnFilter',
      cellRenderer: PriceCellRenderer, // Use our type-safe custom renderer
    },
    { field: 'year', sortable: true, filter: 'agNumberColumnFilter' },
]);
// ... rest of App.tsx

2. Interacting with the Grid API

When you need to programmatically interact with the grid (e.g., getting selected rows, applying filters, updating data), the `GridApi` instance is your gateway. TypeScript ensures these interactions are robust.

// src/App.tsx (Add more API interactions)
// ... inside App component ...

const getSelectedRowData = useCallback(() => {
  const selectedNodes = gridRef.current?.api.getSelectedNodes();
  if (selectedNodes) {
    const selectedData: Car[] = selectedNodes.map(node => node.data)
                                             .filter((data): data is Car => data !== undefined && data !== null);
    console.log('Selected Rows Data:', selectedData);
    // selectedData is now an array of 'Car' objects, fully type-safe
    // You can access selectedData[0].make, selectedData[0].price, etc.
  }
}, []);

const applyFilter = useCallback(() => {
    const api = gridRef.current?.api;
    if (api) {
        // Example: filter for cars made by 'Tesla'
        api.setFilterModel({
            make: {
                type: 'equals',
                filter: 'Tesla'
            }
        });
        api.onFilterChanged(); // Notify the grid that filters have changed
        console.log("Applied filter for Tesla cars.");
    }
}, []);

// ... in the return statement, add more buttons ...
return (
  <div style={{ width: '100%', height: 'calc(100vh - 20px)', padding: '10px' }}>
    <h1>AG-Grid with TypeScript in React</h1>
    <p>A type-safe implementation of AG-Grid displaying car data.</p>
    <div style={{ marginBottom: '10px' }}>
      <button onClick={deselectAllRows} style={{ marginRight: '10px', padding: '8px 15px' }}>
        Deselect All Rows
      </button>
      <button onClick={getSelectedRowData} style={{ marginRight: '10px', padding: '8px 15px' }}>
        Log Selected Rows
      </button>
      <button onClick={applyFilter} style={{ padding: '8px 15px' }}>
        Filter for Tesla
      </button>
    </div>

    <div className="ag-theme-quartz" style={{ height: '70%', width: '100%' }}>
      <AgGridReact<Car>
        ref={gridRef}
        rowData={rowData}
        columnDefs={colDefs}
        defaultColDef={defaultColDef}
        onGridReady={onGridReady}
        animateRows={true}
        rowSelection="multiple"
      />
    </div>
  </div>
);

Notice how `api.getSelectedNodes()` returns `RowNode[]`, meaning `node.data` is correctly inferred as `Car | undefined`. Similarly, methods like `setFilterModel` can be type-checked based on your column definitions and data types.

Benefits of Using TypeScript with AG-Grid

By now, the advantages should be clear, but let's recap the primary benefits of embracing TypeScript with AG-Grid:

• Enhanced Code Clarity and Readability: Type annotations serve as immediate documentation, making your code easier to understand for anyone working with it, including your future self.
• Robust Error Detection: Catch common bugs related to data access, property names, and API usage at compile time rather than runtime, leading to fewer surprises in production.
• Superior Developer Tooling: Modern IDEs like VS Code leverage TypeScript definitions to provide unparalleled autocompletion, signature help, and refactoring capabilities, dramatically boosting productivity.
• Easier Refactoring: When your data model or column definitions change, TypeScript immediately flags all affected parts of your codebase, simplifying large-scale refactoring and ensuring consistency.
• Improved Collaboration: For teams, TypeScript establishes a clear contract for data structures and component interfaces, reducing miscommunications and integration issues between different parts of the application.

Conclusion

Integrating AG-Grid with TypeScript in your React applications is a best practice that pays dividends in terms of code quality, developer experience, and application stability. By defining clear interfaces for your row data and leveraging AG-Grid's robust type definitions, you transform a potentially complex development task into a streamlined, error-resistant process.

Embrace the power of strong typing, and you'll find that building sophisticated data grids with AG-Grid and React becomes a more predictable, enjoyable, and ultimately, more successful endeavor.