ngx-magic-table

Magic Software

Easy to use table for Angular(4.x.x), it's magic!!

Warning

This library is in alpha testing, there are some issues to fix and new features will be implemented.

Live Demo

Live demo is available HERE.

Installation

Dependencies

• ngx-bootstrap.

$ npm install ngx-bootstrap --save 

You will need bootstrap styles (Bootstrap 3)

<!-- index.html -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

Or Bootstrap 4

<!--- index.html -->o
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

To enable bootstrap 4 theme templates in ngx-bootstrap, please read here.

More info in ngx-bootstrap repository.

Lib

To install this library, run:

$ npm install @magic-software/ngx-magic-table --save

Using

In your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Imports
import { BsDropdownModule, PaginationModule } from 'ngx-bootstrap';
import { NgxMagicTableModule } from '@magic-software/ngx-magic-table';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
	
	// Dependencies
	BsDropdownModule.forRoot(),
	PaginationModule.forRoot(),
    
    // Module
    NgxMagicTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once is imported, you can use its components in your Angular application:

• HTML Template:

...

<ngx-magic-table [columns]="columns" [data]="data" [tableOptions]="tableOptions"> </ngx-magic-table>

...

• Component (TS):

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public columns: Array<any>;
  public data: Array<any>;
  public tableOptions: {

  };

  constructor() {
    this.prepareMagic();
  }

  private prepareMagic() {
  	  this.columns = [
	      {
	        field: 'id',
	        title: 'ID'
	      },
	      {
	        field: 'description',
	        title: 'Description',
	        sort: 'asc'
	      },
	      {
	        field: 'createdAt',
	        title: 'Created at',
	        format: 'dd/MM/yyyy HH:mm',
	        sort: 'desc'
	      },
	      {
	        field: 'amount',
	        title: 'Amount',
	        format: {
	          digits: '1.2-2'
	        }
	      },
	      {
	        field: 'price',
	        title: 'Price',
	        format: {
	          currencyCode: 'BRL',
	          symbolDisplay: true,
	          digits: '1.2-2'
	        }
	      },
	      {
	        title: 'Simple',
	        actions: {
	          type: 'simple',
	          buttons: [
	            {
	              title: 'Edit',
	              styleClass: 'btn btn-primary',
	              styleIcon: 'fa fa-pencil',
	              action: 'edit'
	            }
	          ]
	        }
	      }
      ];
      
      this.data = [
	      {
	        id: 1,
	        description: 'Potato',
	        createdAt: new Date('2011-10-10T14:47:00'),
	        amount: 10,
	        price: 4.20
	      },
	      {
	        id: 2,
	        description: 'Pineapple apple pen',
	        createdAt: new Date(),
	        amount: 150,
	        price: 4.50
	      }
      ];
      
      this.tableOptions = {
	      pagination: {
	        page: 1,
	        itemsPerPage: 5,
	        maxSize: 5,
	        numPages: 1
	      },
	      api: {
	        edit: this.onEdit
	      }
	    };
	 }
	 
	 private onEdit(data: any) {
	    console.log('Editing:', data);
	 }

}

Utilisation - API

Do you want to know more? Check the docs for API here.

Development

Implementing the Angular Package Format v4.0.

Common tasks are present as npm scripts:

• npm start to run a live-reload server with the demo app
• npm run test to test in watch mode, or npm run test:once to only run once
• npm run build to build the library
• npm run lint to lint
• npm run clean to clean
• npm run integration to run the integration e2e tests
• npm install ./relative/path/to/lib after npm run build to test locally in another app

Roadmap

Do you want to know our feature roadmap? Check here.

License

MIT © Eron Rodrigues Alves