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


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
960Jun 2, 2020May 18, 2017Minified + gzip package size for @magic-software/ngx-magic-table in KB



Magic Software

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

Its Magic


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

Angular 2 Style Guide Build Status codecov Greenkeeper badge

dependencies devDependencies Status peerDependencies Status

Live Demo

Live demo is available HERE.



$ 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.


To install this library, run:

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


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';

  declarations: [
  imports: [
    // Dependencies
    // Module
  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';

  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() {

  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.


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


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


MIT © Eron Rodrigues Alves

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.