<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-->
 </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-400 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-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>