How to create Hyperlink for the table row in angular data tables

Question

In my Scenario, I wants to apply the hyperlink for the full table row, right now its working fine for table columns in a row but I wants to apply it to the whole row not only to columns. In my case where ever in the table row clicked it needs to open the details page of the entities for example, A1, A2 such as.

<table class="display" id="example">
    <thead>
    <tr>
        <th>Information</th>
        <th>Link</th>
    </tr>
 </thead>
</table>

var responseObj = [
 { "information": "A1", "weblink": "http://www.microsoft.com" },
    { "information": "A2", "weblink": "http://www.yahoo.com" },
    { "information": "A3", "weblink": "http://www.google.com" },
    { "information": "A4", "weblink": "http://www.duckduckgo.com" }
];

$('#example').dataTable({
 "data": responseObj,
"columns": [
      { "data": "information" }, 
      { 
     "data": "weblink",
     "render": function(data, type, row, meta){
        if(type === 'display'){
            data = '<a href="' + data + '">' + data + '</a>';
         }

            return data;
        }
     } 
 ]
});

Answer 1

You can use ng-smart-table component for listing data if you are building application in angular2 or plus version. You can give link for edit in that in easy way too. Also sorting and pagination is in-build.

You can find the component detail here. https://www.npmjs.com/package/ng2-smart-table

Answer 2

//apply click event on that like below

$('#example').delegate('tbody > tr > td', 'click', function ()
{
    // 'this' refers to the current <td>, if you need information out of it
    window.open('http://example.com');
});
You'll probably want some hover event handling there as well, to give users visual feedback before they click a row.