JSFiddle - React, Tailwind, and code Playground

by mohan5070

HTML

<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<div>
  <table id='myTable'>

  </table>
</div>

JavaScript

$(document).ready(function() {
  var dataSet = [{
    "customer": "xyz",
    "transactionamount": "£159.5"
  }, {
    "customer": "abc",
    "transactionamount": "£159.5"
  }];

  var table = $("#myTable").DataTable({
    data: dataSet,
    columns: listColumns(),
    buttons: [{
        extend: 'colvis',
        text: 'Column Visibility'
      }]
      //"bAutoWidth": false // Disable the auto width calculation 
  });

  function listColumns() {
    return [{
      data: "customer",
      title: "name",
      searchable: true
    }, {
      data: "transactionamount",
      title: "Amount",
      searchable: true
    }, ];

  }

});