<![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-controls"></div>
<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: 'tree', label: 'Tree Structure', type: 'tree', sortable: false, visible: true },
{ key: 'name', label: 'Name', type: 'string', sortable: true, columnSearch: true, visible: true, editable:
true },
{ key: 'age', label: 'Age', type: 'number', sortable: true, columnSearch: true, visible: true },
{ key: 'city', label: 'City', type: 'string', sortable: false, visible: true },
{ key: 'birthdate', label: 'Birth Date', type: 'date', sortable: true, visible: true },
{
key: 'status',
label: 'Status',
type: 'string',
component: 'badge',
align: 'center',
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: 'actions', label: 'Actions', align: 'center', sortable: false, visible: true }
];
const data = [
{
id: 1,
image: 'https://placehold.co/400',
name: 'John Doe',
age: 28,
city: 'New York',
status: "active",
deliverystatus: "delivery",
birthdate: "2021-9-24",
tree: {
child1: {
id: 11,
name: 'John Child 1',
age: 25,
city: 'Brooklyn',
status: "active",
deliverystatus: "ondelivery",
birthdate: "2024-1-15",
tree: {
grandchild1: {
id: 111,
name: 'John Grandchild 1',
age: 22,
city: 'Manhattan',
status: "inactive",
deliverystatus: "delivery",
birthdate: "2027-3-10"
}
}
},
child2: {
id: 12,
name: 'John Child 2',
age: 30,
city: 'Queens',
status: "active",
deliverystatus: "delivery",
birthdate: "2020-6-20"
}
}
},
{
id: 2,
image: 'https://placehold.co/400',
name: 'Jane Smith',
age: 35,
city: 'Los Angeles',
status: "inactive",
deliverystatus: "ondelivery",
birthdate: "2019-12-5",
tree: {
child1: {
id: 21,
name: 'Jane Child 1',
age: 18,
city: 'Hollywood',
status: "active",
deliverystatus: "delivery",
birthdate: "2026-8-15"
}
}
},
{
id: 3,
image: 'https://placehold.co/400',
name: 'Bob Johnson',
age: 42,
city: 'Chicago',
status: "active",
deliverystatus: "delivery",
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',
status: "active",
deliverystatus: "delivery",
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', status: "active",
deliverystatus: "delivery", birthdate: "2021-9-24" },
{ id: 1, image: 'https://placehold.co/400', name: 'John', age: 28, city: 'New York', status: "active",
deliverystatus: "delivery", birthdate: "2021-9-24" },
{ id: 2, image: 'https://placehold.co/400', name: 'Alice', age: 24, city: 'Los Angeles', status: "inactive",
deliverystatus: "ondelivery", birthdate: "2021-7-24" },
{ id: 1, image: 'https://placehold.co/400', name: 'John', age: 28, city: 'New York', status: "active",
deliverystatus: "delivery", birthdate: "2021-9-24" },
{ id: 1, image: 'https://placehold.co/400', name: 'John', age: 28, city: 'New York', status: "active",
deliverystatus: "delivery", birthdate: "2021-9-24" },
{ id: 2, image: 'https://placehold.co/400', name: 'Alice', age: 24, city: 'Los Angeles', status: "inactive",
deliverystatus: "ondelivery", birthdate: "2021-7-24" },
{ id: 1, image: 'https://placehold.co/400', name: 'John', age: 28, city: 'New York', status: "active",
deliverystatus: "delivery", birthdate: "2021-9-24" },
{ id: 1, image: 'https://placehold.co/400', name: 'John', age: 28, city: 'New York', status: "active",
deliverystatus: "delivery", birthdate: "2021-9-24" },
{ id: 2, image: 'https://placehold.co/400', name: 'Alice', age: 24, city: 'Los Angeles', status: "inactive",
deliverystatus: "ondelivery", birthdate: "2021-7-24" },
{ id: 1, image: 'https://placehold.co/400', name: 'John', age: 28, city: 'New York', status: "active",
deliverystatus: "delivery", birthdate: "2021-9-24" },
{ id: 1, image: 'https://placehold.co/400', name: 'John', age: 28, city: 'New York', status: "active",
deliverystatus: "delivery", birthdate: "2021-9-24" },
{ id: 2, image: 'https://placehold.co/400', name: 'Alice', age: 24, city: 'Los Angeles', status: "inactive",
deliverystatus: "ondelivery", 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(`Edit clicked for row ID: ${rowId}`);
}
},
{
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");
}
}
});
});
]]>