Table component with sorting, pagination, and row/multi-row select for Angular2

Installation

``
npm install --save ng2-data-table
`

Usage example

An app reference to font-awesome is required if you set 'mfDefaultSorter' component input option 'mfShowSortableArrows' to true.
`html






`

app.module.ts
`typescript
import { NgModule } fro m "@angular/core";
import { BrowserModule} from "@angular/platform-browser";
import { HttpModule } from "@angular/http";
import { AppComponent } from "./app.component";
import { DataTableModule } from "ng2-data-table";

@NgModule({
imports: [BrowserModule, HttpModule, DataTableModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
`

app.component.ts
`typescript
import {Component} from '@angular/core';

@Component({
selector: 'app',
templateUrl: 'app.component.html'
})
export class AppComponent {
// data supplied to the data table
private data: any[];
// array of currently selected entities in the data table
selectedEntities: any[];

// function to handle data/entities selected/deselected in the table
public setSelectedEntities($event: any) {
this.selectedEntities = $event;
}
}
`

app.component.html
`html

	Name	Email	Age	City
	{{item.name}}	{{item.email}}	{{item.age}}	{{item.city | uppercase}}

`

API

$3

- selector: table[mfData]
- exportAs: mfDataTable
- inputs
- mfData: any[] - array of data to display on table. To prevent an item from being selected when clicking the Select All checkbox, add property 'mfIsSelectable: false' to the item.
- mfRowsOnPage: number - number of rows should be displayed on page (default: 1000)
- mfActivePage: number - page number should be displayed on init (default: 1)
- mfSaveRowsOnPage: boolean - pagination should be saved in local storage (default: false)
- outputs
- mfSelectedEntities: any[] - array of data in the table that is currently selected with checkboxes

$3

- selector: mfDefaultSorter
- inputs
- by: any - specify how to sort data (argument for lodash function _.sortBy )
- mfShowSortableArrows: boolean - set to 'true' if the column heading should show sort arrows when sortable but not yet sorted. Default is false.
- mfSortArrowStyleClass: string - space delimited list of class names to add to the sort arrows.
- mfStyleClass: string - space delimited list of class names to add to the anchor element.

$3

Displays buttons for changing current page and number of displayed rows using bootstrap template (css for bootstrap is required). If array length is smaller than current displayed rows on page then it doesn't show button for changing page. If array length is smaller than min value rowsOnPage then it doesn't show any buttons.

- selector: mfBootstrapPaginator
- inputs
- rowsOnPageSet: number - specify values for buttons to change number of displayed rows

$3

Displays a header checkbox for the table. Clicking the checkbox toggles select/deselect of all the items in the data table.

- selector: mfRowSelectorHead
- inputs:
- checkboxId: string - optionally specify the id used by the header checkbox's "id" attribute and the checkbox label's "for" attribute

$3

Displays a checkbox for the row. When checked, the entity in the row is added to the mfDataTable's mfSelectedEntities. The mfSelectedEntities then emits the array of entities currently checked in the mfDataTable.

- selector: mfRowSelector
- inputs:
- entity: any - the data entity in the current row
- checkboxId: string - optionally specify the id used by the checkbox's "id" attribute and the checkbox label's "for" attribute

$3

The Pagination preference is stored in the localStorage key ng2-data-table-pagination`. You may want to remove this key in a logout handler.