JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.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">
<html>
<body>
<table class="table table-striped- table-bordered- table-hover- leader_ dataTable no-footer" id="leader_board_table" role="grid"><thead><tr role="row"><th class="text-center sorting" tabindex="0" aria-controls="leader_board_table" rowspan="1" colspan="1" aria-label="Rank: activate to sort column ascending">Rank</th><th class="sorting" tabindex="0" aria-controls="leader_board_table" rowspan="1" colspan="1" aria-label="Player: activate to sort column ascending">Player</th><th class="sorting" tabindex="0" aria-controls="leader_board_table" rowspan="1" colspan="1" aria-label="Net Worth (PKR): activate to sort column ascending">Net Worth (PKR)</th><th class="sorting" tabindex="0" aria-controls="leader_board_table" rowspan="1" colspan="1" aria-label="Cash (PKR): activate to sort column ascending">Cash (PKR)</th><th class="sorting" tabindex="0" aria-controls="leader_board_table" rowspan="1" colspan="1" aria-label="Total Gain / Loss: activate to sort column ascending">Total Gain / Loss</th><th class="sorting_desc" tabindex="0" aria-controls="leader_board_table" rowspan="1" colspan="1" aria-label="Today's Gain / Loss: activate to sort column ascending" aria-sort="descending">Today's Gain / Loss</th></tr></thead><tbody><tr role="row" class="odd"><td class="text-center">18</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> Sajad Bloch</span></td><td class="m--font-bolder"><span class="fs-10">Rs.  </span> 1,021,390</td><td class=""><span class="fs-10">Rs.  </span> 1,022</td><td class="m--font-success"><i class="fa fa-caret-up"></i> 21,390...

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: [4, 5],
    render: function(data, type) {
      if (type === 'sort' || type === 'type') {
      var re = />\s+(.*)\s+\(/m
        var d = data.match(re);
        d = d[1].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,




  //== Pagination settings
  responsive: false,
  //== Pagination settings
  dom: `<'row'<'col-sm-12 text-right search_download'fB>>
			<'row'<'col-sm-12'tr>>
			<'row'<'col-sm-12 col-md-5 m--font-grey'i><'col-sm-12 col-md-7 dataTables_pager'lp>>`,
});