Configuring toolbar

You can configure Toolbar in two ways:

• using the internal Toolbar component of Grid (import from @svar-ui/react-grid) and the defaultToolbarButtons array
• using the external Toolbar component with configurable data (import from @svar-ui/react-toolbar)

Adding the default toolbar

To add a toolbar, import the Toolbar component of Grid, and add the Toolbar element. You should also use the api object and pass it to the Toolbar. In React you typically obtain the Grid API via an init callback (or a forwarded ref). The example below uses a state setter passed as the Grid init prop.

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

const { data, columns } = getData();

export default function Example() {
  // $state -> useState
  const [api, setApi] = useState(null);

  return (
    <>
      <Toolbar api={api} />
      {/* Grid will call init(api) when ready */}
      <Grid data={data} columns={columns} init={setApi} />
    </>
  );
}

Configuring the set of buttons in the toolbar

To configure the toolbar (the set of buttons in the toolbar and their appearance), import the Toolbar component of Grid and make necessary changes to the items array. Do not forget to add the items attribute to the Toolbar element.

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

const { data, columns } = getData();

export default function Example() {
  const [api, setApi] = useState(null);

  const items = [
    {
      id: "add-row",
      comp: "button",
      icon: "wxi-plus",
      text: "Add row",
      type: "primary",
    },
    {
      id: "edit-row",
      comp: "button",
      icon: "wxi-edit",
      text: "Edit",
      type: "link",
    },
  ];

  return (
    <>
      <Toolbar api={api} items={items} />
      <Grid data={data} columns={columns} init={setApi} />
    </>
  );
}

Customizing default buttons

You can also customize the Toolbar by importing and changing the defaultToolbarButtons array.

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

const { data, columns } = getData();

export default function Example() {
  const [api, setApi] = useState(null);

  const items = defaultToolbarButtons.filter(b => b.id !== "open-editor");

  return (
    <>
      <Toolbar api={api} items={items} />
      {/* keep same Grid props as before */}
      <Grid data={data} columns={columns} init={setApi} reorder undo />
    </>
  );
}

Adding a custom toolbar

The example below shows how to add a custom toolbar by applying the external Toolbar component. We define custom handlers that perform actions through the api.exec() method and update the items array accordingly.

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

const { data, columns } = getData();

export default function Example() {
  const [api, setApi] = useState(null);
  // selectedRows stores the current selected row ids (array)
  const [selectedRows, setSelectedRows] = useState([]);

  // Add a new row
  function addRow() {
    if (!api) return;
    api.exec("add-row", {
      row: { name: "New item", value: 0 },
    });
  }

  // Delete the first selected row
  function deleteRow() {
    if (!selectedRows || !selectedRows.length) return;
    const id = selectedRows[0];
    api.exec("delete-row", { id });
  }

  // Initialize API and track selected rows
  function init(_api) {
    setApi(_api);
  }

  const items = [
    {
      comp: "button",
      type: "primary",
      text: "Add row",
      handler: addRow,
    },
    {
      comp: "button",
      text: "Delete selected row",
      handler: deleteRow,
    },
  ];

  return (
    <>
      <Toolbar items={items} />
      <div className="grcell">
        <Grid data={data} columns={columns} init={init} />
      </div>
    </>
  );
}

CSS (separate file or style block):

.grcell {
  height: calc(100% - 50px);
  border-top: var(--wx-grid-border);
}

---

Related samples:

• Toolbar
• Toolbar: custom
• External Toolbar