Skip to main content

The best JavaScript Data Grid

Build enterprise-grade data tables with outstanding performance. Fully customizable, framework-agnostic, with zero dependencies.

Get StartedAPI Reference

Quick start

Get up and running with AG Grid in minutes

1

Install the package

Install AG Grid Community or Enterprise edition via npm, yarn, or pnpm.
npm install ag-grid-community
For enterprise features like row grouping, pivoting, and Excel export, install ag-grid-enterprise instead.
2

Create your first grid

Import AG Grid and create a grid with column definitions and row data.
import { createGrid } from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

const gridOptions = {
  columnDefs: [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ],
  rowData: [
    { make: 'Tesla', model: 'Model Y', price: 64950 },
    { make: 'Ford', model: 'F-Series', price: 33850 },
    { make: 'Toyota', model: 'Corolla', price: 29600 }
  ]
};

const gridDiv = document.querySelector('#myGrid');
createGrid(gridDiv, gridOptions);
3

Add the grid container

Create a container element with a theme class and dimensions.
<div id="myGrid" class="ag-theme-quartz" style="height: 500px"></div>
AG Grid includes four built-in themes: Quartz, Material, Alpine, and Balham. Each is available in light and dark modes.

Framework integration

Use AG Grid with your favorite framework

React

Official React wrapper with hooks and TypeScript support

Angular

Native Angular component with full dependency injection

Vue

Vue 3 component with composition API support

Powerful features

Everything you need to build data-rich applications

Sorting & Filtering

Built-in sorting and filtering with custom filter components

Editing

Inline cell editing with validation and custom editors

Pagination

Client and server-side pagination for large datasets

Selection

Single and multi-row selection with keyboard navigation

CSV Export

Export grid data to CSV with custom formatting

Custom Components

Create custom cell renderers, editors, and filters

Enterprise features

Advanced capabilities for complex data requirements

Row Grouping

Group and aggregate data with multi-level hierarchies

Pivoting

Create pivot tables with aggregation functions

Integrated Charts

Built-in charting with AG Charts integration

Excel Export

Export to Excel with styling and formulas

Master/Detail

Expandable rows with nested detail grids

Server-Side Row Model

Handle millions of rows with lazy loading

API reference

Explore the complete API documentation

Grid API

Methods for programmatic grid control

Grid Options

Complete configuration reference

Column Properties

Column definition options and types

Events

Grid and column event handlers

Ready to build something amazing?

Join thousands of developers building enterprise applications with AG Grid

Start BuildingView on GitHub