SYIDAX / DATA GRID

Loading and empty results

Distinguish loading, no data, and no search results.

Loading and empty resultsSample order data

120 rows

Loading Grid…

Options

Changes below update the Grid and code immediately.

Loading indicator

Latest result

This example starts with a Loading orders message. It is not waiting for an actual network request.

View code

Current preview

Display status guidance over the table to distinguish loading from empty search results.

Inspect loading
This example starts with a Loading orders message. It is not waiting for an actual network request.
Show the order list
Disable Loading below the table to reveal the prepared sample orders.
Create an empty search result
Enter a nonexistent term in Order search. Clear it and verify the data returns.

Expected results

Compare loading, regular results, and no search results.

In an app, enable loading when a request starts and clear it on success or failure. Distinguish empty source data from rows hidden by search too.

Other properties8

Attribute / Property	Type / Default	Description
showEmptyState	`boolean`Default: true	Render the wrapper empty-state overlay.
emptyMessage	`string`Default: undefined	Message shown when source row data is empty.
noMatchesMessage	`string`Default: undefined	Message shown when filters hide every row.
clearFiltersLabel	`string`Default: undefined	Label for the no-matches clear-filters action.
	`boolean`Default: false	External loading flag for spinner, debounce, and interaction lock.
loadingMessage	`string`Default: undefined	Message rendered beside the loading spinner.
loadingMode	`LoadingMode`Default: 'manual'	Loading-mode switch for manual, auto, or host-owned loading UI.
minLoadingDuration	`number`Default: DEFAULT_MIN_LOADING_DURATION_MS	Minimum visible duration for the loading spinner in ms.

Events1

Events	Detail type	Description
	`GridEmptyStateActionDetail`	Fires when an empty-state overlay action is clicked.