JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>tmp.html</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
    <!-- <script type="text/javascript" charset="utf8" src="tmp2.js"></script> -->
  </head>
  <body>
    <div id="divID">
      <table id="divID_table" class="compact stripe hover">
      </table>
    </div>
  </body>
</html>

JavaScript

data = {
  columns: [
    {
      data: "Category",
      title: "Category",
    },
    {
      data: "Trans. Amount",
      title: "Trans. Amount",
    },
  ],
  data: [
    {
      Category: "Dining Out",
      "Trans. Amount": "$75.40",
    },
  ],
};



$(document).ready(function () {
  $('#divID_table').DataTable(data);
});