syidaxgrid
Home Pricing Settings

GRID FEATURE

Loading and empty results

Loading and empty-data messages explain why the table has no visible content. Pending requests, no results, and failures are distinct states and should not share one empty screen.

Markdown source Features

How it works and when to use it

Enable loading while the app fetches data and clear it when the request ends, whether it succeeds or fails. Configure empty results with showEmptyState and emptyMessage, and provide error retries in the app.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Initial query

Assume readOrders is a data-fetching function implemented by your app.

javascript
grid.loading = true;
grid.loadingMessage = 'Loading orders.';
try {
  grid.rowData = await readOrders();
} finally {
  grid.loading = false;
}

Verify the result: The table appears on success, and loading clears even on failure. The calling app must explain errors.

Example 2. When a query returns no results

An empty array can be a valid query result.

javascript
grid.showEmptyState = true;
grid.emptyMessage = 'No matching orders. Check your search criteria.';
grid.rowData = [];

Verify the result: Users can understand whether to change their search criteria. While a request is pending, show loading instead of an empty state.

Example 3. Fast refreshes and flicker

For repeated short requests, adjust display duration with minLoadingDuration. Decide whether to retain existing data based on the app workflow.

Verify the result: When filters change rapidly, implement cancellation or request ordering so an older response cannot overwrite the latest result.

Combining features and troubleshooting

Use distinct messages for empty data and server errors. Explain failure causes and whether retry is possible.

For long tasks, provide necessary actions such as progress, cancellation, and retry instead of relying only on a loading screen.

Related reading