Magic Table

Angular 6 smart DataGrid based on bootstrap and font-awesome

Features

Server-side or client-side sorting
Server-side or client-side pagination
Arrange columns placement by dragging columns
Headers custom templates
Cells custom templates
Grouping headers
Grouping rows
Filtering rows (under development)
Custom Styling
Resize column
Visible column
List columns
Save table style
Load table style
Auto size table
Row class renderer
Add pagination
Reset table style
Show message
Set Double Click

Preview

Demo

Try the Demo

Getting started

Install package:

npm i ngx-magic-table

Add NgxMagicTableModule inside your AppModule

import { NgxMagicTableModule } from 'ngx-magic-table';


@NgModule({
  ...
  imports: [
    ...

    NgxMagicTableModule, // import NgxMagicTableModule

    ...
  ],
  ...
})

Make sure you have included bootstrap and font-awesome styles

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/font-awesome/css/font-awesome.css"
],

Use <ngx-magic-table>

<ngx-magic-table 
  [isRTL]="false" 
  [rows]="data" 
  [customSort]="false" 
  sort="Phone" 
  sortDirection="0" 
  [paginated]="true"
  [pageSize]="3" 
  [customPaginate]="false" 
  [currentPage]="2" 
  [pageSizes]="[3, 5, 20, 50, 100]" 
  (pageSizesChange)="pageSizesChange($event)"
  (pageChange)="pageChange($event)" 
  tcellClass="text-center" 
  trowClass="table-primary" 
  (selectedChange)="selectChanged($event)"
  selectedClass="table-secondary" 
  (columnsArrangeChange)="columnsArrangeChange($event)"
  [loadTable]="table" 
  (saveTable)="saveTable($event)"
  buttonListColumnStyle="btn btn-outline-info" 
  buttonSaveTableStyle="btn btn-outline-info"
  [autoSize] = "true"
  [rowClassRenderer]="getRowClass"
  (onResetTable)="onResetTable($event)"
  (doubleClick)= "doubleClick($event)">
 
<ngx-column-template 

      name="Numbers" 
      index="1"
      cellWidth="600"
      [sortable]="false">

      <ng-template 
        let-cell="cell" 
        let-direction="direction" 
        name="header">
        {{cell.name}} 
      </ng-template>

    </ngx-column-template>

    <ngx-column-template
      name="Phone"
      parent="Numbers"
      index="2"
      cellWidth="150"
      [visible]="true">

      <ng-template 
        let-cell="cell" 
        let-direction="direction" 
        name="header">
        {{cell.name}}
        <i class="fa" [setDirection]="direction"></i>
      </ng-template>

      <ng-template 
        let-row="row" 
        let-cell="cell" 
        name="body">
        {{row.Phone}}
      </ng-template>

    </ngx-column-template>

    <ngx-column-template 
      name="Id" 
      parent="Numbers" 
      index="1" 
      [draggable]="false" 
      cellWidth="150" 
      [visible]="true">
      <ng-template 
        let-row="row" 
        let-cell="cell" 
        name="body">
        {{row.Id}}
      </ng-template>

      <ng-template 
        let-cell="cell" 
        let-direction="direction" 
        name="header">
        {{cell.name}}
        <i class="fa" [setDirection]="direction"></i>
      </ng-template>

    </ngx-column-template>

    <ngx-column-template 
      name="Type" 
      parent="Numbers" 
      collection="Type" 
      index="1" 
      [draggable]="false" 
      cellWidth="150" 
      [visible]="true">

      <ng-template 
        let-row="row" 
        let-cell="cell" 
        let-index="index" 
        name="body">
        {{row.Type[index]}}
      </ng-template>

      <ng-template 
        let-cell="cell" 
        let-direction="direction" 
        name="header">
        {{cell.name}}
        <i class="fa" [setDirection]="direction"></i>
      </ng-template>

    </ngx-column-template>

    <ngx-column-template 
      name="Size" 
      parent="Numbers" 
      collection="Size"
      index="1" 
      [draggable]="false" 
      cellWidth="150" 
      [visible]="true">

      <ng-template 
        let-row="row" 
        let-cell="cell" 
        let-index="index" 
        name="body">
        {{row.Size[index]}}
      </ng-template>

      <ng-template 
        let-cell="cell" 
        let-direction="direction" 
        name="header">
        {{cell.name}}
        <i class="fa" [setDirection]="direction"></i>
      </ng-template>

    </ngx-column-template>

    <ngx-column-template 
      name="Name" 
      index="1"
      [draggable]="false" 
      cellWidth="200" 
      [visible]="true">

      <ng-template 
        let-row="row" 
        let-cell="cell" 
        name="body">
        {{row.Name}}
      </ng-template>

      <ng-template 
        let-cell="cell"  
        let-direction="direction" 
        name="header">
        {{cell.name}}
        <i class="fa" [setDirection]="direction"></i>
      </ng-template>

    </ngx-column-template>
 
  </ngx-magic-table>

Next up

Detailed documentation will be ready soon

Issues

Github Issues

Contribution

Contribution is welcomed warmly ( specially in writing documentation)

License

MIT

noushmac/ngx-magic-table