mariuszfoltak / angular2-datatable Goto Github PK

View Code? Open in Web Editor NEW

202.0 18.0 181.0 508 KB

DataTable - Simple table component with sorting and pagination for Angular2

JavaScript 23.79% TypeScript 76.03% Shell 0.17%

angular2-datatable's Introduction

Table component with sorting and pagination for Angular2

Demo

Check live demo in plunker

Installation

npm i -S angular2-datatable

Usage example

AppModule.ts

import {NgModule} from "@angular/core";
...
import {DataTableModule} from "angular2-datatable";

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

}

AppComponent.html

<table class="table table-striped" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="5">
    <thead>
    <tr>
        <th style="width: 20%">
            <mfDefaultSorter by="name">Name</mfDefaultSorter>
        </th>
        <th style="width: 50%">
            <mfDefaultSorter by="email">Email</mfDefaultSorter>
        </th>
        <th style="width: 10%">
            <mfDefaultSorter by="age">Age</mfDefaultSorter>
        </th>
        <th style="width: 20%">
            <mfDefaultSorter by="city">City</mfDefaultSorter>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of mf.data">
        <td>{{item.name}}</td>
        <td>{{item.email}}</td>
        <td class="text-right">{{item.age}}</td>
        <td>{{item.city | uppercase}}</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="4">
            <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
        </td>
    </tr>
    </tfoot>
</table>

API

`mfData` directive

selector: table[mfData]
exportAs: mfDataTable
inputs
- mfData: any[] - array of data to display in table
- mfRowsOnPage: number - number of rows should be displayed on page (default: 1000)
- mfActivePage: number - page number (default: 1)
- mfSortBy: any - sort by parameter
- mfSortOrder: string - sort order parameter, "asc" or "desc"
outputs
- mfSortByChange: any - sort by parameter
- mfSortOrderChange: any - sort order parameter

`mfDefaultSorter` component

selector: mfDefaultSorter
inputs
- by: any - specify how to sort data (argument for lodash function _.sortBy )

`mfBootstrapPaginator` component

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 diplayed rows

angular2-datatable's People

Contributors

Stargazers

Watchers

Forkers

reyronald jessepreiner taguan tonysxm jphustman lehphyro farhodkurbonov boban100janovski cadabloom xjaroo baloo2401 jdcalkins kidtronnix sfederow steve-federowicz jtc10005 nfedyk b0bi79 mattes42 xatzistnr enabling subhani1249 buzz3r kelvynmarte nawalgupta ricardovaranda justinschneider shelphen barathpoubady diansigit 2pulseteam mponizil empite ants24 elrhino alokstar zixsma prasath-rasterimages fayaz541 devna13 qq645475941 meligy munbit myfarms sumithasudhakar tigredonorte vrudikov pwalczak83 tjeerd-menno epiphyllum darkkean joaomazza sharmaharsh7 hatemalhassani fiston guoling2 0mkara mrosama gdunghi chenqunjian 23n21 jasonmayer1 ascode seoproject muthuishere iamonuwa nickiannone pacsangon vosecek ogm710811 richardwscherer webmaxdev0110 1thrasher bautistaaa familytreeglobal beamso yasergh nabinkhatiwada djdhm leandrosanrod jinju15 nosnibor89 lawliet616 shashankkapile kachundena dsburn drunkenpilot riyajohnsnow erictor usmandap jacobbromley cmglez10 bharatvk burstpoc raphcal leonardoheis criduvero 09abhishek sjl421 timothythiele

angular2-datatable's Issues

Cascade Dropdownlist

Anyone experiencing the cascade dropdown issue ?

I do a cascade dropdown in the row by using "onchange", unfortunately it could not able to detect by selecting row and affected others row cascade dropdown data not accuracy anymore...

Anyone have any idea or solution mind to share ?

thanks

What is the purpose of traceur in this lib?

I can see traceur being in dependencies in package.json and also being loaded amongst other libraries in karma.conf.js. I have understood that traceur compiles ES6 to ES5, so what is its purpose on this lib?

I can not use your component in angular cli.

Hello.
I am trying to use this component in my angular-cli project (it use WebPack). But I could not.

My Configuration:

import {DataTableModule, DataTable} from "angular2-datatable";

@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
Ng2BootstrapModule,
ChartsModule,
DataTableModule
],
})

Error:

