JSFiddle - React, Tailwind, and code Playground

by Colin Marks

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" />

        <title>Datatables Test - ColReorder</title>

        ></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.21/af-2.3.5/cr-1.5.2/fc-3.3.1/fh-3.1.7/kt-2.5.2/r-2.2.5/rg-1.1.2/rr-1.2.7/sc-2.0.2/sp-1.1.1/sl-1.3.1/datatables.min.css"/>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
        
<link rel="stylesheet" type="text/css" href="https://nightly.datatables.net/buttons/css/buttons.bootstrap4.min.css"/>
 


        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"
        ></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"
        ></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
        <script type="text/javascript"...

CSS

.dt-buttons {
  float: right;
}

JavaScript

$(document).ready(function() {

            // ####################################
            // #### Datatables
            // ####################################

            // Clone the table head row and append after the first
            $('#usersDataTable thead tr').clone(true).appendTo( '#usersDataTable thead' );

            // Add search input for each column in newly cloned table head row
            $('#usersDataTable thead tr:eq(1) th').each( function (i) {

                // Check for any columns with class of 'action'
                $(this).attr('class') == 'action' ? isActionCol = 1 : isActionCol = 0;

                // Add search input to each column (accept for those with a class of 'action') along with a 'clear filter button'
                isActionCol ? $(this).html( '' ) : $(this).html( '<input type="text" class="form-control float-left" style="width: 70%;" placeholder="" /><button type="button" class="btn dt-clear-filter float-right d-none" title="Clear" aria-label="Clear"><i class="fas fa-times"></i></button>' );

                $( 'input', this ).on( 'keyup change', function () {
                    if ( table.column(i).search() !== this.value ) {
                        table.column(i).search( this.value ).draw();
                        $(this).next().removeClass('d-none');
                        // dt-clear-filter
                    }
                } );
            } );
            
            // Clear column search input
            $('.dt-clear-filter').on( "click", function() {
                $(this).prev().val('').change();
                $(this).addClass('d-none');
            });

            var table = $('#usersDataTable').DataTable( {
                orderCellsTop: true,
                fixedHeader: true,
                // responsive: true,
                colReorder: true,
                pageLength: 25,
                stateSave: true,
                scrollY: '50vh', // this causes datatables to create...