JSFiddle - React, Tailwind, and code Playground

by Christian Soseman

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.css">
<body>
    <style>
        #ppm_issues {
            white-space: pre;
        }
    </style>
    <div role="tabpanel">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a aria-expanded="false" href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">PPM - Points</a>
            </li>
            <li class="" role="presentation"><a aria-expanded="true" href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">PPM - Dealer Assignments</a>
            </li>
            <li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">PPM - Compile Report</a>
            </li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <!-- TAB: PPM Points -->
            <div role="tabpanel" class="tab-pane active" id="tab1">
                <div class="col-md-12 text-center"> <a href="http://192.168.1.122:8000/ppms/create">
                        <button type="button" class="btn btn-default btn-lg" style="margin-bottom: 20px;">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Create New PPM Point
                        </button>
                    </a>

                </div>
            </div>
            <!-- TAB: Assign PPM Points -->
            <div role="tabpanel"...

JavaScript

$(document).ready(function () {

    $(".datatable-initialize").each(function () {
        this_obj = $(this).DataTable({
            dom: '<"row"<"col-md-4"l><"col-md-4 text-center"T><"col-md-4"f>>rtip',
            //bAutoWidth: false,
            scrollX: true,
            sScrollX: "100%",
            aaSorting: [],
            language: {
                "emptyTable": "No Data Available"
            },
            tableTools: {
                "sSwfPath": "/bower_components/datatables-tabletools/swf/copy_csv_xls_pdf.swf",
                    "aButtons": ["copy", "csv"]
            }
        });
    });
    
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        // https://datatables.net/reference/api/columns.adjust() states that this function is trigger on window resize
        $( $.fn.dataTable.tables( true ) ).DataTable().columns.adjust();
    });
});