JSFiddle - React, Tailwind, and code Playground
by Pichutan
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-2.0.8/b-3.0.2/b-html5-3.0.2/fc-5.0.1/fh-4.0.1/r-3.0.2/sl-2.0.3/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-2.0.8/b-3.0.2/b-html5-3.0.2/fc-5.0.1/fh-4.0.1/r-3.0.2/sl-2.0.3/datatables.min.css">
<div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th class="dt-name-responsive"></th>
<th class="dt-name-id d-none">Test</th>
<th data-priority="6" data-type="string">Test Priority 6</th>
<th></th>
<th data-priority="10">Test Priority 10</th>
<th data-priority="1" >Test1</th>
<th data-priority="1000" class="none d-none">TestNone</th>
<th data-priority="20">Test Priority 20</th>
<th data-priority="50" >Test Priority 50</th>
<th data-priority="54">Test Priority 54</th>
<th data-priority="51">Test Priority 51</th>
<th data-priority="52" class="none">Test Priority 52</th>
<th data-priority="53" >Test Priority 53</th>
<th data-priority="7">Test Priority 7</th>
<th data-priority="6">Test Priority 6</th>
<th data-priority="1" style="width: 110px">Test Priority 1</th>
<th data-priority="2000" class="never d-none">Test Priority 2000</th>
<th data-priority="6" style="width: 60px">Test Priority 6</th>
<th data-priority="6" class=" text-end">Test Priority 6</th>
<th data-priority="1" class="dt-no-export" data-orderable="false"...JavaScript
$("table").DataTable({responsive:true})