ggmod / angular-2-data-table-demo

Demo application and examples for the Angular 2 data table (https://github.com/ggmod/angular-2-data-table)

Angular 2 Data Table Demo

** Updated for Angular 5 here **

Demo application and examples for the Angular 2 data table

Live demo

angular-2-data-table-demo's Issues

which parameter want to push in reload(params)

reload(params) method want to push

Do NOT use this. ERROR in DataTableModule is not an NgModule still.

This module is NOT supported, and does NOT run with a clean pull.
ng build --prod fails
It is written incorrectly and the 'is not an NgModule' is a sign of bad coding.
ggmod is no longer supporting this, please look elsewhere for a table.

Responsive

How to configure responsive data-table ?!

ERROR in DataTableModule is not an NgModule

I got above error in Angular2 CLI any solution?

Cannot read property 'selectedRow' of undefined

I have tried to get datatable working but get this error

PathwayDetailComponent.html:1 ERROR TypeError: Cannot read property 'selectedRow' of undefined
at Object.View_PathwayDetailComponent_2.co [as updateDirectives] (PathwayDetailComponent.html:1)
at Object.debugUpdateDirectives [as updateDirectives] (vendor.dll.js:13234)
at checkAndUpdateView (vendor.dll.js:12572)
at callViewAction (vendor.dll.js:12935)
at execEmbeddedViewsAction (vendor.dll.js:12893)
at checkAndUpdateView (vendor.dll.js:12573)
at callViewAction (vendor.dll.js:12935)
at execComponentViewsAction (vendor.dll.js:12867)
at checkAndUpdateView (vendor.dll.js:12578)
at callViewAction (vendor.dll.js:12935)

ng build --prod it's not work

How to make headers with colspan and rowspan

I have a complex header with rowspan and colspan. How I can make it with data-table-column ?
Thank you.

Error with moduleId string

If this helps anyone from having to do a Google search, going through and commenting out moduleId: string; lines helped me get this puppy to run in one of my components in Angular 4 if you get that compiling error it is expecting a string.

Thank you for the kind contribution author!

getting DataTable class DataTable - inline template:35:20 caused by: Cannot read property 'length' of undefined

hi
i am getting below issue how to resolve

How to display nested object property value

I have data like user:[{id:1,name:'xyx',profile:{pic:'abc','role':2}}]. How i will display profile.pic.

Does it support Angular 2.1.0?

Hi,

Does it support Angular 2.1.0 version? Please let me know

Add context menu.

Hi sir @ggmod ,
I wanna add context menu when right click in data row. How i can do it?

Many Thanks.

How to new line in header title

How to new line in header title

i want specific to new line

class decorators error when using angular-4-data-table in app module

core.es5.js:350 Uncaught reflect-metadata shim is required when using class decorators

Man there is like 6 versions of this angular data table and if you read the documentation for
4 its says to install 2 then 2 conflicts with 4 and damn what the hell anyway. This tool is not
worth it.

Importing DataTableModule error

I get this error "ERROR in DataTableModule is not an NgModule" while building my application, but datatables works well.

...

import { DataTableModule } from 'angular-2-data-table';

...

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

My Angular version is 2.4.5

Offset of pagination is increasing 2 in each time

I am trying to use pagination feature, but I have an issue with moving to next page, it always increase 2 in each step
{offset: 0, limit: 2}
{offset: 2, limit: 2}
{offset: 4, limit: 2}
{offset: 6, limit: 2}

Pagination with http Data

Hi,

I'm using the component and it's working, except for the pagination.
Follow my component class:

import { DataTableResource } from "angular-4-data-table";
import { UserList } from "./../../models/userList";
import { Component, OnInit } from "";
import { UserService } from "../../services/user-service.services";

`

@component({
selector: "userList-cmp",
moduleId: module.id,
templateUrl: "userList.component.html",
providers: [UserService]
})

export class UserListComponent implements OnInit {
userList: Array = new Array();
itemResource: any;
userlistCount = 10;
`
constructor(private userService: UserService) {
console.log("construtor");

}

async ngOnInit() {
await this.getUsers();
}

private async getUsers() {
await this.userService.getUsers().subscribe(
res => {this.userList = res; this.itemResource = new DataTableResource(res); this.userlistCount = this.userList.length; }
);
}
}
`

HTML parameters:

<data-table [items]="userList" [itemCount]="userlistCount" [limit]="2">

Can you help me?

how to pass data from api to angular-2-data-table

Hi all,

below is my result JSON from api. how to bind this data to Datatable please help me .

[{"Building":"B85","DeviceID":"402072","PumpNo":3,"EventDateTime":"2017-01-30T23:16:00"},{"Building":"B85","DeviceID":"402072","PumpNo":6,"EventDateTime":"2017-01-30T23:17:00"},{"Building":"B85","DeviceID":"402072","PumpNo":7,"EventDateTime":"2017-01-30T23:17:00"},{"Building":"B85","DeviceID":"402072","PumpNo":8,"EventDateTime":"2017-01-30T23:09:00"}]

this.itemResource.query is not a function

Hi all,
i'm trying to use this api with my angular app, but i'm getting this error
ERROR TypeError: this.itemResource.query is not a function
help me plz

Data Table is not showing when build and host using --production build command - Angular 4+

I have an angular App, when i build and host the site in IIS, everything is cool except the Data Table. The data table is not rendering any data or not showing. There is no console errors. Even i found the empty HTML code that i copy pasted below.

Production buildn Command that i used:

ng build --prod --base-href /MyAPP/

The Same thing is working with following command: Which is Dev Build. Data Table is working well with this build command.

ng build --base-href /MyAPP/

I'm using:

Bootstrap 3.3.7

Angular Details:

λ ng -v
@angular/cli: 1.3.0
node: 6.11.0
os: win32 x64
angular/animations: 4.3.6
angular/common: 4.3.6
angular/compiler: 4.3.6
angular/core: 4.3.6
angular/forms: 4.3.6
angular/http: 4.3.6
angular/platform-browser: 4.3.6
angular/platform-browser-dynamic: 4.3.6
angular/router: 4.3.6
angular/cli: 1.3.0
angular/compiler-cli: 4.3.6
angular/language-service: 4.3.6

I found this empty HTML code which is not rendering anything.

<data-table _ngcontent-c7="" id="schedule-grid" style="font-size: 14px !important;">
<data-table-column _ngcontent-c7="">
</data-table-column>
<data-table-column _ngcontent-c7="">
</data-table-column>
<data-table-column _ngcontent-c7="">
</data-table-column>
<data-table-column _ngcontent-c7="">
</data-table-column>
<data-table-column _ngcontent-c7="">
<!---->
<!---->
</data-table-column>
<data-table-column _ngcontent-c7="">
<!---->
<!---->
</data-table-column>
</data-table>

What would be the issue?

Please kindly help and suggest the fix. Kind of stuck here!!!

does it support angular 4 ?

working for angular5?

I tried to use this package in angular 5 but got error:

Can't bind to 'pagination_limit' since it isn't a known property of 'data-table'.

1. If 'data-table' is an Angular component and it has 'pagination_limit' input, then verify that it is part of this module.
2. If 'data-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
   <data-table id="persons-grid"
   headerTitle="Employees"
   [ERROR ->][pagination_limit]="true"
   [items]="items"
   [itemCount]="itemCount"
   "): ng:///AppModule/AppComponent.html@3:14
   Can't bind to 'items' since it isn't a known property of 'data-table'.

Data not loading as intended when page limit is changed

Data table pagination is not working as intended.
Steps to Reproduce:-

1. Open https://ggmod.github.io/angular-2-data-table-demo/
   2.Goto Films Table (last table present in the above link) and click next button of pagination
2. Once you are in page 2, change Max results to 3.
3. Navigate to previous pages (click on "<" button). When you are in page 1 you will see records indexed 3,4,5.
4. One more time click "<" button, then you will see records as 123.

When we are in step 4 the "<" button should be disabled and also data should not load in this way.
I would recommend when the page limit is changed navigate to page one and reload the data from page one. Behind the screen I would say reset page number to zero, offset to zero.