UNPKG

5.89 kBMarkdownView Raw
1![alt text](./github-banner.png "AG Grid")
2
3[![CDNJS](https://img.shields.io/cdnjs/v/ag-grid)](https://cdnjs.com/libraries/ag-grid) [![Github Stars](https://img.shields.io/github/stars/ag-grid/ag-grid?style=social)](https://github.com/ag-grid/ag-grid) [![Twitter](https://img.shields.io/twitter/follow/ag_grid?style=social)](https://twitter.com/ag_grid)
4
5| Module | Info |
6| --------------------|------------------:|
7| ag-grid-community | [![npm](https://img.shields.io/npm/dm/ag-grid-community)](https://www.npmjs.com/package/ag-grid-community) <br> [![Bundle Phobia](https://badgen.net/bundlephobia/minzip/ag-grid-community)](https://bundlephobia.com/result?p=ag-grid-community) <br> [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=ag-grid-community&metric=alert_status)](https://sonarcloud.io/dashboard?id=ag-grid-community) <br> |
8| ag-grid-enterprise | [![npm](https://img.shields.io/npm/dm/ag-grid-enterprise)](https://www.npmjs.com/package/ag-grid-enterprise) <br> [![Bundle Phobia](https://badgen.net/bundlephobia/minzip/ag-grid-enterprise)](https://bundlephobia.com/result?p=ag-grid-enterprise) <br> [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=ag-grid-enterprise&metric=alert_status)](https://sonarcloud.io/dashboard?id=ag-grid-enterprise) |
9
10# AG Grid
11
12AG Grid is a fully-featured and highly customizable JavaScript data grid.
13It delivers [outstanding performance](https://www.ag-grid.com/example.php?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), has no third-party dependencies and [integrates smoothly with all major JavaScript frameworks](https://www.ag-grid.com/javascript-grid/getting-started/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github).
14
15Here's how our grid looks with multiple filters and grouping enabled:
16
17![alt text](./github-grid-demo.jpg "AG Grid Demo")
18
19## Features
20
21In addition to the standard set of features you'd expect from any grid:
22
23* Column Interactions (resize, reorder, and pin columns)
24* Pagination
25* Sorting
26* Row Selection
27
28Here are some of the features that make AG Grid stand out:
29
30* Grouping / Aggregation *
31* Custom Filtering
32* In-place Cell Editing
33* Records Lazy Loading *
34* Server-Side Records Operations *
35* Live Stream Updates
36* Hierarchical Data Support & Tree View *
37* Customizable Appearance
38* Customizable Cell Contents
39* Excel-like Pivoting *
40* State Persistence
41* Keyboard Navigation
42* Data Export to CSV
43* Data Export to Excel *
44* Row Reordering
45* Copy / Paste
46* Column Spanning
47* Pinned Rows
48* Full Width Rows
49
50\* The features marked with an asterisk are available in the [Enterprise version](https://www.ag-grid.com/license-pricing.php?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) only.
51
52Check out the [developer documentation](https://www.ag-grid.com/documentation/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) for a complete list of features or visit [our official docs](https://www.ag-grid.com/features-overview/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) for tutorials and feature demos.
53
54## Looking for a framework specific solution?
55
56* [Get Started with Angular](https://www.ag-grid.com/angular-grid/getting-started/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github)
57* [Get Started with React](https://www.ag-grid.com/react-grid/getting-started/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github)
58* [Get Started with Vue](https://www.ag-grid.com/vue-grid/getting-started/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github)
59
60## Getting started
61
62### Install dependencies
63
64```sh
65$ npm install --save ag-grid-community
66```
67
68### Add a placeholder to HTML
69
70```html
71<div id="myGrid" style="height: 150px; width: 600px" class="ag-theme-alpine"></div>
72```
73
74### Import the grid and styles
75
76```js
77import { Grid } from 'ag-grid-community';
78
79import 'ag-grid-community/dist/styles/ag-grid.css';
80import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
81```
82
83### Set configuration
84
85```js
86var gridOptions = {
87 columnDefs: [
88 { headerName: 'Make', field: 'make' },
89 { headerName: 'Model', field: 'model' },
90 { headerName: 'Price', field: 'price' }
91 ],
92 rowData: [
93 { make: 'Toyota', model: 'Celica', price: 35000 },
94 { make: 'Ford', model: 'Mondeo', price: 32000 },
95 { make: 'Porsche', model: 'Boxster', price: 72000 }
96 ]
97};
98```
99
100### Initialise the grid
101
102```js
103var eGridDiv = document.querySelector('#myGrid');
104new Grid(eGridDiv, this.gridOptions);
105```
106
107For more information on how to integrate the grid into your project see [TypeScript - Building with Webpack 2](https://www.ag-grid.com/javascript-grid/building-typescript/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github).
108
109## Issue Reporting
110
111If you have found a bug, please report it in this repository's [issues](https://github.com/ag-grid/ag-grid/issues) section. If you're using the Enterprise version, please use the private ticketing system to do that. For more information on support please see our [dedicated support page](https://www.ag-grid.com/support.php?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github).
112
113## Asking Questions
114
115Look 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.
116
117## Contributing
118
119AG Grid is developed by a team of co-located developers in London. If you want to join the team check out our [jobs board](https://www.ag-grid.com/ag-grid-jobs-board/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) or send your application to info@ag-grid.com.
120
121## License
122
123This project is licensed under the MIT license. See the [LICENSE file](./LICENSE.txt) for more info.