KTDataTable Skeleton Loader

Question

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:

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 :-(

Faizal · Answer

Hi The issue is that KTDataTable clears the 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 = `
            
            
            
            
            
        `;
        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)

KTDataTable Skeleton Loader

Replies (1)

Metronic

ReUI

Products

Legal

Stay Connected