The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
Installations
npm install @ag-grid-community/client-side-row-modelDeveloper
Developer Guide
Module System
CommonJS, ESM
Min. Node Version
Typescript Support
Yes
Node Version
20.11.0
NPM Version
10.2.4
Statistics
12,898 Stars
41,578 Commits
1,884 Forks
213 Watching
659 Branches
141 Contributors
Updated on 28 Nov 2024
Languages
TypeScript (91.25%)
SCSS (4.19%)
JavaScript (2.55%)
CSS (1.44%)
Shell (0.44%)
Vue (0.1%)
HTML (0.03%)
Total Downloads
Cumulative downloads
Total Downloads
39,210,128
Last day
-15.2%
50,259
Compared to previous day
Last week
-2%
284,591
Compared to previous week
Last month
5%
1,264,468
Compared to previous month
Last year
66%
16,343,804
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Dev Dependencies
3
JavaScript Data Grid | JavaScript Table
AG Grid is a fully-featured and highly customizable JavaScript Data Grid. It delivers outstanding performance, has no third-party dependencies and comes with support for 
React, 
Angular and 
Vue.
📖 Overview
Table of Contents
AG Grid is available in two versions: Community & Enterprise.
ag-grid-communityis free, available under the MIT license, and comes with all of the core features expected from a JavaScript Data Grid, including Sorting, Filtering, Pagination, Editing, Custom Components, Theming and more.ag-grid-enterpriseis 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:
⚡️ Quick Start
AG Grid is easy to set up - all you need to do is provide your data and define your column structure. Read on for vanilla JavaScript installation instructions, or refer to our framework-specific guides for React, Angular and Vue.
Installation
1$ npm install --save ag-grid-community
Setup
1. Provide a Container
Load the AG Grid library and create a container div. The div should have a height because the Data Grid will fill the size of the parent container:
1<html lang="en"> 2 <head> 3 <!-- Includes all JS & CSS for the JavaScript Data Grid --> 4 <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script> 5 </head> 6 <body> 7 <!-- Your Data Grid container --> 8 <div id="myGrid" style="height: 500px"></div> 9 </body> 10</html>
2. Instantiating the JavaScript Data Grid
Create the Data Grid inside of your container div using createGrid.
1// Grid Options: Contains all of the Data Grid configurations 2const gridOptions = {}; 3 4// Your Javascript code to create the Data Grid 5const myGridElement = document.querySelector('#myGrid'); 6agGrid.createGrid(myGridElement, gridOptions);
3. Define Rows and Columns
1// Grid Options: Contains all of the Data Grid configurations 2const gridOptions = { 3 // Row Data: The data to be displayed. 4 rowData: [ 5 { make: 'Tesla', model: 'Model Y', price: 64950, electric: true }, 6 { make: 'Ford', model: 'F-Series', price: 33850, electric: false }, 7 { make: 'Toyota', model: 'Corolla', price: 29600, electric: false }, 8 ], 9 // Column Definitions: Defines the columns to be displayed. 10 columnDefs: [{ field: 'make' }, { field: 'model' }, { field: 'price' }, { field: 'electric' }], 11};
ℹ️ 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 - JavaScript |  | 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:
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};
Themes
AG Grid has 4 themes, each available in light & dark modes:
| Quartz | Material |
|---|---|
|
|
| Alpine | Balham |
|
|
Custom Themes
All AG Grid themes can be customised using the Theming API, 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
Vue
Python
Svelte
SolidJS
.NET
Rust
LaravelShowcase
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 info@ag-grid.com.
⚠️ 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 JavaScript 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}
No vulnerabilities found.
Reason
30 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.txt:0
- Warn: project license file does not contain an FSF or OSI license.
Reason
Found 4/29 approved changesets -- score normalized to 1
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
Project has not signed or included provenance with any releases.
Details
- Warn: release artifact v32.3.3 not signed: https://api.github.com/repos/ag-grid/ag-grid/releases/185158455
- Warn: release artifact v32.3.2 not signed: https://api.github.com/repos/ag-grid/ag-grid/releases/182730823
- Warn: release artifact v32.3.1 not signed: https://api.github.com/repos/ag-grid/ag-grid/releases/182285160
- Warn: release artifact v32.3.0 not signed: https://api.github.com/repos/ag-grid/ag-grid/releases/181184090
- Warn: release artifact v32.2.2 not signed: https://api.github.com/repos/ag-grid/ag-grid/releases/178676623
- Warn: release artifact v32.3.3 does not have provenance: https://api.github.com/repos/ag-grid/ag-grid/releases/185158455
- Warn: release artifact v32.3.2 does not have provenance: https://api.github.com/repos/ag-grid/ag-grid/releases/182730823
- Warn: release artifact v32.3.1 does not have provenance: https://api.github.com/repos/ag-grid/ag-grid/releases/182285160
- Warn: release artifact v32.3.0 does not have provenance: https://api.github.com/repos/ag-grid/ag-grid/releases/181184090
- Warn: release artifact v32.2.2 does not have provenance: https://api.github.com/repos/ag-grid/ag-grid/releases/178676623
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 6 are checked with a SAST tool
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
35 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99
- Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-8hc4-vh64-cxmj
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-w7q9-p3jq-fmhm
- Warn: Project is vulnerable to: GHSA-xvf7-4v9q-58w6
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-325j-24f4-qv5x
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986 / GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
3.1
/10
Last Scanned on 2024-11-25
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 MoreOther packages similar to @ag-grid-community/client-side-row-model
@ag-grid-community/infinite-row-model
Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue
@ag-grid-community/styles
AG Grid Styles and Themes
@ag-grid-enterprise/core
Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue
ag-grid-community
Advanced Data Grid / Data Table supporting Javascript / Typescript / React / Angular / Vue