Showing the loading overlay

You can display either a message about the data loading (or an empty grid) or add a React component to be applied to load data on a user's action (for example, load data on the button click).

Showing a message

To display a text message about the data loading process or notify about an empty grid, add text as the value of the overlay property.

Example:

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

const { columns, data } = getData();

export default function Page() {
  return <Grid data={data} columns={columns} overlay={"Loading..."} />;
}

Adding a component

To add a component as an overlay, import the component to the application page, and add the component name as the value of the overlay property. Only a React component can be applied as an overlay.

In the example below we import the Overlay component which is a button and apply the showData 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();

export default function Page() {
  const [showOverlay, setShowOverlay] = useState(true);

  function showData({ show }) {
    if (show) setShowOverlay(false);
  }

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

The Overlay component example:

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

const Overlay = ({ onAction }) => {
  function handleClick() {
    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={handleClick}>
        Show data
      </Button>
    </>
  );
};

export default Overlay;