JSFiddle - React, Tailwind, and code Playground

by Karan Chauhan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/colreorder/1.3.2/js/dataTables.colReorder.min.js"></script>
    


    <table class="table table-striped table-bordered datatable-table_info"  width="100%" id="datatable-tables">
        <tr><td style="height:50px;">Please wait...</td></tr>
    </table>

CSS

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.3.2/css/colReorder.dataTables.min.css">

JavaScript

var table = $('#datatable-tables').dataTable( {
            "lengthMenu": [5, 10, 25, 50, 100],
            dom: 'lBfrtip',
            buttons: [
                'colvis'
            ],
            "aoColumns": [{ sTitle:"Status"}, { sTitle:"Assignee"}, { sTitle:"Reporter"}],
            "oLanguage": {
                "sProcessing": ""
            },
            "processing": false,
            "serverSide": true,
            "scrollX": true,
            "bFilter":false,
            colReorder: {
                order: [ 2,1,0 ]
            },       
            "ajax": {
                "url": 'https://api.nquery.xyz/V3/api/get-query-result',
                "type": "POST",
                beforeSend :  function(data) {
                },
                "data": function ( d ) {
                    d.query = 'SELECT DISTINCT 1473083363_jira.status_name AS "Status" , 1473083363_jira.assignee_displayname AS "Assignee", 1473083363_jira.reporter_displayname AS "Reporter" FROM 1473083363_jira WHERE upper(1473083363_jira.assignee_displayname) = upper("Karandeep Chauhan")',
                    d.user = "[email protected]",
                    d.instance = "57c43d63f80a4fa0305558ec"
                },
               
            },
            "fnDrawCallback": function( oSettings ) {},
            "fnInitComplete": function(oSettings, json) {}
        });