TableLoading

The TableLoading component displays a shimmer loading state for tables. It creates a placeholder table with animated rows and columns that show a loading effect until the actual data is ready to be displayed.

Example

Python Dash Example

import dash
from dash import html
import yipit_dash_mui_components as dmc

app = dash.Dash(__name__)

dash._dash_renderer._set_react_version('18.2.0')

app.layout = dmc.YipitMUIProvider(
    children=[
        dmc.TableLoading(
            columnWidths=["100px", "150px", "200px", "150px"],
            rowCount=5
        )
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Props

Name	Type	Default	Description
columnWidths	string[]	Required	Array of column widths (e.g., ["100px", "150px"]). Each string should be a valid CSS width value.
rowCount	number	10	Number of placeholder rows to display.

Implementation Details

The TableLoading component has the following characteristics:

• Shimmer animation that runs in a 1.5-second linear loop
• Light grey gradient background for the shimmer effect
• Rounded corners (8px border radius) on the table edges
• Fixed table layout for consistent column widths
• 24px height for each cell content
• Automatic overflow handling with scrolling
• Borders between rows (except for the first row)
• Responsive container that takes full width

Animation

The component features a shimmer animation that moves from left to right continuously, creating a subtle loading effect. The animation:

• Runs in a 1.5-second linear loop
• Uses a gradient background that shifts position
• Applies to all cells in the table

---