overlay
Description
Optional. Shows an overlay when the table is empty or in the loading stateUsage
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>