JSFiddle - React, Tailwind, and code Playground

by wenyi

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/extensions/filter-control/bootstrap-table-filter-control.js"></script>
<table ref="mainTable" class="table table-striped table-bordered table-hover" 
                cellSpacing="0" id="mainTable" data-show-toggle="true" 
                data-show-columns="true" data-search="true" data-pagination="true" data-filter-control="true">
             <thead>
                <tr>
                   <th data-field="state" data-checkbox="true"></th>
                   <th data-field="CustomerName" data-sortable="true" data-filter-control="select">Customer Name</th>
                   <th data-field="LocationType" data-sortable="true">Location Type</th>
                   <th data-field="Location" data-sortable="true" data-filter-control="input" data-search-formatter="false" data-formatter="locationFormatter">Location</th>
                </tr>
             </thead>
             <tbody>
                <tr>
                   <td></td>
                   <td>Cap Corp</td>
                   <td>Main</td>
                   <td> 
                   1( 15 % )
                   </td>
                </tr>
                <tr>
                   <td></td>
                   <td>Cap Corp</td>
                   <td>Other</td>
                   <td>1 (5.0 %)</td>
                </tr>
                <tr>
                   <td></td>
                   <td>Tel</td>
                   <td>Main</td>
                   <td>3 (10.0 %)
                   </td>
                </tr>
                <tr>
                   <td></td>
                   <td>Tel</td>
                   <td>Other</td>
                   <td>2 (10.0 %)</td>
                </tr>
                <tr>
                   <td></td>
 ...

JavaScript

$('#mainTable').bootstrapTable({
});

function locationFormatter(value) {
	return '<a href="https://www.google.com" target="_blank">' + value + '</a>'
}