- ×
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
Filed under development aidsShow AllJavaScript 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.
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 - ⚠️ Licenseag-grid-community
is 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-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 | ❌ | ✅ | > [!IMPORTANT] > 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. ## ⚡️ 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 forReact,
Angular and
Vue. ### Installation
sh $ npm install --save ag-grid-community
### Setup 1. Provide a Container Load the AG Grid library and create a blank container div:html <html lang="en"> <head> <!-- Includes all JS & CSS for the JavaScript Data Grid --> <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script> </head> <body> <!-- Your Data Grid container --> <div id="myGrid"></div> </body> </html>
2. Instantiating the JavaScript Data Grid Create the Data Grid inside of your container div usingcreateGrid
.js // Grid Options: Contains all of the Data Grid configurations const gridOptions = {}; // Your Javascript code to create the Data Grid const myGridElement = document.querySelector('#myGrid'); agGrid.createGrid(myGridElement, gridOptions);
3. Define Rows and Columnsjs // Grid Options: Contains all of the Data Grid configurations const gridOptions = { // Row Data: The data to be displayed. rowData: [ { 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. columnDefs: [{ field: 'make' }, { field: 'model' }, { field: 'price' }, { field: 'electric' }], };
4. Styling the JavaScript Data Grid Add theag-theme-quartz
CSS class to your Data Grid container div to apply the Data Grid's theme.html <!-- Your Data Grid container --> <div id="myGrid" class="ag-theme-quartz" style="height: 500px"></div>
> [!IMPORTANT] > 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 gridOptions.columnDefs
property:js 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 inlight
&dark
modes. We also supply each theme with anauto
mode that can toggle the theme based on the users' system preferences:Quartz Material Alpine Balham ag-theme-quartz
:js <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: ### 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 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 ofag-charts-community
.