Skip to content

Commit 262b880

Browse files
author
Dilshan Liyanage
committed
0.7.2
1 parent 951b915 commit 262b880

32 files changed

+7950
-8607
lines changed

README.md

Lines changed: 41 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,54 @@
1-
# Grid Example
1+
# Advanced Angular Material Data Grid System
2+
#### Inspired by Kendo UI Grid
23

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.
45

5-
## Development server
6+
![Sample UI](https://angular-grid.herokuapp.com/assets/grid_background.png)
67

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
815

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).
1017

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.
1219

13-
## Build
1420

15-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
21+
<hr />
1622

17-
## Running unit tests
23+
#### Installation
1824

19-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
25+
1. Install Angular Material
2026

21-
## Running end-to-end tests
27+
- `ng add @angular/material`
2228

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
2430

25-
## Further help
31+
- `npm i [email protected]`\
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+
&nbsp;&nbsp;&nbsp;&nbsp;[headings]="headings"<br>
47+
&nbsp;&nbsp;&nbsp;&nbsp;[url]="url"<br>
48+
&nbsp;&nbsp;&nbsp;&nbsp;[serverSidePagination]="true"<br>
49+
&nbsp;&nbsp;&nbsp;&nbsp;(responseEmit)="responseReceived($event)"><br>
50+
</amdg-grid></code>
51+
52+
###### TypeScript
53+
[Check here](https://angular-grid.herokuapp.com/gettingStarted/installation)
2654

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.

angular.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
{
4343
"type": "initial",
4444
"maximumWarning": "500kb",
45-
"maximumError": "1.3mb"
45+
"maximumError": "1.35mb"
4646
},
4747
{
4848
"type": "anyComponentStyle",
@@ -138,6 +138,5 @@
138138
}
139139
}
140140
}
141-
},
142-
"defaultProject": "grid-example"
141+
}
143142
}

0 commit comments

Comments
 (0)