JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.min.css">
</head>

<body>
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt vulputate commodo. Aenean
                    arcu augue, sagittis non vehicula sed, egestas et orci. Maecenas volutpat cursus augue, vel lobortis
                    urna suscipit ut. In a orci in odio viverra dignissim quis ut libero. Proin at vehicula massa, eget
                    sollicitudin magna. Donec fringilla nec eros in tristique. Duis id blandit diam. Aliquam vitae mi
                    ante. Phasellus eu justo dolor.

                    Vestibulum at purus erat. Integer fringilla sollicitudin ex eget luctus. Proin at tortor quis eros
                    eleifend pulvinar. Nullam venenatis a erat at venenatis. Etiam turpis arcu, suscipit in venenatis a,
                    egestas sit amet quam. Donec mattis laoreet mattis. Donec hendrerit lobortis nibh, ac fermentum
                    lectus bibendum non. In sed finibus nunc. Sed imperdiet, orci a dapibus lacinia, elit arcu bibendum
                    eros, vitae porttitor tellus nunc vestibulum mauris. Etiam ligula arcu, congue...

JavaScript

/**
 * @license
 * File:        ColReorderWithResize.js
 * Version:     3.0
 * CVS:         $Id$
 * Description: Allow columns to be reordered in a DataTable
 * Author:      Allan Jardine (www.sprymedia.co.uk)
 * Author:      Christophe Battarel (www.altairis.fr)
 * Created:     Wed Sep 15 18:23:29 BST 2010
 * Modified:    July 2011 by Christophe Battarel - christophe.battarel@altairis.fr (columns resizable)
 * Modified:    February 2012 by Martin Marchetta - martin.marchetta@gmail.com
 *  1. Made the "hot area" for resizing a little wider (it was a little difficult to hit the exact border of a column for resizing)
 *  2. Resizing didn't work at all when using scroller (that plugin splits the table into 2 different tables: one for the header and another one for the body, so when you resized the header, the data columns didn't follow)
 *  3. Fixed collateral effects of sorting feature
 *  4. If sScrollX is enabled (i.e. horizontal scrolling), when resizing a column the width of the other columns is not changed, but the whole
 *     table is resized to give an Excel-like behavior (good suggestion by Allan)
 * Modified:    February 2012 by Christophe Battarel - christophe.battarel@altairis.fr (ColReorder v1.0.5 adaptation)
 * Modified:    September 16th 2012 by Hassan Kamara - h@phrmc.com
 * Modified:    June 2017 by Jeff Walter - jeffreydwalter@gmail.com
 *  1. ColReorder v1.3.3 adaptation.
 *  2. Fixed issues with column width calculations which allowed column headers to become misaligned with table body when using scroller plugin.
 * Modified:    June 2018 by Jeff Walter - jeffreydwalter@gmail.com
 *  1. Took a second stab at this plugin. Made things work for both scroller and non-scroller tables.
 * Language:    Javascript
 * License:     MIT
 * Project:     DataTables
 *
 */

(function( factory ){
    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery', 'datatables.net'], function ( $ ) {
            return factory( $,...