Skip to main content

add-row

Description​

Fires when adding a row

Usage​

"add-row": ({
    id?: string | number,
    before?: string | number,
    after?: string | number,
    row: {
       [key: string]: any;
    },
    select?: boolean,
    eventSource?: string,
}) => boolean|void;

Parameters​

The callback of the action takes an object with the following parameters:

  • id - (optional) the ID of a new row
  • before - (optional) the ID of a row before which a new row is added
  • after - (optional) the ID of a row after which a new row is added
  • row - (required) an object with the row data, i.e., column IDs and values
  • select - (optional) enables (true) or disables (false) the selection state of the newly added row
  • eventSource - (optional) the name of the Grid action that triggered add-row

Returning false from the event handler will block adding rows.

Example​

The example below shows how to add a new row with data (on a button click) by triggering the add-row action via the api.exec() method:

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

export default function Example() {
  const { data, columns } = getData();
  const apiRef = useRef(null);

  const addRow = () => {
    apiRef.current.exec("add-row", {
      row: { id: 21, city: "New City", firstName: "New name", lastName: "new name" },
      after: 20,
    });
  };

  return (
    <>
      <Button onClick={addRow} type="primary">Add Row</Button>
      <Grid data={data} columns={columns} ref={apiRef} />
    </>
  );
}

Related articles: