JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.0/css/jquery.dataTables.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>
<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://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.1/jquery.dataTables.yadcf.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.1/jquery.dataTables.yadcf.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css">
<table id="example" class="display cell-border" cellspacing="0" width="100%">



//As I am fetching data from web service which is not possible to post that's why data is not getting displayed.

CSS

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


.dataTables_wrapper{
margin-top:10px;
}
button.dt-button, div.dt-button, a.dt-button{
border-radius: 5px;
}

JavaScript

$(document).ready(function() {
    var realPath ="http://localhost:8080";
   		var webServicePathm = realPath+"/mt/saasreporting/getopenticketssummary?";
   		//var project = projectname.innerText;
   		var parmUrl = "tenantid=BISIL";
   		var webCallUrl = webServicePathm+parmUrl;
		'use strict';
   'use strict';
       var oTable= $('#example').DataTable( {
		"bStateSave": true,
"iDisplayLength": 10,
		  "bJQueryUI": true,
	        "bProcessing": true,
	   								 					          colReorder: true,
	   								 					          fixedColumns:   {
	   								 					                   leftColumns: 0
	   								 								                },
	   								 						      rowReorder: true,
	   								 						      "sDom": 'B<"clear">Wfrtip',
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:#81ad30"></i>',
            titleAttr: 'show no.of rows'

            },
    {

                    extend: 'colvis',
                    text: '<i class="fa fa-columns" aria-hidden="true" style="color:#81ad30"></i>',
                    titleAttr: 'Column Visibility',
                    exportOptions: {
                        columns: ':visible',
                    }
            },
            {
                extend: 'collection',
                text: '<i class="fa fa-share-square-o" aria-hidden="true" style="color:#81ad30"></i>',

                buttons: [
                    {
				                				extend:    'copyHtml5',
				                   							text:      '<i class="fa fa-files-o" style="color:green"></i>',
				                   titleAttr: 'Copy',
				                   			exportOptions: {
				   				                	modifier: {
				   				                    	page: 'current'
				   				                			  }
				                          }

				               },{
				   			              ...