1 |
|
2 | ![alt text](./github-banner.png "Logo Title Text 1")
|
3 |
|
4 | [![CDNJS](https://img.shields.io/cdnjs/v/ag-grid.svg)](https://cdnjs.com/libraries/ag-grid)
|
5 | [![npm](https://img.shields.io/npm/dm/ag-grid.svg)](https://www.npmjs.com/package/ag-grid)
|
6 | [![npm](https://img.shields.io/npm/dt/ag-grid.svg)](https://www.npmjs.com/package/ag-grid)
|
7 |
|
8 | ag-Grid
|
9 | ------
|
10 |
|
11 | ag-Grid is a fully-featured and highly customizable JavaScript data grid.
|
12 | It delivers [outstanding performance](https://www.ag-grid.com/example.php?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github#/performance/1), has no 3rd 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). Here's how our grid looks like with multiple filters and grouping enabled:
|
13 |
|
14 | ![alt text](./github-grid-demo.jpg "Logo Title Text 1")
|
15 |
|
16 |
|
17 | Features
|
18 | --------------
|
19 |
|
20 | Besides the standard set of features you'd expect from any grid:
|
21 |
|
22 | * Column Interactions (resize, reorder, and pin columns)
|
23 | * Pagination
|
24 | * Sorting
|
25 | * Row Selection
|
26 |
|
27 | Here are some of the features that make ag-Grid stand out:
|
28 |
|
29 | * Grouping / Aggregation*
|
30 | * Custom Filtering
|
31 | * In-place Cell Editing
|
32 | * Records Lazy Loading *
|
33 | * Server-Side Records Operations *
|
34 | * Live Stream Updates
|
35 | * Hierarchical Data Support & Tree View *
|
36 | * Customizable Appearance
|
37 | * Customizable Cell Contents
|
38 | * Excel-like Pivoting *
|
39 | * State Persistence
|
40 | * Keyboard navigation
|
41 | * Data Export to CSV
|
42 | * Data Export to Excel *
|
43 | * Row Reordering
|
44 | * Copy / Paste
|
45 | * Column Spanning
|
46 | * Pinned Rows
|
47 | * Full Width Rows
|
48 |
|
49 | \* 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.
|
50 |
|
51 | Check out [developers documentation](https://www.ag-grid.com/documentation-main/documentation.php?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.
|
52 |
|
53 | Looking for a framework specific solution?
|
54 | --------------
|
55 | * [Get Started with AngularJS](https://www.ag-grid.com/best-angularjs-data-grid?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github)
|
56 | * [Get Started with Angular](https://www.ag-grid.com/angular-getting-started?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github)
|
57 | * [Get Started with React](https://www.ag-grid.com/react-getting-started?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github)
|
58 | * [Get Started with Vue](https://www.ag-grid.com/vue-getting-started?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github)
|
59 | * [Get Started with WebComponents](https://www.ag-grid.com/best-web-component-data-grid?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github)
|
60 |
|
61 | Usage Overview
|
62 | --------------
|
63 |
|
64 | #### Install dependencies
|
65 |
|
66 | $ npm i --save ag-grid
|
67 |
|
68 | ### Add a placeholder to HTML
|
69 |
|
70 | <div id="myGrid" style="height: 150px;width: 600px" class="ag-theme-balham"></div>
|
71 |
|
72 |
|
73 | #### Import the grid and styles
|
74 |
|
75 | import {Grid} from "ag-grid/main";
|
76 |
|
77 | import "ag-grid/dist/styles/ag-grid.css";
|
78 | import "ag-grid/dist/styles/ag-theme-balham.css";
|
79 |
|
80 | ### Set configuration
|
81 |
|
82 | const gridOptions = {
|
83 | columnDefs: [
|
84 | {headerName: 'Make', field: 'make'},
|
85 | {headerName: 'Model', field: 'model'},
|
86 | {headerName: 'Price', field: 'price'}
|
87 | ],
|
88 | rowData: [
|
89 | {make: 'Toyota', model: 'Celica', price: 35000},
|
90 | {make: 'Ford', model: 'Mondeo', price: 32000},
|
91 | {make: 'Porsche', model: 'Boxter', price: 72000}
|
92 | ]
|
93 | };
|
94 |
|
95 | ### Initialize the grid
|
96 |
|
97 | let eGridDiv = document.querySelector('#myGrid');
|
98 | new Grid(eGridDiv, this.gridOptions);
|
99 |
|
100 | For more information on how to integrate the grid into your project see [TypeScript - Building with Webpack 2](https://www.ag-grid.com/ag-grid-typescript-webpack-2?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github).
|
101 |
|
102 | Issue Reporting
|
103 | ----------
|
104 | If you have found a bug, please report them at this repository `issues` section. If you're using Enterprise version please use the private ticketing system to do that. For more information on support check out our [dedicated page](https://www.ag-grid.com/support.php?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github).
|
105 |
|
106 |
|
107 | Asking Questions
|
108 | -------------
|
109 |
|
110 | 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. Do not use GitHub issues to ask questions.
|
111 |
|
112 | Contributing
|
113 | ------------
|
114 | ag-Grid is developed by a team of co-located developers in London. If you want to join the team check out our [jobs listing](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.
|
115 |
|
116 | License
|
117 | ------------------
|
118 | This project is licensed under the MIT license. See the [LICENSE file](./LICENSE.txt) for more info.
|