api.setNext()

Description

Allows adding some action into the Event Bus order

Usage

api.setNext(next: any): void;

Parameters

• next - (required) the action to be included into the Event Bus order

Example

In the example below we include the RestDataProvider service into the Event Bus order to perform operations with data (adding, deleting, and etc.) and send the corresponding requests to the server.

import { useState, useEffect, useRef } from "react";
import { Button } from "@svar-ui/react-core";
import { RestDataProvider } from "@svar-ui/grid-data-provider";
import { Grid } from "@svar-ui/react-grid";

export default function Example() {
  const columns = [
    {
      id: "name",
      header: "Title",
      flexgrow: 1,
      sort: true,
      editor: "text",
    },
    {
      id: "year",
      header: "Year",
      width: 100,
      sort: true,
      editor: "text",
    },
    {
      id: "votes",
      header: "Votes",
      width: 100,
      sort: true,
      editor: "text",
    },
  ];

  const [data, setData] = useState([]);
  const apiRef = useRef(null);

  const provider = new RestDataProvider("https://some-backend-url", (obj) => {
    obj.year = obj.year * 1;
    obj.votes = obj.votes * 1;
  });

  useEffect(() => {
    provider.getData().then((v) => setData(v));
  }, []);

  const addRow = () => {
    if (apiRef.current) {
      apiRef.current.exec("add-row", {
        row: { name: "New Film", year: 2022, votes: 1 },
      });
    }
  };

  const init = (api) => {
    api.setNext(provider);
  };

  return (
    <>
      <Button onClick={addRow} type="primary">Add Row</Button>

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

---

Related articles: How to access Grid API