Showing the loading overlay

You can display either a message about the data loading (or an empty grid) or add a Vue 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 setup>
    import { Grid } from "@svar-ui/vue-grid";
    import { getData } from "./common/data";

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

<template>
    <Grid :data="data" :columns="columns" overlay="Loading..." />
</template>

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 Vue 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 setup>
    import { Grid } from "@svar-ui/vue-grid";
    import Overlay from "./stubs/Overlay.vue";
    import { getData } from "./common/data";

    const { columns, data } = getData();

    const showOverlay = ref(true);

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

<template>
    <Grid 
        :data="data"
        :columns="columns"
        :overlay="showOverlay ? Overlay : null"
        :onoverlaybuttonclick="showData" />
</template>

The Overlay component example:

<script setup>
    import { Button } from "@svar-ui/vue-core";
    const props = defineProps({ onaction: { type: Function } });

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

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

---

Related sample: Overlay