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

To quickly include sample demo in your application, just import TableComponent

import { TableComponent } from 'angular2-datagrid/src/app/demo';

then include it in your template

<table-demo></table-demo>

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.

   <section>
       <h1>Table Demo</h1>
       <div class="row">
           <div class="col-xs-12">
               <div class="form-inline">
                   <div class="form-group">
                       <label class="" for="Search">Search</label>
                       <input type="text" name="Search" class="form-control" title="Search" 
                           [(ngModel)]="table.searchValue.username"/>
                   </div>
                   <div class="form-group">
                       <button class="btn btn-success"
                           (click)="addRecordPlugin()">Add record</button>
                   </div>
                   <div class="form-group">
                       <button class="btn btn-warning" 
                           (click)="removeAllEvenIdPlugin()">Remove all even Id</button>
                   </div>
                   <div class="form-group pull-right">
                       <label class="" for="PageSize">Page Size</label>
                       <select class="form-control" name="pageSize" 
                           [(ngModel)]="table.pageSize">
                           <option [ngValue]="5">5</option>
                           <option [ngValue]="10">10</option>
                           <option [ngValue]="15">15</option>
                       </select>
                   </div>
               </div>
       </div>
       </div>
   
       <div class="row">
           <div class="col-xs-12">
               <table class="table table-condensed">
                   <thead>
                       <tr>
                           <th>
                           <div class="checkbox">
                               <label>
                                   <input type="checkbox"
                                       (change)="changedActiveStatus($event)"
                                       [checked]="true">
                                   Active
                               </label>
                           </div>
                           </th>
                           <th>Username</th>
                           <th>Name</th>
                           <th>Action</th>
                       </tr>
                   </thead>
                   <tbody>
                       <tr *ngIf="!table.totalFilteredRows">
                           <td colspan="4" class="text-center">No records found.</td>
                       </tr>
                       <tr *ngFor="let user of table.itemsOnCurrentPage">
                           <td>
                               <div class="checkbox">
                                   <label>
                                   <input type="checkbox" 
                                       [(ngModel)]="user.active">
                               </label>
                               </div>
                           </td>
                           <td>{{user.username}}</td>
                           <td>{{user.name}}</td>
                           <td>
                               <button class="btn btn-danger"
                                   (click)="removeRecordPlugin(user)">Delete</button>
                           </td>
                       </tr>
                   </tbody>
               </table>
           </div>
       </div>
   
       <pagination [maxPageIndex]="table.maxPageIndex" 
                   (pageNumberChanged)="table.currentPageIndex = $event">
       </pagination>
   
       <div class="row">
           <div class="col-xs-12">            
               <pre>
                   <h3>Recently deleted users</h3>{{recentlyRemoveUsers | json}}
               </pre>
           </div>
       </div>
   </section>

3. Instantiate ng2-datagrid class.

   import { NgDataGridModel } from 'angular2-datagrid';
   
   this.table = new NgDataGridModel<User>([]);

4. demo

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

License

MIT