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)