JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<html>
<body>
<table class="table table-striped- table-bordered- table-hover- leader_ no-footer dataTable" id="leader_board_table" role="grid"><tbody><tr role="row" class="odd"><td class="text-center sorting_1">1</td><td class="d-flex align-items-center"> <div class="img_com m--margin-right-10"><img src="https://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/user-male-icon.png" class="img-fluid"></div> <span> Umair Zafar </span></td><td class="m--font-bolder">1110926</td><td>1</td><td class="m--font-success">(11.09%)</td><td class="m--font-danger">(-4.68%)</td></tr><tr role="row" class="even"><td class="text-center sorting_1">2</td><td class="d-flex align-items-center"> <div class="img_com m--margin-right-10"><img src="https://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/user-male-icon.png" class="img-fluid"></div> <span> Shahs Sarfaraz</span></td><td class="m--font-bolder">1105546</td><td>4488</td><td class="m--font-success">(10.55%)</td><td class="m--font-danger">(-0.97%)</td></tr><tr role="row" class="odd"><td class="text-center sorting_1">3</td><td class="d-flex align-items-center"> <div class="img_com m--margin-right-10"><img src="https://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/user-male-icon.png" class="img-fluid"></div> <span> Naeem Sarwar</span></td><td class="m--font-bolder">1099706</td><td>1076191</td><td class="m--font-success">(9.97%)</td><td class="m--font-danger">(-0.10%)</td></tr><tr role="row" class="even"><td class="text-center sorting_1">4</td><td class="d-flex align-items-center"> <div class="img_com m--margin-right-10"><img...
CSS
.img-fluid{
width:100%;
max-width: 20px;
display:inline-block;
}
JavaScript
$("#leader_board_table").DataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "Start buying to build your portfolio first!",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "No entries found",
"infoFiltered": "(filtered1 from _MAX_ total entries)",
"lengthMenu": "_MENU_ entries",
"search": "Search:",
"zeroRecords": "No matching records found"
},
buttons: [
{ extend: 'print', className: 'btn btn-sm btn-group btn-theme-dark', title: 'Ranking' },
{ extend: 'pdf', className: 'btn btn-sm btn-group btn-theme-dark', title: 'Ranking' },
{ extend: 'csv', className: 'btn btn-sm btn-group btn-theme-dark', title: 'Ranking' }
],
//"columnDefs": coldefs,
columnDefs: [{
targets: [2,3,4,5],
render: function(data, type) {
if (type === 'sort' || type === 'type') {
var d = data.split(' ')[4].replace(/,/g,"");
console.log(d)
return d;
}
return data
}
}],
"lengthMenu": [
[5, 10, 15, 30, -1],
[5, 10, 15, 30, "All"] // change per page values here
],
// set the initial value
"pageLength": 10,
"searching": false,
"ordering": true,
"paging": true,
"bLengthChange": false,
"bPaginate": true,
"autoWidth": false,
"deferRender": false,
"bInfo": false,
...