Customer Name | Status | Date Joined | No. Orders | No. Products | Total | |
---|---|---|---|---|---|---|
Emma Smith | smith@kpmg.com |
Active
|
10 Nov 2024, 6:05 pm | 2 | 11 | $1129.00 |
Melody Macy | melody@altbox.com |
Active
|
25 Jul 2024, 8:43 pm | 46 | 56 | $3209.00 |
Max Smith | max@kt.com |
Active
|
24 Jun 2024, 9:23 pm | 79 | 85 | $3103.00 |
Sean Bean | sean@dellito.com |
Active
|
10 Mar 2024, 2:40 pm | 93 | 102 | $1016.00 |
Brian Cox | brian@exchange.com |
Active
|
10 Nov 2024, 10:10 pm | 46 | 53 | $2000.00 |
Mikaela Collins | mik@pex.com |
Active
|
24 Jun 2024, 5:30 pm | 31 | 39 | $3601.00 |
Francis Mitcham | f.mit@kpmg.com |
Active
|
20 Dec 2024, 6:05 pm | 30 | 39 | $1180.00 |
Olivia Wild | olivia@corpmail.com |
Active
|
21 Feb 2024, 5:30 pm | 42 | 55 | $3630.00 |
Neil Owen | owen.neil@gmail.com |
Active
|
25 Jul 2024, 6:05 pm | 19 | 29 | $2419.00 |
Dan Wilson | dam@consilting.com |
Active
|
15 Apr 2024, 8:43 pm | 80 | 90 | $2099.00 |
Emma Bold | emma@intenso.com |
Active
|
10 Nov 2024, 11:30 am | 74 | 85 | $2240.00 |
Ana Crown | ana.cf@limtel.com |
Active
|
10 Mar 2024, 2:40 pm | 60 | 66 | $2191.00 |
Robert Doe | robert@benko.com |
Active
|
10 Nov 2024, 5:30 pm | 86 | 91 | $1902.00 |
John Miller | miller@mapple.com |
Active
|
21 Feb 2024, 2:40 pm | 25 | 36 | $99.00 |
Lucy Kunic | lucy.m@fentech.com |
Active
|
05 May 2024, 6:43 am | 65 | 73 | $2509.00 |
Ethan Wilder | ethan@loop.com.au |
Active
|
10 Mar 2024, 9:23 pm | 37 | 47 | $996.00 |
Olivia Wild | olivia@corpmail.com |
Active
|
15 Apr 2024, 2:40 pm | 55 | 64 | $1632.00 |
Emma Smith | smith@kpmg.com |
Active
|
15 Apr 2024, 10:30 am | 78 | 90 | $3541.00 |
Melody Macy | melody@altbox.com |
Active
|
20 Dec 2024, 10:10 pm | 81 | 91 | $4281.00 |
Max Smith | max@kt.com |
Active
|
20 Jun 2024, 2:40 pm | 26 | 37 | $1975.00 |
Sean Bean | sean@dellito.com |
Active
|
19 Aug 2024, 8:43 pm | 14 | 29 | $1313.00 |
Brian Cox | brian@exchange.com |
Active
|
25 Oct 2024, 6:05 pm | 50 | 65 | $3454.00 |
Mikaela Collins | mik@pex.com |
Active
|
20 Jun 2024, 5:30 pm | 55 | 66 | $4076.00 |
Francis Mitcham | f.mit@kpmg.com |
Active
|
20 Jun 2024, 5:20 pm | 37 | 42 | $2637.00 |
Olivia Wild | olivia@corpmail.com |
Active
|
20 Jun 2024, 10:10 pm | 48 | 61 | $4168.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();
});