aag

angular-app-grid

Basic grid for angular 2

Showing:

Popularity

Downloads/wk

1

GitHub Stars

1

Maintenance

Last Commit

4yrs ago

Contributors

0

Package

Dependencies

4

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

angular grid [WIP]

Build Status codecov npm version devDependency Status GitHub issues GitHub stars GitHub license

Demo

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

Table of contents

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial