# JavaScript Data Grid | JavaScript Table

🌐 Website • 📖 Documentation • 🏘️ Community

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

- [📖 Overview](#-overview) - [Features](#features) - [Examples](#examples) - [⚡️ Quick Start](#️-quick-start) - [Installation](#installation) - [Setup](#setup) - [Seed Projects](#seed-projects) - [🛠️ Customisations](#️-customisations) - [Custom Components](#custom-components) - [Themes](#themes) - [Custom Themes](#custom-themes) - [🌍 Community](#-community) - [Tools \& Extensions](#tools--extensions) - [Showcase](#showcase) - [Stargazers](#stargazers) - [🤝 Support](#-support) - [Enterprise Support](#enterprise-support) - [Bug Reports](#bug-reports) - [Questions](#questions) - [Contributing](#contributing) - [⚠️ License](#️-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 JavaScript Data Grid, including [Sorting](https://www.ag-grid.com/javascript-data-grid/row-sorting/#sorting?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Filtering](https://www.ag-grid.com/javascript-data-grid/filtering/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Pagination](https://www.ag-grid.com/javascript-data-grid/row-pagination/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Editing](https://www.ag-grid.com/javascript-data-grid/cell-editing/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Custom Components](https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Theming](https://www.ag-grid.com/javascript-data-grid/themes/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) and more. - `ag-grid-enterprise` is available under a commercial license and comes with advanced features, like [Integrated Charting](https://www.ag-grid.com/javascript-data-grid/integrated-charts/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Row Grouping](https://www.ag-grid.com/javascript-data-grid/grouping/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Aggregation](https://www.ag-grid.com/javascript-data-grid/grouping/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Pivoting](https://www.ag-grid.com/javascript-data-grid/pivoting/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Master/Detail](https://www.ag-grid.com/javascript-data-grid/master-detail/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Server-side Row Model](https://www.ag-grid.com/javascript-data-grid/server-side-model/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), and [Exporting](https://www.ag-grid.com/javascript-data-grid/excel-export/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) in addition to dedicated support from our Engineering team. ### Features | Feature | AG Grid Community | AG Grid Enterprise | | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------------------ | | [Filtering](https://www.ag-grid.com/javascript-data-grid/filtering/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ (Advanced) | | [Sorting](https://www.ag-grid.com/javascript-data-grid/row-sorting/#sorting?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Cell Editing](https://www.ag-grid.com/javascript-data-grid/cell-editing/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [CSV Export](https://www.ag-grid.com/javascript-data-grid/csv-export/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Drag & Drop](https://www.ag-grid.com/javascript-data-grid/drag-and-drop/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Themes and Styling](https://www.ag-grid.com/javascript-data-grid/themes/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Selection](https://www.ag-grid.com/javascript-data-grid/row-selection/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Accessibility](https://www.ag-grid.com/javascript-data-grid/accessibility/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Infinite Scrolling](https://www.ag-grid.com/javascript-data-grid/infinite-scrolling/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Pagination](https://www.ag-grid.com/javascript-data-grid/row-pagination/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Server-Side Data](https://www.ag-grid.com/javascript-data-grid/server-side-model/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ (Advanced) | | [Custom Components](https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ | | [Integrated Charting](https://www.ag-grid.com/javascript-data-grid/integrated-charts/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Range Selection](https://www.ag-grid.com/javascript-data-grid/range-selection/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Row Grouping and Aggregation](https://www.ag-grid.com/javascript-data-grid/grouping/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Pivoting](https://www.ag-grid.com/javascript-data-grid/pivoting/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Excel Export](https://www.ag-grid.com/javascript-data-grid/excel-export/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Clipboard Operations](https://www.ag-grid.com/javascript-data-grid/clipboard/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Master/Detail](https://www.ag-grid.com/javascript-data-grid/master-detail/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Tree Data](https://www.ag-grid.com/javascript-data-grid/tree-data/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Column Menu](https://www.ag-grid.com/javascript-data-grid/column-menu/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Context Menu](https://www.ag-grid.com/javascript-data-grid/context-menu/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Tool Panels](https://www.ag-grid.com/javascript-data-grid/tool-panel/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ | | [Support](https://ag-grid.zendesk.com/hc/en-us) | ❌ | ✅ | > [!IMPORTANT] > Visit the [Pricing](https://www.ag-grid.com/license-pricing/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) 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](https://www.ag-grid.com/example/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) 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. Read on for vanilla JavaScript installation instructions, or refer to our framework-specific guides for React, 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

``` **2. Instantiating the JavaScript Data Grid** Create the Data Grid inside of your container div using `createGrid`. ```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 Columns** ```js // 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 the `ag-theme-quartz` CSS class to your Data Grid container div to apply the Data Grid's theme. ```html

``` > [!IMPORTANT] > For more information on building Data Grids with AG Grid, refer to our [Documentation](https://www.ag-grid.com/javascript-data-grid/getting-started/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github). ### Seed Projects We also provide [Seed Projects](https://github.com/ag-grid/ag-grid-seed) to help you get started with common configurations:

Environment	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](https://www.ag-grid.com/javascript-data-grid/components/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) that you can provide to the grid, including: - [Cell Component](https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): To customise the contents of a cell. - [Header Component](https://www.ag-grid.com/javascript-data-grid/column-headers/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): To customise the header of a column and column groups. - [Edit Component](https://www.ag-grid.com/javascript-data-grid/cell-editors/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): To customise the editing of a cell. - [Filter Component](https://www.ag-grid.com/javascript-data-grid/component-filter/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): For custom column filter that appears inside the column menu. - [Floating Filter](https://www.ag-grid.com/javascript-data-grid/component-floating-filter/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): For custom column floating filter that appears inside the column menu. - [Date Component](https://www.ag-grid.com/javascript-data-grid/filter-date/#custom-selection-component?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): To customise the date selection component in the date filter. - [Loading Component](https://www.ag-grid.com/javascript-data-grid/component-loading-cell-renderer/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): To customise the loading cell row when using Server Side Row Model. - [Overlay Component](https://www.ag-grid.com/javascript-data-grid/overlays/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): To customise loading and no rows overlay components. - [Status Bar Component](https://www.ag-grid.com/javascript-data-grid/status-bar/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): For custom status bar components. - [Tool Panel Component](https://www.ag-grid.com/javascript-data-grid/component-tool-panel/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): For custom tool panel components. - [Tooltip Component](https://www.ag-grid.com/javascript-data-grid/tooltips/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): For custom cell tooltip components. - [Menu Item Component](https://www.ag-grid.com/javascript-data-grid/component-menu-item/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): 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: ```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](https://ag-grid.com/javascript-data-grid/global-style/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), 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`: ```js

``` ### Custom Themes All AG Grid themes can be customised using [CSS variables](https://www.ag-grid.com/javascript-data-grid/global-style-customisation-variables/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), or you can create a new theme from scratch with the help of our [Theme Builder](https://www.ag-grid.com/theme-builder/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) or [Figma Design System](https://www.figma.com/community/file/1360600846643230092/ag-grid-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](https://www.ag-grid.com/community/tools-extensions/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) 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](https://www.ag-grid.com/community/showcase/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) 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](https://ag-grid.zendesk.com/hc/en-us), which is monitored by our engineering teams. ### Bug Reports If you have found a bug, please report it in this repository's [issues](https://github.com/ag-grid/ag-grid/issues) section.

### Questions Look for similar problems on [StackOverflow](https://stackoverflow.com/questions/tagged/ag-grid) 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](./LICENSE.txt) for more info.

AG Charts

If you've made it this far, you may be interested in our latest project: [AG Charts](https://charts.ag-grid.com?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) - The best JavaScript Charting library in the world. Initially built to power [Integrated Charts](https://www.ag-grid.com/javascript-data-grid/integrated-charts/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) 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:

	Stars	Issues	Version	Updated	Created
ag-grid-community	12,526	88	32.1.0	a month ago	6 years ago
ag-grid-enterprise	12,526	88	32.1.0	a month ago	9 years ago
datatables.net	49	1	2.1.6	11 days ago	9 years ago

ag-grid-community vs ag-grid-enterprise vs datatables.net

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past