Black Friday Super Sale!Limited Time 50% OFF for All-Access Plans
Save 50% Now 
KTDataTable Skeleton Loader
I recently purchased Metronic 9 (my version is 9.3.1 with Tailwind 4.1.12) and am going the HTML route (with .Net Razor Pages) and am trying to setup a KTDataTable instance that shows a skeleton loader (per column) while an AJAX call is being made to retrieve data.
I tried adding five rows to my table instance inside my table's <tbody /> instance like this, but no luck:
<tr>
<td><div class="kt-skeleton size-16 rounded-full"></div></td>
<td><div class="kt-skeleton size-16 rounded-full"></div></td>
<td><div class="kt-skeleton sizae-16 rounded-full"></div></td>
<td><div class="kt-skeleton size-16 rounded-full"></div></td>
<td><div class="kt-skeleton size-16 rounded-full"></div></td>
</tr>For the sake of curiosity, I added
inside each div, but nothing shows up still. I assume there's a proper way to do this, but I can't find any docs explaining it - the sole skeleton example is a blinking circle (https://ktui.io/docs/skeleton) and sadly, that also doesn't work - even copying that HTML directly into the page (not part of the table) doesn't show it :-(Replies (1)
Hi
The issue is that KTDataTable clears the <tbody> during initialization, so skeleton rows added in HTML are removed. Add skeleton loaders programmatically using KTDataTable's lifecycle.
For per-column skeleton loaders:
// Get your table element
const tableElement = document.querySelector("#your_table_id");
// Initialize KTDataTable
const dataTable = new KTDataTable(tableElement, {
apiEndpoint: "/your-api-endpoint",
// ... other configuration
});
// Function to show skeleton loaders
function showSkeletonLoaders() {
const tbody = tableElement.querySelector("tbody");
if (!tbody) return;
// Clear existing content
tbody.innerHTML = "";
// Add skeleton rows (adjust number of rows and columns as needed)
for (let i = 0; i < 5; i++) {
const row = document.createElement("tr");
row.innerHTML = `
<td><div class="kt-skeleton h-4 w-24 rounded"></div></td>
<td><div class="kt-skeleton h-4 w-32 rounded"></div></td>
<td><div class="kt-skeleton h-4 w-20 rounded"></div></td>
<td><div class="kt-skeleton h-4 w-28 rounded"></div></td>
<td><div class="kt-skeleton h-4 w-16 rounded"></div></td>
`;
tbody.appendChild(row);
}
}
// Function to hide skeleton loaders (called when data arrives)
function hideSkeletonLoaders() {
const tbody = tableElement.querySelector("tbody");
if (tbody) {
// KTDataTable will populate this with actual data
}
}
// Show skeletons before reload
dataTable.reload = (function(originalReload) {
return function() {
showSkeletonLoaders();
return originalReload.call(this);
};
})(dataTable.reload);Important points about skeleton loaders:
Use Tailwind size classes: h-4 (height), w-16, w-24, etc. (width)
Add rounded for rounded corners (not rounded-full for table cells)
Ensure the skeleton divs have explicit dimensions; empty divs won't show
Fix the typo: sizae-16 should be size-16 (though size-16 isn't a standard Tailwind class; use h-4 w-16 instead)
