Bootstrap Table

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table id="table1" data-toggle="table" data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/" data-row-attributes="rowAttr">
  <thead>
    <tr>
      <th data-field="name" data-formatter="nameFormatter">Name</th>
      <th data-field="stargazers_count" data-formatter="starsFormatter">Stars</th>
      <th data-field="forks_count" data-formatter="forksFormatter">Forks</th>
      <th data-field="description">Description</th>
    </tr>
  </thead>
</table>
<button id="btnAdd">
  Add Row</button>

JavaScript

function nameFormatter(value) {
  return '<a data-catid="' + value + '" href="https://github.com/wenzhixin/' + value + '">' + value + '</a>';
}

function starsFormatter(value) {
  return '<i class="glyphicon glyphicon-star"></i> ' + value;
}

function forksFormatter(value) {
  return '<i class="glyphicon glyphicon-cutlery"></i> ' + value;
}

$("#btnAdd").click(function() {
  var row = {
    name: "new row added",
    stargazers_count: "6",
    forks_count: "10",
    description: "abc",
    test: 'oi'
  };
  $('#table1').bootstrapTable('append', row);
});


function rowAttr(row, index) {
  return {
    "data-assetdetail_id": row.forks_count,
    "data-test": row.test
  };
}