JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<style>
div.dataTables_wrapper {
    width: 80%;
    margin: 0 auto;
}
</style>

<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<!-- <script src="//cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script> -->


<table id="myTable" class="display" width="100%"></table>

<script>
  var dataSet = null;
  $.ajax({
    url: "http://192.168.88.18:5010/erp/get/invmc/" + "MA01",
    type: 'get',
    dataType: 'json',
    async: false,
    success: function(data) {
      if (data != null) {
        dataSet = data;
      }
    }
  });

  $(document).ready(function() {
    $("#myTable").DataTable({
      data: dataSet,
      bAutoWidth: true,
      paging: false,
      scrollX: true,
      scrollY: "300px",
      bFilter: true,
      /* dom: "Bfrtip",
      buttons: [
        'copy', 'excel'
      ], */
      columns: [{
          data: "MB001",
          title: "品號"
        },
        {
          data: "MB002",
          title: "品名"
        },
        {
          data: "MB056",
          title: "售價四"
        },
        {
          data: "MC004",
          title: "安全存量"
        },
        {
          data: "MC007",
          title: "庫存數量"
        }
      ]
    });
  });
</script>