(function () {
"use strict";
const imageAssets = import.meta.glob(
"/resources/images/fakers/*.{jpg,jpeg,png,svg}",
{ eager: true }
);
// Tabulator
if ($("#tabulator").length) {
// Setup Tabulator
const tabulator = new Tabulator("#tabulator", {
ajaxURL: "https://dummy-data.left4code.com",
paginationMode: "remote",
filterMode: "remote",
sortMode: "remote",
printAsHtml: true,
printStyled: true,
pagination: true,
paginationSize: 10,
paginationSizeSelector: [10, 20, 30, 40],
layout: "fitColumns",
responsiveLayout: "collapse",
placeholder: "No matching records found",
columns: [
{
title: "",
formatter: "responsiveCollapse",
width: 40,
minWidth: 30,
hozAlign: "center",
resizable: false,
headerSort: false,
},
// For HTML table
{
title: "PRODUCT NAME",
minWidth: 200,
responsive: 0,
field: "name",
vertAlign: "middle",
print: false,
download: false,
formatter(cell) {
const response = cell.getData();
return `
${response.name}
${response.category}
`;
},
},
{
title: "IMAGES",
minWidth: 200,
field: "images",
hozAlign: "center",
headerHozAlign: "center",
vertAlign: "middle",
print: false,
download: false,
formatter(cell) {
return ``;
},
},
{
title: "REMAINING STOCK",
minWidth: 200,
field: "remaining_stock",
hozAlign: "center",
headerHozAlign: "center",
vertAlign: "middle",
print: false,
download: false,
},
{
title: "STATUS",
minWidth: 200,
field: "status",
hozAlign: "center",
headerHozAlign: "center",
vertAlign: "middle",
print: false,
download: false,
formatter(cell) {
const response = cell.getData();
return `
${
response.status ? "Active" : "Inactive"
}
`;
},
},
{
title: "ACTIONS",
minWidth: 200,
field: "actions",
responsive: 1,
hozAlign: "center",
headerHozAlign: "center",
vertAlign: "middle",
print: false,
download: false,
formatter() {
let a =
$(``);
$(a)
.find(".edit")
.on("click", function () {
alert("EDIT");
});
$(a)
.find(".delete")
.on("click", function () {
alert("DELETE");
});
return a[0];
},
},
// For print format
{
title: "PRODUCT NAME",
field: "name",
visible: false,
print: true,
download: true,
},
{
title: "CATEGORY",
field: "category",
visible: false,
print: true,
download: true,
},
{
title: "REMAINING STOCK",
field: "remaining_stock",
visible: false,
print: true,
download: true,
},
{
title: "STATUS",
field: "status",
visible: false,
print: true,
download: true,
formatterPrint(cell) {
return cell.getValue() ? "Active" : "Inactive";
},
},
{
title: "IMAGE 1",
field: "images",
visible: false,
print: true,
download: true,
formatterPrint(cell) {
return cell.getValue()[0];
},
},
{
title: "IMAGE 2",
field: "images",
visible: false,
print: true,
download: true,
formatterPrint(cell) {
return cell.getValue()[1];
},
},
{
title: "IMAGE 3",
field: "images",
visible: false,
print: true,
download: true,
formatterPrint(cell) {
return cell.getValue()[2];
},
},
],
});
tabulator.on("renderComplete", () => {
createIcons({
icons,
attrs: {
"stroke-width": 1.5,
},
nameAttr: "data-lucide",
});
});
// Redraw table onresize
window.addEventListener("resize", () => {
tabulator.redraw();
createIcons({
icons,
"stroke-width": 1.5,
nameAttr: "data-lucide",
});
});
// Filter function
function filterHTMLForm() {
let field = $("#tabulator-html-filter-field").val();
let type = $("#tabulator-html-filter-type").val();
let value = $("#tabulator-html-filter-value").val();
tabulator.setFilter(field, type, value);
}
// On submit filter form
$("#tabulator-html-filter-form")[0].addEventListener(
"keypress",
function (event) {
let keycode = event.keyCode ? event.keyCode : event.which;
if (keycode == "13") {
event.preventDefault();
filterHTMLForm();
}
}
);
// On click go button
$("#tabulator-html-filter-go").on("click", function (event) {
filterHTMLForm();
});
// On reset filter form
$("#tabulator-html-filter-reset").on("click", function (event) {
$("#tabulator-html-filter-field").val("name");
$("#tabulator-html-filter-type").val("like");
$("#tabulator-html-filter-value").val("");
filterHTMLForm();
});
// Export
$("#tabulator-export-csv").on("click", function (event) {
tabulator.download("csv", "data.csv");
});
$("#tabulator-export-json").on("click", function (event) {
tabulator.download("json", "data.json");
});
$("#tabulator-export-xlsx").on("click", function (event) {
tabulator.download("xlsx", "data.xlsx", {
sheetName: "Products",
});
});
$("#tabulator-export-html").on("click", function (event) {
tabulator.download("html", "data.html", {
style: true,
});
});
// Print
$("#tabulator-print").on("click", function (event) {
tabulator.print();
});
}
})();