JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<script src="https://cdn.datatables.net/2.0.1/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.0.1/js/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.1/css/dataTables.bootstrap.css">
<script src="https://cdn.datatables.net/responsive/3.0.0/js/dataTables.responsive.js"></script>
<script src="https://cdn.datatables.net/responsive/3.0.0/js/responsive.bootstrap.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/3.0.0/css/responsive.bootstrap.css">
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <table id="Inventory" class="table table-condensed table-striped" style="width: 100%">
        <thead>
          <tr>
            <th rowspan="2" data-priority="1">Part Number</th>
            <th rowspan="2">Brand</th>
            <th colspan="2" class="text-center" style="border-bottom-style: none">Belgium</th>
            <th class="text-center" style="border-bottom-style: none">USA</th>
            <th colspan="2" class="text-center" style="border-bottom-style: none">China</th>
            <th rowspan="2">In Production</th>
            <th colspan="3" class="text-center" style="border-bottom-style: none">Arrivals in Belgium</th>
          </tr>
          <tr class="subheader">
            <th>Stock</th>
            <th class="text-center" data-priority="2">Free Stock</th>
            <th class="text-center" data-priority="3">Free Stock</th>
            <th class="text-center">Stock</th>
            <th class="text-center"...

CSS

.mobile-view {
    display: none;
}

.desktop-view {
    display: block;
}

@media (max-width: 767px) {
    .mobile-view {
        display: block;
    }

    .desktop-view {
        display: none;
    }
}

#Inventory tr td:nth-child(3),
#Inventory tr td:nth-child(5),
#Inventory tr td:nth-child(6),
#Inventory tr td:nth-child(8),
#Inventory tr td:nth-child(9),
#Inventory tr.subheader th:nth-child(1),
#Inventory tr.subheader th:nth-child(3),
#Inventory tr.subheader th:nth-child(4),
#Inventory tr.subheader th:nth-child(6) {
    border-left: 1px solid #ddd;
}

#Inventory tr td:nth-child(11),
#Inventory tr.subheader th:nth-child(5),
#Inventory tr.subheader th:nth-child(8) {
    border-right: 1px solid #ddd;
}

.text-center {
    text-align: center !important;
}

JavaScript

let dataSource = [{
        "RowNumber": 0,
        "PartDescription": "A",
        "SearchablePartNumber": null,
        "BearingTypeId": "8",
        "QuantityBelgium": 0,
        "ReservationBelgium": 0,
        "AvailableBelgium": 0,
        "QuantityChina": 0,
        "ReservationChina": 0,
        "AvailableChina": 0,
        "OrdersInProduction": 0,
        "ArrivalsCurrent": 0,
        "ArrivalsOneMonth": 0,
        "ArrivalsTwoMonth": 0,
        "FlorenceInventory": null,
        "Part": null
    },
    {
        "RowNumber": 0,
        "PartDescription": "B",
        "SearchablePartNumber": null,
        "BearingTypeId": "4",
        "QuantityBelgium": 0,
        "ReservationBelgium": 2,
        "AvailableBelgium": 0,
        "QuantityChina": 0,
        "ReservationChina": 0,
        "AvailableChina": 0,
        "OrdersInProduction": 0,
        "ArrivalsCurrent": 0,
        "ArrivalsOneMonth": 0,
        "ArrivalsTwoMonth": 0,
        "FlorenceInventory": null,
        "Part": null
    },
    {
        "RowNumber": 0,
        "PartDescription": "C",
        "SearchablePartNumber": null,
        "BearingTypeId": "4",
        "QuantityBelgium": 0,
        "ReservationBelgium": 0,
        "AvailableBelgium": 0,
        "QuantityChina": 0,
        "ReservationChina": 0,
        "AvailableChina": 0,
        "OrdersInProduction": 0,
        "ArrivalsCurrent": 0,
        "ArrivalsOneMonth": 0,
        "ArrivalsTwoMonth": 0,
        "FlorenceInventory": null,
        "Part": null
    },
    {
        "RowNumber": 0,
        "PartDescription": "D",
        "SearchablePartNumber": null,
        "BearingTypeId": "4",
        "QuantityBelgium": 0,
        "ReservationBelgium": 0,
        "AvailableBelgium": 0,
        "QuantityChina": 0,
        "ReservationChina": 0,
        "AvailableChina": 0,
        "OrdersInProduction": 0,
        "ArrivalsCurrent": 0,
        "ArrivalsOneMonth": 0,
        "ArrivalsTwoMonth": 0,
        "FlorenceInventory": null,
       ...