<![CDATA[
<div class="toggle mb-2 px-6">
<button class="toggle-button active text-sm">Table One</button>
<button class="toggle-button text-sm">Table Two</button>
<button class="toggle-button text-sm">Table Three</button>
<span class="indicator"></span>
</div>
<div class="dt-wrapper">
<div class="dt-overflow mt-2">
<table id="dataTable" class="dt-table"></table>
</div>
</div>
]]>
<![CDATA[
document.addEventListener('DOMContentLoaded', () => {
const columns = [
{ key: 'id', label: 'ID', type: 'number', sortable: true, visible: true, },
{ key: 'image', label: 'Avatar', type: 'image', width: 50, height: 50, borderRadius: 60, sortable: false,
visible: true, },
{ key: 'city', label: 'City', type: 'string', sortable: false, visible: true, },
{ key: 'color', label: 'Color', type: 'color', sortable: false, visible: true, },
{
key: 'status',
label: 'Status',
type: 'string',
component: 'badge',
mapping: {
active: 'success',
inactive: 'danger'
},
sortable: true,
visible: true,
},
{
key: 'deliverystatus',
label: 'Delivery Status',
type: 'string',
align: 'center',
mapping: {
ondelivery: 'ondelivery',
delivery: 'delivery'
},
sortable: true,
visible: true,
},
{
key: 'isActive',
label: 'Active Status',
type: 'switch',
align: 'center',
sortable: false,
visible: true,
},
{ key: 'actions', label: 'Actions', sortable: false, visible: true, }
];
const data = [
{
id: 1,
image: 'https://placehold.co/400',
name: 'John Doe',
age: 28,
city: 'New York',
color: "#000000", status: "active",
deliverystatus: "delivery", isActive: true,
birthdate: "2021-9-24",
tree: {
child1: {
id: 11,
name: 'John Child 1',
age: 25,
city: 'Brooklyn',
color: "#000000", status: "active",
deliverystatus: "ondelivery", isActive: true,
birthdate: "2024-1-15",
tree: {
grandchild1: {
id: 111,
name: 'John Grandchild 1',
age: 22,
city: 'Manhattan',
color: "#000000", status: "inactive",
deliverystatus: "delivery", isActive: true,
birthdate: "2027-3-10"
}
}
},
child2: {
id: 12,
name: 'John Child 2',
age: 30,
city: 'Queens',
color: "#000000", status: "active",
deliverystatus: "delivery", isActive: true,
birthdate: "2020-6-20"
}
}
},
{
id: 2,
image: 'https://placehold.co/400',
name: 'Jane Smith',
age: 35,
city: 'Los Angeles',
color: "#000000", status: "inactive",
deliverystatus: "ondelivery", isActive: true,
birthdate: "2019-12-5",
tree: {
child1: {
id: 21,
name: 'Jane Child 1',
age: 18,
city: 'Hollywood',
color: "#000000", status: "active",
deliverystatus: "delivery", isActive: true,
birthdate: "2026-8-15"
}
}
},
{
id: 3,
image: 'https://placehold.co/400',
name: 'Bob Johnson',
age: 42,
city: 'Chicago',
color: "#000000", status: "active",
deliverystatus: "delivery", isActive: true,
birthdate: "2018-4-12",
// No tree property - this will be a leaf node
},
{
id: 4,
image: 'https://placehold.co/400',
name: 'Bob Johnson',
age: 42,
city: 'Chicago',
color: "#000000", status: "active",
deliverystatus: "delivery", isActive: true,
birthdate: "2018-4-12"
// No tree property - this will be a leaf node
},
{
id: 1, image: 'https://placehold.co/400', name: 'John', age: 28, city: 'New York', color: "#000000",
status: "active",
deliverystatus: "delivery", isActive: true, birthdate: "2021-9-24"
},
{
id: 1, image: 'https://placehold.co/400', name: 'John', age: 28, city: 'New York', color: "#000000",
status: "active",
deliverystatus: "delivery", isActive: true, birthdate: "2021-9-24"
},
{
id: 2, image: 'https://placehold.co/400', name: 'Alice', age: 24, city: 'Los Angeles', color: "#000000",
status: "inactive",
deliverystatus: "ondelivery", isActive: true, birthdate: "2021-7-24"
},
{
id: 1, image: 'https://placehold.co/400', name: 'John', age: 28, city: 'New York', color: "#000000",
status: "active",
deliverystatus: "delivery", isActive: true, birthdate: "2021-9-24"
},
{
id: 1, image: 'https://placehold.co/400', name: 'John', age: 28, city: 'New York', color: "#000000",
status: "active",
deliverystatus: "delivery", isActive: true, birthdate: "2021-9-24"
},
{
id: 2, image: 'https://placehold.co/400', name: 'Alice', age: 24, city: 'Los Angeles', color: "#000000",
status: "inactive",
deliverystatus: "ondelivery", isActive: true, birthdate: "2021-7-24"
},
{
id: 1, image: 'https://placehold.co/400', name: 'John', age: 28, city: 'New York', color: "#000000",
status: "active",
deliverystatus: "delivery", isActive: true, birthdate: "2021-9-24"
},
{
id: 1, image: 'https://placehold.co/400', name: 'John', age: 28, city: 'New York', color: "#000000",
status: "active",
deliverystatus: "delivery", isActive: true, birthdate: "2021-9-24"
},
{
id: 2, image: 'https://placehold.co/400', name: 'Alice', age: 24, city: 'Los Angeles', color: "#000000",
status: "inactive",
deliverystatus: "ondelivery", isActive: true, birthdate: "2021-7-24"
},
{
id: 1, image: 'https://placehold.co/400', name: 'John', age: 28, city: 'New York', color: "#000000",
status: "active",
deliverystatus: "delivery", isActive: true, birthdate: "2021-9-24"
},
{
id: 1, image: 'https://placehold.co/400', name: 'John', age: 28, city: 'New York', color: "#000000",
status: "active",
deliverystatus: "delivery", isActive: true, birthdate: "2021-9-24"
},
{
id: 2, image: 'https://placehold.co/400', name: 'Alice', age: 24, city: 'Los Angeles', color: "#000000",
status: "inactive",
deliverystatus: "ondelivery", isActive: true, birthdate: "2021-7-24"
},
];
const menuData = [
{
label: 'Edit',
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke- width="2" stroke - linecap="round" stroke - linejoin="round"
class="lucide lucide-pencil-icon lucide-pencil">
<path
d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
<path d="m15 5 4 4" />
</svg> ',
labelWithIcon: true,
class: 'btn btn--ghost d-flex align-items-center',
onClick: (rowId) => {
alert('row Clicked');
}
},
{
label: 'View',
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke- width="2" stroke - linecap="round" stroke - linejoin="round"
class="lucide lucide-eye-icon lucide-eye">
<path
d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
<circle cx="12" cy="12" r="3" />
</svg> ',
class: 'btn btn--ghost',
onClick: (rowId) => {
alert("we need to make sure this workds.")
}
},
{
label: 'Delete',
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke- width="2" stroke - linecap="round" stroke - linejoin="round"
class="lucide lucide-trash-icon lucide-trash">
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
<path d="M3 6h18" />
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
</svg> ',
class: 'btn btn--ghost',
attributes: [{
key: 'data-modal-target',
value: 'default-modal'
}],
onClick: (rowId) => {
event.preventDefault();
}
},
]
$('#dataTable').DataTable({
search: true,
print: true,
data,
columns,
actionMenus: menuData,
primaryAction: {
label: 'Add New Data',
icon: '+',
class: 'btn btn-pumpkin',
onClick: () => {
alert("test test");
},
tableOptions: {
currentPage: 1,
rowsPerPage: 10,
totalRows: 100,
getCurrentPage: (page) => {
console.log("currentPage", page);
return page;
},
onSwitchToggle: (row, key, state) => {
console.log("row", row);
console.log("key", key);
console.log("state", state);
},
selectedRowsData: {
onTrigger: (rows) => {
console.log("data", rows);
}
},
onCellUpdate: (rowId, key, value) => {
console.log("row", row);
console.log("key", key);
console.log("value", value);
}
},
});
});
]]>