Customer Name | Status | Date Joined | No. Orders | No. Products | Total | |
---|---|---|---|---|---|---|
Emma Smith | smith@kpmg.com |
Active
|
05 May 2024, 6:43 am | 82 | 95 | $441.00 |
Melody Macy | melody@altbox.com |
Active
|
20 Jun 2024, 8:43 pm | 39 | 53 | $3531.00 |
Max Smith | max@kt.com |
Active
|
21 Feb 2024, 6:05 pm | 87 | 97 | $734.00 |
Sean Bean | sean@dellito.com |
Active
|
15 Apr 2024, 11:30 am | 58 | 64 | $657.00 |
Brian Cox | brian@exchange.com |
Active
|
15 Apr 2024, 2:40 pm | 99 | 106 | $4474.00 |
Mikaela Collins | mik@pex.com |
Active
|
21 Feb 2024, 2:40 pm | 59 | 74 | $2567.00 |
Francis Mitcham | f.mit@kpmg.com |
Active
|
10 Mar 2024, 6:05 pm | 3 | 18 | $4488.00 |
Olivia Wild | olivia@corpmail.com |
Active
|
24 Jun 2024, 9:23 pm | 88 | 97 | $3215.00 |
Neil Owen | owen.neil@gmail.com |
Active
|
10 Nov 2024, 11:05 am | 14 | 29 | $290.00 |
Dan Wilson | dam@consilting.com |
Active
|
25 Oct 2024, 11:30 am | 61 | 68 | $3319.00 |
Emma Bold | emma@intenso.com |
Active
|
22 Sep 2024, 11:05 am | 75 | 90 | $4816.00 |
Ana Crown | ana.cf@limtel.com |
Active
|
05 May 2024, 6:43 am | 35 | 42 | $1747.00 |
Robert Doe | robert@benko.com |
Active
|
24 Jun 2024, 11:05 am | 29 | 40 | $4800.00 |
John Miller | miller@mapple.com |
Active
|
10 Nov 2024, 10:10 pm | 38 | 43 | $1613.00 |
Lucy Kunic | lucy.m@fentech.com |
Active
|
22 Sep 2024, 11:05 am | 38 | 50 | $3505.00 |
Ethan Wilder | ethan@loop.com.au |
Active
|
22 Sep 2024, 8:43 pm | 20 | 28 | $2529.00 |
Lucy Kunic | lucy.m@fentech.com |
Active
|
10 Nov 2024, 8:43 pm | 60 | 68 | $1339.00 |
Emma Smith | smith@kpmg.com |
Active
|
25 Oct 2024, 8:43 pm | 33 | 45 | $1191.00 |
Melody Macy | melody@altbox.com |
Active
|
22 Sep 2024, 6:43 am | 13 | 19 | $271.00 |
Max Smith | max@kt.com |
Active
|
05 May 2024, 5:20 pm | 33 | 45 | $3323.00 |
Sean Bean | sean@dellito.com |
Active
|
15 Apr 2024, 9:23 pm | 72 | 79 | $2751.00 |
Brian Cox | brian@exchange.com |
Active
|
10 Mar 2024, 6:05 pm | 66 | 74 | $2739.00 |
Mikaela Collins | mik@pex.com |
Active
|
05 May 2024, 5:20 pm | 13 | 21 | $149.00 |
Francis Mitcham | f.mit@kpmg.com |
Active
|
25 Jul 2024, 6:05 pm | 37 | 49 | $163.00 |
Olivia Wild | olivia@corpmail.com |
Active
|
21 Feb 2024, 6:43 am | 6 | 18 | $3116.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 fs-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">
<i class="ki-duotone ki-exit-down fs-2"><span class="path1"></span><span class="path2"></span></i>
Export Report
</button>
<!--begin::Menu-->
<div id="kt_datatable_example_export_menu" class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold 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-->
<!--begin::Hide default export buttons-->
<div id="kt_datatable_example_buttons" class="d-none"></div>
<!--end::Hide default export buttons->
</div>
</div>
<div class="card-body">
<table class="table align-middle border rounded table-row-dashed fs-6 g-5" id="kt_datatable_example">
<thead>
<!--begin::Table row-->
<tr class="text-start text-gray-500 fw-bold 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-semibold text-gray-600">
<tr class="odd">
<td>
<a href="#" class="text-gray-900 text-hover-primary">Emma Smith</a>
</td>
<td>
<a href="#" class="text-gray-900 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 KTDatatablesExample = 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_buttons'));
// Hook dropdown menu click event to datatable export buttons
const exportButtons = document.querySelectorAll('#kt_datatable_example_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');
if ( !table ) {
return;
}
initDatatable();
exportButtons();
handleSearchDatatable();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTDatatablesExample.init();
});