|
1 | | -# Grid Example |
| 1 | +# Advanced Angular Material Data Grid System |
| 2 | +#### Inspired by Kendo UI Grid |
2 | 3 |
|
3 | | -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.4. |
| 4 | +This is an advanced data grid which is free to use with features and customizability only available on paid data grids. |
4 | 5 |
|
5 | | -## Development server |
| 6 | + |
6 | 7 |
|
7 | | -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. |
| 8 | +#### Features |
| 9 | +- Easy to integrate server-side pagination (Tested with very large data sets) |
| 10 | +- Built in virtual scrolling |
| 11 | +- Advanced multi-filtering features |
| 12 | +- Customizable theming |
| 13 | +- Optional columns with re-ordering |
| 14 | +- Master Detail Grid |
8 | 15 |
|
9 | | -## Code scaffolding |
| 16 | +The initial purpose of creating this data grid was to make it easy for developers to easily create highly advanced data grids with server-side pagination along with multiple filters and sorting with minimum effort and time. (Client Side Pagination is also present.) In order to make this possible a tight integration between the back-end data-source and the front-end component should be agreed upon. This gives the ability to stay focused on advanced functionality and the creation of data grids with only configurations while staying opinionated. Moreover, the solutions provided by reputed vendors were expensive which makes open-source software more attractive to many clients. This product is 100% open source. Check [Repository here](https://github.com/dillyboy/angular_material_data_grid). |
10 | 17 |
|
11 | | -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. |
| 18 | +Refer to the [Documentation](https://angular-grid.herokuapp.com/) page. |
12 | 19 |
|
13 | | -## Build |
14 | 20 |
|
15 | | -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. |
| 21 | +<hr /> |
16 | 22 |
|
17 | | -## Running unit tests |
| 23 | +#### Installation |
18 | 24 |
|
19 | | -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). |
| 25 | +1. Install Angular Material |
20 | 26 |
|
21 | | -## Running end-to-end tests |
| 27 | + - `ng add @angular/material` |
22 | 28 |
|
23 | | -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. |
| 29 | +2. Install Angular Material Data Grid |
24 | 30 |
|
25 | | -## Further help |
| 31 | + |
| 32 | + \ |
| 33 | + or if your project uses Angular 14.0.0 and above |
| 34 | + |
| 35 | + - `npm i angular-material-data-grid` |
| 36 | + |
| 37 | +3. Import Module |
| 38 | + |
| 39 | + - `import { AngularMaterialDataGridModule } from 'angular-material-data-grid';` |
| 40 | + |
| 41 | + - `imports: [ .., AngularMaterialDataGridModule]` |
| 42 | + |
| 43 | +4. Usage (Basic) |
| 44 | + ###### HTML |
| 45 | + - <code><amdg-grid <br> |
| 46 | + [headings]="headings"<br> |
| 47 | + [url]="url"<br> |
| 48 | + [serverSidePagination]="true"<br> |
| 49 | + (responseEmit)="responseReceived($event)"><br> |
| 50 | + </amdg-grid></code> |
| 51 | + |
| 52 | + ###### TypeScript |
| 53 | + [Check here](https://angular-grid.herokuapp.com/gettingStarted/installation) |
26 | 54 |
|
27 | | -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. |
|
0 commit comments