angular grid [WIP]

Demo

https://alanmacgowan.github.io/angular-grid/

Table of contents

• About
• Installation
• Documentation
• Development
• License

About

basic grid for angular 2

Installation

Install through npm:

npm install --save angular-app-grid

Then include in your apps module:

import { NgModule } from '@angular/core';
import { AngularGridModule } from 'angular-app-grid';

@NgModule({
  imports: [
    AngularGridModule.forRoot()
  ]
})
export class MyModule {}

Finally use in one of your apps components:

import { Component } from '@angular/core';

@Component({
  template: `
    <app-grid title="Books" 
              [rows]="rows" 
              [columns]="columns"               
              [totalItems]="totalRecords" 
              [pageSize]="pageSize" 
              (onItemEdit)="itemEdit($event)" 
              (onItemDelete)="itemDelete($event)"
              (onSort)="sort($event)" 
              (onPageChanged)="pageChanged($event)">
    </app-grid>`
})
export class MyComponent {
  totalRecords: number = 0;
  pageSize: number = 5;
  currentPage: number = 1;
  currentSort: string = '_id';
  currentSortOrder: number = 1;
  columns: IGridColumn[] = [];
  rows: IGridRow[] = [];

  constructor() {}

  pageChanged(page: number) {
    this.currentPage = page;

    //Call get data
  }

  getBData(page: number, sort: string, order?: number) {
    this.rows = [];

    //get data
  }

  sort(sort: ISortResult) {
    this.currentSort = sort.column;
    this.currentSortOrder = sort.order;

   //Call get data
  }

  ngOnInit() {
    //Call get data

    //define grid columns
    this.columns = [
      { title: 'Action', name: '_id', type: 'ACTIONS' },
      ...
    ];
  }

  itemDelete(entity: IEntity) {
    //implement delete functionality
  }

  itemEdit(entity: IEntity) {
    //implement edit functionality
  }

}

You may also find it useful to view the demo source.

Usage without a module bundler

<script src="node_modules/angular-grid/bundles/angular-grid.umd.js"></script>
<script>
    // everything is exported angularGrid namespace
</script>

Documentation

All documentation is auto-generated from the source via compodoc and can be viewed here: https://alanmacgowan.github.io/angular-grid/docs/

Development

Prepare your environment

• Install Node.js and NPM
• Install local dev dependencies: npm install while current directory is this repo

Development server

Run npm start to start a development server on port 8000 with auto reload + tests.

Testing

Run npm test to run tests once or npm run test:watch to continually run tests.

Release

• Bump the version in package.json (once the module hits 1.0 this will become automatic)

npm run release

License

MIT