JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/v/bs5/jszip-2.5.0/dt-1.13.1/b-2.3.3/b-colvis-2.3.3/b-html5-2.3.3/cr-1.6.1/fc-4.2.1/r-2.4.0/sc-2.0.7/sb-1.4.0/sp-2.1.0/sl-1.5.0/sr-1.2.0/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs5/jszip-2.5.0/dt-1.13.1/b-2.3.3/b-colvis-2.3.3/b-html5-2.3.3/cr-1.6.1/fc-4.2.1/r-2.4.0/sc-2.0.7/sb-1.4.0/sp-2.1.0/sl-1.5.0/sr-1.2.0/datatables.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="row">
  <div class="col-12 table-responsive">
    <table id="output" class="datatables table table-striped w-100">
      <thead>
        <tr>
          <th>First Reference<th>
          <th>Second References</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</div>

JavaScript

const data = [
  {
    "work_order_id": 136,
    "reference_1": "1",
    "reference_2": "1",
    "tracking_1": "2",
    "tracking_2": "2",
  },
  {
    "work_order_id": 137,
    "reference_1": "3",
    "reference_2": "3",
    "tracking_1": "4",
    "tracking_2": ""
  },
  {
    "work_order_id": 138,
    "reference_1": "5",
    "reference_2": "",
    "tracking_1": "5",
    "tracking_2": "",
  },
  {
    "work_order_id": 139,
    "reference_1": "6",
    "reference_2": "6",
    "tracking_1": "",
    "tracking_2": "",
  },
  {
    "work_order_id": 140,
    "reference_1": "7",
    "reference_2": "",
    "tracking_1": "7",
    "tracking_2": ""
  },
  {
    "work_order_id": 141,
    "reference_1": "8",
    "reference_2": "",
    "tracking_1": "8",
    "tracking_2": ""
  },
  {
    "work_order_id": 142,
    "reference_1": "9",
    "reference_2": "",
    "tracking_1": "9",
    "tracking_2": ""
  },
  {
    "work_order_id": 143,
    "reference_1": "10",
    "reference_2": "",
    "tracking_1": "10",
    "tracking_2": ""
  },
  {
    "work_order_id": 146,
    "reference_1": "SGL Ref 1",
    "reference_2": "SGL Ref 2",
    "tracking_1": "Tracking 2",
    "tracking_2": ""
  },
  {
    "work_order_id": 147,
    "reference_1": "SGL Reef 234",
    "reference_2": "",
    "tracking_1": "",
    "tracking_2": ""
  }
];

document.addEventListener('DOMContentLoaded', function () {
  table = new DataTable(
    '#output',
    {
      data: data,
      columns: [
        {
          data: 'reference_1'
        },
        {
          data: 'tracking_1',
        }
      ],
    },
  );
});