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 React component that should be applied as an overlay.

Example​

The example below shows an overlay as a text:

import { Grid } from "@svar-ui/react-grid";
import { getData } from "./common/data";

const { columns, data } = getData();

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

In the next example we import the React Overlay component which is a button and we use the handleOverlayButtonClick function to close the button overlay and show data on the button click.

import { useState } from "react";
import { Grid } from "@svar-ui/react-grid";
import Overlay from "./stubs/Overlay.jsx";
import { getData } from "./common/data";

const { columns, data } = getData();

function Example() {
  const [showOverlay, setShowOverlay] = useState(true);

  function handleOverlayButtonClick(payload) {
    // payload is expected to be the object passed by the Overlay component's onAction call
    const show = payload?.data?.show;
    if (show) setShowOverlay(false);
  }

  return (
    <Grid
      data={data}
      columns={columns}
      overlay={showOverlay ? Overlay : null}
      onOverlayButtonClick={handleOverlayButtonClick}
    />
  );
}

The Overlay component example (button):

import { Button } from "@svar-ui/react-core";

export default function Overlay({ onAction }) {
  function showData() {
    if (onAction) {
      onAction({
        action: "overlay-button-click",
        data: {
          show: true,
        },
      });
    }
  }

  return (
    <>
      <div>Here is a component example</div>
      <div>Click the button to see the data</div>
      <Button type="primary" onClick={showData}>Show data</Button>
    </>
  );
}