Showing the loading overlay

You can display either a message about the data loading (or an empty grid) or add a Svelte component to be applied to load data on a user's action (for example, load data on the button click).

Showing a message

To display a text message about the data loading process or notify about an empty grid, add text as the value of the overlay property.

Example:

<script>
    import { Grid } from "wx-svelte-grid";
    import { getData } from "./common/data";

    const { columns, data } = getData();
    
</script>

<Grid {data} {columns} overlay={"Loading..."} />

Adding a component

To add a component as an overlay, import the component to the application page, and add the component name as the value of the overlay property. Only a Svelte component can be applied as an overlay.

In the example below we import the Overlay component which is a button and apply the showData function to close the button overlay and show data on the button click.

<script>
    import { Grid } from "wx-svelte-grid";
    import Overlay from "./stubs/Overlay.svelte";
    import { getData } from "./common/data";

    const { columns, data } = getData();

    let showOverlay = $state(true);

    function showData({ show }) {
        if (show) showOverlay = false;
    }
</script>

<Grid 
    {data}
    {columns}
    overlay={showOverlay ? Overlay : null}
    onoverlaybuttonclick={showData} />

The Overlay component example:

<script>
    import { Button } from "wx-svelte-core";
    const { onaction } = $props();

    function showData() {
        onaction &&
            onaction({
                action: "overlay-button-click",
                data: {
                    show: true,
                },
            });
    }
</script>

<div>Here is a component example</div>
<div>Click the button to see the data</div>
<Button type="primary" onclick={showData}>Show data</Button>