ag-grid-react

What is ag-grid-react?

ag-grid-react is a powerful and feature-rich data grid component for React applications. It provides a wide range of functionalities for displaying, editing, and managing data in a tabular format. It is highly customizable and supports large datasets, making it suitable for enterprise-level applications.

What are ag-grid-react's main functionalities?

Basic Grid Setup

This code sets up a basic grid with three columns: Make, Model, and Price. It also provides some sample row data to display in the grid.

import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const App = () => {
  const columnDefs = [
    { headerName: 'Make', field: 'make' },
    { headerName: 'Model', field: 'model' },
    { headerName: 'Price', field: 'price' }
  ];

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

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
      />
    </div>
  );
};

export default App;

Sorting and Filtering

This code demonstrates how to enable sorting and filtering on the columns of the grid. Users can click on the column headers to sort and use the filter input to filter the data.

import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const App = () => {
  const columnDefs = [
    { headerName: 'Make', field: 'make', sortable: true, filter: true },
    { headerName: 'Model', field: 'model', sortable: true, filter: true },
    { headerName: 'Price', field: 'price', sortable: true, filter: true }
  ];

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

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
      />
    </div>
  );
};

export default App;

Row Selection

This code demonstrates how to enable row selection in the grid. It also includes an event handler to log the selected rows to the console.

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

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

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

  const onSelectionChanged = (event) => {
    const selectedRows = event.api.getSelectedRows();
    console.log('Selected rows:', selectedRows);
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        rowSelection="single"
        onSelectionChanged={onSelectionChanged}
      />
    </div>
  );
};

export default App;

Custom Cell Renderer

This code demonstrates how to use a custom cell renderer to change the appearance of cell values based on their content. In this example, the price values are colored red if they are greater than 50000 and green otherwise.

import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const CustomCellRenderer = (props) => {
  return (
    <span style={{ color: props.value > 50000 ? 'red' : 'green' }}>
      {props.value}
    </span>
  );
};

const App = () => {
  const columnDefs = [
    { headerName: 'Make', field: 'make' },
    { headerName: 'Model', field: 'model' },
    { headerName: 'Price', field: 'price', cellRenderer: 'customCellRenderer' }
  ];

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

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        frameworkComponents={{ customCellRenderer: CustomCellRenderer }}
      />
    </div>
  );
};

export default App;

Other packages similar to ag-grid-react

react-table

react-table is a lightweight, fast, and extendable data grid built for React. It focuses on providing a simple and flexible API for building tables with features like sorting, filtering, and pagination. Compared to ag-grid-react, react-table is more lightweight and easier to customize but may lack some of the advanced features and performance optimizations of ag-grid-react.

material-table

material-table is a data table component built on top of Material-UI. It provides a rich set of features like sorting, filtering, grouping, and editing, along with a modern and responsive design. Compared to ag-grid-react, material-table offers a more integrated experience with Material-UI and is suitable for applications already using Material-UI for their UI components.

react-data-grid

react-data-grid is a highly customizable and performant data grid component for React. It offers features like sorting, filtering, grouping, and cell editing. Compared to ag-grid-react, react-data-grid is more focused on performance and customization, making it a good choice for applications that require a high degree of control over the grid's behavior and appearance.

README

React Data Grid | React Table

🌐 Website • 📖 Documentation • 🏘️ Community

AG Grid is a fully-featured and highly customizable React Data Grid. It delivers outstanding performance and has no third-party dependencies.

📖 Overview

Table of Contents

• 📖 Overview
  • Features
  • Examples
• ⚡️ Quick Start
  • Installation
  • Setup
  • Seed Projects
• 🛠️ Customisations
  • Custom Components
  • Themes
  • Custom Themes
• 🌍 Community
  • Tools & Extensions
  • Showcase
  • Stargazers
• 🤝 Support
  • Enterprise Support
  • Bug Reports
  • Questions
  • Contributing
• ⚠️ License

AG Grid is available in two versions: Community & Enterprise.

• ag-grid-community is free, available under the MIT license, and comes with all of the core features expected from a React Data Grid, including Sorting, Filtering, Pagination, Editing, Custom Components, Theming and more.
• ag-grid-enterprise is available under a commercial license and comes with advanced features, like Integrated Charting, Row Grouping, Aggregation, Pivoting, Master/Detail, Server-side Row Model, and Exporting in addition to dedicated support from our Engineering team.

Features

Feature	AG Grid Community	AG Grid Enterprise
Filtering	✅	✅ (Advanced)
Sorting	✅	✅
Cell Editing	✅	✅
CSV Export	✅	✅
Drag & Drop	✅	✅
Themes and Styling	✅	✅
Selection	✅	✅
Accessibility	✅	✅
Infinite Scrolling	✅	✅
Pagination	✅	✅
Server-Side Data	✅	✅ (Advanced)
Custom Components	✅	✅
Integrated Charting	❌	✅
Range Selection	❌	✅
Row Grouping and Aggregation	❌	✅
Pivoting	❌	✅
Excel Export	❌	✅
Clipboard Operations	❌	✅
Master/Detail	❌	✅
Tree Data	❌	✅
Column Menu	❌	✅
Context Menu	❌	✅
Tool Panels	❌	✅
Support	❌	✅

ℹ️ Note:

Visit the Pricing page for a full comparison.

Examples

We've created several demos to showcase AG Grid's rich feature set across different use cases. See them in action below, or interact with them on our Demo page.

🏦 Financial Demo

Financial data example featuring live updates and sparklines:

Live Demo • Source Code

📦 Inventory Demo

Inventory data example to view and manage products:

