Auto-Grid

Sample Angular App utilizing an Angular Module that provides automated grid features like sorting, filtering on array data.

Bootstrapped from angular.io quickstart

git clone https://github.com/angadsalaria/as-auto-grid  as-auto-grid
cd as-auto-grid
npm install
npm start

Atom packages:

• [atom-typescript] (https://github.com/TypeStrong/atom-typescript)
• [linter] (https://github.com/steelbrain/linter)
• linter-tslint
• [editorconfig] (https://github.com/sindresorhus/atom-editorconfig)
• [file-icons] (https://github.com/DanBrooker/file-icons)

Live Demo

Hosted on Heroku: Link

Usage

  <auto-grid [data]="gridData" #grid>
    <table class="table">
      <thead>
      <tr>
        <th auto-grid-enable="id" enable-sort>id</th>
        <th auto-grid-enable="fname" enable-sort enable-filter>First Name</th>
        <th auto-grid-enable="lname" enable-sort enable-filter>Last Name</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of ( gridData | gridPipe:grid.selections )">
        <td>{{data.id}}</td>
        <td>{{data.fname}}</td>
        <td>{{data.lname}}</td>
      </tr>
      </tbody>
    </table>
  </auto-grid>

where grid data is provided to the enclosing component:

gridData = [
        {id:1,    fname: 'Angad',    lname: 'Salaria'},
        {id:2,    fname: 'John',     lname: 'Doe'},
        {id:3,    fname: 'Sam',      lname: 'Adams'},
        {id:4,    fname: 'John',     lname: 'Adams'},
        {id:5,    fname: 'Edward',   lname: 'Miller'},
        {id:6,    fname: 'Lawrence', lname: 'Bross'}
      ];