Skip to main content

overlay

Description​

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

Usage​

overlay?: string | {};

Parameters​

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

Example​

The example below shows an overlay as a text:

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

    const { columns, data } = getData();

</script>

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

In the next example we import the Svelte 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>
  import { Grid } from "@wx/svelte-grid";
  import Overlay from "./stubs/Overlay.svelte";
  import { getData } from "./common/data";

  const { columns, data } = getData();

  let showOverlay = true;

  function showData({ detail }) {
    const show = detail.show;

    if (show) showOverlay = false;
  }

</script>

<Grid
 {data}
 {columns}
 overlay={showOverlay ? Overlay : null}
 on:overlay-button-click={showData} />

The Overlay component example (button):

<script>
  import { createEventDispatcher } from "svelte";

  import { Button } from "@xbs/svelte-wx";

  const dispatch = createEventDispatcher();

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

<Button type="primary" click={showData}>Show data</Button>