Gathering detailed insights and metrics for @ag-grid-community/react
Gathering detailed insights and metrics for @ag-grid-community/react
Gathering detailed insights and metrics for @ag-grid-community/react
Gathering detailed insights and metrics for @ag-grid-community/react
ag-grid-community
Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue
@ag-grid-community/core
Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue
@ag-grid-community/all-modules
Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue
@ag-grid-community/csv-export
Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
npm install @ag-grid-community/react
Typescript
Module System
Node Version
NPM Version
TypeScript (92.91%)
SCSS (3.18%)
JavaScript (1.81%)
CSS (1.5%)
Shell (0.45%)
Vue (0.1%)
HTML (0.04%)
sed (0.01%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
NOASSERTION License
14,168 Stars
44,053 Commits
1,993 Forks
216 Watchers
791 Branches
144 Contributors
Updated on Jul 11, 2025
Latest Version
32.3.5
Package Id
@ag-grid-community/react@32.3.5
Unpacked Size
593.97 kB
Size
131.03 kB
File Count
59
NPM Version
10.2.4
Node Version
20.11.1
Published on
Apr 09, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
3
20
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.
AG Grid is easy to set up - all you need to do is provide your data and define your column structure.
1$ 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.
1// Mandatory CSS required by the Data Grid 2// Default Row Model & Module Registry 3import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model'; 4import { ModuleRegistry } from '@ag-grid-community/core'; 5// React Data Grid Component & Module Registry 6import { AgGridReact } from '@ag-grid-community/react'; 7import '@ag-grid-community/styles/ag-grid.css'; 8// Optional Theme applied to the Data Grid 9import '@ag-grid-community/styles/ag-theme-quartz.css'; 10 11// Register the RowModel Module 12ModuleRegistry.registerModules([ClientSideRowModelModule]);
2. Define Rows and Columns
1const GridExample = () => { 2 // Row Data: The data to be displayed. 3 const [rowData, setRowData] = useState([ 4 { make: 'Tesla', model: 'Model Y', price: 64950, electric: true }, 5 { make: 'Ford', model: 'F-Series', price: 33850, electric: false }, 6 { make: 'Toyota', model: 'Corolla', price: 29600, electric: false }, 7 ]); 8 9 // Column Definitions: Defines the columns to be displayed. 10 const [colDefs, setColDefs] = useState([ 11 { field: 'make' }, 12 { field: 'model' }, 13 { field: 'price' }, 14 { field: 'electric' }, 15 ]); 16 17 // ... 18};
3. React Data Grid Component
1return ( 2 // wrapping container with theme & size 3 <div 4 className="ag-theme-quartz" // applying the Data Grid theme 5 style={{ height: 500 }} // the Data Grid will fill the size of the parent container 6 > 7 <AgGridReact rowData={rowData} columnDefs={colDefs} /> 8 </div> 9);
ℹ️ 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:
1gridOptions = { 2 columnDefs: [ 3 { 4 field: 'country', // The column to add the component to 5 cellRenderer: CountryCellRenderer, // Your custom cell component 6 filter: CountryFilter, // Your custom filter component 7 }, 8 ], 9};
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
:
1<div 2 id="myGrid" 3 style="height: 150px; width: 600px" 4 class="ag-theme-quartz" 5></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.
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
.
No vulnerabilities found.
Reason
all changesets reviewed
Reason
30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
30 out of 30 merged PRs checked by a CI test -- score normalized to 10
Reason
project has 16 contributing companies or organizations
Details
Reason
license file detected
Details
Reason
2 existing vulnerabilities detected
Details
Reason
2 out of the last 5 releases have a total of 2 signed artifacts.
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
security policy file not detected
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
no update tool detected
Details
Reason
project is not fuzzed
Details
Score
Last Scanned on 2025-07-11T16:15:14Z
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More