JSFiddle - React, Tailwind, and code Playground

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<link href="//cdn.datatables.net/1.10.18/css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="//cdn.datatables.net/responsive/2.2.2/css/responsive.bootstrap.css" rel="stylesheet" />
<link href="//cdn.datatables.net/select/1.3.0/css/select.bootstrap.css" rel="stylesheet" />
<link href="//cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap.css" rel="stylesheet" />



  



<div class="container">
  <h1>Table</h1>
  <table id="accountsTable" class="table table-striped table-bordered">

  </table>
</div>







<script src="//code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.12.1/r-2.3.0/sp-2.0.2/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.12.1/r-2.3.0/sp-2.0.2/datatables.min.js"></script>
<script src="//cdn.datatables.net/1.10.18/js/dataTables.bootstrap.js">
  < script
  src = "https://cdn.datatables.net/select/1.4.0/js/dataTables.select.min.js" >
</script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap.js"></script>
<script src="//cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.js"></script>
<script src="//cdn.datatables.net/responsive/2.2.2/js/responsive.bootstrap.js"></script>
<script src="//cdn.datatables.net/select/1.3.0/js/dataTables.select.js"></script>

CSS

div.dataTables_processing div {
  display: none;
}

JavaScript

$(document).ready(function () {
  var dataJSON =
    "https://raw.githubusercontent.com/TheNerdy97/BraveGacha.io/main/d2.json";
  var table = $("#accountsTable").DataTable({
    createdRow: addChildRow,

    columns: [
      {
        title: "Code",
        data: "code"
      },
      {
        title: "Orbs",
        data: "orbs",
        sortable: true,
        render: getOrbs
      },
      {
        title: "Price",
        data: "price",
        render: getPrice
      },
      {
        data: "images",
        className: "never"
      },
      {
        data: "date",
        className: "never"
      }
    ],
    
    deferRender: true,
    stateSave: true,
    
    
    
/*     HERE IS THE PROCESSING
     */    
    processing: true,
          'language': {
        processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '},
        ///////////////////////////
        
        
        
        
    responsive: true,
    ajax: {
      url: dataJSON
    },

    columnDefs: [
      {
        width: "20%",
        targets: 0
      }
    ]
  });



  function addChildRow(row, data, index) {
    var accountDate = data.date;
    var accountImages = data.images;
    accountImages = JSON.stringify(accountImages);

    var ImagesString = accountImages.replace(/[{}]/g, "");

    var imagesArry = ImagesString.split(",");

    var iterator = imagesArry.values();
    var ImageTag = "";

    for (let ele of iterator) {
      ImageTag += '<img src="static/images/char/' + ele + '.png">';
    }

    var length = imagesArry.length;
    var header =
      "<b>" + "Last Updated" + " - ( " + accountDate + " )</b><br><br>";
    var childHtml = header + ImageTag + "<br>";

    $("#accountsTable").DataTable().row(index).child(childHtml).show();

    var child = $("#accountsTable").DataTable().row(index).child();
    $(child[0].childNodes[0]).addClass("change");
  }

  function getPrice(price) {
    return "$" + price;
  }

  function...