@ag-grid-community/react
Advanced tools
@ag-grid-community/react is a powerful data grid component for React applications. It provides a wide range of features for displaying, editing, and managing data in a tabular format. The package is highly customizable and supports various functionalities such as sorting, filtering, pagination, and more.
Basic Grid Setup
This code demonstrates a basic setup of the AG Grid in a React application. It includes column definitions and row data to display a simple table.
```jsx
import React from 'react';
import { AgGridReact } from '@ag-grid-community/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 example shows how to enable sorting and filtering on the columns of the AG Grid. The `sortable` and `filter` properties are added to the column definitions.
```jsx
import React from 'react';
import { AgGridReact } from '@ag-grid-community/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;
```Pagination
This code demonstrates how to enable pagination in the AG Grid. The `pagination` property is set to true, and `paginationPageSize` is set to define the number of rows per page.
```jsx
import React from 'react';
import { AgGridReact } from '@ag-grid-community/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 },
// Add more rows as needed
];
return (
<div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
<AgGridReact
columnDefs={columnDefs}
rowData={rowData}
pagination={true}
paginationPageSize={10}
/>
</div>
);
};
export default App;
```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. Compared to @ag-grid-community/react, react-table is more lightweight but may require more custom implementation for advanced features.
material-table is a data table component built on Material-UI. It provides a rich set of features out of the box, including sorting, filtering, and pagination. It integrates well with Material-UI's design system, making it a good choice for applications already using Material-UI. Compared to @ag-grid-community/react, material-table offers a more opinionated design and tighter integration with Material-UI.
handsontable is a JavaScript/HTML5 data grid component with a spreadsheet-like interface. It offers a wide range of features, including data validation, sorting, filtering, and more. Compared to @ag-grid-community/react, handsontable provides a more Excel-like experience and is suitable for applications that require complex data manipulation.
AG Grid is a fully-featured and highly customizable React Data Grid. It delivers outstanding performance and has no third-party dependencies.
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.| 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.
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 data example featuring live updates and sparklines:
AG Grid is easy to set up - all you need to do is provide your data and define your column structure.
$ npm install --save @ag-grid-community/core @ag-grid-community/react
1. Import the React Data Grid
Import the required modules, and register them via the ModuleRegistry.
// Mandatory CSS required by the Data Grid
// Default Row Model & Module Registry
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { ModuleRegistry } from '@ag-grid-community/core';
// React Data Grid Component & Module Registry
import { AgGridReact } from '@ag-grid-community/react';
import '@ag-grid-community/styles/ag-grid.css';
// Optional Theme applied to the Data Grid
import '@ag-grid-community/styles/ag-theme-quartz.css';
// Register the RowModel Module
ModuleRegistry.registerModules([ClientSideRowModelModule]);
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.
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 |
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.
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:
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
},
],
};
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>
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.
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:
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.
Founded in 2016, AG Grid has seen a steady rise in popularity and is now the market leader for Data Grids:
AG Grid Enterprise customers have access to dedicated support via ZenDesk, which is monitored by our engineering teams.
If you have found a bug, please report it in this repository's issues section.
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.
AG Grid is developed by a team of co-located developers in London. If you want to join the team send your application to info@ag-grid.com.
ag-grid-community is licensed under the MIT license.
ag-grid-enterprise has a Commercial license.
See the LICENSE file for more info.
AG ChartsIf 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:
-black?style=for-the-badge&logo=x){kind=icon}
FAQs
AG Grid React Component
The npm package @ag-grid-community/react receives a total of 217,470 weekly downloads. As such, @ag-grid-community/react popularity was classified as popular.
We found that @ag-grid-community/react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.
React
Angular
Vue
Python
Svelte
SolidJS
.NET
Rust
Laravel