add feature to highlight the selected row

[nstadelmaier-dev]

I implemented highlighting of the selected row requested by #342 . This is done by adding the class name to be used for highlighting to the config object of the table. That means you have set the new selectedRowClass property of the config to the class that you want to apply to the selected row.

Example:

public config:any = {
    paging: true,
    sorting: {columns: this.columns},
    filtering: {filterString: ''},
    className: ['table-striped', 'table-bordered'],
    selectedRowClass : 'selectedRow'
  };

I have updated the readme files and demo app accordingly.

This is not the only option/implementation to provide this functionality but it's simple and sufficient for my use case. If I should should further change or extend the code please let me know. :)

cheers

[exasky]

As a workaround:

In the table.component.ts

export abstract class TableComponent {
    @ViewChild('tableContainer') tableContainer: any;
    tableSelectedItem: any;

    public onChangeTable(config: any, page: any = {page: this.page, itemsPerPage: this.itemsPerPage}): any {
        // Your changeTable code here

        this.getRows().then(() => setTimeout(() => this.highlightSelectedRow(this.tableSelectedItem), 10));
    }

    public onCellClick(data: any): any {
        this.highlightSelectedRow(data.row);
        this.tableSelectedItem = data.row;
    }

    private highlightSelectedRow(data: any): void {
        const rowNumber: number = data ? this.rows.findIndex(el => el.uid === data.uid) : -1;
        const trs = this.tableContainer.nativeElement.children[0].children[0].children[1].children;
        if (rowNumber !== -1) {
            if (rowNumber > -1 && rowNumber < trs.length) { // Avoid updating class if no need to
                if (trs[rowNumber].className === 'active') {
                    return;
                }
            }
            for (let i = 0; i < trs.length; i++) {
                trs[i].className = (i === rowNumber) ? 'active' : '';
            }
        }
    }
}

In table.component.html:

<div #tableContainer>
    <ng-table
        [config]="config"
        (tableChanged)="onChangeTable(config)"
        (cellClicked)="onCellClick($event)"
        [rows]="rows"
        [columns]="columns">
    </ng-table>
</div>