Search code examples
htmlcssangulartypescriptng2-bootstrap

ng2-table how to add style to specific row


Hi I'm new with angular 2. I'm using ng2-table. I added to my website table like this. I need to add a color to specific row inside the table. How is that possible ? I tried to add it like the tutorial did with his columns but without success.


Solution

  • Found an answer, taken from here: https://github.com/valor-software/ng2-table/issues/342

    We can change te color of the row by adding some style to it like this:

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