JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="https://datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<!--<br/>
<button type="button" class="btn btn-primary btn-sm" id="ToggleColumns">Toggle</button>-->
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger</td>
            <td>Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
            <td>5421</td>
            <td>[email protected]
                <script type="text/javascript">
                    /* <![CDATA[ */
                     (function() {
                        try {
                            var s, a, i, j, r, c, l, b = document.getElementsByTagName("script");
                            l = b[b.length - 1].previousSibling;
                            a = l.getAttribute('data-cfemail');
                            if (a) {
                                s = '';
                                r = parseInt(a.substr(0, 2), 16);
                                for (j = 2; a.length - j; j += 2) {
                                    c =...

CSS

body {
    font-size: 140%;
}
/* Ensure that the demo table scrolls */
 th, td {
    white-space: nowrap;
}
div.dataTables_wrapper {
    width: 800px;
    margin: 0 auto;
}

JavaScript

$(document).ready(function () {
    foo(2);

    function foo(columnNumber) {
        table = $('#example').on('init.dt', function () {
            $("div#ToggleButton").html('<br/><button type="button" class="btn btn-primary btn-sm" id="ToggleColumns">Toggle</button>');
            $('#ToggleColumns').click(function () {
                table.destroy();
                debugger;
                if (columnNumber == 2) {
                    columnNumber = 0;
                } else {
                    columnNumber = 2;
                }
                foo(columnNumber);
            });
        }).DataTable({
            scrollY: "300px",
            scrollX: true,
            scrollCollapse: true,
            paging: true,
                "dom": "T<'clear'><'row DatatableRow'<'col-xs-3'l><'col-xs-3'><'col-xs-3'<'#ToggleButton'>><'col-xs-3 text-right'f>r>t<'row DatatableRow'<'col-xs-3'i><'col-xs-3'><'col-xs-3'><'col-xs-3 text-right'p>>",
        });


        new $.fn.dataTable.FixedColumns(table, {
            leftColumns: columnNumber
            //   rightColumns: 1
        });
    }
});