ggmod / angular-2-data-table Goto Github PK

View Code? Open in Web Editor NEW

69.0 7.0 137.0 17 KB

An Angular 2 data table, with pagination, sorting, expandable rows, row selection etc.

TypeScript 100.00%

angular-2-data-table's Introduction

Angular 2 Data Table

Updated for Angular 5 here. This repo will not be updated

A simple Angular 2 data table, with built-in solutions for features including:

pagination
sorting
row selection (single/multi)
expandable rows
column resizing
selecting visible columns

The component can be used not just with local data, but remote resources too: for example if the sorting and paging happen in the database.

The templates use bootstrap CSS class names, so the component requires a bootstrap .css file to be present in the application using it.

Check out the demo and its code for examples of how to use it.

Installing:

npm install angular-2-data-table --save

Licensing

MIT License

angular-2-data-table's People

Contributors

Stargazers

Watchers

angular-2-data-table's Issues

Request: Bootstrap 4 upgrade

This is a great data table. Do you have any plans to upgrade to Bootstrap 4? The icons don't load for us since the glyphicons aren't included anymore in bootstrap.

In CLI, require for bootstrap error

I am currently getting the following runtime error:

Uncaught ReferenceError: require is not defined
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:14:14)
    at eval (<anonymous>)
    at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
    at Object.../../../../script-loader/index.js!../../../../angular-2-data-table/dist/index.js (index.js?f3f2:1)
    at __webpack_require__ (bootstrap 8340e8d…:54)
    at Object.2 (scripts.bundle.js:37)
    at __webpack_require__ (bootstrap 8340e8d…:54)
    at webpackJsonpCallback (bootstrap 8340e8d…:25)
    at scripts.bundle.js:1

My component as follows:

<!-- Product-Grid.component.html -->
<div style='margin: auto; max-width: 900px;'>
	<data-table id='products-grid'
		[items]='products'
		[itemCount]='productsCount'
		[pagination]='true'
		[indexColumn]='true'
		[selectColumn]='false'
		(reload)='reloadProducts( $event )'
		>
		<data-table-column>
			<ng-template #dataTableHeader let-item="item">
				<button (click)="addItemClicked( )" class="btn btn-sm btn-default">Add</button>
			</ng-template>
			<ng-template #dataTableCell let-item="item">
				<button (click)="editItemClicked( item )" class="btn btn-sm btn-default">Edit</button>
			</ng-template>
		</data-table-column>
		<data-table-column header='Product Id'
			property='ProductID'
			[sortable]='true'
			[resizable]='true'>
		</data-table-column>
		<data-table-column header='Product Name'
			property='ProductName'
			[sortable]='true'
			[resizable]='true'>
		</data-table-column>
		<data-table-column header='Supplier Id'
			property='SupplierID'
			[resizable]='true'>
		</data-table-column>
		<data-table-column header='Prod Category Id'
			property='ProdCategoryId'
			[sortable]='true'
			[resizable]='true'>
		</data-table-column>
		<data-table-column header='Quantity Per Unit'
			property='QuantityPerUnit'
			[resizable]='true'>
		</data-table-column>
		<data-table-column header='Unit Price'
			property='UnitPrice'
			[resizable]='true'>
		</data-table-column>
		<data-table-column header='Units In Stock'
			property='UnitsInStock'
			[resizable]='true'>
		</data-table-column>
		<data-table-column header='Units On Order'
			property='UnitsOnOrder'
			[resizable]='true'>
		</data-table-column>
		<data-table-column header='Reorder Level'
			property='ReorderLevel'
			[resizable]='true'>
		</data-table-column>
		<data-table-column header='Discontinued'
			property='Discontinued'
			[sortable]='true'
			[resizable]='true'>
		</data-table-column>
		<data-table-column header="">
			<ng-template #dataTableHeader let-item="item">
			</ng-template>
			<ng-template #dataTableCell let-item="item">
				<button (click)="deleteItemClicked( item )" class="btn btn-sm btn-default">Delete</button>
			</ng-template>
		</data-table-column>
	</data-table>
</div>
<!-- end of grid.component.html -->

Typescript

// File: product-grid.component.ts
import { Component, OnInit, ElementRef } from '@angular/core';
import { NgForm } from '@angular/forms';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
//
import { DataTableResource } from 'angular-2-data-table';
//
import { IProduct, Product } from '../product';
//
@Component({
  selector: 'app-product-grid',
  templateUrl: './product-grid.component.html',
  styleUrls: ['./product-grid.component.css']
})
export class ProductGridComponent implements OnInit {
	//
	model: Product;
	products: Product[] = [
		new Product( 1,'p 1',1,'p 1','p 1',1,1,1,1,true ),
		new Product( 2,'p 2',2,'p 2','p 2',2,2,2,2,true ),
		new Product( 3,'p 3',3,'p 3','p 3',3,3,3,3,true ),
		new Product( 4,'p 4',4,'p 4','p 4',4,4,4,4,true )
	];
	productsCount: number = 4; 
  //
	id: string;
	nav: HTMLSelectElement;
	//
	constructor(
		private _modalService: NgbModal,
		private _elementRef: ElementRef ) { }
	//
  ngOnInit() {
  }
  // events
  reloadProducts( event ) {
    console.log( event );
  }
  addItemClicked( ) {
    console.log( 'Add item clicked...' );
  }
  editItemClicked( item: Product ) {
    console.log( item.ProdCategoryId );
  }
  deleteItemClicked( item: Product ) {
    console.log( item.ProdCategoryId );
  }
  //
}

Angular 4 Data Table compilation for Angular 4

I imported this table to my angular project and it works fine in debug.
When trying to compile it for prod (ng build --prod) getting the following Error:
Can't bind to 'items' since it isn't a known property of 'data-table'.

I tried removing the items property and got this Error:
Error: Template parse errors: 'data-table' is not a known element.

Anyone had this issue or has an idea what could be the problem?

Property 'rowDoubleClicked' is private and only accessible within class 'DataTable'.

issue while running

ng build --prod href="./"

ERROR in ng:///F:/xampp/htdocs/table/angular-4-data-table-demo/node_modules/angu
lar-4-data-table/src/components/row.component.ts.DataTableRow.html (10,5): Prope
rty 'rowDoubleClicked' is private and only accessible within class 'DataTable'.
ERROR in ng:///F:/xampp/htdocs/table/angular-4-data-table-demo/node_modules/angu
lar-4-data-table/src/components/row.component.ts.DataTableRow.html (10,5): Prope
rty 'rowDoubleClicked' is private and only accessible within class 'DataTable'.
ERROR in ng:///F:/xampp/htdocs/table/angular-4-data-table-demo/node_modules/angu
lar-4-data-table/src/components/row.component.ts.DataTableRow.html (11,5): Prope
rty 'rowClicked' is private and only accessible within class 'DataTable'.
ERROR in ng:///F:/xampp/htdocs/table/angular-4-data-table-demo/node_modules/angu
lar-4-data-table/src/components/row.component.ts.DataTableRow.html (11,5): Prope
rty '_this' is private and only accessible within class 'DataTableRow'.
ERROR in ng:///F:/xampp/htdocs/table/angular-4-data-table-demo/node_modules/angu
lar-4-data-table/src/components/row.component.ts.DataTableRow.html (4,5): Proper
ty 'getRowColor' is private and only accessible within class 'DataTable'.
ERROR in ng:///F:/xampp/htdocs/table/angular-4-data-table-demo/node_modules/angu
lar-4-data-table/src/components/row.component.ts.DataTableRow.html (4,5): Proper
ty '_this' is private and only accessible within class 'DataTableRow'.
ERROR in ng:///F:/xampp/htdocs/table/angular-4-data-table-demo/node_modules/angu
lar-4-data-table/src/components/row.component.ts.DataTableRow.html (10,5): Prope
rty '_this' is private and only accessible within class 'DataTableRow'.
ERROR in ng:///F:/xampp/htdocs/table/angular-4-data-table-demo/node_modules/angu
lar-4-data-table/src/components/row.component.ts.DataTableRow.html (10,5): Prope
rty '_this' is private and only accessible within class 'DataTableRow'.
ERROR in ng:///F:/xampp/htdocs/table/angular-4-data-table-demo/node_modules/angu
lar-4-data-table/src/components/row.component.ts.DataTableRow.html (11,5): Prope
rty 'rowClicked' is private and only accessible within class 'DataTable'.
ERROR in ng:///F:/xampp/htdocs/table/angular-4-data-table-demo/node_modules/angu
lar-4-data-table/src/components/row.component.ts.DataTableRow.html (11,5): Prope
rty '_this' is private and only accessible within class 'DataTableRow'.
ERROR in ng:///F:/xampp/htdocs/table/angular-4-data-table-demo/node_modules/angu
lar-4-data-table/src/components/row.component.ts.DataTableRow.html (4,5): Proper
ty 'getRowColor' is private and only accessible within class 'DataTable'.
ERROR in ng:///F:/xampp/htdocs/table/angular-4-data-table-demo/node_modules/angu
lar-4-data-table/src/components/row.component.ts.DataTableRow.html (4,5): Proper
ty '_this' is private and only accessible within class 'DataTableRow'.

Please don't suggest to run

ng build --prod --aot=false

I don't want to use above command.

Request to add scrollbar for long table

Is it possible to make the table scrollable horizontally for the large table ?

How to new line for title header table

Hi,
I want to new line text in title herder such as '<br/>'
cause my title long text and must specific word to new line

Help me plz : )

Thanks.

Custom checkbox with particular column

Not able to write custom code to show custom checkbox using angular-2-data-table.

Can you separate the functionality for reloading from pagination/filtering/etc?

I'm using an HTTP request to get the data for my table. It seems like I have the choice of having the refresh button work (which there doesn't seem to be an option to disable without editing the HTML) or have the pagination/filtering/etc functionality hit the server each time I want to change the page, filter, or sort. Can you separate the functionality for filtering operations from the functionality for refresh? Other than that, great library!

Do this table has filter/search functionality?

Can we able to apply the filter functionality to this data-table with Angular 4 version?

Crash on browser refresh when using in Angular2 app created using Asp.Net Core SPA templates (VS2017)

When building Angular2 app created using Asp.Net Core SPA templates (VS2017), using control results in server side crash on page refresh (but not on initial load):

An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: Error: Uncaught (in promise): TypeError: Cannot read property 'display' of undefined
TypeError: Cannot read property 'display' of undefined
at Hide.initDisplayStyle ([REDACTED]\ClientApp\dist\main-server.js:26917:68)
at Hide.set [as hide] ([REDACTED]\ClientApp\dist\main-server.js:26902:18)
at Wrapper_Hide.check_hide (/DataTableModule/Hide/wrapper.ngfactory.js:17:23)
at CompiledTemplate.proxyViewClass.View_DataTable0.detectChangesInternal (/DataTableModule/DataTable/component.ngfactory.js:769:19)
at CompiledTemplate.proxyViewClass.AppView.detectChanges ([REDACTED]\ClientApp\dist\vendor.js:12281:18)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges ([REDACTED]\ClientApp\dist\vendor.js:12266:22)
at CompiledTemplate.proxyViewClass.View_ReservationListComponent0.detectChangesInternal (/AppModule/ReservationListComponent/component.ngfactory.js:867:20)
at CompiledTemplate.proxyViewClass.AppView.detectChanges ([REDACTED]\ClientApp\dist\vendor.js:12281:18)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges ([REDACTED]\ClientApp\dist\vendor.js:12266:22)
at CompiledTemplate.proxyViewClass.View_ReservationListComponent_Host0.detectChangesInternal (/AppModule/ReservationListComponent/host.ngfactory.js:27:19)
at CompiledTemplate.proxyViewClass.AppView.detectChanges ([REDACTED]\ClientApp\dist\vendor.js:12281:18)
at ViewRef_.detectChanges ([REDACTED]\dist\vendor.js:9450:24)
at RouterOutlet.activate ([REDACTED]\ClientApp\dist\vendor.js:88461:46)
at ActivateRoutes.placeComponentIntoOutlet ([REDACTED]\ClientApp\dist\vendor.js:87740:20)
at ActivateRoutes.activateRoutes ([REDACTED]\ClientApp\dist\vendor.js:87707:30)
at resolvePromise ([REDACTED]\ClientApp\dist\vendor.js:74546:31) [angular]
at resolvePromise ([REDACTED]\ClientApp\dist\vendor.js:74517:17) [angular]
at [REDACTED]\ClientApp\dist\vendor.js:74594:17 [angular]
at Object.onInvokeTask ([REDACTED]\ClientApp\dist\vendor.js:4044:41) [angular]
at ZoneDelegate.module.exports.ZoneDelegate.invokeTask ([REDACTED]\ClientApp\dist\vendor.js:74247:36) [angular]
at Zone.module.exports.Zone.runTask ([REDACTED]\ClientApp\dist\vendor.js:74047:47) [ => angular]
at drainMicroTaskQueue ([REDACTED]\ClientApp\dist\vendor.js:74427:35) []
at runMicrotasksCallback (internal/process/next_tick.js:64:5) []
at _combinedTickCallback (internal/process/next_tick.js:73:7) []
at process._tickCallback (internal/process/next_tick.js:104:9) []

If, in Index.cshtml, server side pre-rendering is disabled by removing the asp-prerender-module attribute in:

Then control works ok and doesn't cause a crash on page refresh.

DataTable moduleId is a string

Hello,

if anyone has this problem with Angular 4, just go through a full search and comment out //moduleId: string type lines and it'll still work.

I got it to work with my own custom component after I did this. Thank you for your hard work poster!

Data Table is not visisble

Hi,

I have followed Demo1 source code to implement this data table in my application all classes are loading
like below

but data table is not visible.

Can anyone please help to get success from this?

Expand on row click

Hello guys,

How do you expand a row when clicking on it?
The one in provided demo3, will only expanded the row when you click the "triangle-right" icon.
Is there a way to make the same behavior on row click event ?

Thank you.

How to mark checkbox pre-selected?

How to new line in header title

i want specific to new line

Group by columns in data-table angular4

May i know how to do group by headers in the data-table in anygular4?

Required output

                            Address

Doorno City State Country

Reset/Bind paging controls

I have search functionality impemented combined with the built in paging mechanism. How can we reset the paging controls to return to the first page after the search parameters change?

Angular 4 Data Table Compile issue (/node_modules/angular-4-data-table/src/index.ts)

Hello,

iam getting the below error message when i follow the instructions link
https://www.npmjs.com/package/angular-4-data-table-aot

Iam not sure what is wrong simply i have added the module in the app.moudule file.

Note : Used AngularCLI :1.5.2

Any one can suggest how to fix the issue asp.
Code.zip

Attached code files for your reference.

Error message:

ERROR in ./node_modules/angular-4-data-table/src/index.ts
Module build failed: Error: C:\AMD\Examples\Angular4\Grid\Samples\A4DataTable\node_modules\angular-4-data-table\src\index.ts is not part of the compilation output. Please check the other error messages for details.
at AngularCompilerPlugin.getCompiledFile (C:\Examples\Angular4\Grid\Samples\A4DataTable\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:624:23)
at plugin.done.then (C:\Examples\Angular4\Grid\Samples\A4DataTable\node_modules@ngtools\webpack\src\loader.js:467:39)
at
at process._tickCallback (internal/process/next_tick.js:169:7)
@ ./src/app/app.module.ts 10:0-65
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

Horizontally Scroll-able

How to make the table horizontally scroll-able without squeezing the content of columns ?
I need to view 10-12 columns such that I can scroll the table horizontally to view the data of other columns.

ERROR in DataTableModule is not an NgModule

Data Table is not an ngModule

I have a problem loading this data table in my application. I installed angular-2-data-table in my project and imported in app.module.ts. But when server runs, its says cannot find angular-2-data-table

[limit]="5" is not working when it first load.

I use limit by default 5. But it keeping showing me all records at first load. However, if i manually key in limit value, it works. Please suggest.

Datatable is not an NgModule... Anyone has fixed this issue...

Capture "SelectAll" checkbox in the header row

How can we capture the selection of "Select All" checkbox in the header row ?

angular-4-data-table\src\index.ts is missing from the TypeScript compilation

I am getting below error

ERROR in ./node_modules/angular-4-data-table/src/index.ts Module build failed:
Error: D:\Angular Dev\myfirstapp\node_modules\angular-4-data-table\src\index.ts
is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library.
Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
at AngularCompilerPlugin.getCompiledFile (D:\Angular Dev\myfirstapp\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:656:23)
at plugin.done.then (D:\Angular Dev\myfirstapp\node_modules@ngtools\webpack\src\loader.js:467:39)
at
at process._tickCallback (internal/process/next_tick.js:188:7)
@ ./src/app/app.module.ts 19:0-65
@ ./src/main.ts
@ multi ./src/main.ts

Repo Steps

create new app using - ng new DTDemo
add demo1 code from the demo "https://github.com/MIt9/angular-4-data-table-demo"

now build the package.

How to build to prod ?

When i did ng build --prod


ERROR in Template parse errors:
Can't bind to 'items' since it isn't a known property of 'data-table'.
1. If 'data-table' is an Angular component and it has 'items' 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. ("in: auto; max-width: 1000px; margin-top:2px">
  <data-table id="regs-grid" headerTitle='Categorias' [ERROR ->][items]="regs | FilterPipe: queryString" [itemCount]="regsCount" (reload)="fetch($event)"
    [limit]"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@4:54
Can't bind to 'itemCount' since it isn't a known property of 'data-table'.
1. If 'data-table' is an Angular component and it has 'itemCount' 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. ("px">
  <data-table id="regs-grid" headerTitle='Categorias' [items]="regs | FilterPipe: queryString" [ERROR ->][itemCount]="regsCount" (reload)="fetch($event)"
    [limit]="5" [sortBy]="'objId'" [sortAsc]="false""): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@4:95
Can't bind to 'limit' since it isn't a known property of 'data-table'.
1. If 'data-table' is an Angular component and it has '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. ("rias' [items]="regs | FilterPipe: queryString" [itemCount]="regsCount" (reload)="fetch($event)"
    [ERROR ->][limit]="5" [sortBy]="'objId'" [sortAsc]="false" [selectColumn]="true" [multiSelect]="false" [substit"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@5:4
Can't bind to 'sortBy' since it isn't a known property of 'data-table'.
1. If 'data-table' is an Angular component and it has 'sortBy' 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. ("]="regs | FilterPipe: queryString" [itemCount]="regsCount" (reload)="fetch($event)"
    [limit]="5" [ERROR ->][sortBy]="'objId'" [sortAsc]="false" [selectColumn]="true" [multiSelect]="false" [substituteRows]="fa"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@5:16
Can't bind to 'sortAsc' since it isn't a known property of 'data-table'.
1. If 'data-table' is an Angular component and it has 'sortAsc' 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. ("e: queryString" [itemCount]="regsCount" (reload)="fetch($event)"
    [limit]="5" [sortBy]="'objId'" [ERROR ->][sortAsc]="false" [selectColumn]="true" [multiSelect]="false" [substituteRows]="false" [expandableRow"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@5:35
Can't bind to 'selectColumn' since it isn't a known property of 'data-table'.
1. If 'data-table' is an Angular component and it has 'selectColumn' 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. ("temCount]="regsCount" (reload)="fetch($event)"
    [limit]="5" [sortBy]="'objId'" [sortAsc]="false" [ERROR ->][selectColumn]="true" [multiSelect]="false" [substituteRows]="false" [expandableRows]="true"
    [tra"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@5:53
Can't bind to 'multiSelect' since it isn't a known property of 'data-table'.
1. If 'data-table' is an Angular component and it has 'multiSelect' 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. ("(reload)="fetch($event)"
    [limit]="5" [sortBy]="'objId'" [sortAsc]="false" [selectColumn]="true" [ERROR ->][multiSelect]="false" [substituteRows]="false" [expandableRows]="true"
    [translations]="translatio"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@5:75
Can't bind to 'substituteRows' since it isn't a known property of 'data-table'.
1. If 'data-table' is an Angular component and it has 'substituteRows' 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. (")"
    [limit]="5" [sortBy]="'objId'" [sortAsc]="false" [selectColumn]="true" [multiSelect]="false" [ERROR ->][substituteRows]="false" [expandableRows]="true"
    [translations]="translations" [indexColumnHeader"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@5:97
Can't bind to 'expandableRows' since it isn't a known property of 'data-table'.
1. If 'data-table' is an Angular component and it has 'expandableRows' 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. ("y]="'objId'" [sortAsc]="false" [selectColumn]="true" [multiSelect]="false" [substituteRows]="false" [ERROR ->][expandableRows]="true"
    [translations]="translations" [indexColumnHeader]="'#'" [selectOnRowClick"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@5:122
Can't bind to 'translations' since it isn't a known property of 'data-table'.
1. If 'data-table' is an Angular component and it has 'translations' 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. ("e" [selectColumn]="true" [multiSelect]="false" [substituteRows]="false" [expandableRows]="true"
    [ERROR ->][translations]="translations" [indexColumnHeader]="'#'" [selectOnRowClick]="true">
    <template #dat"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@6:4
Can't bind to 'indexColumnHeader' since it isn't a known property of 'data-table'.
1. If 'data-table' is an Angular component and it has 'indexColumnHeader' 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. ("iSelect]="false" [substituteRows]="false" [expandableRows]="true"
    [translations]="translations" [ERROR ->][indexColumnHeader]="'#'" [selectOnRowClick]="true">
    <template #dataTableExpand let-item="item">
"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@6:34
Can't bind to 'selectOnRowClick' since it isn't a known property of 'data-table'.
1. If 'data-table' is an Angular component and it has 'selectOnRowClick' 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. ("teRows]="false" [expandableRows]="true"
    [translations]="translations" [indexColumnHeader]="'#'" [ERROR ->][selectOnRowClick]="true">
    <template #dataTableExpand let-item="item">
      <div [textContent]=""): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@6:60
Can't bind to 'property' since it isn't a known property of 'data-table-column'.
1. If 'data-table-column' is an Angular component and it has 'property' input, then verify that it is part of this module.
2. If 'data-table-column' 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. ("="item.description" style="padding: 5px; color: gray"></div>
    </template>
    <data-table-column [ERROR ->][property]="'objId'" [header]="'Id#'" [sortable]="true">
    </data-table-column>
    <data-table-col"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@10:23
Can't bind to 'header' since it isn't a known property of 'data-table-column'.
1. If 'data-table-column' is an Angular component and it has 'header' input, then verify that it is part of this module.
2. If 'data-table-column' 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. ("tyle="padding: 5px; color: gray"></div>
    </template>
    <data-table-column [property]="'objId'" [ERROR ->][header]="'Id#'" [sortable]="true">
    </data-table-column>
    <data-table-column [property]="'titu"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@10:44
Can't bind to 'sortable' since it isn't a known property of 'data-table-column'.
1. If 'data-table-column' is an Angular component and it has 'sortable' input, then verify that it is part of this module.
2. If 'data-table-column' 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. ("x; color: gray"></div>
    </template>
    <data-table-column [property]="'objId'" [header]="'Id#'" [ERROR ->][sortable]="true">
    </data-table-column>
    <data-table-column [property]="'titulo'" [header]="'T"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@10:61
'data-table-column' is not a known element:
1. If 'data-table-column' is an Angular component, then verify that it is part of this module.
2. If 'data-table-column' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <div [textContent]="item.description" style="padding: 5px; color: gray"></div>
    </template>
    [ERROR ->]<data-table-column [property]="'objId'" [header]="'Id#'" [sortable]="true">
    </data-table-column>
"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@10:4
Can't bind to 'property' since it isn't a known property of 'data-table-column'.
1. If 'data-table-column' is an Angular component and it has 'property' input, then verify that it is part of this module.
2. If 'data-table-column' 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. ("erty]="'objId'" [header]="'Id#'" [sortable]="true">
    </data-table-column>
    <data-table-column [ERROR ->][property]="'titulo'" [header]="'Titulo'" [sortable]="true">
    </data-table-column>
    <data-table"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@12:23
Can't bind to 'header' since it isn't a known property of 'data-table-column'.
1. If 'data-table-column' is an Angular component and it has 'header' input, then verify that it is part of this module.
2. If 'data-table-column' 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. ("r]="'Id#'" [sortable]="true">
    </data-table-column>
    <data-table-column [property]="'titulo'" [ERROR ->][header]="'Titulo'" [sortable]="true">
    </data-table-column>
    <data-table-column [property]="'d"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@12:45
Can't bind to 'sortable' since it isn't a known property of 'data-table-column'.
1. If 'data-table-column' is an Angular component and it has 'sortable' input, then verify that it is part of this module.
2. If 'data-table-column' 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. ("]="true">
    </data-table-column>
    <data-table-column [property]="'titulo'" [header]="'Titulo'" [ERROR ->][sortable]="true">
    </data-table-column>
    <data-table-column [property]="'description'" [header"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@12:65
'data-table-column' is not a known element:
1. If 'data-table-column' is an Angular component, then verify that it is part of this module.
2. If 'data-table-column' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("-table-column [property]="'objId'" [header]="'Id#'" [sortable]="true">
    </data-table-column>
    [ERROR ->]<data-table-column [property]="'titulo'" [header]="'Titulo'" [sortable]="true">
    </data-table-colu"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@12:4
Can't bind to 'property' since it isn't a known property of 'data-table-column'.
1. If 'data-table-column' is an Angular component and it has 'property' input, then verify that it is part of this module.
2. If 'data-table-column' 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. ("]="'titulo'" [header]="'Titulo'" [sortable]="true">
    </data-table-column>
    <data-table-column [ERROR ->][property]="'description'" [header]="'Descricao'" [sortable]="true" [cellColors]="cellColor">
    </d"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@14:23
Can't bind to 'header' since it isn't a known property of 'data-table-column'.
1. If 'data-table-column' is an Angular component and it has 'header' input, then verify that it is part of this module.
2. If 'data-table-column' 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. ("ulo'" [sortable]="true">
    </data-table-column>
    <data-table-column [property]="'description'" [ERROR ->][header]="'Descricao'" [sortable]="true" [cellColors]="cellColor">
    </data-table-column>
    <data"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@14:50
Can't bind to 'sortable' since it isn't a known property of 'data-table-column'.
1. If 'data-table-column' is an Angular component and it has 'sortable' input, then verify that it is part of this module.
2. If 'data-table-column' 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-column>
    <data-table-column [property]="'description'" [header]="'Descricao'" [ERROR ->][sortable]="true" [cellColors]="cellColor">
    </data-table-column>
    <data-table-column [property"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@14:73
Can't bind to 'cellColors' since it isn't a known property of 'data-table-column'.
1. If 'data-table-column' is an Angular component and it has 'cellColors' input, then verify that it is part of this module.
2. If 'data-table-column' 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. ("-column>
    <data-table-column [property]="'description'" [header]="'Descricao'" [sortable]="true" [ERROR ->][cellColors]="cellColor">
    </data-table-column>
    <data-table-column [property]="'active'" [head"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@14:91
'data-table-column' is not a known element:
1. If 'data-table-column' is an Angular component, then verify that it is part of this module.
2. If 'data-table-column' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("le-column [property]="'titulo'" [header]="'Titulo'" [sortable]="true">
    </data-table-column>
    [ERROR ->]<data-table-column [property]="'description'" [header]="'Descricao'" [sortable]="true" [cellColors]=""): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@14:4
Can't bind to 'property' since it isn't a known property of 'data-table-column'.
1. If 'data-table-column' is an Angular component and it has 'property' input, then verify that it is part of this module.
2. If 'data-table-column' 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. ("ricao'" [sortable]="true" [cellColors]="cellColor">
    </data-table-column>
    <data-table-column [ERROR ->][property]="'active'" [header]="'Ativo'">
    </data-table-column>
  </data-table>
"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@16:23
Can't bind to 'header' since it isn't a known property of 'data-table-column'.
1. If 'data-table-column' is an Angular component and it has 'header' input, then verify that it is part of this module.
2. If 'data-table-column' 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. ("ue" [cellColors]="cellColor">
    </data-table-column>
    <data-table-column [property]="'active'" [ERROR ->][header]="'Ativo'">
    </data-table-column>
  </data-table>
"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@16:45
'data-table-column' is not a known element:
1. If 'data-table-column' is an Angular component, then verify that it is part of this module.
2. If 'data-table-column' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("n'" [header]="'Descricao'" [sortable]="true" [cellColors]="cellColor">
    </data-table-column>
    [ERROR ->]<data-table-column [property]="'active'" [header]="'Ativo'">
    </data-table-column>
  </data-table>"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@16:4
'data-table' is not a known element:
1. If 'data-table' is an Angular component, 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. ("

<div style="margin: auto; max-width: 1000px; margin-top:2px">
  [ERROR ->]<data-table id="regs-grid" headerTitle='Categorias' [items]="regs | FilterPipe: queryString" [itemCou"): ng:///home/duard/DevFire/app-vli/src/app/categorias/categorias-table/categorias-table.component.html@4:2

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/home/duard/DevFire/app-vli/src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts

Request: Export to CSV / PDF

Great component! Any plans to implement an "Export to CSV / PDF" functionality? Or any hints on how to do it?

how to update the "data-table-column" header caption dynamically?

Hello,

Question : Let me know how to update the "data-table-column" header caption dynamically?

Iam trying to update the header caption dynamically in the angular4 datatable component.
and it s not working and thrown the below exception

CS code

this.sourceSprint='Test1';

HTML code

<data-table id="dtbliss" headerTitle="Comparision: lib flame + BLIS" [items]="items" [itemCount]="itemCount" (rowClick)="rowClick($event)"
(rowDoubleClick)="rowDoubleClick($event)" [pagination]="false" [indexColumn]="false"
[rowTooltip]="rowTooltip">
<data-table-column [property]="'Precision'" item-width="10%" [header]="'{{sourceSprint}}'" [sortable]="true" [resizable]="true">

                                    </data-table-column>

Exception:

. It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (" [resizable]="true">

Do NOT use this! ERROR in DataTableModule is not an NgModule

This table module fails as written,
ng build --prod fails from a fresh pull.
This module is written incorrectly.

DO NOT USE THIS TABLE ggmod is no longer supporting this.

Look elsewhere for a table module.
Use at your own risk, it will fail on you.

How to get selected all records from angular 5 data table?

How to get selected all records from angular 5 data table, when we submit? Please help us.

No Documentation

There is no documentation in your code! The demo is not sufficient

How Do you use this??

I can't find any usage examples or documentation

Can we edit row in angular-2-datatable?

Can we edit row in angular-2-datatable? Please help us.

data table not showing and no errors after creating production build

i have install angular-2-data-table it is working fine at local but when i m creating production build data table not showing

Selected row programmatically

Hi,

I'm using properties [selectColumn]="true" [multiSelect]="true" and
I'd like to know if it is possible selected programmatically the checkboxes?

Resize column when there are hidden columns

For example, a table with 3 columns, col1, col2, col3, if col3 is hidden, then col2 cannot be resized.

Reload Item from controller.

How can we reload data table from our component?
Suppose we have action button in our each row like view and delete.
On delete button how can we refresh the list from our component

Sorting based on value of cell (without property)

<data-table-column
            [property]="'wins'"
            [header]="'Wins'"
            [sortable]="true">
</data-table-column>
<data-table-column
           [header]="'Win Rate'">  <!-- [cellColors]="cellColor" -->
           <ng-template #dataTableCell let-item="item">
                <span>{{item.wins  | rating: item.totalGames}}</span>
           </ng-template>
 </data-table-column>

I am able to sort wins column since I can assign property and sortable inputs. But for win rate, I dont have any property value and it looks like sorting only works with property input.

I calculate win rate with pipe and show it. Is there a way to sort columns like this ?

Displaying no items found text

How can we display a text message between the headers and the paging displaying any required information, like a text message or custom loading html

Not enough documentation

Please provide detailed documentation.

Ajax not working

Having issues using your module when fetching the data over a network

Cannot read property 'selectedRows' of undefined

I'm trying mulitiple select data table

proResources = new DataTableResource(this.products);
proCount = 0;
@ViewChild(DataTable) productsTable: DataTable;

if i try to display selectedrows in table means i get this error Cannot read property 'selectedRows' of undefined

help me how to fix this

Delete item (lines) according to checkbox value

Hi there,

I can't reach what I expected to do, I would like to delete multiple item, multiple lines from a table, according to a checkbox value in this same table.

I actually want to check every line I want to delete, then erase them all by clicking on a button.
The erase function was not a problem for one item, but I don't know how to detect a "Check" / "Uncheck" event in the checkbox. It is supposed to send the index of the item to a service that will add it to an Array.

How can I detect that a checkbox is checked/unchecked, to execute that kind of function?

Here is my declaration of the table from the HTML document :
<data-table
id="asset-grid"
headerTitle="Assets"
[items]="assets"
[itemCount]="assetCount"
(reload)="reloadAssets($event)"
[autoReload]="true"
[showReloading]="false"
[selectColumn]="true"
[multiSelect]="true"
[indexColumn]="false">

AOT Support

Is AOT supported? If not how soon can we add it in? Thanks!

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
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.

Request: Add virtual scrolling

Issue with row selection and changing pages

Hello,

First off, thank you for creating this component. The demos and source code are readable and easy to understand.

Now for the issue.
I was able to recreate this using your 3rd demo titled "Films" from here:
https://ggmod.github.io/angular-2-data-table-demo/

Description:
When you make a row selection then change pages then change back you lose your visual row selection.

Steps:

Select row 1 "The Shawshank Redemption" by clicking row 1.
Go to page 2 by using next page arrow.
Go back to page 1 by using previous page arrow.
"The Shawshank Redemption" no longer has a checkmark in the checkbox but is still shown as selected in the text field below the table.(ie. Selected: The Shawshank Redemption)

I have attempted to work around the issue by binding the table and setting the rows to selected manually but I think the rows are still selected correctly behind the scenes, just not in the view.

I will continue looking for a workaround, but thought this should be brought to your attention.

Thank you for your time and support,
Will

scrollbarV with pagination create NPE

When using scrollbarV: true on a table using pagination, the component crash when loading another page with TypeError: Cannot read property '$$expanded' of undefined

Hide upper option

Hello!

How can I remove the 2 buttons options (refresh + select visible columns)?

Thank you

Request: Filter / Search functionality

Any plans to implement "Filter / Search" functionality? I would like to have that instead of the headerTitle.

ggmod / angular-2-data-table Goto Github PK

angular-2-data-table's Introduction

Angular 2 Data Table

** Updated for Angular 5 here. This repo will not be updated **

Installing:

Licensing

angular-2-data-table's People

Contributors

Stargazers

Watchers

Forkers

angular-2-data-table's Issues

Error message:

HTML code

Recommend Projects

Recommend Topics

Recommend Org

Jobs

Updated for Angular 5 here. This repo will not be updated