Change class of a row.

[eolcum]

Is it possible to change a style class of a specific row? I want to do it in the use case: user clicks on a row and the row highlights.

[kubent]

I have the same requirement, I pulled down the code and currently trying to implement. Will share if I get it to work.

I am adding an id attribute to the td using the list index and a config property for the name, I will then add a rowSelect output with the index and selected row. Based on the return you will be able to style the row.

[kubent]

Found a simpler solution, since it uses bootstrap all that needs to happen is for the tr to toggle the "selected" class. You can avoid multi-select by clearing all selected on the next click.

[flycat52]

I have the same question too... will follow on this.

[webia1]

A quick and dirty solution:

Step 1: Integrate jQuery Step 2: Give your result table an ID like:

<ng-table id="resultDataTable" ...

Step 3: Modify your onCellClick method:

onCellClick(data: any): any {
    /* get index of row */
    let index = this.tableData.indexOf(data.row);  

    /* add an class 'active' on click */
    $('#resultDataTable').on('click', 'tr', function (event: any) {
      //noinspection TypeScriptUnresolvedFunction
      $(this).addClass('active').siblings().removeClass('active');
    });
}

[bigbo26]

@valorkin do you have any ways to change class of row selected ? Like @kubent and @eolcum, i search to set css class on row selected by user.

Thx for your help.

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