error_handler.js:47EXCEPTION: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "mfDataTable" ("ss="panel-heading">User information

  <table class="table table-striped" [mfData]="data" [ERROR ->]#mf="mfDataTable" [mfRowsOnPage]="10">
    <thead>
    <tr>

"): ProjectsComponent@15:57
Can't bind to 'mfData' since it isn't a known property of 'table'. ("

User information

  <table class="table table-striped" [ERROR ->][mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="10">
    <thead>
    <tr>

"): ProjectsComponent@15:41
Can't bind to 'mfRowsOnPage' since it isn't a known property of 'table'. (">User information

  <table class="table table-striped" [mfData]="data" #mf="mfDataTable" [ERROR ->][mfRowsOnPage]="10">
    <thead>
    <tr>

"): ProjectsComponent@15:75
'mfDefaultSorter' is not a known element:

If 'mfDefaultSorter' is an Angular component, then verify that it is part of this module.
If 'mfDefaultSorter' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]Name

"): ProjectsComponent@19:12
'mfDefaultSorter' is not a known element:
If 'mfDefaultSorter' is an Angular component, then verify that it is part of this module.
If 'mfDefaultSorter' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]Email

"): ProjectsComponent@22:12

Thank you. For help

Add api documentation for DataTable directive

Add Bootstrap 4 required classes for pagination

Bootstrap 4 requires a few additional classes on the li and a tags. Adding them won't break any Bootstrap 3 functionality. I have the code changes all ready to go and will PR them.

Donation?

Is there a suggested method for contributing to the development of this project or a charity favored by the creators?

Invalid address to files

WARNING in ./~/angular2-datatable/lib/DataTable.js
Cannot find source file '../src/DataTable.ts': Error: Cannot resolve 'file' or 'directory' ../src/DataTable.ts in D:\projects\sing\node_modules\angular2-datatable\lib

WARNING in ./~/angular2-datatable/lib/DefaultSorter.js
Cannot find source file '../src/DefaultSorter.ts': Error: Cannot resolve 'file' or 'directory' ../src/DefaultSorter.ts in D:\projects\sing\node_modules\angular2-datatable\lib

WARNING in ./~/angular2-datatable/lib/Paginator.js
Cannot find source file '../src/Paginator.ts': Error: Cannot resolve 'file' or 'directory' ../src/Paginator.ts in D:\projects\sing\node_modules\angular2-datatable\lib

WARNING in ./~/angular2-datatable/lib/BootstrapPaginator.js
Cannot find source file '../src/BootstrapPaginator.ts': Error: Cannot resolve 'file' or 'directory' ../src/BootstrapPaginator.ts in D:\projects\sing\node_modules\angular2-datatable\lib

Table content filtering

You should be able to have an input box that will filter the results in the table. This doesn't seem to come with angular2 out of the box, and might not be something that would be ideal to implement, but if it can be done easily it would make sense.

Table Untouched

let filterInput = "";
| Name | Age |

| John Doe | 30 |
| Jane Doe | 29 |

Table Touched

let filterInput = "Ja";
| Name | Age |

| Jane Doe | 29 |

pagination not worked properly

If i am in second page and delete all the row of second page then it should show me first page of datatable but actual it's show blank page.

There is no directive with "exportAs" set to "mfDataTable"

Running Karma/Jasmine test on component that has mfDataTable in the template and getting following error
There is no directive with "exportAs" set to "mfDataTable" ("s-->
<table class="table table-condensed table-striped" *ngIf="results" [mfData]="results" [ERROR ->]#mf="mfDataTable" [mfRowsOnPage]="10">

Page works fine on its own.
I think test breaks in TestBed.configureTestingModule() when im declaring the component.
If i comment out mfDataTablehtml, all the tests that test other html parts work fine.

Error loading lodash

$ node -v
v6.9.1

$ npm -v
3.10.9

var _ = require("lodash");

multipule/nested angular2-datatable support

Is it possible to create a datatable withing a parent datatable? (nested)

I have not had luck with it.

Sort icon

Is it possible to add "Sort" icon, when no sorting selected, but column is sortable ?

something like this

<span *ngIf="isSortedByMeAsc" class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span> <span *ngIf="isSortedByMeDesc" class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span> <span *ngIf="!isSortedByMeDesc && !isSortedByMeAsc" class="glyphicon glyphicon-sort" aria-hidden="true"></span>

missing something from README

I may be doing something wrong but I followed the README with a new CLI project and getting an error on the browser console "There is no directive with "exportAs" set to "mfDataTable""

Please check your example in case something is missing. I'm still too new at angular 2 to sort through it and figure it out.

thanks!

Error while installion

I got following error while trying to install the package

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "i" "-S" "angular2-datatable"
npm ERR! node v6.7.0
npm ERR! npm v3.10.8
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn

npm ERR! [email protected] postinstall: cd src && typings install
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'cd src && typings install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-datatable package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cd src && typings install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-datatable
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2-datatable
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/gary/npm-debug.log

Add systemjs configuration example to readme file

Pagination HTML Structure

Hi,
I've noticed that the HTML for the table pagination outputs as:
<nav><li>1</li></nav>

is it possible to change the output to:
<nav><ul><li>1</li></ul></nav>

remote install error

this is the error i get when i try to push my app to heroku:

remote: > [email protected] postinstall /tmp/build_3f84a6e31a33ca4f8575c1473072b869/node_modules/angular2-datatable
remote: > cd src && typings install
remote:
remote: sh: 1: typings: not found
remote: [email protected] /tmp/build_3f84a6e31a33ca4f8575c1473072b869

Display of mfBootstrapPaginator cannot be changed using css

I've tried many ways to change the display of mfBootstrapPaginator without success.

As written, I've retrieved bootstrap css containing navigation and child style, no effect.

Even setting a global style for :
li {
display: inline;
}
works on every nav ul li of the page but the nav ul li in mfBootstrapPaginator remains with no style.

I've extract the code from the component mfBootstrapPaginator :

works, so the style is well displayed but not included in the mfBootstrapPaginator.

Sort is case sensitive

Is there a way to make the sorting order case insensitive ?

Add search

Hi my friend

How i can add search on this datatable ?
thanks advance

Search is CaSe sensitive.

When using, the term used for searching must be entered exactly Case sensitive,

please make it so user can enter search term and ignore case. make case insenstive

Cheers

Issue with pagination

Hello,

We are using datatable with pagination to display data in our application.
We also have a search input box that takes input and based on that input we filter the data in the table.
The above functionality works fine when we are on the first page of the pagination. BUT when we are on any other page (other than page 1) the search functionality doesn't work.
We get any empty table displayed even though the search list is not empty.

After debugging we saw that mf.data is empty for the above scenario. (mf.inputData has correct search result data)

Regards,
Kapil

Cannot sort more then one level deep in data

there is no way to sort data when it is more then one level deep. For Example:

`<table class="table table-striped table-bordered table-hover" [mfData]="customerList" #mf="mfDataTable" [mfRowsOnPage]="10" cellspacing="0" width="100%">

First Name
Last Name
Phone Number
Postal Code
Number Of Vehicles
Subscription Type
Subscription Date

<tr *ngFor="let user of mf.data">
<a [routerLink]="['/customers', user.id]">{{user.firstName}}
{{user.lastName}}
{{user.mobilePhoneNumber}}
{{user.addresses.HOME.postalCode}}
{{user.vehicles.length}}
{{user.subscription.name}}
{{user.subscriptionDate}}

i cannot sort by user.subscription.name or user.addresses.HOME.postalCode

How to display the index number?

This is a very simple question but i can't find any example using angular2...thanks

Page number not reset to 1 on data update

Scenario: I load a large dataset in the table (say 1000 rows), then the user switches to some non-first page (say page 10, pages have 15 elements), then another action in the page updates the dataset to a smaller one (say 50 elements) - there should be now 4 pages.

What happens is that the paginator does not show anymore, so the user can't switch back to page 1, and no rows are shown either - the UI seems broken.

Is there a way for me to set the page from the component, or a way to have the datatable go back to page 1 (or the mfActivePage)?

ngmodel attached to rows not re-rendering table

Here's my table definition:

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp data-table" [mfData]="tableData" #mf="mfDataTable" [mfRowsOnPage]="dataTableRows"></table>```

And in my component I have

dataTableRows = "40"


On initial load, it loads 40 records. However, I would expect that if I had an input bound to this value:

<md-input placeholder="Number of rows" [(ngModel)]="dataTableRows">


That when I change this, it would re-render the table with the new value of rows I've entered in the input.

I have verified that the value is changing correctly, but the table is not re-rendering.

rows grouping

BTW this is awesome data table lib for angular2!
Is there a simple way to add row grouping on the table data?

How to set initial sorting?

Hello,
thanks for your work!

Please can you advice me how to set intial sorting?

I can sort data on the server if it is not possible, but how to set a "sorted" marker in the header?

Also - I think - a datatable will need to initialize some inner variables
( like
private isSortedByMeAsc: boolean = false;
private isSortedByMeDesc: boolean = false;
)

to work properly then.

So I think some initial setup should be possible...

Thank you.

Source Map refer to non existing ts files + _ is not defined when trying to use

Hi I've installed angular2-datatable througn npm. then added the data tables directives array in my component, when loading this component I get the _ is not defined Error.

Also when SourceMap is enabled (webpack) they refer to the ts files which are not in the npm package.

Any tips on getting it to work?

EXCEPTION: ReferenceError: _ is not defined in [users in UserOverview@0:49]
?d41d:73 EXCEPTION: ReferenceError: _ is not defined in [users in UserOverview@0:49]BrowserDomAdapter.logError @ ?d41d:73BrowserDomAdapter.logGroup @ ?d41d:84ExceptionHandler.call @ ?d41d:49(anonymous function) @ ?d41d:258schedulerFn @ ?d41d:127SafeSubscriber.__tryOrUnsub @ VM12952:166SafeSubscriber.next @ VM12952:115Subscriber._next @ VM12952:74Subscriber.next @ VM12952:51Subject._finalNext @ VM12947:124Subject._next @ VM12947:116Subject.next @ VM12947:73EventEmitter.emit @ ?d41d:113NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ?d41d:134NgZoneImpl.inner.inner.fork.onHandleError @ ?d41d:88ZoneDelegate.handleError @ zone.js?e3a6:368Zone.runGuarded @ zone.js?e3a6:274NgZoneImpl.runInner @ ?d41d:97NgZone.run @ ng_zone.ts?0378:204(anonymous function) @ ?d41d:399schedulerFn @ ?d41d:127SafeSubscriber.__tryOrUnsub @ VM12952:166SafeSubscriber.next @ VM12952:115Subscriber._next @ VM12952:74Subscriber.next @ VM12952:51Subject._finalNext @ VM12947:124Subject._next @ VM12947:116Subject.next @ VM12947:73EventEmitter.emit @ ?d41d:113NgZone._checkStable @ ?d41d:144NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.setMicrotask @ ?d41d:131NgZoneImpl.inner.inner.fork.onHasTask @ ?d41d:78ZoneDelegate.hasTask @ zone.js?e3a6:423ZoneDelegate._updateTaskCount @ zone.js?e3a6:440ZoneDelegate.invokeTask @ zone.js?e3a6:401Zone.runTask @ zone.js?e3a6:294drainMicroTaskQueue @ zone.js?e3a6:515ZoneTask.invoke @ zone.js?e3a6:467
?d41d:73 ORIGINAL EXCEPTION: ReferenceError: _ is not definedBrowserDomAdapter.logError @ ?d41d:73ExceptionHandler.call @ ?d41d:61(anonymous function) @ ?d41d:258schedulerFn @ ?d41d:127SafeSubscriber.__tryOrUnsub @ VM12952:166SafeSubscriber.next @ VM12952:115Subscriber._next @ VM12952:74Subscriber.next @ VM12952:51Subject._finalNext @ VM12947:124Subject._next @ VM12947:116Subject.next @ VM12947:73EventEmitter.emit @ ?d41d:113NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ?d41d:134NgZoneImpl.inner.inner.fork.onHandleError @ ?d41d:88ZoneDelegate.handleError @ zone.js?e3a6:368Zone.runGuarded @ zone.js?e3a6:274NgZoneImpl.runInner @ ?d41d:97NgZone.run @ ng_zone.ts?0378:204(anonymous function) @ ?d41d:399schedulerFn @ ?d41d:127SafeSubscriber.__tryOrUnsub @ VM12952:166SafeSubscriber.next @ VM12952:115Subscriber._next @ VM12952:74Subscriber.next @ VM12952:51Subject._finalNext @ VM12947:124Subject._next @ VM12947:116Subject.next @ VM12947:73EventEmitter.emit @ ?d41d:113NgZone._checkStable @ ?d41d:144NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.setMicrotask @ ?d41d:131NgZoneImpl.inner.inner.fork.onHasTask @ ?d41d:78ZoneDelegate.hasTask @ zone.js?e3a6:423ZoneDelegate._updateTaskCount @ zone.js?e3a6:440ZoneDelegate.invokeTask @ zone.js?e3a6:401Zone.runTask @ zone.js?e3a6:294drainMicroTaskQueue @ zone.js?e3a6:515ZoneTask.invoke @ zone.js?e3a6:467
?d41d:73 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ ?d41d:73ExceptionHandler.call @ ?d41d:65(anonymous function) @ ?d41d:258schedulerFn @ ?d41d:127SafeSubscriber.__tryOrUnsub @ VM12952:166SafeSubscriber.next @ VM12952:115Subscriber._next @ VM12952:74Subscriber.next @ VM12952:51Subject._finalNext @ VM12947:124Subject._next @ VM12947:116Subject.next @ VM12947:73EventEmitter.emit @ ?d41d:113NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ ?d41d:134NgZoneImpl.inner.inner.fork.onHandleError @ ?d41d:88ZoneDelegate.handleError @ zone.js?e3a6:368Zone.runGuarded @ zone.js?e3a6:274NgZoneImpl.runInner @ ?d41d:97NgZone.run @ ng_zone.ts?0378:204(anonymous function) @ ?d41d:399schedulerFn @ ?d41d:127SafeSubscriber.__tryOrUnsub @ VM12952:166SafeSubscriber.next @ VM12952:115Subscriber._next @ VM12952:74Subscriber.next @ VM12952:51Subject._finalNext @ VM12947:124Subject._next @ VM12947:116Subject.next @ VM12947:73EventEmitter.emit @ ?d41d:113NgZone._checkStable @ ?d41d:144NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.setMicrotask @ ?d41d:131NgZoneImpl.inner.inner.fork.onHasTask @ ?d41d:78ZoneDelegate.hasTask @ zone.js?e3a6:423ZoneDelegate._updateTaskCount @ zone.js?e3a6:440ZoneDelegate.invokeTask @ zone.js?e3a6:401Zone.runTask @ zone.js?e3a6:294drainMicroTaskQueue @ zone.js?e3a6:515ZoneTask.invoke @ zone.js?e3a6:467
?d41d:73 ReferenceError: _ is not defined
    at DataTable.fillData (eval at <anonymous> (http://localhost:3000/main.bundle.js:57:2), <anonymous>:63:16)
    at DataTable.ngDoCheck (eval at <anonymous> (http://localhost:3000/main.bundle.js:57:2), <anonymous>:54:18)
    at AbstractChangeDetector.ChangeDetector_UserOverview_1.detectChangesInRecordsInternal (viewFactory_UserOverview:120:48)
    at AbstractChangeDetector.detectChangesInRecords (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:675:2), <anonymous>:104:18)
    at AbstractChangeDetector.runDetectChanges (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:675:2), <anonymous>:81:14)
    at AbstractChangeDetector._detectChangesContentChildren (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:675:2), <anonymous>:174:18)
    at AbstractChangeDetector.runDetectChanges (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:675:2), <anonymous>:82:14)
    at AbstractChangeDetector._detectChangesInViewChildren (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:675:2), <anonymous>:181:18)
    at AbstractChangeDetector.runDetectChanges (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:675:2), <anonymous>:85:14)
    at AbstractChangeDetector._detectChangesContentChildren (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:675:2), <anonymous>:174:18)
    at AbstractChangeDetector.runDetectChanges (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:675:2), <anonymous>:82:14)
    at AbstractChangeDetector._detectChangesInViewChildren (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:675:2), <anonymous>:181:18)
    at AbstractChangeDetector.runDetectChanges (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:675:2), <anonymous>:85:14)
    at AbstractChangeDetector._detectChangesContentChildren (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:675:2), <anonymous>:174:18)
    at AbstractChangeDetector.runDetectChanges (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:675:2), <anonymous>:82:14)
    at AbstractChangeDetector._detectChangesInViewChildren (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:675:2), <anonymous>:181:18)
    at AbstractChangeDetector.runDetectChanges (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:675:2), <anonymous>:85:14)
    at AbstractChangeDetector.detectChanges (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:675:2), <anonymous>:70:73)
    at ChangeDetectorRef_.detectChanges (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:1093:2), <anonymous>:21:73)
    at eval (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:1069:2), <anonymous>:387:84)
    at Array.forEach (native)
    at ApplicationRef_.tick (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:1069:2), <anonymous>:387:38)
    at eval (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:1069:2), <anonymous>:304:129)
    at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:3000/polyfills.bundle.js:2444:2), <anonymous>:364:29)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:1213:2), <anonymous>:44:41)
    at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:3000/polyfills.bundle.js:2444:2), <anonymous>:363:35)
    at Zone.runGuarded (eval at <anonymous> (http://localhost:3000/polyfills.bundle.js:2444:2), <anonymous>:271:48)
    at NgZoneImpl.runInner (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:1213:2), <anonymous>:75:71)
    at NgZone.run (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:456:2), <anonymous>:220:66)
    at Object.eval (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:1069:2), <anonymous>:304:105)
    at SafeSubscriber.schedulerFn [as _next] (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:47:2), <anonymous>:122:52)
    at SafeSubscriber.__tryOrUnsub (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:241:2), <anonymous>:166:16)
    at SafeSubscriber.next (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:241:2), <anonymous>:115:22)
    at Subscriber._next (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:241:2), <anonymous>:74:26)
    at Subscriber.next (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:241:2), <anonymous>:51:18)
    at EventEmitter.Subject._finalNext (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:859:2), <anonymous>:124:30)
    at EventEmitter.Subject._next (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:859:2), <anonymous>:116:18)
    at EventEmitter.Subject.next (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:859:2), <anonymous>:73:14)
    at EventEmitter.emit (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:47:2), <anonymous>:111:76)
    at NgZone._checkStable (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:456:2), <anonymous>:140:44)
    at NgZoneImpl.NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.setMicrotask (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:456:2), <anonymous>:116:23)
    at Object.NgZoneImpl.inner.inner.fork.onHasTask (eval at <anonymous> (http://localhost:3000/vendor.bundle.js:1213:2), <anonymous>:56:35)
    at ZoneDelegate.hasTask (eval at <anonymous> (http://localhost:3000/polyfills.bundle.js:2444:2), <anonymous>:423:56)
    at ZoneDelegate._updateTaskCount (eval at <anonymous> (http://localhost:3000/polyfills.bundle.js:2444:2), <anonymous>:440:27)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:3000/polyfills.bundle.js:2444:2), <anonymous>:401:27)
    at Zone.runTask (eval at <anonymous> (http://localhost:3000/polyfills.bundle.js:2444:2), <anonymous>:294:48)
    at drainMicroTaskQueue (eval at <anonymous> (http://localhost:3000/polyfills.bundle.js:2444:2), <anonymous>:515:36)
    at HTMLDocument.ZoneTask.invoke (eval at <anonymous> (http://localhost:3000/polyfills.bundle.js:2444:2), <anonymous>:467:22)

Click Event Support

Any possibilities of including click event support inside the datatable ?
ie.
<td><button (click)="clickMe()">Click !!</button></td>

Datatable not updating on data change.

Basically I am loading the data with async and for some reason the data of the table is not loading that way:

    constructor(private userService : UserService){
        Cookie.setCookie('RADLOGINUSERNAME','ricardo');
        let user = '';
        self = this;

        userService.getDirectReports(Cookie.getCookie('RADLOGINUSERNAME'))
            .subscribe(res => {
                //For some reason object data is within the result object
                let res = res.data;

                this.user = res.dn;

                res.directReports.forEach(function(user, i){
                    self.data.push({
                        name : user,
                        accountExpiry : res.reportInfo[i][0],
                        passwordExpiry: res.reportInfo[i][1],
                        accountLocked : res.reportInfo[i][2],
                        status : 'Idle'
                    })
                });
                console.log(self.data);
            });

    }

<table class="table table-hover" [mfData]="data" #mf="mfDataTable">
    <thead>
        <tr>
            <th></th>
            <th>Student Name</th>
            <th>Account Expiry</th>
            <th>Password Expiry</th>
            <th>Account Locked</th>
            <th>Changes</th>
        </tr>
    </thead>
    <tbody>
    <tr *ngFor="let user of mf.data">
        <td>
            <input class="checkBox" id="{{id}}Checkbox" ng-click="handleClick(id, dn)" type="checkbox">
        </td>
        <td>
            <div id="{{id}}PassErrors">
                {{dnToFullName(user.name)}}
                <span ng-show="errors" id="{{id}}Errors" style="color:red"></span>
            </div>
        </td>
        <td>
            <span id="{{id}}AccExp" class="label label-default">{{user.accountExpiry}}</span>
        </td>
        <td>
            <span id="{{id}}PassExp" class="label label-default">{{user.passwordExpiry}}</span>
        </td>
        <td>
            <div ng-if="locked !== \\"><span id="{{id}}LockedStatus" class="label label-danger">Locked</span></div>
        </td>
        <td>
            <span id="{{id}}Status" class="label label-default">Idle</span>
        </td>
    </tr>
    </tbody>
</table>

Edit:

On my AppComponent class is where I have the data array as follows:

data = [{
name : 'test',
accountExpiry : '10/10/10'
}];

The data that was loaded statically loads fine but the rest of the data that is pushed into it later once it gets it from the userservice never gets displayed on the table.

Cant have multiple tables in view

Hi.
Thanks for your cool code, I cant seem to be able to add more than one table on the view as the second table data overrides the first.
Any suggestions on how to solve this?
Paulo

server side pagination

Frankly this is awesome, great job. But is it possible to have the pagination done from the server side response rather than fetching all the data on the client. I mean can we use other third party paginations here, like ng2-pagination?

RXJS is not calling from node_module folder

Hi,

That's a 404 error unable to find the RXJS *.js files.
Afrer moved the RXJS Lib folder outside the node_module only able to detect.

May i know this is a bug or a standard structure?

404 GET /rxjs/Subject.js
404 GET /rxjs/observable/PromiseObservable.js
404 GET /rxjs/operator/toPromise.js
404 GET /rxjs/Observable.js
404 GET /rxjs/Subject.js
404 GET /rxjs/observable/PromiseObservable.js
404 GET /rxjs/operator/toPromise.js
404 GET /rxjs/Observable.js

Thank You

Plan of upgrade to RC 1 ?

May i know do you'll will have a quick plan to upgrade the current angular2-datatable support rc.1 version?

I do have some issue on the after upgraded to rc.1 version

Thank You :)

[ERROR] Required is not defined

I keep getting a:

ReferenceError: require is not defined(…)

When I add the following directive

directives : [DataTableDirectives]

Are you using require for something in the module?

EDIT:

Btw I am using Systemjs but I have included the script for it in index.html so it should have a reference to it.

Upgrade for RC6

I upgraded a project of mine to RC6.
This caused me to move my import from my component to module which throws this error:
Uncaught Error: Unexpected directive 'DataTable' imported by the module 'TableModule'

Error when inputdata is undefined

No sorting arrows display on columns

@mariuszfoltak
I copied code from the plunkr example of the DataTable into my Angular CLI project from: http://plnkr.co/edit/PxBaZs?p=preview. The table works great, all I did was alter the columns to fit my data. However there are no sorting arrows on the column headers, even though when you click on them they still sort. Here is what my table looks like.

And here is what the plunkr example looks like. Notice the arrow on the email column.

Heres the html:

    <div class="row">
        <h2 class="col-xs-6 transfers-title">Transfers: Recent(20)</h2>
    </div>

    <div>
        <button class="btn bulk-update-selected-button" (click)="updateSelected()">Bulk Update Selected</button>
    </div>

    <div class="panel panel-default">

        <table class="table table-striped" [mfData]="transfers" #mf="mfDataTable"
               [mfRowsOnPage]="20" [(mfSortBy)]="followup">
            <thead>
            <tr>
                <th style="width: 10%">
                    <input type="checkbox"
                           name="options"
                           (change)="selectAll($event)"/>
                </th>
                <th style="width: 10%">
                    <mfDefaultSorter by="followup">Follow-up</mfDefaultSorter>
                </th>
                <th style="width: 40%">
                    <mfDefaultSorter by="accountNumber">Acct Number</mfDefaultSorter>
                </th>
                <th style="width: 30%; min-width: 200px">
                    <mfDefaultSorter by="clientName">Client Name</mfDefaultSorter>
                </th>
                <th style="width: 10%">
                    <mfDefaultSorter by="code">Code</mfDefaultSorter>
                </th>
                <th style="width: 10%">
                    <mfDefaultSorter by="type">Type</mfDefaultSorter>
                </th>
                <th style="width: 10%">
                    <mfDefaultSorter by="custodian">Custodian</mfDefaultSorter>
                </th>
                <th style="width: 10%">
                    <mfDefaultSorter by="created">Created</mfDefaultSorter>
                </th>
                <th style="width: 10%">
                    <mfDefaultSorter by="status">Status</mfDefaultSorter>
                </th>

                <!--<th style="width: 20%">
                    <mfDefaultSorter [by]="sortByWordLength">City</mfDefaultSorter>
                </th>-->
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let item of mf.data">
                <td>
                    <input type="checkbox"
                           name="options"
                           [(ngModel)]="item.checked"/>
                </td>
                <td>{{item.followup | date: 'dd/MM/yyyy'}}</td>
                <td>{{item.accountNumber}}</td>
                <td>{{item.clientName}}</td>
                <td>{{item.code}}</td>
                <td>{{item.type}}</td>
                <td>{{item.custodian}}</td>
                <td>{{item.created | date: 'dd/MM/yyyy'}}</td>
                <td>{{item.status}}</td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="5">
                    <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</div>

Any else run into this issue? Thanks in advance.

Add Row and Inline Edit

Hi,

how does this work for adding new row and inline edit ?

Thank You :)

Initialisation error - There is no directive with "exportAs" set to "mfDataTable"

Hi,

I'm trying to add a simple data table to the standard CoreUI template (https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template) but I'm unable to initisalise a simple datatable, this is the console error:

There is no directive with "exportAs" set to "mfDataTable" (""animated fadeIn">
    <div class="row">
        <table class="table table-striped" [mfData]="data" [ERROR ->]#mf="mfDataTable" [mfRowsOnPage]="10">
            <thead>
            <tr>
"): ShiftsComponent@2:59
Can't bind to 'mfData' since it isn't a known property of 'table'. ("<div class="animated fadeIn">
    <div class="row">
        <table class="table table-striped" [ERROR ->][mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="10">
            <thead>
            <tr>
"): ShiftsComponent@2:43
Can't bind to 'mfRowsOnPage' since it isn't a known property of 'table'. ("
    <div class="row">
        <table class="table table-striped" [mfData]="data" #mf="mfDataTable" [ERROR ->][mfRowsOnPage]="10">
            <thead>
            <tr>

My app.module.ts:

import {NgModule}                     from '@angular/core';
import {DataTableModule} from "angular2-datatable";
import {BrowserModule}                from '@angular/platform-browser';
import {
    LocationStrategy,
    HashLocationStrategy
}         from '@angular/common';

import {AppComponent}                 from './app.component';
import {Ng2BootstrapModule}           from 'ng2-bootstrap/ng2-bootstrap';
import {NAV_DROPDOWN_DIRECTIVES}      from './shared/nav-dropdown.directive';

import {ChartsModule}                 from 'ng2-charts/ng2-charts';
import {SIDEBAR_TOGGLE_DIRECTIVES}    from './shared/sidebar.directive';
import {AsideToggleDirective}         from './shared/aside.directive';
import {BreadcrumbsComponent}         from './shared/breadcrumb.component';
import {HttpModule} from '@angular/http';

import {AppRoutingModule}             from './app.routing';

//Layouts
import {FullLayoutComponent}          from './layouts/full-layout.component';
import {SimpleLayoutComponent}        from './layouts/simple-layout.component';
import {FormsModule} from "@angular/forms";

@NgModule({
    imports: [
        DataTableModule,
        BrowserModule,
        AppRoutingModule,
        Ng2BootstrapModule,
        FormsModule,
        
        ChartsModule,
        HttpModule
    ],
    declarations: [
        AppComponent,
        FullLayoutComponent,
        SimpleLayoutComponent,
        NAV_DROPDOWN_DIRECTIVES,
        BreadcrumbsComponent,
        SIDEBAR_TOGGLE_DIRECTIVES,
        AsideToggleDirective
    ],
    providers: [{
        provide: LocationStrategy,
        useClass: HashLocationStrategy
    }],
    bootstrap: [AppComponent]
})
export class AppModule {
}

And the component HTML:

<div class="animated fadeIn">
    <div class="row">
        <table class="table table-striped" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="10">
            <thead>
            <tr>
                <th style="width: 20%">
                    <mfDefaultSorter by="name">Name</mfDefaultSorter>
                </th>
                <th style="width: 50%">
                    <mfDefaultSorter by="email">Email</mfDefaultSorter>
                </th>
                <th style="width: 10%">
                    <mfDefaultSorter by="age">Age</mfDefaultSorter>
                </th>
                <th style="width: 20%">
                    <mfDefaultSorter by="city">City</mfDefaultSorter>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let item of mf.data">
                <td>{{item.name}}</td>
                <td>{{item.email}}</td>
                <td class="text-right">{{item.age}}</td>
                <td>{{item.city | uppercase}}</td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="4">
                    <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>

    <!--/row-->
</div>

The only difference that I could find between the example in the repository and my code is that CoreUI uses a routing module to initialise components where the table in the example is in the AppModule itself. I'm not sure if the DataTableModule is included correctly in my Component.

CoreUI uses Angular2 2.1.1 with angular2-datatable 0.5.1

"@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/router": "3.1.1",
    "@angular/upgrade": "2.1.1",
    "angular2-datatable": "^0.5.1",
...

angular-cli.json:

{
  "project": {
    "version": "1.0.0-alpha.2",
    "name": "core-ui"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "scss/style.scss"
      ],
      "scripts": [
        "../node_modules/chart.js/dist/Chart.bundle.min.js",
        "../node_modules/chart.js/dist/Chart.min.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false
  }
}

Add responsive behavior to table

Hi,
I tried the example and it worked perfectly. But when I am trying to add responsive class to table the responsive behavior did not work with it. Maybe I am doing something wrong could you please help me with this.

Thanks

Delay/ slow respond to UI

Hi,

I tried the example from Angular2 sample to try slow down the data respond after 5 second but the table unable to display even after 5 second.

I tried to fix it by using "NgIf" as below...

May i know is this a right way to handle or you do have any plan to enhance but not this moment?

Thank You

Getting error [email protected] postinstall: `cd src && typings install`

I am getting error [[email protected] postinstall: cd src && typings install] while installing [email protected] in my project. My colleagues are able to install the same without any problem. Notice, I cannot use any other version of angular2-datatable nor can I use any alternate library. I have to work with this version only.

systemjs and webpack examples both broken

both the systemjs and webpack examples seem to be broken for different reasons both on Linux and on Windows

Multiple tables on the same page generate an error

Great work on the component!
Hi, I'm wondering if someone came across the same issue, having two tables on the same page with different data sources.

Here is the abbreviated error I receive when rendering the page:

zone.js:390 ViewWrappedError_nativeError: Error: Error in ./GroupDetailComponent class GroupDetailComponent - inline template:90:36 caused by: Expression has changed after it was checked. Previous value: ''. Current value: '[object Object],[object Object]

Any help would be much appreciated - thank you!

Remember paging state between page reloads

Great component, nicely done! It would be great if the component remembered which page it was between page reloads. Maybe it could store that information in local storage?

Custom functions in sortBy?

Should I be able to do something like

<th><mfDefaultSorter by="[function(o) { return o.user; }]">User</mfDefaultSorter></th>

or are only column names supported? (This is a trivial example -- I need to modify the sorting function to display nulls last for both ascending and descending sorts).

Add bootstrap 4 support to sorting headers (no more glyphicon)

Bootstrap v4 dropped glyphicon so there are no longer triangles on sorted columns. Issue #58 refers to updating the pagination to support v4. Could we get some support for the rest of this plugin? 😄