So, I just started using Metronic in my company and I'm working on emulating what a colleague has selected and composed from the Html demo (some lists, some filters, some dashboard elements, etc.).

At the start I've struggled a lot, the Laravel documentation is truly meagre and the overall explanation of how the template works, how its components talk to each and so is lacking from a junior perspective.

Anyway, I managed to get a custom DataTable element inside a custom view, which is taking most of the Laravel's demo user-management/users route-view. The table in itself is perfect, as much as the standard Laravel demo and the standard Html demo.

Now, I wanted to offer the user the ability to filter the row based on the date in a rows' column. I've taken the kt_datepicker_7 and pasted it in the blade:

<div class="input-group w-250px">
 <input class="form-control form-control-solid" placeholder="Pick date range" id="kt_datepicker_7" />
 <button class="btn btn-icon btn-light" id="kt_datepicker_7_clear">
 <span class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></span>
 </button>
 </div>

$("#kt_datepicker_7").flatpickr({
 altInput: true,
 altFormat: "F j, Y",
 dateFormat: "Y-m-d",
 mode: "range"
 });

var handleSearchDatatable = () => {
 const filterSearch = document.querySelector("[data-kt-ecommerce-order-filter="search"]");
 filterSearch.addEventListener("keyup", function (e) {
 datatable.search(e.target.value).draw();
 });
 }