ngx-datatables

Angular DataTable library based on the popular jQuery DataTables

Installation

Using npm

$ npm install --save @spacebar/ngx-datatables

Dependencies

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save

npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

Optional Dependencies for DataTable Extensions

npm install datatables.net-responsive --save
npm install datatables.net-select --save

Configuration

using angular-cli.json

{
  "apps": [
    {
      ...
      "styles": [
        "../node_modules/datatables.net-dt/css/jquery.dataTables.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/datatables.net/js/jquery.dataTables.js"
      ],
      ...
    }
  ]
}

Usage

Import Module

import { NgModule } from '@angular/core';
import {DatatablesModule} from '@spacebar/ngx-datatables';

@NgModule({
  ...
  imports: [
    DatatablesModule
  ]
  ...
})
export class AppModule {
}

Zero Configuration

Using ngxDatatables Directive

@Component({
  template: `
    <table class="display" ngxDatatables>
      <thead>
      <tr>
        <th>Name</th>
        <th>Job Role</th>
      </tr>
      </thead>

      <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
      </tr>
      </tbody>
    </table>
  `
})
export class ZeroConfiguration {
}


@Component({
  template: `
      <table class="display" [data]="data"  ngxDatatables>
        <thead>
        <tr>
          <th>Name</th>
          <th>Job Role</th>
        </tr>
        </thead>
      </table>`
})
export class ZeroConfiguration {
  data: Object[]=[
    ['Tiger Nixon', 'System Architect'],
    ['Garrett Winters', 'Accountant'],
    ['Ashton Cox', 'Junior Technical Author'],
    ['Cedric Kelly', 'Senior Javascript Developer'],
    ['Airi Satou', 'Accountant', 'Tokyo']
  ];
}

Using ngx-datatables Component


@Component({
  template: `
   <ngx-datatables>
    <table class="display">
      <thead>
      <tr>
        <th>Name</th>
        <th>Job Role</th>
      </tr>
      </thead>

      <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
      </tr>
      </tbody>
    </table>
    </ngx-datatables>
  `
})
export class ZeroConfiguration {
}


@Component({
  template: `
    <ngx-datatables [data]="data">
      <table class="display">
        <thead>
        <tr>
          <th>Name</th>
          <th>Job Role</th>
        </tr>
        </thead>
      </table>
    </ngx-datatables>`
})
export class ZeroConfiguration {
  data: Object[]=[
    ['Tiger Nixon', 'System Architect'],
    ['Garrett Winters', 'Accountant'],
    ['Ashton Cox', 'Junior Technical Author'],
    ['Cedric Kelly', 'Senior Javascript Developer'],
    ['Airi Satou', 'Accountant', 'Tokyo']
  ];
}

Javascript sourced data

Javascript sourced data defaults to client-side option

<ngx-datatables [data]="data">
   <ngx-datatables-column header="Name"></ngx-datatables-column>
   <ngx-datatables-column header="Position"></ngx-datatables-column>
   <ngx-datatables-column header="Office"></ngx-datatables-column>
   <ngx-datatables-column header="Extension"></ngx-datatables-column>
   <ngx-datatables-column header="Start Date"></ngx-datatables-column>
   <ngx-datatables-column header="Salary"></ngx-datatables-column>
</ngx-datatables>

 
 export class SampleComponent {
  data: Object[];
  constructor() {
    this.data = [
      ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
      ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
      ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
      ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
      ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"]
    ];
  }
}

Ajax sourced data

Ajax sourced data defaults to server-side option. The ajax attribute accepts a string url, a function or jquery ajax option.

<ngx-datatables [ajax]="ajax">
   <ngx-datatables-column header="Name"></ngx-datatables-column>
   <ngx-datatables-column header="Position"></ngx-datatables-column>
   <ngx-datatables-column header="Office"></ngx-datatables-column>
   <ngx-datatables-column header="Extension"></ngx-datatables-column>
   <ngx-datatables-column header="Start Date"></ngx-datatables-column>
   <ngx-datatables-column header="Salary"></ngx-datatables-column>
</ngx-datatables>

 
 export class SampleComponent {
  ajax: DataTables.FunctionAjax;
  
  constructor() {
  const data = [
      ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
      ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
      ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
      ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
      ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"]
    ];
    //simulation of an ajax call
    this.ajax = (dtData: any, callback, settings) => {
      setTimeout(() => {
        callback({
          "draw": dtData.draw,
          "recordsTotal": 57,
          "recordsFiltered": 57,
          data: data
        });
      }, 200);
    };
  }
}

Using Options Settings

The options attribute accepts a DataTables.Settings type. DataTables.Settings has a columns property which is an array of column settings and it is equivalent to the ngx-datatables-column tag Note that the DataTables options columns settings takes precedency if defined.

 <ngx-datatables [options]="options">
    <ngx-datatables-column header="Name"></ngx-datatables-column>
    <ngx-datatables-column header="Position"></ngx-datatables-column>
    <ngx-datatables-column header="Office"></ngx-datatables-column>
    <ngx-datatables-column header="Extension"></ngx-datatables-column>
    <ngx-datatables-column header="Start Date"></ngx-datatables-column>
    <ngx-datatables-column header="Salary"></ngx-datatables-column>
 </ngx-datatables>


 export class SampleComponent {
  options: DataTables.Settings;
  
  constructor() {
  const data = [
      ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
      ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
      ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
      ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
      ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"]
    ];
    //simulation of an ajax call
    const ajax = (dtData: any, callback, settings) => {
      setTimeout(() => {
        callback({
          "draw": dtData.draw,
          "recordsTotal": 57,
          "recordsFiltered": 57,
          data: data
        });
      }, 200);
    };
  }

  this.options = {
      ajax: ajax,
      "columns": [
        {"data": "field"},
        {"data": "job"},
        {"data": "job"},
        {"data": "job"},
        {"data": "job"}
      ]
    }
}

