Quickstart Guide

This quickstart guide will help you create your first AG Grid in under 5 minutes. We’ll build a simple data grid with sorting, filtering, and pagination.

This guide uses React for examples, but AG Grid works identically with Angular, Vue, and vanilla JavaScript. Check the tabs for framework-specific code.

Prerequisites

Before you begin, ensure you have:

Node.js 18+ installed
A package manager (npm, yarn, or pnpm)
Basic knowledge of your chosen framework (React, Angular, or Vue)

Step 1: Create a New Project

Create your application

If you don’t have an existing project, create one using your framework’s CLI:

React (Vite)

npm create vite@latest my-grid-app -- --template react-ts
cd my-grid-app
npm install

Angular

npx @angular/cli new my-grid-app
cd my-grid-app

Vue (Vite)

npm create vite@latest my-grid-app -- --template vue-ts
cd my-grid-app
npm install

Vanilla (Vite)

npm create vite@latest my-grid-app -- --template vanilla-ts
cd my-grid-app
npm install

Install AG Grid

Install AG Grid packages for your framework:

React

npm install ag-grid-react ag-grid-community

Angular

npm install ag-grid-angular ag-grid-community

Vue

npm install ag-grid-vue3 ag-grid-community

Vanilla

npm install ag-grid-community

Import Required Styles

AG Grid requires two CSS files: structural styles and theme styles.

Step 2: Create Your First Grid

Let’s create a simple grid displaying car data with three columns.

