JSFiddle - React, Tailwind, and code Playground
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"
data-search="true"
data-detail-view="true"
data-detail-formatter="detailFormatter">
<thead>
<tr>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>
JavaScript
/**
* @author: Dennis Hernández
* @webSite: http://djhvscf.github.io/Blog
* @version: v1.0.0
*/
var data = [
{
"name": "02",
"stargazers_count": "01",
"forks_count": "122",
"description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
},
{
"name": "01",
"stargazers_count": "01a",
"forks_count": "150",
"description": "A jQuery plugin to select multiple elements with checkboxes :)"
},
{
"name": "02",
"stargazers_count": "02",
"forks_count": "11",
"description": "Show/hide password plugin for twitter bootstrap."
},
{
"name": "02",
"stargazers_count": "02a",
"forks_count": "4",
"description": "my blog"
},
{
"name": "A",
"stargazers_count": "1",
"forks_count": "3",
"description": "Redmine notification tools for chrome extension."
}
];
$(function () {
$('#table').bootstrapTable({
data: data,
onExpandRow: function (index, row, $detail) {
let count = $('tr').length;
for(var i = 0 ; i< (count);i++){
if(i !== index){
$('#table').bootstrapTable('collapseRow', i);
}
}
},
});
});