JSFiddle - React, Tailwind, and code Playground

by bikz92

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.3/cr-1.5.5/rr-1.2.8/datatables.min.css"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.3/cr-1.5.5/rr-1.2.8/datatables.min.js"></script>
</head>
<body>
<table id="table_id" class="display">
    <thead>
        <tr>
            <th colspan="2">Column 1</th>
            <th colspan="2">Column 2</th>
        </tr>
        <tr>
            <th>sub1</th>
            <th>sub2</th>
            <th>sub3</th>
            <th>sub4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row1 Data1</td>
            <td>Row1 Data2</td>
            <td>Row1 Data3</td>
            <td>Row1 Data4</td>
        </tr>
        <tr>
            <td>Row2 Data1</td>
            <td>Row2 Data2</td>
            <td>Row2 Data3</td>
            <td>Row2 Data4</td>
        </tr>
    </tbody>
</table>
</body>
</html>

JavaScript

$(document).ready( function () {
    $('#table_id').DataTable({
        searching: false,
        ordering:  false,
        bInfo: false,
        bPaginate: false,
        bLengthChange: false,
        colReorder: true,
        rowReorder: {
            update: false
        },
        width: "100%",
    });
} );