https://github.com/magic-software-lab/ngx-magic-table
Simple, customizable and magic table for Angular 4.x.x
https://github.com/magic-software-lab/ngx-magic-table
angular angular2 angular4 datatable datatables library magic magic-software ngx-bootstrap table
Last synced: 11 months ago
JSON representation
Simple, customizable and magic table for Angular 4.x.x
- Host: GitHub
- URL: https://github.com/magic-software-lab/ngx-magic-table
- Owner: magic-software-lab
- License: mit
- Created: 2017-05-18T14:04:35.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2020-06-02T18:15:54.000Z (almost 6 years ago)
- Last Synced: 2025-04-13T00:35:02.543Z (12 months ago)
- Topics: angular, angular2, angular4, datatable, datatables, library, magic, magic-software, ngx-bootstrap, table
- Language: TypeScript
- Homepage: https://magic-software-lab.github.io/ngx-magic-table/
- Size: 2.46 MB
- Stars: 9
- Watchers: 6
- Forks: 7
- Open Issues: 60
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
- Roadmap: ROADMAP.MD
Awesome Lists containing this project
README
# 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.
[](https://github.com/mgechev/angular2-style-guide)
[](https://travis-ci.org/magic-software-lab/ngx-magic-table)
[](https://codecov.io/gh/magic-software-lab/ngx-magic-table)
[](https://greenkeeper.io/)
[](https://codecov.io/gh/magic-software-lab/ngx-magic-table)
[](https://david-dm.org/magic-software-lab/ngx-magic-table?type=dev)
[](https://david-dm.org/magic-software-lab/ngx-magic-table?type=peer)
## Live Demo
Live demo is available [HERE](https://magic-software-lab.github.io/ngx-magic-table/).
## Installation
### Dependencies
- [ngx-bootstrap](https://github.com/valor-software/ngx-bootstrap).
```bash
$ npm install ngx-bootstrap --save
```
You will need bootstrap styles (Bootstrap 3)
```
```
Or Bootstrap 4
```
o
```
To enable bootstrap 4 theme templates in ngx-bootstrap, please read
[here](https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/bootstrap4.md).
More info in ngx-bootstrap repository.
### Lib
To install this library, run:
```bash
$ npm install @magic-software/ngx-magic-table --save
```
## Using
In your Angular `AppModule`:
```typescript
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:
```xml
...
...
```
* Component (TS):
```javascript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public columns: Array;
public data: Array;
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](https://github.com/magic-software-lab/ngx-magic-table/blob/master/docs/getting-started/API.MD).
## Development
Implementing the [Angular Package Format v4.0](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#heading=h.k0mh3o8u5hx).
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](https://github.com/magic-software-lab/ngx-magic-table/blob/master/ROADMAP.MD).
## License
MIT © [Eron Rodrigues Alves](mailto:eronra@gmail.com)