ng2-md-datatable

Angular 2 with Material 2 is awesome, but it's still lacking a DataTable component (as of November 2016).

As I urgently needed one for a project, I decided to make my own DataTable component and share it on GitHub. This may be useful for you (or not).

Update 08/2017: You may want to use the official Material DataTable here. But if this one still speaks more to you, no problem I'll keep it up to date with the latest Angular 5+/Material5+ versions.

Features

• Pagination Component
• Column sorting (ascending/descending)
• Row selection (using checkboxes)
• You can use it with @ngrx/store (that's how I use it)

Working with

• Angular 5
• Material 5

Installation

To use ng2-md-datatable in your project install it via npm:

npm install --save ng2-md-datatable

Then include it in your application's main module:

import { MatDataTableModule } from 'ng2-md-datatable';
 
@NgModule({
  imports: [
    ...
    MatDataTableModule,
    ...

Usage

Your datatable would look like this in a Angular 2 template:

<ng2-md-datatable selectable="true">
  <ng2-md-datatable-header>
    <ng2-md-datatable-column sortableValue="article">Article</ng2-md-datatable-column>
    <ng2-md-datatable-column sortableValue="product">Product</ng2-md-datatable-column>
    <ng2-md-datatable-column sortableValue="quantity" numeric>Quantity</ng2-md-datatable-column>
  </ng2-md-datatable-header>
  <tbody>
    <ng2-md-datatable-row selectableValue="K003-0350-001">
      <td>K003-0350-001</td>
      <td>Yirgacheffe Kaffee, 350g ganze Bohne</td>
      <td class="numeric">232</td>
    </ng2-md-datatable-row>
    <ng2-md-datatable-row selectableValue="K003-0350-002">
      <td>K003-0350-002</td>
      <td>Yirgacheffe Kaffee, 350g gemahlen</td>
      <td class="numeric">124</td>
    </ng2-md-datatable-row>
    <ng2-md-datatable-row selectableValue="K003-0350-003">
      <td>K003-0350-003</td>
      <td>Yirgacheffe Kaffee, 1kg ganze Bohne</td>
      <td class="numeric">464</td>
    </ng2-md-datatable-row>
    <ng2-md-datatable-row selectableValue="K003-0350-004">
      <td>K003-0350-003</td>
      <td>Yirgacheffe Kaffee, 1kg gemahlen</td>
      <td class="numeric">243</td>
    </ng2-md-datatable-row>
  </tbody>
</ng2-md-datatable>

Here's the pagination component:

<ng2-md-datatable-pagination
  [currentPage]="1"
  [itemsPerPage]="5"
  [itemsCount]="700"
  [itemsPerPageChoices]="[5,10,20,50]"
  [itemsPerPageFirstChoice]="10"

  [needShowFirstArrow]="true"
  [needShowLastArrow]="true"
  ofText="of"
  rowsPerPageText="Rows per page:"
  >
</ng2-md-datatable-pagination>

As you might have noticed, these two components are not initially linked, it is up to you to bind them to your datasource and react to events they fire.

Events

You should subscribe to these event emitters:

src/components/datatable.component.ts

@Output() selectionChange: EventEmitter<DatatableSelectionEvent>;
@Output() sortChange: EventEmitter<DatatableSortEvent>;

src/components/datatable-pagination.component.ts

@Output() paginationChange: EventEmitter<DatatablePaginationEvent>;

Please read src/common/events/*.ts for details about the payload of each event.

Theming

To add ng2-md-datatable to your Material 2 theming file:

@import '~ng2-md-datatable/datatable-theme';
...
@include mat-datatable-theme($theme);

This is based on the current guide for theming components with Material RC.

Live Demo

To see ng2-md-datatable in action, head to /demo-app and:

• you need Angular-CLI v1.0 or later (npm install -g @angular/cli)
• from the demo-app folder, run npm install
• then start ng serve or ng serve --aot

Don't mind about the use of Observables here (and about the Shuffle button), I just wanted to test if the datatable behaved correctly with Angular async rendering.

Plunkr

Or you can open this Plunkr: https://plnkr.co/edit/QQgr9b9HZLGjN1iDJqiy?p=preview

It's pretty much the same code than then demo-app.