Overlays

Overview

The Data Grid comes with placeholder content overlays that live within the contextual provider. When provided, any component used for the overlay slot will have access to the Data Grid context via the useDataGridContext hook.

You can utilize an overlay by adding the name of the slot as a property to the Data Grid overlays prop. Each overlay slot comes with a default fallback when no custom component is provided.

Overlay slots are placed within the grid viewport which is the body of the Data Grid

Note

All overlays outside of the skeleton will lock the scroll. This includes custom pending overlay components.

No Content

The noContent overlay appears when there are no rows to display in the Data Grid. This can be from providing an empty data Array or being filtered out via a feature or store action.

Custom No Content

Pass a component to the overlays.noContent prop to display a custom overlay.

For convenience, the content is placed within a Center parent that matches the height of the viewport area.

Pending

The pending overlay appears when the Data Grid pending prop is set to true to signify the Grid is in a loading state.

The Data Grid supports 3 loading overlay variants out of the box:

• skeleton: an animated placeholder of the Data Grid.
• linear-progress: an indeterminate linear progress bar.
• circular-progress: a circular loading spinner.

For convenience, the content is placed within an absolutely positioned Box parent that matches the height of the viewport area and sits above the row content.

Skeleton

Pass 'skeleton' to the overlays.pending prop to display a skeleton pending overlay.

Linear

Pass 'linear' to the overlays.pending prop to display a linear-progress pending overlay.

Circular

Pass 'circular' to the overlays.pending prop to display a circular-progress pending overlay.

Custom Loading

Pass a component to the overlays.loading prop to display a custom overlay.

Initial Loading

For initial loading states, you can use the overlays.initialPending prop to display a pending overlay.

This will render the value only during the mounting phase of the component. Once data has been populated for the first time, the pending overlay will be used from then on.

The Initial Pending Phase

The initial pending phase is determined by two conditions:

• The Data Grid is mounted for the first time.
• The pending prop is set to true for the first time.

Once these conditions are met, the pending overlay will be displayed from that point forward.

Cell pending with Suspense

For cell level pending states, you can take advantage of Suspense to provide column-level loading states if Promises are used within the Column Definition cell.

This is a natural resource provided by React (and Signals) that doesn't require any additional prop management on the Data Grid.

Note

If using mutations, you need to manually manage the loading state by omitting the Suspense component and instead using the loading prop from useMutation.

:bulb: "Wow! That was fast after the first click?!"

Yup! The Cerberus signals lib caches querys. Since the state saves a string, the cache is smart enough to know that a string of "success" already exists. Thus, it bypasses the fetch. If the strings where unique (or the data more complex) it would handle it accordingly.