JSFiddle - React, Tailwind, and code Playground

by mohan5070

HTML

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<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/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
<div>
  <table id='myTable'>

  </table>
</div>

JavaScript

$(document).ready(function() {
  var dataSet = [{
      "customer": "xyz",
      "transactionamount": "£159.5"
    }, {
      "customer": "abc",
      "transactionamount": "£159.5"
    }],
    buttonCommon = {
      exportOptions: {
        format: {
          body: function(data, row, column, node) {
            debugger;
            //strip unicode symbol [^\x00C2]
            if (column === 3) {
              return node.innerHTML.replace(/[^a-zA-Z0-9_\.,\-_ !\(\)]/g, "");
            } else {
              return node.innerText;
            }
          }
        }
      }
    };

  var table = $("#myTable").DataTable({
    data: dataSet,
    columns: listColumns(),
    buttons: [{
          extend: 'colvis',
          text: 'Column Visibility'
        },
        $.extend(true, {}, buttonCommon, {
          extend: 'csv',
          text: 'Export Transactions',
          charset: 'utf8',
          exportOptions: {
            columns: ':visible'
          },
          filename: 'transactions'
        }),
      ]
      //"bAutoWidth": false // Disable the auto width calculation 
  });

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

  }

});