JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.13/b-1.2.4/b-colvis-1.2.4/b-flash-1.2.4/b-html5-1.2.4/b-print-1.2.4/cr-1.3.2/fc-3.2.2/fh-3.1.2/rr-1.2.0/se-1.2.0/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/jqc-1.12.4/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.13/b-1.2.4/b-colvis-1.2.4/b-flash-1.2.4/b-html5-1.2.4/b-print-1.2.4/cr-1.3.2/fc-3.2.2/fh-3.1.2/rr-1.2.0/se-1.2.0/datatables.min.js"></script>
<p> User Setting</br><input id="chk" type="checkbox" name="your-group"/>Enable/Disable Fixed Header!</p>


</p>Global Search:<input type="text" class="global_filter" id="global_filter"></p>

<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>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
  ...

CSS

.dt-buttons{
float:right;
 margin-left:5px;
 margin-bottom:7px;
 }


.dataTables_wrapper{
margin-top:

JavaScript

$(document).ready(function() {
		function filterGlobal () {
    		$('#example').DataTable().search(
        		"^(?=.?(" + $('#global_filter').val() + ")).?",
        		true
    		).draw();
		}

    $('input.global_filter').on( 'keyup click', function () {
        filterGlobal();
    } );

var table= $('#example').DataTable( {
       fixedHeader: {
	   								 	    				               header: true,
	   								 					            },
	   								 					          colReorder: true,
	   								 					          fixedColumns:   {
	   								 					                   leftColumns: 0
	   								 								                },
	   								 						      rowReorder: true,
	   								 						        dom: 'Bfrtip',
	   								 							  lengthMenu:[
	   								 							             [10,25,50,-1],
	   								 							             ['10 rows', '25 rows', '50 rows', 'Show all']
	   								 							             ],

	   								 							          buttons: [
           {
            extend:'pageLength',
            text: '<i class="fa fa-list-ol" aria-hidden="true" style="color:blue"></i>',
            titleAttr: 'show no.of rows'

            },
    {

                    extend: 'colvis',
                    text: '<i class="fa fa-columns" aria-hidden="true" style="color:blue"></i>',
                    titleAttr: 'Column Visibility',
                    exportOptions: {
                        columns: ':visible',
                    }
            },



              {
			                extend:    'pdfHtml5',
							                text:      '<i class="fa fa-file-pdf-o" style="color:red"></i>',
                titleAttr: 'PDF',

			                exportOptions: {
			                    columns: ':visible',
			                     modifier: {
								                    page: 'current'
                }
			                }
            },
            {
			                extend:    'excelHtml5',
							                text:      '<i class="fa fa-file-excel-o" style="color:green"></i>',
 ...