UNPKG

5.18 kBMarkdownView Raw
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
8ag-Grid
9------
10
11ag-Grid is a fully-featured and highly customizable JavaScript data grid.
12It 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
17Features
18--------------
19
20Besides 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
27Here 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
51Check 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
53Looking 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
61Usage 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
100For 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
102Issue Reporting
103----------
104If 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
107Asking Questions
108-------------
109
110Look 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
112Contributing
113------------
114ag-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
116License
117------------------
118This project is licensed under the MIT license. See the [LICENSE file](./LICENSE.txt) for more info.