// src/App.tsx
import { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import type { ColDef } from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

interface CarData {
  make: string;
  model: string;
  price: number;
  electric: boolean;
}

function App() {
  const [rowData] = useState<CarData[]>([
    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
    { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
    { make: 'Mercedes', model: 'EQA', price: 48890, electric: true },
    { make: 'Fiat', model: '500', price: 15774, electric: false },
    { make: 'Nissan', model: 'Juke', price: 20675, electric: false },
  ]);

  const [colDefs] = useState<ColDef<CarData>[]>([
    { field: 'make' },
    { field: 'model' },
    { field: 'price' },
    { field: 'electric' },
  ]);

  return (
    <div className="ag-theme-quartz" style={{ height: 500 }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={colDefs}
      />
    </div>
  );
}

export default App;

The ag-theme-quartz class applies the Quartz theme. AG Grid includes four themes: Quartz, Alpine, Balham, and Material. Each is available in light and dark variants.

Step 3: Add Sorting and Filtering

Enable sorting and filtering by adding defaultColDef:

import { useState, useMemo } from 'react';
import { AgGridReact } from 'ag-grid-react';
import type { ColDef } from 'ag-grid-community';

function App() {
  const [rowData] = useState([/* ... */]);
  const [colDefs] = useState<ColDef[]>([/* ... */]);

  // Default column configuration
  const defaultColDef = useMemo<ColDef>(() => ({
    sortable: true,
    filter: true,
    resizable: true,
  }), []);

  return (
    <div className="ag-theme-quartz" style={{ height: 500 }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={colDefs}
        defaultColDef={defaultColDef}
      />
    </div>
  );
}

Click column headers to sort. Click the menu icon (≡) in the header to access filters.

Step 4: Add Pagination

Enable pagination to handle large datasets:

<AgGridReact
  rowData={rowData}
  columnDefs={colDefs}
  defaultColDef={defaultColDef}
  pagination={true}
  paginationPageSize={10}
  paginationPageSizeSelector={[10, 25, 50]}
/>

Step 5: Customize Columns

Add custom formatting and column-specific settings:

const [colDefs] = useState<ColDef<CarData>[]>([
  {
    field: 'make',
    headerName: 'Manufacturer',
    flex: 1,
  },
  {
    field: 'model',
    flex: 1,
  },
  {
    field: 'price',
    valueFormatter: (params) => {
      return '$' + params.value.toLocaleString();
    },
    filter: 'agNumberColumnFilter',
    flex: 1,
  },
  {
    field: 'electric',
    cellRenderer: (params: any) => {
      return params.value ? '⚡ Yes' : 'No';
    },
    filter: 'agSetColumnFilter',
  },
]);

The flex property makes columns responsive. A flex value of 1 distributes available space equally among columns.

Step 6: Load Data from API

Fetch data from an external API:

import { useState, useEffect } from 'react';
import { AgGridReact } from 'ag-grid-react';

function App() {
  const [rowData, setRowData] = useState([]);
  const [colDefs] = useState([/* ... */]);

  useEffect(() => {
    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .then(response => response.json())
      .then(data => setRowData(data));
  }, []);

  return (
    <div className="ag-theme-quartz" style={{ height: 500 }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={colDefs}
        defaultColDef={{ sortable: true, filter: true }}
      />
    </div>
  );
}

Step 7: Access Grid API

Use the Grid API to interact with the grid programmatically:

import { useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';
import type { GridApi } from 'ag-grid-community';

function App() {
  const gridRef = useRef<AgGridReact>(null);

  const onExportClick = () => {
    gridRef.current?.api.exportDataAsCsv();
  };

  const onClearFilters = () => {
    gridRef.current?.api.setFilterModel(null);
  };

  return (
    <div>
      <div style={{ marginBottom: 10 }}>
        <button onClick={onExportClick}>Export CSV</button>
        <button onClick={onClearFilters}>Clear Filters</button>
      </div>
      <div className="ag-theme-quartz" style={{ height: 500 }}>
        <AgGridReact
          ref={gridRef}
          rowData={rowData}
          columnDefs={colDefs}
        />
      </div>
    </div>
  );
}

The Grid API provides 100+ methods for controlling the grid programmatically. See the API Reference for the complete list.

Complete Example

Here’s a complete example with all features:

import { useState, useMemo, useRef, useEffect } from 'react';
import { AgGridReact } from 'ag-grid-react';
import type { ColDef } from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

interface CarData {
  make: string;
  model: string;
  price: number;
  electric: boolean;
}

function App() {
  const gridRef = useRef<AgGridReact>(null);
  const [rowData, setRowData] = useState<CarData[]>([
    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
    { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
    { make: 'Mercedes', model: 'EQA', price: 48890, electric: true },
    { make: 'Fiat', model: '500', price: 15774, electric: false },
    { make: 'Nissan', model: 'Juke', price: 20675, electric: false },
  ]);

  const columnDefs = useMemo<ColDef<CarData>[]>(() => [
    {
      field: 'make',
      headerName: 'Manufacturer',
      flex: 1,
    },
    {
      field: 'model',
      flex: 1,
    },
    {
      field: 'price',
      valueFormatter: (params) => '$' + params.value.toLocaleString(),
      filter: 'agNumberColumnFilter',
      flex: 1,
    },
    {
      field: 'electric',
      cellRenderer: (params: any) => params.value ? '⚡ Yes' : 'No',
    },
  ], []);

  const defaultColDef = useMemo<ColDef>(() => ({
    sortable: true,
    filter: true,
    resizable: true,
  }), []);

  const onExportClick = () => {
    gridRef.current?.api.exportDataAsCsv();
  };

  return (
    <div style={{ padding: 20 }}>
      <h1>AG Grid Quickstart</h1>
      <div style={{ marginBottom: 10 }}>
        <button onClick={onExportClick}>Export to CSV</button>
      </div>
      <div className="ag-theme-quartz" style={{ height: 400, width: '100%' }}>
        <AgGridReact
          ref={gridRef}
          rowData={rowData}
          columnDefs={columnDefs}
          defaultColDef={defaultColDef}
          pagination={true}
          paginationPageSize={10}
        />
      </div>
    </div>
  );
}

export default App;

What’s Next?

Now that you have a working grid, explore these features:

Column Definitions

Learn about advanced column configuration and types

Row Selection

Enable row and cell selection in your grid

Cell Editing

Make your grid editable with inline cell editors

Custom Components

Create custom cell renderers and editors

Themes

Customize the appearance with themes and CSS

Grid API

Explore all Grid API methods and events

Common Next Steps

Enable Cell Editing

Make cells editable:

const defaultColDef = {
  editable: true,
  // ... other defaults
};

Add Row Selection

Enable row selection:

<AgGridReact
  rowSelection="multiple"
  onSelectionChanged={(event) => {
    console.log('Selected rows:', event.api.getSelectedRows());
  }}
  // ... other props
/>

Implement Server-Side Sorting and Filtering

For large datasets, implement server-side operations:

const gridOptions: GridOptions = {
  rowModelType: 'serverSide',
  serverSideDatasource: {
    getRows: (params) => {
      // Fetch data from server with params.request
      fetch(`/api/data?${buildQueryString(params.request)}`)
        .then(response => response.json())
        .then(data => params.success({
          rowData: data.rows,
          rowCount: data.totalCount,
        }));
    }
  },
};

Server-Side Row Model is an Enterprise feature. You’ll need an Enterprise license to use it.

Troubleshooting

Grid not showing

Ensure:

Both CSS files are imported
Container has a defined height
Theme class is applied to container

Columns not sizing correctly

Use flex for responsive columns or set explicit width:

columnDefs: [
  { field: 'make', flex: 1 },      // Takes available space
  { field: 'model', width: 200 },  // Fixed width
]

TypeScript errors

Ensure your row data interface matches your column definitions:

interface MyData {
  make: string;
  model: string;
}

const colDefs: ColDef<MyData>[] = [
  { field: 'make' },  // TypeScript knows this is valid
  { field: 'price' }, // TypeScript error: property doesn't exist
];

Get Help

Stack Overflow

Ask questions with the ag-grid tag

GitHub Issues

Report bugs or request features

Documentation

Browse the complete documentation

Examples

Explore interactive examples

Get Started

Framework Integration

Core Concepts

Features

Enterprise Features

Customization

Themes

Quickstart Guide

Quickstart Guide

Prerequisites

Step 1: Create a New Project

Step 2: Create Your First Grid

Step 3: Add Sorting and Filtering

Step 5: Customize Columns

Step 6: Load Data from API

Step 7: Access Grid API

Complete Example

What’s Next?

Column Definitions

Row Selection

Cell Editing

Custom Components

Themes

Grid API

Common Next Steps

Enable Cell Editing

Add Row Selection

Implement Server-Side Sorting and Filtering

Troubleshooting

Grid not showing

Columns not sizing correctly

TypeScript errors

Get Help

Stack Overflow

GitHub Issues

Documentation

Examples

Get Started

Framework Integration

Core Concepts

Features

Enterprise Features

Customization

Themes

​Quickstart Guide

​Prerequisites

​Step 1: Create a New Project

​Step 2: Create Your First Grid

​Step 3: Add Sorting and Filtering

​Step 4: Add Pagination

​Step 5: Customize Columns

​Step 6: Load Data from API

​Step 7: Access Grid API

​Complete Example

​What’s Next?

Column Definitions

Row Selection

Cell Editing

Custom Components

Themes

Grid API

​Common Next Steps

​Enable Cell Editing

​Add Row Selection

​Implement Server-Side Sorting and Filtering

​Troubleshooting

​Grid not showing

​Columns not sizing correctly

​TypeScript errors

​Get Help

Stack Overflow

GitHub Issues

Documentation

Examples

Quickstart Guide

Prerequisites

Step 1: Create a New Project

Step 2: Create Your First Grid

Step 3: Add Sorting and Filtering

Step 4: Add Pagination

Step 5: Customize Columns

Step 6: Load Data from API

Step 7: Access Grid API

Complete Example

What’s Next?

Common Next Steps

Enable Cell Editing

Add Row Selection

Implement Server-Side Sorting and Filtering

Troubleshooting

Grid not showing

Columns not sizing correctly

TypeScript errors

Get Help