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 tag. You should also use the api object and pass it to the Toolbar.

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

const { data, columns } = getData();
const [api, setApi] = useState(null);

export default function MyComponent() {
  return (
    <>
      <Toolbar api={api} />
      <Grid data={data} columns={columns} ref={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 tag.

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

const { data, columns } = getData();
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",
  },
];

export default function MyComponent() {
  return (
    <>
      <Toolbar api={api} items={items} />
      <Grid data={data} columns={columns} ref={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();
const [api, setApi] = useState(null);

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

export default function MyComponent() {
  return (
    <>
      <Toolbar api={api} items={items} />
      <Grid data={data} columns={columns} ref={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 MyComponent() {
  const [api, setApi] = useState(null);
  
  // Add a new row
  const addRow = () => {
    api.exec("add-row", {
      row: { name: "New item", value: 0 },
    });
  };

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

  // Initialize API and track selected rows
  const 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 for the example

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