Customer Name | Status | Date Joined | No. Orders | No. Products | Total | |
---|---|---|---|---|---|---|
Emma Smith | smith@kpmg.com |
Active
|
15 Apr 2022, 6:43 am | 31 | 41 | $1359.00 |
Melody Macy | melody@altbox.com |
Active
|
10 Mar 2022, 6:43 am | 83 | 96 | $2880.00 |
Max Smith | max@kt.com |
Active
|
25 Oct 2022, 6:05 pm | 31 | 36 | $1859.00 |
Sean Bean | sean@dellito.com |
Active
|
24 Jun 2022, 8:43 pm | 68 | 79 | $3202.00 |
Brian Cox | brian@exchange.com |
Active
|
24 Jun 2022, 10:30 am | 86 | 94 | $1642.00 |
Mikaela Collins | mik@pex.com |
Active
|
15 Apr 2022, 10:30 am | 89 | 100 | $4801.00 |
Francis Mitcham | f.mit@kpmg.com |
Active
|
25 Oct 2022, 10:10 pm | 35 | 42 | $4735.00 |
Olivia Wild | olivia@corpmail.com |
Active
|
10 Mar 2022, 5:30 pm | 9 | 21 | $1171.00 |
Neil Owen | owen.neil@gmail.com |
Active
|
10 Nov 2022, 6:05 pm | 16 | 27 | $450.00 |
Dan Wilson | dam@consilting.com |
Active
|
25 Oct 2022, 5:30 pm | 37 | 45 | $159.00 |
Emma Bold | emma@intenso.com |
Active
|
20 Dec 2022, 6:05 pm | 98 | 106 | $3940.00 |
Ana Crown | ana.cf@limtel.com |
Active
|
15 Apr 2022, 2:40 pm | 77 | 89 | $3747.00 |
Robert Doe | robert@benko.com |
Active
|
22 Sep 2022, 5:20 pm | 11 | 25 | $2287.00 |
John Miller | miller@mapple.com |
Active
|
21 Feb 2022, 6:43 am | 92 | 98 | $4898.00 |
Lucy Kunic | lucy.m@fentech.com |
Active
|
20 Jun 2022, 10:10 pm | 86 | 96 | $4197.00 |
Ethan Wilder | ethan@loop.com.au |
Active
|
25 Oct 2022, 6:43 am | 59 | 73 | $2313.00 |
Lucy Kunic | lucy.m@fentech.com |
Active
|
20 Jun 2022, 10:10 pm | 29 | 40 | $4329.00 |
Emma Smith | smith@kpmg.com |
Active
|
24 Jun 2022, 10:30 am | 61 | 69 | $3829.00 |
Melody Macy | melody@altbox.com |
Active
|
25 Oct 2022, 5:20 pm | 97 | 111 | $1217.00 |
Max Smith | max@kt.com |
Active
|
05 May 2022, 11:30 am | 84 | 91 | $4412.00 |
Sean Bean | sean@dellito.com |
Active
|
20 Jun 2022, 5:20 pm | 68 | 83 | $3046.00 |
Brian Cox | brian@exchange.com |
Active
|
24 Jun 2022, 6:05 pm | 6 | 16 | $4066.00 |
Mikaela Collins | mik@pex.com |
Active
|
25 Jul 2022, 10:30 am | 87 | 96 | $1674.00 |
Francis Mitcham | f.mit@kpmg.com |
Active
|
05 May 2022, 2:40 pm | 61 | 69 | $4921.00 |
Olivia Wild | olivia@corpmail.com |
Active
|
19 Aug 2022, 9:23 pm | 4 | 16 | $195.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();
});