Documentation

Loading State

Simple Table provides a built-in loading state that displays skeleton loaders for all cells while your data is being fetched. This gives users immediate visual feedback and improves the perceived performance of your application.

Basic Usage

To enable the loading state, simply pass the isLoading prop and set it to true while your data is loading. When the data arrives, set it back to false.

Loading State Configuration

Property	Required	Description	Example

`isLoading` boolean	Optional	When set to true, all table cells will render skeleton loaders instead of actual data. This provides visual feedback to users while data is being fetched.

Customizing the Loading Skeleton

You can customize the appearance of the loading skeleton using CSS. The skeleton elements have the st-loading-skeleton class which you can target in your CSS.

CSS Variable for Customization

You can customize the skeleton background color using the CSS variable:

--st-loading-skeleton-bg-color

Or target the skeleton elements directly using the st-loading-skeleton class:

.theme-custom {
  /* Change skeleton background color */
  --st-loading-skeleton-bg-color: var(--st-blue-200);
}

/* Or use the class directly */
.st-loading-skeleton {
  background-color: #e0e7ff;
  /* Add custom animations or styles */
}

💡 Pro Tip

Combine the loading state with server-side pagination or infinite scroll to provide feedback during data fetches. See the Pagination documentation for an example of using isLoading with page changes.