0.1.16 • Published 7 years ago
@magic-software/ngx-magic-table v0.1.16
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
$ 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 appnpm run test
to test in watch mode, ornpm run test:once
to only run oncenpm run build
to build the librarynpm run lint
to lintnpm run clean
to cleannpm run integration
to run the integration e2e testsnpm install ./relative/path/to/lib
afternpm run build
to test locally in another app
Roadmap
Do you want to know our feature roadmap? Check here.
License
MIT © Eron Rodrigues Alves