angular2-datagrid

Angular2-datagrid provides functionality to create tables, image grid, etc. It allows developer to create desired template.

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