Skip to main content

overlay

Description​

Optional. Shows an overlay when the table is empty or in the loading state

Usage​

overlay?: string | Component;

Parameters​

The overlay value can be a message or the name of a Vue component that should be applied as an overlay.

Example​

The example below shows an overlay as a text:

<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>

In the next example we import the Vue Overlay component which is a button and we use 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";
    import { ref } from "vue";
    
    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 (button):

<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>