| Customer Name | Status | Date Joined | No. Orders | No. Products | Total | |
|---|---|---|---|---|---|---|
| Emma Smith | smith@kpmg.com | Active | 20 Jun 2022, 6:43 am | 100 | 114 | $1893.00 | 
| Melody Macy | melody@altbox.com | Active | 25 Jul 2022, 5:30 pm | 48 | 57 | $1236.00 | 
| Max Smith | max@kt.com | Active | 10 Nov 2022, 8:43 pm | 38 | 51 | $2920.00 | 
| Sean Bean | sean@dellito.com | Active | 25 Oct 2022, 11:30 am | 11 | 21 | $526.00 | 
| Brian Cox | brian@exchange.com | Active | 25 Jul 2022, 6:05 pm | 87 | 97 | $4308.00 | 
| Mikaela Collins | mik@pex.com | Active | 15 Apr 2022, 11:30 am | 18 | 33 | $233.00 | 
| Francis Mitcham | f.mit@kpmg.com | Active | 25 Oct 2022, 6:05 pm | 63 | 78 | $4856.00 | 
| Olivia Wild | olivia@corpmail.com | Active | 20 Dec 2022, 2:40 pm | 11 | 24 | $2432.00 | 
| Neil Owen | owen.neil@gmail.com | Active | 21 Feb 2022, 6:43 am | 91 | 99 | $4609.00 | 
| Dan Wilson | dam@consilting.com | Active | 20 Dec 2022, 10:30 am | 74 | 79 | $4751.00 | 
| Emma Bold | emma@intenso.com | Active | 25 Oct 2022, 2:40 pm | 42 | 51 | $4546.00 | 
| Ana Crown | ana.cf@limtel.com | Active | 20 Dec 2022, 2:40 pm | 35 | 46 | $566.00 | 
| Robert Doe | robert@benko.com | Active | 05 May 2022, 6:05 pm | 88 | 103 | $3413.00 | 
| John Miller | miller@mapple.com | Active | 21 Feb 2022, 11:30 am | 98 | 105 | $342.00 | 
| Lucy Kunic | lucy.m@fentech.com | Active | 24 Jun 2022, 11:05 am | 89 | 96 | $1996.00 | 
| Ethan Wilder | ethan@loop.com.au | Active | 20 Dec 2022, 10:30 am | 25 | 37 | $4437.00 | 
| Melody Macy | melody@altbox.com | Active | 22 Sep 2022, 5:20 pm | 12 | 22 | $3836.00 | 
| Emma Smith | smith@kpmg.com | Active | 25 Jul 2022, 6:05 pm | 14 | 25 | $2691.00 | 
| Melody Macy | melody@altbox.com | Active | 20 Dec 2022, 6:05 pm | 45 | 50 | $631.00 | 
| Max Smith | max@kt.com | Active | 24 Jun 2022, 6:43 am | 49 | 62 | $2141.00 | 
| Sean Bean | sean@dellito.com | Active | 25 Jul 2022, 6:05 pm | 94 | 103 | $3615.00 | 
| Brian Cox | brian@exchange.com | Active | 24 Jun 2022, 5:30 pm | 51 | 63 | $1301.00 | 
| Mikaela Collins | mik@pex.com | Active | 24 Jun 2022, 6:05 pm | 60 | 73 | $4954.00 | 
| Francis Mitcham | f.mit@kpmg.com | Active | 20 Jun 2022, 6:43 am | 51 | 61 | $2540.00 | 
| Olivia Wild | olivia@corpmail.com | Active | 10 Mar 2022, 10:30 am | 29 | 40 | $4503.00 | 
<div class="card card-p-0 card-flush">
 <div class="card-header align-items-center py-5 gap-2 gap-md-5">
  <div class="card-title">
   <!--begin::Search-->
   <div class="d-flex align-items-center position-relative my-1">
    <span class="svg-icon svg-icon-1 position-absolute ms-4">...</span>
    <input type="text" data-kt-filter="search" class="form-control form-control-solid w-250px ps-14" placeholder="Search Report" />
   </div>
   <!--end::Search-->
   <!--begin::Export buttons-->
   <div id="kt_datatable_example_1_export" class="d-none"></div>
   <!--end::Export buttons-->
  </div>
  <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
   <!--begin::Export dropdown-->
   <button type="button" class="btn btn-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
   <span class="svg-icon svg-icon-1 position-absolute ms-4">...</span>
   Export Report
   </button>
   <!--begin::Menu-->
   <div id="kt_datatable_example_1_export_menu" class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-200px py-4" data-kt-menu="true">
    <!--begin::Menu item-->
    <div class="menu-item px-3">
     <a href="#" class="menu-link px-3" data-kt-export="copy">
     Copy to clipboard
     </a>
    </div>
    <!--end::Menu item-->
    <!--begin::Menu item-->
    <div class="menu-item px-3">
     <a href="#" class="menu-link px-3" data-kt-export="excel">
     Export as Excel
     </a>
    </div>
    <!--end::Menu item-->
    <!--begin::Menu item-->
    <div class="menu-item px-3">
     <a href="#" class="menu-link px-3" data-kt-export="csv">
     Export as CSV
     </a>
    </div>
    <!--end::Menu item-->
    <!--begin::Menu item-->
    <div class="menu-item px-3">
     <a href="#" class="menu-link px-3" data-kt-export="pdf">
     Export as PDF
     </a>
    </div>
    <!--end::Menu item-->
   </div>
   <!--end::Menu-->
   <!--end::Export dropdown-->
  </div>
 </div>
 <div class="card-body">
  <table class="table align-middle border rounded table-row-dashed fs-6 g-5" id="kt_datatable_example_1">
   <thead>
    <!--begin::Table row-->
    <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase">
     <th class="min-w-100px">Customer Name</th>
     <th class="min-w-100px">Email</th>
     <th class="min-w-100px">Status</th>
     <th class="min-w-100px">Date Joined</th>
     <th class="text-end min-w-75px">No. Orders</th>
     <th class="text-end min-w-75px">No. Products</th>
     <th class="text-end min-w-100px pe-5">Total</th>
    </tr>
    <!--end::Table row-->
   </thead>
   <tbody class="fw-bold text-gray-600">
    <tr class="odd">
     <td>
      <a href="#" class="text-dark text-hover-primary">Emma Smith</a>
     </td>
     <td>
      <a href="#" class="text-dark text-hover-primary">e.smith@kpmg.com.au</a>
     </td>
     <td>
      <div class="badge badge-light-success">Active</div>
     </td>
     <td data-order="2022-03-10T14:40:00+05:00">10 Mar 2022, 2:40 pm</td>
     <td class="text-end pe-0">94</td>
     <td class="text-end pe-0">103</td>
     <td class="text-end">$500.00</td>
    </tr>
   </tbody>
  </table>
 </div>
