JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Product</th>
<th>Sum</th>
<th>Location A</th>
<th>Location B</th>
<th>Location C</th>
</tr>
<tr>
<th></th>
<th></th>
<th>
<select id="locA">
<option value="100">100 %</option>
<option value="75">75 %</option>
<option value="50">50 %</option>
<option value="25">25%</option>
</select>
</th>
<th>
<select id="locB">
<option value="100">100 %</option>
<option value="75">75 %</option>
<option value="50">50 %</option>
<option value="25">25%</option>
</select>
</th>
<th>
<select id="locC">
<option value="100">100 %</option>
<option value="75">75 %</option>
<option value="50">50 %</option>
<option value="25">25%</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product A</td>
<td class="sum">500</td>
<td>250</td>
<td>150</td>
<td>100</td>
</tr>
<tr>
<td>Product B</td>
<td class="sum">900</td>
<td>200</td>
<td>300</td>
<td>400</td>
</tr>
<tr>
...
CSS
.sum{
background-color: #D8D8D8;
}
th {
background-color: #BDBDBD;
}
JavaScript
$(document).ready( function () {
$('#example').DataTable();
} );