Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jmvtrinidad/angular2-datagrid
Datagrid for angular 2
https://github.com/jmvtrinidad/angular2-datagrid
angular2 angular2-datagrid datagrid javascript
Last synced: about 1 month ago
JSON representation
Datagrid for angular 2
- Host: GitHub
- URL: https://github.com/jmvtrinidad/angular2-datagrid
- Owner: jmvtrinidad
- License: mit
- Created: 2016-08-01T05:10:15.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-28T03:47:28.000Z (over 6 years ago)
- Last Synced: 2024-10-19T11:16:04.089Z (about 2 months ago)
- Topics: angular2, angular2-datagrid, datagrid, javascript
- Language: JavaScript
- Size: 4.92 MB
- Stars: 9
- Watchers: 1
- Forks: 10
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - angular2-datagrid - Datagrid for angular 2. (Uncategorized / Uncategorized)
README
# angular2-datagrid
Angular2-datagrid provides functionality to create tables, image grid, etc.
It allows developer to create desired template.
# Features
- Template-Driven
- In-memory processing
# Demo
See [demo](https://jmvtrinidad.github.io/angular2-datagrid/) here.
To quickly include sample demo in your application, just import TableComponent
```TypeScript
import { TableComponent } from 'angular2-datagrid/src/app/demo';
```
then include it in your template
```html
```
Make sure your app inlcudes bootstrap css for styling.
You can make your own template based on css framework that you prefer.
** NOTE: bootstrap.css is not required, however in order to render it neatly you need to include it for demo purposes.
##Getting started
1. Install package.
```
npm i angular2-datagrid --save
```
2. Specify your template. This is sample template to view data on [table](https://github.com/jmvtrinidad/angular2-datagrid/blob/master/src/app/demo/inMemory.component.html).
```html
Table Demo
Search
Add record
Remove all even Id
Page Size
5
10
15
Active
Username
Name
Action
No records found.
{{user.username}}
{{user.name}}
Delete
Recently deleted users
{{recentlyRemoveUsers | json}}
```
3. Instantiate ng2-datagrid [class](https://github.com/jmvtrinidad/angular2-datagrid/blob/master/src/app/demo/inMemory.component.ts).
```TypeScript
import { NgDataGridModel } from 'angular2-datagrid';
this.table = new NgDataGridModel([]);
```
5. [demo](http://jmvtrinidad.github.io/angular2-datagrid/)
# Documentation
R is read only.
:-) as it is.
- `searchValue: T` - any object to be used for searching `items`.
- `currentPageIndex` - :-).
- `pageSize: number` - max record count for `itemsOnCurrentPage`.
- `totalRows: number, R` - record count for `items`.
- `totalFilteredRows: number, R` - record count for `itemsFiltered`.
- `maxPageIndex: number, R` - calculated based on `totalFilteredRows / pageSize`. See sample usage [here](https://github.com/jmvtrinidad/angular2-datagrid/blob/master/src/app/datagrid/pagination.component.ts)
- `items: T[]` - all records. Manipulate records here
- `itemsFiltered: T[], R` - :-).
- `itemsOnCurrentPage, R` - normally this property is used to displayed contents.
# angular2-webpack-starter
Based on [webpack-starter](https://github.com/AngularClass/angular2-webpack-starter).
# License
[MIT](/LICENSE)