mariuszfoltak / angular2-datatable Goto Github PK
View Code? Open in Web Editor NEWDataTable - Simple table component with sorting and pagination for Angular2
DataTable - Simple table component with sorting and pagination for Angular2
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.
Hi my friend
How i can add search on this datatable ?
thanks advance
both the systemjs and webpack examples seem to be broken for different reasons both on Linux and on Windows
Hi,
how does this work for adding new row and inline edit ?
Thank You :)
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'. ("
<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:
Thank you. For help
@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.
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.
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.
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.
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.
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)?
Is there a way to make the sorting order case insensitive ?
Any possibilities of including click event support inside the datatable ?
ie.
<td><button (click)="clickMe()">Click !!</button></td>
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
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>
This is a very simple question but i can't find any example using angular2...thanks
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?
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'
Hi
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
Is it possible to create a datatable withing a parent datatable? (nested)
I have not had luck with it.
Hi
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 :)
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>
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!
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.
let filterInput = "";
| Name | Age |
| John Doe | 30 |
| Jane Doe | 29 |
let filterInput = "Ja";
| Name | Age |
| Jane Doe | 29 |
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
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.
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.
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).
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
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
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)
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?
Is there a suggested method for contributing to the development of this project or a charity favored by the creators?
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
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? ๐
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
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!
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?
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
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
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.
BTW this is awesome data table lib for angular2!
Is there a simple way to add row grouping on the table data?
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
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
}
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.