JSFiddle - React, Tailwind, and code Playground

by soiefmail

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.js"></script>
<table class="table striped table-background-light table-primary table-spacing-large full-width no-borders pro-org-list met-table" id="users-table" data-search="true" data-search-formatter="false" data-toggle="table"
               data-sort-name="id" data-sort-order="asc" data-unique-id="userId"
               data-click-to-select="true" data-pagination="true" data-page-size="20" data-page-list="[10, 20, 50, 100]">
	<thead> 
        <tr>
                            <th data-field="id" data-order="desc" data-sortable="true" class="art-ma-users-nameLbl" data-formatter="formatId" data-search-formatter="false" data-searchable="true">Id</th>

            <th data-field="name">Name</th>
        </tr>
    </thead>
    <tbody>
      <tr><td class="art-ma-users-nameUser0">ALI, SOIEF</td><td>a</td></tr>
      <tr><td>b</td><td>b</td></tr>
    </tbody>
</table>
<script>
function formatId(value){
  var links = {
    a: 'www.google.com',
    b: 'www.facebook.com'
  };
	return '<font color="blue"><span data-toggle="tooltip" data-search-formatter="false" data-trigger="hover" data-placement="left auto" data-content="[email protected]" data-original-title="" title=""><a href="/account/organization/users/8000000005600051126">' + value + '</a></span></font>';
};
</script>