Skip to content

Angular 6 smart DataGrid based on bootstrap and font-awesome, provides sort, arrange columns, custom header, cell templates and grouping columns

License

Notifications You must be signed in to change notification settings

noushmac/ngx-magic-table

Repository files navigation

Magic Table

Build Status Maintainability npm version npm total downloads npm monthly downloads

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

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