JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<div style="margin:5px;">
		<table id="list"></table>
</div>

JavaScript

$("#list").jqGrid({
  toppager: true,

  colModel: [
    { name: "name", label: "Client", width: 53 },
    {
      name: "invdate",
      label: "Date",
      width: 75,
      align: "center",
      sorttype: "date",
      formatter: "date",
      formatoptions: { newformat: "d-M-Y" },
    },
    { name: "amount", label: "Amount", width: 65, template: "number" },
    { name: "tax", label: "Tax", width: 41, template: "number" },
    { name: "total", label: "Total", width: 51, template: "number" },
    {
      name: "closed",
      label: "Closed",
      width: 59,
      template: "booleanCheckbox",
      firstsortorder: "desc",
    },
    {
      name: "ship_via",
      label: "Shipped via",
      width: 87,
      align: "center",
      formatter: "select",
      formatoptions: { value: "FE:FedEx;TN:TNT;DH:DHL", defaultValue: "DH" },
    },
  ],
  data: [
    { id: "10", invdate: "2015-10-01", name: "test", amount: "" },
    {
      id: "20",
      invdate: "2015-09-01",
      name: "test2",
      amount: "300.00",
      tax: "20.00",
      closed: false,
      ship_via: "FE",
      total: "320.00",
    },
  ],
  guiStyle: "bootstrap4",
  iconSet: "fontAwesome",
  idPrefix: "gb1_",
})

document.querySelector("#list_toppager > div").insertAdjacentHTML(
  "afterend",
  `<div class='dropdown'><button class="btn btn-secondary dropdown-toggle" type="button"
      data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>`
)