1 | ![AG Grid HTML5 Grid trusted by the community, built for enterprise](https://github.com/ag-grid/ag-grid/blob/HEAD/github-banner.png)
|
2 |
|
3 | [![CDNJS](https://img.shields.io/cdnjs/v/ag-grid.svg)](https://cdnjs.com/libraries/ag-grid)
|
4 | [![npm](https://img.shields.io/npm/dm/@ag-grid-community/angular.svg)](https://www.npmjs.com/package/@ag-grid-community/angular)
|
5 | [![npm](https://img.shields.io/npm/dt/@ag-grid-community/angular.svg)](https://www.npmjs.com/package/@ag-grid-community/angular)
|
6 |
|
7 | # AG Grid Angular Component
|
8 |
|
9 | AG Grid is a fully-featured and highly customizable JavaScript data grid.
|
10 | It delivers [outstanding performance](https://www.ag-grid.com/example?utm_source=@ag-grid-community/angular-readme&utm_medium=repository&utm_campaign=github), has no third-party dependencies and [integrates smoothly with Angular](https://www.ag-grid.com/angular-data-grid/getting-started/?utm_source=@ag-grid-community/angular-readme&utm_medium=repository&utm_campaign=github).
|
11 |
|
12 | Here's how our grid looks with multiple filters and grouping enabled:
|
13 |
|
14 | ![Image of AG Grid showing filtering and grouping enabled.](./github-grid-demo.jpg "AG Grid demo")
|
15 |
|
16 | ## Supported Angular Versions
|
17 |
|
18 | See Angular [Version Compatibility](https://ag-grid.com/angular-data-grid/angular-compatibility/) for which versions of Angular are supported by each AG Grid version.
|
19 |
|
20 | ## Features
|
21 |
|
22 | In addition to the standard set of features you'd expect from any grid:
|
23 |
|
24 | * Column Interactions (resize, reorder, and pin columns)
|
25 | * Pagination
|
26 | * Sorting
|
27 | * Row Selection
|
28 |
|
29 | Here are some of the features that make AG Grid stand out:
|
30 |
|
31 | * Grouping / Aggregation *
|
32 | * Accessibility support
|
33 | * Custom Filtering
|
34 | * In-place Cell Editing
|
35 | * Records Lazy Loading *
|
36 | * Server-Side Records Operations *
|
37 | * Live Stream Updates
|
38 | * Hierarchical Data Support & Tree View *
|
39 | * Customizable Appearance
|
40 | * Customizable Cell Contents
|
41 | * State Persistence
|
42 | * Keyboard Navigation
|
43 | * Data Export to CSV
|
44 | * Data Export to Excel *
|
45 | * Excel-like Pivoting *
|
46 | * Row Reordering
|
47 | * Copy / Paste
|
48 | * Column Spanning
|
49 | * Pinned Rows
|
50 | * Full Width Rows
|
51 | * Integrated Charting
|
52 | * Sparklines
|
53 |
|
54 | \* The features marked with an asterisk are available in the [Enterprise version](https://www.ag-grid.com/license-pricing?utm_source=@ag-grid-community/angular-readme&utm_medium=repository&utm_campaign=github) only.
|
55 |
|
56 | Check out the [developer documentation](https://www.ag-grid.com/angular-data-grid/?utm_source=@ag-grid-community/angular-readme&utm_medium=repository&utm_campaign=github) for a complete list of features or visit [our official docs](https://www.ag-grid.com/angular-data-grid/grid-features/?utm_source=@ag-grid-community/angular-readme&utm_medium=repository&utm_campaign=github) for tutorials and feature demos.
|
57 |
|
58 | ## Getting started
|
59 |
|
60 | Use the setup instructions below or go through [a 5-minute-quickstart guide](https://www.ag-grid.com/angular-data-grid/getting-started/?utm_source=@ag-grid-community/angular-readme&utm_medium=repository&utm_campaign=github).
|
61 |
|
62 | ### Install dependencies
|
63 |
|
64 | ```sh
|
65 | $ npm install --save ag-grid-community @ag-grid-community/angular
|
66 | ```
|
67 |
|
68 | ### Import styles in `styles.css`
|
69 |
|
70 | ```scss
|
71 | @import "~@ag-grid-community/styles/ag-grid.css";
|
72 | @import "~@ag-grid-community/styles/ag-theme-quartz.css";
|
73 | ```
|
74 |
|
75 | ### Set the grid's configuration in a parent component
|
76 |
|
77 | ```ts
|
78 | import { AgGridAngular } from '@ag-grid-community/angular';
|
79 |
|
80 | @Component({
|
81 | selector: 'app-grid',
|
82 | standalone: true,
|
83 | imports: [AgGridAngular],
|
84 | template: ` ... `
|
85 | })
|
86 | export class AppComponent {
|
87 | title = 'app';
|
88 |
|
89 | columnDefs: ColDef[] = [
|
90 | { headerName: 'Make', field: 'make' },
|
91 | { headerName: 'Model', field: 'model' },
|
92 | { headerName: 'Price', field: 'price' }
|
93 | ];
|
94 |
|
95 | rowData = [
|
96 | { make: 'Toyota', model: 'Celica', price: 35000 },
|
97 | { make: 'Ford', model: 'Mondeo', price: 32000 },
|
98 | { make: 'Porsche', model: 'Boxster', price: 72000 }
|
99 | ];
|
100 | }
|
101 | ```
|
102 |
|
103 | ### Render the grid as the `ag-grid-angular` child component
|
104 |
|
105 | ```html
|
106 | <ag-grid-angular
|
107 | style="width: 500px; height: 500px;"
|
108 | class="ag-theme-quartz"
|
109 | [rowData]="rowData"
|
110 | [columnDefs]="columnDefs">
|
111 | </ag-grid-angular>
|
112 | ```
|
113 |
|
114 | ## Issue Reporting
|
115 |
|
116 | If 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](https://ag-grid.zendesk.com/) system to do that.
|
117 |
|
118 | ## Asking Questions
|
119 |
|
120 | 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.
|
121 |
|
122 | ## Contributing
|
123 |
|
124 | 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.
|
125 |
|
126 | ## License
|
127 |
|
128 | This project is licensed under the MIT license. See the [LICENSE file](./LICENSE.txt) for more info.
|