<section class="hero">
    <div class="container">
        <h3><i class="fa-solid fa-truck-field"></i>&nbsp;Check Outs</h3>
        <br/>
        <table
            class="table table-bordered table-hover nowrap"
            cellspacing="0"
            width="100%"
            id="checkout_table"
            data-search="true"
            data-show-columns="true"
        ></table>
      </div>
</section>
<script>
  $(document).ready(async function() {
    // console.log("get checkings")
    const data = {
      action:"GETCHECKOUTS"
    }
    const checkouts = await util.sendData(data)

    const checkinTable = $("#checkout_table").DataTable({
      responsive: true,
      data: checkouts.data,
      columns: [        
        { title: "Purchase Order #", data: "purchaseOrderNo" },
        { title: "Ticket Number", data: "ticketNumber" },
        { title: "Truck Reg #", data: "truckRegNo" },
        { title: "Operator", data: "operator" },
        { title: "Driver", data: 'driver' },
        { title: "Gross #", data: 'gross' },
        { title: "Tare", data: "tare" },
        { title: "Nett", data: "nett" },
        { title: "Product", data: "product" },
      ],
      rowId: "ticketNumber",
      order: [[1, "desc"]],
      stateSave: true,
      colReorder: true,
      colReorder: {
        fixedColumnsLeft: 1,
        fixedColumnsRight: 1,
      },

      scrollX: true,
    });
    // checkinTable.draw();
  })

  
</script>