Using Object Array as Datasource

Below shows multiple ways pass data to ngx-datatables. However note that only one of the three attributes is required, hence the options takes higher precedency. Order of priority is stated as...

options
ajax
data

 <ngx-datatables [data]="data" [ajax]=[ajax] [options]="options">
    <ngx-datatables-column header="Name" field="name"></ngx-datatables-column>
    <ngx-datatables-column header="Position" field="position"></ngx-datatables-column>
    <ngx-datatables-column header="Office" field="office"></ngx-datatables-column>
    <ngx-datatables-column header="Extension" field="extn"></ngx-datatables-column>
    <ngx-datatables-column header="Start Date" field="start_date"></ngx-datatables-column>
    <ngx-datatables-column header="Salary" field="salary"></ngx-datatables-column>
 </ngx-datatables>

 
 export class SampleComponent {
  data:Object[];
  ajax: DataTables.FunctionAjax;
  options: DataTables.Settings;
  
  constructor() {
  this.data = [
      {
        "id": "1", "name": "Tiger Nixon",
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25",
        "office": "Edinburgh",
        "extn": "5421"
      },
      {
        "id": "2",
        "name": "Garrett Winters",
        "position": "Accountant",
        "salary": "$170,750",
        "start_date": "2011/07/25",
        "office": "Tokyo",
        "extn": "8422"
      },
      {
        "id": "3",
        "name": "Ashton Cox",
        "position": "Junior Technical Author",
        "salary": "$86,000",
        "start_date": "2009/01/12",
        "office": "San Francisco",
        "extn": "1562"
      }
    ];

    //simulation of an ajax call
    this.ajax = (dtData: any, callback, settings) => {
      setTimeout(() => {
        callback({
          "draw": dtData.draw,
          "recordsTotal": 57,
          "recordsFiltered": 57,
          data: this.data
        });
      }, 200);
    };

    this.options = {
        ajax: this.ajax,
        responsive: true,
        searching: false,
        processing: true,
        pagingType: "full_numbers",
        lengthMenu: [20, 50, 100, 200, 500],
        order: [[0, 'desc']]
      }
  }
}

Using Row Selector

<ngx-datatables-column [rowSelector]="true" field="id">
</ngx-datatables-column>

Using Custom Column Content

<ngx-datatables-column header="Thumbnail" field="id">
 <ng-template ngxDatatablesTemplate="body">
    <img src="..."/>
 </ng-template>
</ngx-datatables-column>

Using Row Actions

 <ngx-datatables-column header="Actions" field="id">
      <ng-template ngxDatatablesTemplate="body" let-context>
        <div>
          <a (click)="_onEdit($event,context)" class="btn btn-success" href="javascript:"
             title="Edit">
            <i class="glyphicon glyphicon-pencil"></i>
          </a>
          <a (click)="_onDelete($event,context)" class="btn btn-danger" href="javascript:"
             title="Delete">
            <i class="glyphicon glyphicon-trash"></i>
          </a>
        </div>
      </ng-template>
</ngx-datatables-column>

Captions and Filters

Introducting the ngx-datatables-portlet which is

Know Issues

Go ahead give it a spin. At this point programs do what they do best... GO SOUTH

 Cannot find namespace 'DataTables'
 Cannot find name '$'

Check tsconfig.json

{
  ...
  "compilerOptions": {
     ... 
    "typeRoots": [
      "node_modules/@types"
    ],
    ...
  }
}

Check src/tsconfig.app.json Either add "datatables.net" and "jquery" to types or remove the types property completely to trigger automatic types detection. see

 {
   "extends": "../tsconfig.json",
   ...
     "types": [
       "node",
       "datatables.net",
       "jquery"
     ]
   },
  ...
 }

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
~~Submit a pull request~~

Name		Name	Last commit message	Last commit date
Latest commit History 30 Commits
docs		docs
e2e		e2e
src		src
.angular-cli.json		.angular-cli.json
.editorconfig		.editorconfig
.gitignore		.gitignore
.travis.yml		.travis.yml
CHANGLOG.md		CHANGLOG.md
LICENSE		LICENSE
README.md		README.md
karma.conf.js		karma.conf.js
ng-package.json		ng-package.json
ngx-datatables.iml		ngx-datatables.iml
package-lock.json		package-lock.json
package.json		package.json
protractor.conf.js		protractor.conf.js
tsconfig.json		tsconfig.json
tslint.json		tslint.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

ngx-datatables

Installation

Using npm

Dependencies

Optional Dependencies for DataTable Extensions

Configuration

using angular-cli.json

Usage

Import Module

Zero Configuration

Javascript sourced data

Ajax sourced data

Using Options Settings

Using Object Array as Datasource

Using Row Selector

Using Custom Column Content

Using Row Actions

Captions and Filters

Know Issues

Contributing

TODO

Work still in progress

License

About

Releases

Packages

Languages

License

oluwatobi47/ngx-datatables

Folders and files

Latest commit

History

Repository files navigation

ngx-datatables

Installation

Using npm

Dependencies

Optional Dependencies for DataTable Extensions

Configuration

using angular-cli.json

Usage

Import Module

Zero Configuration

Javascript sourced data

Ajax sourced data

Using Options Settings

Using Object Array as Datasource

Using Row Selector

Using Custom Column Content

Using Row Actions

Captions and Filters

Know Issues

Contributing

TODO

Work still in progress

License

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages