valor-software / ng2-table

Simple table extension with sorting, filtering, paging... for Angular2 apps
http://valor-software.github.io/ng2-table/
MIT License
554 stars 336 forks source link

Iterate over rows in html #595

Open Sam2243 opened 6 years ago

Sam2243 commented 6 years ago

Hello everyone,

I am trying to iterate over the rows inside the ng-table tag but its not working. I do know that you could specify [rows]="rows" but for a use case I want to iterate over. how is that possible? The following I am doing

<ng-table [config]="config"
          [columns]="columns">
            <tr *ngFor="let row of rows">
                <td>1</td>
                <td>{{ row.eid }}</td>
                <td>{{ row.rankValue }}</td>
                <td>{{ row.reason.similarilty }}</td>
            </tr>
        </ng-table> 
exasky commented 6 years ago

You can do your example without iteration:

<ng-table [config]="config"
      [columns]="columns"
      [rows]="rows">
</ng-table>

With columns:

public columns:Array<any> = [
    {title: 'TITLE1', name: 'const'},
    {title: 'TITLE2', name: 'eid'},
    {title: 'TITLE3', name: 'rankValue'},
    {title: 'TITLE4', name: 'similarilty'}
];

On the table.ts component:

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.rows = reduceData(this.rows); // <= THIS LINE !
    this.length = sortedData.length;
}

private reduceData(rows: any) {
    const reducedData = [];
    rows.forEach(row => {
        reducedData.push({
            const: 1,
            eid: row.eid,
            rankValue: row.rankValue,
            similarilty: row.reason.similarilty
        });
    });
    return reducedData;
}