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>