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="table" class="table table-bordered table-striped" 
       data-detail-view="true" 
       data-detail-formatter="detailFormatter">
    <thead>
        <th><input type="checkbox" id="checkall" /></th>
        <th data-field="Specialty" class="center">Provider Type</th>
        <th data-field="NPI" class="center">NPI</th>
        <th data-field="License" class="center">License</th>
        <th data-field="FirstName" class="center">First Name</th>
        <th data-field="LastName" class="center">Last Name</th>
        <th data-field="City" class="center">City</th>
        <th data-field="County" class="center">County</th>
        <th class="center">Edit</th>
        <th class="center">Delete</th>
    </thead>
</table>

JavaScript

var data = [
   {
      "NPI":"1234567890 ",
      "License":"12345",
      "FirstName":"Jane",
      "LastName":"Doe",
      "City":"Anywhere",
      "Specialty":"Dentist",
      "County":"Anderson"
   },
   {
      "NPI":"1234567890 ",
      "License":"12345",
      "FirstName":"John",
      "LastName":"Doe",
      "City":"Anywhere",
      "Specialty":"Dentist",
      "County":"Anderson"
   }
];

function detailFormatter(index, row) {
    var html = [];
    $.each(row, function (key, value) {
        html.push('<p><b>' + key + ':</b> ' + value + '</p>');
    });
    return html.join('');
}


$(function () {
    $('#table').bootstrapTable({
	    data: data,
  	  onExpandRow: function (index, row, $detail) {
    	    $detail.hide().fadeIn('slow');
    	},
    	onCollapseRow: function (index, row) {
      	  $(this).remove();
    	}
    });
});