<!-- Css -->
<link href="assets/libs/prismjs/themes/prism-twilight.min.css" type="text/css" rel="stylesheet">
<!-- JS -->
<script src="assets/libs/simple-datatables/umd/simple-datatables.js"></script>
<!-- HTML -->
<table class="w-full" id="datatable_2">
<thead class="bg-gray-50 dark:bg-gray-600/20">
<tr>
<th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase">
Lead
</th>
<th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase">
Email
</th>
<th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase">
Phone No
</th>
<th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase">
Status
</th>
<th scope="col" class="p-3 text-xs font-medium tracking-wider text-left text-gray-700 dark:text-gray-400 uppercase">
Action
</th>
</tr>
</thead>
<tbody>
<!-- 1 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
<img src="assets/images/users/avatar-1.png" alt="" class="mr-2 h-8 rounded-full inline-block">Donald Gardner
</td>
<td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
xyx@gmail.com
</td>
<td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
+123456789
</td>
<td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
<span class="bg-indigo-600/5 text-indigo-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">New Lead</span>
</td>
<td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
<a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a>
<a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a>
</td>
</tr>
<!-- 2 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
<img src="assets/images/users/avatar-5.png" alt="" class="mr-2 h-8 rounded-full inline-block">Matt Rosales
</td>
<td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
xyx@gmail.com
</td>
<td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
+123456789
</td>
<td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
<span class="bg-indigo-600/5 text-indigo-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">New Lead</span>
</td>
<td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
<a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a>
<a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a>
</td>
</tr>
<!-- 3 -->
<tr class="bg-white border-b border-dashed dark:bg-gray-800 dark:border-gray-700">
<td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
<img src="assets/images/users/avatar-4.png" alt="" class="mr-2 h-8 rounded-full inline-block">Michael Hill
</td>
<td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
xyx@gmail.com
</td>
<td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
+123456789
</td>
<td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
<span class="bg-red-600/5 text-red-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Lost</span>
</td>
<td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
<a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a>
<a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a>
</td>
</tr>
<!-- 4 -->
<tr class="bg-white dark:bg-gray-800">
<td class="p-3 text-sm font-medium whitespace-nowrap dark:text-white">
<img src="assets/images/users/avatar-2.png" alt="" class="mr-2 h-8 rounded-full inline-block">Dorothy Key
</td>
<td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
xyx@gmail.com
</td>
<td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
+123456789
</td>
<td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
<span class="bg-green-600/5 text-green-600 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Converted</span>
</td>
<td class="p-3 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
<a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a>
<a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a>
</td>
</tr>
</tbody>
</table>
<button type="button" class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500 text-sm font-medium py-1 px-3 rounded mb-1 lg:mb-0 csv">Export CSV</button>
<button type="button" class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500 text-sm font-medium py-1 px-3 rounded mb-1 lg:mb-0 sql">Export SQL</button>
<button type="button" class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500 text-sm font-medium py-1 px-3 rounded mb-1 lg:mb-0 txt">Export TXT</button>
<button type="button" class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500 text-sm font-medium py-1 px-3 rounded mb-1 lg:mb-0 json">Export JSON</button>
<!-- Init js -->
const dataTable_2 = new simpleDatatables.DataTable("#datatable_2")
document.querySelector("button.csv").addEventListener("click", () => {
dataTable_2.export({
type:"csv",
download: true,
lineDelimiter: "\n\n",
columnDelimiter: ";"
})
})
document.querySelector("button.sql").addEventListener("click", () => {
dataTable_2.export({
type:"sql",
download: true,
tableName: "export_table"
})
})
document.querySelector("button.txt").addEventListener("click", () => {
dataTable_2.export({
type:"txt",
download: true,
})
})
document.querySelector("button.json").addEventListener("click", () => {
dataTable_2.export({
type:"json",
download: true,
escapeHTML: true,
space: 3
})
})
Donald Gardner
Matt Rosales
Michael Hill
Dorothy Key