JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="stylesheets/style.css">
  </head>

  <body>
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-auto">
          <table id="bitcoins" class="table table-striped table-bordered dt-responsive nowrap table-hover" style="width: max-content;">
            <thead>
              <tr>
                <th scope="col">Id</th>
                <th scope="col">Short</th>
                <th scope="col">Coin</th>
                <th scope="col">Price</th>
                <th scope="col">Market Cap</th>
                <th scope="col">%24H</th>
                <th scope="col">More Info</th>
              </tr>
            </thead>
            <tfoot>
              <tr>
                <th scope="col">Id</th>
                <th scope="col">Short</th>
                <th scope="col">Coin</th>
                <th scope="col">Price</th>
                <th scope="col">Market Cap</th>
                <th scope="col">%24H</th>
                <th scope="col">More Info</th>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>

    <div id="info-modal" class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 id="title-modal" class="modal-title"></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div...

CSS

body {
  overflow-x: hidden;
}

#bitcoins_wrapper {
  margin-top: 10px;
}

JavaScript

displayData();

function displayData() {
  $(document).ready(function() {
    const table = $('#bitcoins').DataTable({
      "responsive": true,
      "rowId": "id",
      "ajax": {
        "type": "GET",
        "url": "https://api.coincap.io/v2/assets",
        "dataSrc": "data",
        "contentType": 'application/json; charset=utf-8',
      },
      "columns": [{
          "data": "rank"
        },
        {
          "data": "symbol"
        },
        {
          "data": "name"
        },
        {
          "data": "priceUsd",
          render: $.fn.dataTable.render.number('.', '.', 2, '')
        },
        {
          "data": "marketCapUsd",
          render: $.fn.dataTable.render.number('.', '.', 2, '')
        },
        {
          "data": "changePercent24Hr",
          render: $.fn.dataTable.render.number('.', '.', 2, '')
        },
        {
          "data": null,
          "defaultContent": "<button class='btn btn-primary' data-toggle='modal' data-target='#info-modal' >More info</button>",
        }
      ],
      "createdRow": function(row, data, index) {
        $('td', row).eq(0).attr('id', 'td-' + index + '-1');
      }
    });
    getTableData(table);
  });
}


function getTableData(table) {
  let data = table.row($(this).closest('tr')).data();
  console.log(data);
}