Live Demo • Source Code

🧑‍💼 HR Demo

HR data example showing hierarchical employee data:

Live Demo • Source Code

⚡️ Quick Start

AG Grid is easy to set up - all you need to do is provide your data and define your column structure.

Installation

$ npm install --save ag-grid-react

Setup

1. Import the React Data Grid

// Mandatory CSS required by the Data Grid
import 'ag-grid-community/styles/ag-grid.css';
// Optional Theme applied to the Data Grid
import 'ag-grid-community/styles/ag-theme-quartz.css';
// React Data Grid Component
import { AgGridReact } from 'ag-grid-react';

2. Define Rows and Columns

const GridExample = () => {
    // Row Data: The data to be displayed.
    const [rowData, setRowData] = useState([
        { 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 },
    ]);

    // Column Definitions: Defines the columns to be displayed.
    const [colDefs, setColDefs] = useState([
        { field: 'make' },
        { field: 'model' },
        { field: 'price' },
        { field: 'electric' },
    ]);

    // ...
};

3. React Data Grid Component

return (
    // wrapping container with theme & size
    <div
        className="ag-theme-quartz" // applying the Data Grid theme
        style={{ height: 500 }} // the Data Grid will fill the size of the parent container
    >
        <AgGridReact rowData={rowData} columnDefs={colDefs} />
    </div>
);

ℹ️ Note:

For more information on building Data Grids with AG Grid, refer to our Documentation.

Seed Projects

We also provide Seed Projects to help you get started with common configurations:

Environment	Framework	Packages	Modules
Create React App (CRA)		Packages	Modules
Vite		Packages	Modules
Vite - TypeScript		Packages	Modules
Webpack 5 - TypeScript		Packages	Modules
Webpack 5 - React		Packages	Modules
Angular CLI		Packages	Modules
Nuxt		Packages	Modules
Vite		Packages	Modules

🛠️ Customisations

AG Grid is fully customisable, both in terms of appearance and functionality. There are many ways in which the grid can be customised and we provide a selection of tools to help create those customisations.

Custom Components

You can create your own Custom Components to customise the behaviour of the grid. For example, you can customise how cells are rendered, how values are edited and also create your own filters.

There are a number of different Component Types that you can provide to the grid, including:

• Cell Component: To customise the contents of a cell.
• Header Component: To customise the header of a column and column groups.
• Edit Component: To customise the editing of a cell.
• Filter Component: For custom column filter that appears inside the column menu.
• Floating Filter: For custom column floating filter that appears inside the column menu.
• Date Component: To customise the date selection component in the date filter.
• Loading Component: To customise the loading cell row when using Server Side Row Model.
• Overlay Component: To customise loading and no rows overlay components.
• Status Bar Component: For custom status bar components.
• Tool Panel Component: For custom tool panel components.
• Tooltip Component: For custom cell tooltip components.
• Menu Item Component: To customise the menu items shown in the Column and Context Menus.

To supply a custom cell renderer and filter components to the Grid, create a direct reference to your component within the gridOptions.columnDefs property:

gridOptions = {
    columnDefs: [
        {
            field: 'country', // The column to add the component to
            cellRenderer: CountryCellRenderer, // Your custom cell component
            filter: CountryFilter, // Your custom filter component
        },
    ],
};

Themes

AG Grid has 4 themes, each available in light & dark modes. We also supply each theme with an auto mode that can toggle the theme based on the users' system preferences:

Quartz	Material
Alpine	Balham

To apply a theme, add the relevant CSS Class to the Data Grid container. For example, to apply the Quartz theme, use the CSS class ag-theme-quartz:

<div
    id="myGrid"
    style="height: 150px; width: 600px"
    class="ag-theme-quartz"
></div>

Custom Themes

All AG Grid themes can be customised using CSS variables, or you can create a new theme from scratch with the help of our Theme Builder or Figma Design System.

🌍 Community

Tools & Extensions

AG Grid has a large and active community who have created an ecosystem of 3rd party tools, extensions and utilities to help you build your next project with AG Grid, no matter which language or framework you use:

 React •  Angular •  TypeScript •  Vue •  Python •  Svelte •  SolidJS •  .NET •  Rust •  Laravel

Showcase

AG Grid is used by 100,000's of developers across the world, from almost every industry. Whilst most of these projects are private, we've curated a selection of open-source projects from different industries where household names use AG Grid, including J.P.Morgan, MongoDB and NASA. Visit our Community Showcase page to learn more.

Stargazers

Founded in 2016, AG Grid has seen a steady rise in popularity and is now the market leader for Data Grids:

🤝 Support

Enterprise Support

AG Grid Enterprise customers have access to dedicated support via ZenDesk, which is monitored by our engineering teams.

Bug Reports

If you have found a bug, please report it in this repository's issues section.

Questions

Look for similar problems on StackOverflow using the ag-grid tag. If nothing seems related, post a new message there. Please do not use GitHub issues to ask questions.

Contributing

AG Grid is developed by a team of co-located developers in London. If you want to join the team send your application to [e-mail].

⚠️ License

ag-grid-community is licensed under the MIT license.

ag-grid-enterprise has a Commercial license.

See the LICENSE file for more info.

AG Charts

If you've made it this far, you may be interested in our latest project: AG Charts - The best React Charting library in the world.

Initially built to power Integrated Charts in AG Grid, we open-sourced this project in 2018. Having seen the steady rise in popularity since then, we have decided to invest in AG Charts with a dedicated Enterprise version (ag-charts-enterprise) in addition to our continued support of ag-charts-community.

---

Follow us to keep up to date with all the latest news from AG Grid: