valor-software / ng2-table Goto Github PK
View Code? Open in Web Editor NEWSimple table extension with sorting, filtering, paging... for Angular2 apps
Home Page: http://valor-software.github.io/ng2-table/
License: MIT License
Simple table extension with sorting, filtering, paging... for Angular2 apps
Home Page: http://valor-software.github.io/ng2-table/
License: MIT License
Hi, I installed it by npm but keep getting this error.
I modified a little bit my project since I am using angular2-seed skafolding. The HTML looks the same as the example:
`import {Component, OnInit} from '@angular/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgIf} from '@angular/common';
import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
import {NG_TABLE_DIRECTIVES} from 'ng2-table/ng2-table';
import {TableData} from './table-data';
@component({
moduleId: module.id,
selector: 'table-demo',
templateUrl: 'table-section.component.html',
directives: [NG_TABLE_DIRECTIVES, PAGINATION_DIRECTIVES, NgClass, NgIf, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class TableDemoComponent implements OnInit {
public rows:Array = [];
public columns:Array = [
{title: 'Name', name: 'name'},
{title: 'Position', name: 'position', sort: false},
{title: 'Office', name: 'office', sort: 'asc'},
{title: 'Extn.', name: 'ext', sort: ''},
{title: 'Start date', name: 'startDate'},
{title: 'Salary ($)', name: 'salary'}
];
public page:number = 1;
public itemsPerPage:number = 10;
public maxSize:number = 5;
public numPages:number = 1;
public length:number = 0;
public config:any = {
paging: true,
sorting: {columns: this.columns},
filtering: {filterString: '', columnName: 'position'}
};
private data:Array = TableData;
public constructor() {
this.length = this.data.length;
}
public ngOnInit():void {
this.onChangeTable(this.config);
}
public changePage(page:any, data:Array = this.data):Array {
console.log(page);
let start = (page.page - 1) * page.itemsPerPage;
let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length;
return data.slice(start, end);
}
public changeSort(data:any, config:any):any {
if (!config.sorting) {
return data;
}
let columns = this.config.sorting.columns || [];
let columnName:string = void 0;
let sort:string = void 0;
for (let i = 0; i < columns.length; i++) {
if (columns[i].sort !== '') {
columnName = columns[i].name;
sort = columns[i].sort;
}
}
if (!columnName) {
return data;
}
// simple sorting
return data.sort((previous:any, current:any) => {
if (previous[columnName] > current[columnName]) {
return sort === 'desc' ? -1 : 1;
} else if (previous[columnName] < current[columnName]) {
return sort === 'asc' ? -1 : 1;
}
return 0;
});
}
public changeFilter(data:any, config:any):any {
if (!config.filtering) {
return data;
}
let filteredData:Array<any> = data.filter((item:any) =>
item[config.filtering.columnName].match(this.config.filtering.filterString));
return filteredData;
}
public onChangeTable(config:any, page:any = {page: this.page, itemsPerPage: this.itemsPerPage}):any {
if (config.filtering) {
Object.assign(this.config.filtering, config.filtering);
}
if (config.sorting) {
Object.assign(this.config.sorting, config.sorting);
}
let filteredData = this.changeFilter(this.data, this.config);
let sortedData = this.changeSort(filteredData, this.config);
this.rows = page && config.paging ? this.changePage(page, sortedData) : sortedData;
this.length = sortedData.length;
}
}
`
I want to placethe pager in top and bottom of the t
Is it possible to have the sorting on columns of type string not to consider the case?
Running the 'npm i ng2-table --save' command as suggested in the readme installs a placeholder directory with no content.
I tried downloading the zip, moving the content from there into my node_modules, and referencing the index file in there, but that results in some errors as well. Some of them may be from using .37 instead of the current .39 release, but I'm not sure about the pagination errors. I'll try removing those references to get it working.
node_modules/ng2-table/components/pagination/pagination.ts(17,3): error TS7018: Object literal's property 'maxSize' implicitly has an 'any' type.
node_modules/ng2-table/components/pagination/pagination.ts(146,5): error TS2346: Supplied parameters do not match any signature of call target.
node_modules/ng2-table/components/pagination/pagination.ts(151,26): error TS2339: Property 'elementRef' does not exist on type 'Pagination'.
node_modules/ng2-table/components/pagination/pagination.ts(163,22): error TS2339: Property 'cd' does not exist on type 'Pagination'.
node_modules/ng2-table/components/pagination/pagination.ts(179,22): error TS2339: Property 'blur' does not exist on type 'EventTarget'.
node_modules/ng2-table/components/pagination/pagination.ts(182,12): error TS2339: Property 'cd' does not exist on type 'Pagination'.
node_modules/ng2-table/components/pagination/pagination.ts(187,12): error TS7017: Index signature of object type implicitly has an 'any' type.
node_modules/ng2-table/components/pagination/pagination.ts(187,34): error TS7017: Index signature of object type implicitly has an 'any' type.
node_modules/ng2-table/components/pagination/pagination.ts(199,20): error TS7006: Parameter 'number' implicitly has an 'any' type.
node_modules/ng2-table/components/pagination/pagination.ts(199,28): error TS7006: Parameter 'text' implicitly has an 'any' type.
node_modules/ng2-table/components/pagination/pagination.ts(199,34): error TS7006: Parameter 'isActive' implicitly has an 'any' type.
node_modules/ng2-table/components/pagination/pagination.ts(207,20): error TS7006: Parameter 'currentPage' implicitly has an 'any' type.
node_modules/ng2-table/components/pagination/pagination.ts(207,33): error TS7006: Parameter 'totalPages' implicitly has an 'any' type.
node_modules/ng2-table/components/pagination/pagination.ts(208,9): error TS7005: Variable 'pages' implicitly has an 'any[]' type.
node_modules/ng2-table/components/table/filtering.ts(4,14): error TS2305: Module '"angular2/angular2"' has no exported member 'LifecycleEvent'.
node_modules/ng2-table/components/table/filtering.ts(9,27): error TS2307: Cannot find module 'angular2/src/forms/directives/shared'.
node_modules/ng2-table/components/table/filtering.ts(31,18): error TS7006: Parameter 'event' implicitly has an 'any' type.
node_modules/ng2-table/components/table/paging.ts(4,14): error TS2305: Module '"angular2/angular2"' has no exported member 'LifecycleEvent'.
node_modules/ng2-table/components/table/paging.ts(21,16): error TS7006: Parameter 'event' implicitly has an 'any' type.
node_modules/ng2-table/components/table/sorting.ts(4,26): error TS2305: Module '"angular2/angular2"' has no exported member 'LifecycleEvent'.
node_modules/ng2-table/components/table/sorting.ts(24,16): error TS7006: Parameter 'event' implicitly has an 'any' type.
node_modules/ng2-table/components/table/table.ts(69,9): error TS7005: Variable 'sortColumns' implicitly has an 'any[]' type.
node_modules/ng2-table/components/table/table.ts(80,17): error TS7006: Parameter 'column' implicitly has an 'any' type.
node_modules/ng2-table/tsd.d.ts(1,1): error TS6053: File 'node_modules/ng2-table/typings/es6-object.d.ts' not found.
node_modules/ng2-table/tsd.d.ts(2,1): error TS6053: File 'node_modules/ng2-table/node_modules/angular2/bundles/typings/angular2/angular2.d.ts' not found.
Hi everyone,
The current implementation only allows the user to access a row's first-level properties.
For example, if you have some underlying objects that look like this
let students = [
{name: 'ABC', address: {number: 123, street: ABC Street'}, phones: [{type: 'cell', number: 123456789}]},
{name: 'XYZ', address: {number: 456, street: 'XYZ Street'}, phones: [{type: 'cell', number: 123456789}]}
];
and you want to display the street on the table, you will first have to map them to something like this
let rows = students.map(student => {
return {name: student.name, addressNumber: student.address.number, addressStreet: student.address.street};
})
before you can assign this to ngTable
's rows
input. It's because rows[0]['address.number']
will return undefined
.
I propose we allow users to access properties that are deeper than the first-level properties.
For example, to display the street name, one can simply set the column.name
to 'address.street'
. This notation will work for array too. For example, to show the first phone number, just set column.name
to 'phones.0.number'
.
I need this for myself so I made a change and sent in a PR. Please take a look and let me know what you think.
Thank you.
Why do the sorting arrow like in the demo is not displayed in my app?
No console errors
Do we have an option to use pipe operator? Something like, {title: 'Date', name: 'creation_date | date'}
How can I add a new column with button that show the details of the row ????
This error happend when the total of results need less "pages" than the position for the actual page.
Steps to reproduce:
go to: http://valor-software.com/ng2-table/
In the example table, click on last button on the pagination menu
Go to filter input, type anything
How can i filter for multiple columns in filtering property?:
filtering: {filterString: '', columnName: 'name'}
Hi,
I was trying the sort feature in demo app.
I think that there is a bug in table-demo.html.
change
<ngTable [config]="config.sorting" (tableChanged)="onChangeTable(config)" [rows]="rows" [columns]="columns">
by
`<ngTable [config]="config.sorting"
(tableChanged)="onChangeTable($event)"
[rows]="rows" [columns]="columns">
Is this correct?
Thanks.
I just tried to use the latest version and it doesn't compile:
client/node_modules/ng2-table/components/table/ng-table.component.ts(42,34): error TS2339: Property 'find' does not exist on type 'any[]'.
client/node_modules/ng2-table/components/table/ng-table.component.ts(42,40): error TS7006: Parameter 'col' implicitly has an 'any' type.
client/node_modules/ng2-table/components/table/ng-table.component.ts(44,16): error TS2339: Property 'assign' does not exist on type 'ObjectConstructor'.
Am I missing something?
When trying to use ng2-table, I set it up like this:
npm install --save ng2-table
In index.html:
<script src="node_modules/ng2-table/ng2-table.js"></script>
Then in config.js:
System.config({
packages: {
defaultJSExtensions: true,
app: {
format: 'register',
defaultExtension: 'js'
}
},
paths: {
lodash: './node_modules/lodash/lodash.js',
moment: './node_modules/moment/moment.js',
'ng2-dragula': './node_modules/ng2-dragula',
'ng2-table': './node_modules/ng2-table',
require: './node_modules/require/'
}
});
Now, everything seems fine, typescript finds the correct definition in the node_modules/ng2-table folder, etc. However, when I try to configure the table in the example, on a basic table:
@Component({
selector: 'work-board-list-view',
directives: [
WorkBoardCategoryComponent,
NG_TABLE_DIRECTIVES
],
providers: [
WorkItemStatusesService
],
template: `
<div class="ui segment">
<ngTable [rows]="rows" [columns]="columns">
</ngTable>
</div>
})
export class WorkBoardListViewComponent {
public rows: Array<any> = [];
public columns: Array<any> = [
{ title: 'Issue Link', name: 'issueLink'},
{ title: 'Description', name: 'description'},
{ title: 'Project', name: 'project'},
{ title: 'Test Cases', name: 'testCases'},
{ title: 'Status', name: 'status'},
{ title: 'Assigned', name: 'users'}
];
}
I get the below error in the screenshot:
Can't find variable: require
Any help would be greatly appreciated.
Hi guy,
my table have two column: id can sort, name can't sort
public columns:Array = [
{title: 'Id', name: 'id'},
{title: 'Name', name: 'name', sort: false}
];
When run function onChangeTable excute, parameter config is:
[
{name: "id", title: "Id"},
{name: "name", title: "Name", sort: false}
]
I click column "id" to sort. Now, column "name" can sort => Issue. I checked function onChangeTable excute, parameter config is:
[
{name: "id", title: "Id", sort: "asc"},
{name: "name", title: "Name", sort: ""}
]
There is a bug. steps to replicate:
Table is stuck on page 3 with no records.
Need an ability to ignore case while searching through the table.
Was wondering if you had an example loading data from an api endpoint? I haven't been able to get dynamically fetched data to show up in the table, only if I hard-code the values in-memory.
Hi guys,
I tried to use the component, and it seems a bit rigid, so I've implemented a more flexible version of the table.
A short chagelist:
const CONTROL_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {
useExisting: forwardRef(() => DataGrid),
multi: true
});
constructor( @Query(DataColumn) cols: QueryList<DataColumn> ) {
cols.changes.subscribe(() => {
this.columns = cols.toArray();
});
}
import { Component, Input, ContentChild, TemplateRef } from '@angular/core';
@Component({
selector: 'ng-column',
template: ''
})
export class DataColumn {
@Input() public sortable: boolean = false;
@Input() public filterable: boolean = false; // unused for the moment
@Input() public width: string;
@Input() public title: string;
@Input() public property: string;
@Input() public sort: string = '';
@ContentChild(TemplateRef) html: TemplateRef<any>
}
import { Component, Input, OnInit, ViewContainerRef } from '@angular/core';
import { DataColumn } from './datacolumn.component';
@Component({
selector: 'ng-column-loader',
template: ''
})
export class DataColumnLoader implements OnInit {
@Input() column: DataColumn;
@Input() index: number;
@Input() data: any;
constructor(private viewContainer: ViewContainerRef) {
}
ngOnInit() {
// load the template in the component view and expose data
let view = this.viewContainer.createEmbeddedView(this.column.html, {
'\$implicit': this.column,
'index': this.index,
'data': this.data
});
}
}
An example using the new markup:
<ng-table [ngModel]="config.rows" (sortChange)="onSortChange($event)">
<ng-column [title]="'Value'"
[property]="'value'"
[width]="'30%'"
[sortable]="true"></ng-column>
<ng-column [title]="'Actions'">
<template let-index="index" let-entry="data">
<button class="btn btn-secondary"
(click)="onRemove(index, entry)">Remove {{entry.name}}</button>
</template>
</ng-column>
</ng-table>
Component({
templateUrl: 'grid.html',
directives: [DATAGRID_DIRECTIVES, PAGINATION_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class GridPage implements OnInit {
config: IGridConfig = {
rows: [],
page: {
index: 1,
count: 15,
total: 0
},
length: 0
}
data: Array<any> = [];
constructor() {
}
ngOnInit() {
this.data.push({
value: 0,
name: 'Hello'
});
this.data.push({
value: 1,
name: 'World'
});
}
public onSortChange(options: any) {
console.log('sort event', options);
// TO-DO:
// Query using the provided sort options
}
public onRemove(index: number, entry: T) {
console.log('index', index);
console.log('robot', entry);
}
}
I consider that components should be more modular in nature in order to offer flexibility.
If you find the above solution to be acceptable and worth integrating into the master branch, let me know and I'll have a fork with a PR in 2 day max.
This implementation has covered most of our use cases so far (I'm also going to try to integrate a row expander soon, that could be a seperate PR, if this one is accepted).
need the ability to have column header fire event on click and return the corresponding sort order so we can sort data per column.
Please add this feature as it is so common and it will definitely make ng2-table useful.
How make fields writable?
Hi i am getting an error for unexpected token while using ng2 table package.
I even mapped the ng2 table in my index.html
Is it possible to add custom content like a button to a column instead of data field?
expanding column or shrinking column width.
In an earlier version of ng2-table, it was possible to sort on multiple columns at once. Now, when you click another column, it removes the sort flag from the previous column. This simpler behavior is probably what most apps want, but it would be nice if there was a config option to enable mutli-column sort for apps that need it.
can anyone help me on how to bind edit and delete column dynamically with this ng2-table component?
also i want to open a popup on edit button click from table column.
is it possible with this?
I want to place the pager in top and bottom of the table. When I put the directive on top and bottom the pager works but the two components are isolated as the page value in the top component is not reflecting in the bottom component. Any quick fix for this?
Is is possible to add a indicator to a column when there is no sorting order selected?
This is where it stopped in ng2-table.js. Thanks in advance!
__export(require('./components/table/ng-table.component'));
__export(require('./components/table/ng-table-filtering.directive'));
__export(require('./components/table/ng-table-paging.directive'));
__export(require('./components/table/ng-table-sorting.directive'));
__export(require('./components/ng-table-directives'));
Hi,
thanks for nice table. We want to use it in our project but we need events on table item click, do you plan to add this feature?
Lukas
Columns array is not cleaned up before assigning new values or updating existing one;
It appears as issue when you provide new list of columns when some column was removed from previous list.
We need to prepare test data, put it into demo and get it in main component. After that we need to provide rendering functionality.
Hello
How can I pass the class
in the component.Hi guys,
I've been trying to dynamically change the columns and the rows on a table. When i create the new array of columns, instead of re-creating the table with the new columns, the table is persisting the old columns, and appending the new once.
We found out that the "issue" is located in ng-table.component.ts
starting from line 37.
Can you please give me an info if this is an issue, or if it was intentional made it like this? And if this is not an issue, is there a workaround?
I am using Icomoon in overall website, For sorting icon I don't want to use Font Awesome, Is there a way to change this?
I'm having problems trying to get the demo to work.
npm i ng2-table --save
var map = {
...
'ng2-table': 'node_modules/ng2-table'
};
var packages = {
...
'ng2-table': { defaultExtension: 'js' }
};
When loading the created component I get the following error:
Can't bind to 'totalItems' since it isn't a known native property
What am I missing?
Hi,
<script src="node_modules/ng2-table/ng2-table.js"></script> => Uncaught TypeError: Unexpected anonymous System.register call.What am I doing wrong?
Thank you for your help!
Regards,
Ingemar
There is a issue in sorting when navigating to descending. The issue is in the file
ng2-table/components/table/ng-table-sorting.directive.ts
line 28: this.column.sort = '';
It works when its changed to this.column.sort = 'asc';
Can this fix be added soon.
Sasi
Currently I don't see a way to format cell data within the table in order to parse Dates for example.
There is any way to filter data onsubmit from template ( for example setting an input variable of the component)?
In the html part of the demo,
<pre *ngIf="config.paging" class="card card-block card-header">Page: / </pre>
should be
<pre *ngIf="config.paging" class="card card-block card-header">Page: {{page}} / {{numPages}}</pre>
The source code is correct, so I guess it only shows incorrect.
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.