</div>
														
"use strict";
// Class definition
var KTDatatablesButtons = function () {
    // Shared variables
    var table;
    var datatable;
    // Private functions
    var initDatatable = function () {
        // Set date data order
        const tableRows = table.querySelectorAll('tbody tr');
        tableRows.forEach(row => {
            const dateRow = row.querySelectorAll('td');
            const realDate = moment(dateRow[3].innerHTML, "DD MMM YYYY, LT").format(); // select date from 4th column in table
            dateRow[3].setAttribute('data-order', realDate);
        });
        // Init datatable --- more info on datatables: https://datatables.net/manual/
        datatable = $(table).DataTable({
            "info": false,
            'order': [],
            'pageLength': 10,
        });
    }
    // Hook export buttons
    var exportButtons = () => {
        const documentTitle = 'Customer Orders Report';
        var buttons = new $.fn.dataTable.Buttons(table, {
            buttons: [
                {
                    extend: 'copyHtml5',
                    title: documentTitle
                },
                {
                    extend: 'excelHtml5',
                    title: documentTitle
                },
                {
                    extend: 'csvHtml5',
                    title: documentTitle
                },
                {
                    extend: 'pdfHtml5',
                    title: documentTitle
                }
            ]
        }).container().appendTo($('#kt_datatable_example_1_export'));
        // Hook dropdown menu click event to datatable export buttons
        const exportButtons = document.querySelectorAll('#kt_datatable_example_1_export_menu [data-kt-export]');
        exportButtons.forEach(exportButton => {
            exportButton.addEventListener('click', e => {
                e.preventDefault();
                // Get clicked export value
                const exportValue = e.target.getAttribute('data-kt-export');
                const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
                // Trigger click event on hidden datatable export buttons
                target.click();
            });
        });
    }
    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
    var handleSearchDatatable = () => {
        const filterSearch = document.querySelector('[data-kt-filter="search"]');
        filterSearch.addEventListener('keyup', function (e) {
            datatable.search(e.target.value).draw();
        });
    }
    // Public methods
    return {
        init: function () {
            table = document.querySelector('#kt_datatable_example_1');
            if ( !table ) {
                return;
            }
            initDatatable();
            exportButtons();
            handleSearchDatatable();
        }
    };
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
    KTDatatablesButtons.init();
});