JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta http-equiv="Cache-control" content="public">
	<meta http-equiv="Cache-control" content="private">
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Cache-control" content="no-store">
	

	<link rel="stylesheet" href="style.css">
	
	<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">	
	<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.0.1/css/fixedColumns.bootstrap4.min.css">
	<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.dataTables.min.css">
	<link rel="stylesheet" href="https://cdn.datatables.net/scroller/2.0.5/css/scroller.dataTables.min.css">
	<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.5/css/colReorder.dataTables.min.css">
	<link rel="stylesheet" href="https://nightly.datatables.net/fixedheader/css/fixedHeader.dataTables.min.css">

	



	</head>
	<body>
	
<div class="wrap">
    <table id="example" class="display" 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>$3,120</td>
					</tr>
					<tr>
						<td>Garrett Winters</td>
						<td>Director</td>
						<td>Edinburgh</td>
						<td>63</td>
						<td>2011/07/25</td>
						<td>$5,300</td>
					</tr>
					<tr>
						<td>Ashton Cox</td>
						<td>Technical Author</td>
						<td>San...

CSS

.wrap {
    width: 300px;
}

JavaScript

$('#example thead tr').clone(true).appendTo( '#example thead' );

var table = $('#example')
        .DataTable(
        {
            "fnInitComplete": function(){
                // Disable TBODY scoll bars
                $('.dataTables_scrollBody').css({
                    'overflow': 'hidden',
                    'border': '0'
                });
                
                // Enable TFOOT scoll bars
                $('.dataTables_scrollFoot').css('overflow', 'auto');
                
                $('.dataTables_scrollHead').css('overflow', 'auto');
                
                // Sync TFOOT scrolling with TBODY
                $('.dataTables_scrollFoot').on('scroll', function () {
                    $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
                });      
                
                $('.dataTables_scrollHead').on('scroll', function () {
                    $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
                });
            },
            "scrollX": true,
            "scrollCollapse": true,
            "dom": 'Zlrtip',
			"fixedHeader": true,
            "colResize": {
                "tableWidthFixed": false,
                //"handleWidth": 10,
                "resizeCallback": function(column)
                {

                }
            },
			fixedColumns:   {
				left: 1
			},
            "searching":   false,
            "paging":   false,
            "info":     false,
            "deferRender": true,
            "sScrollX": "190%"
        });