Skip to main content

How to access Grid API

You can use either of the two ways below to get access to the Grid API:

  • provide the init handler function with the api as the parameter
  • attach a React ref to the Grid to store the api object in a ref (please, refer to the React refs documentation)

Provide the init handler​

You can access Grid API using the init handler function that takes api as the parameter.

In the example below we block adding text to the inline editor if its length exceeds 15 symbols. To make this possible, we get access to the Grid API using the init handler, and then intercept and modify the editor action using the api.intercept() method.

Example:

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

function Example() {
  const { data } = getData();

  const columns = useMemo(
    () => [
      { id: "id", width: 50 },
      { id: "city", header: "City", editor: "text", width: 160 },
      {
        id: "email",
        header: "Email",
        editor: "text",
        width: 250,
        css: "center",
      },
    ],
    []
  );

  const init = (api) => {
    api.intercept("editor", (ev) => {
      if (ev.value.length > 15) {
        alert(`${ev.value} exceeds 15 symbols`);
        return false;
      }
    });
  };

  return <Grid data={data} columns={columns} init={init} />;
}

Use a ref to access api​

You can access Grid API via a React ref. In the example below we block adding text to the inline editor if its length exceeds 15 symbols. To make this possible, we get access to the Grid api object via a ref (ref={apiRef}), and then intercept and modify the editor action using the api.intercept() method.

Example:

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

function Example() {
  const { data } = getData();

  const columns = useMemo(
    () => [
      { id: "id", width: 50 },
      { id: "city", header: "City", editor: "text", width: 160 },
      {
        id: "email",
        header: "Email",
        editor: "text",
        width: 250,
        css: "center",
      },
    ],
    []
  );

  const apiRef = useRef(null);

  useEffect(() => {
    if (!apiRef.current) return;

    apiRef.current.intercept("editor", (ev) => {
      if (ev.value.length > 15) {
        alert(`${ev.value} exceeds 15 symbols`);
        return false;
      }
    });
  }, []);

  return <Grid data={data} columns={columns} ref={apiRef} />;
}

api methods​

See each method description in the next sections.