valor-software / ng2-table Goto Github PK

How can i filter for multiple columns in filtering property?:
filtering: {filterString: '', columnName: 'name'}

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 have the sorting on columns of type string not to consider the case?

There is a bug. steps to replicate:

1. Change page on pagination, lets say page 3.
2. filter value in input box.

Table is stuck on page 3 with no records.

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

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: ""}
]

Need an ability to ignore case while searching through the table.

Currently I don't see a way to format cell data within the table in order to parse Dates for example.

Is it possible to add custom content like a button to a column instead of data field?

How make fields writable?

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.

import {NG_TABLE_DIRECTIVES} from 'ng2-table';

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.

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;

}
}
`

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.

Hi,

What am I doing wrong?

Thank you for your help!

Regards,
Ingemar

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'));

Hello

How can I pass the class

How can I add a new column with button that show the details of the row ????

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

There is any way to filter data onsubmit from template ( for example setting an input variable of the component)?

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.

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

1. documentation
2. gh-page
3. update pagination in ng2-bootstrap repo

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.

Is is possible to add a indicator to a column when there is no sorting order selected?

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?

I want to placethe pager in top and bottom of the t

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?

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?

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'm having problems trying to get the demo to work.

1. I've installed the module via:
   npm i ng2-table --save
2. I've added the entries in systemjs.config.js for the map and package fields

var map = {
    ...
    'ng2-table':                    'node_modules/ng2-table'
  };

  var packages = {
   ...
    'ng2-table':                    { defaultExtension: 'js' }
  };

1. Copied the html and ts from here: http://valor-software.com/ng2-table/

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?

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.

expanding column or shrinking column width.

Why do the sorting arrow like in the demo is not displayed in my app?

No console errors

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:

• the [rows] input has been replaced with [ngModel] via ControlValueAccessor:

const CONTROL_VALUE_ACCESSOR = new Provider(
    NG_VALUE_ACCESSOR, {
        useExisting: forwardRef(() => DataGrid),
        multi: true
});

• the old columns array is now generated via the 'ng-column' markup as so:

constructor( @Query(DataColumn) cols: QueryList<DataColumn> ) {
        cols.changes.subscribe(() => {
            this.columns = cols.toArray();
        });
    }

• columns are descriptive and are implemented as seperate components
• columns can be marked as sortable and widths can be specified per column

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

• columns support templates

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

Do we have an option to use pipe operator? Something like, {title: 'Date', name: 'creation_date | date'}

We need to prepare test data, put it into demo and get it in main component. After that we need to provide rendering functionality.

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.

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?

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.