Skip to main content

Toolbar

Description​

Toolbar component

Usage​

<Toolbar api={api} css={css} items={items} menuCss={menuCss} values={values} overflow={overflow} />

You can import the Toolbar component from @svar-ui/react-grid.

Parameters​

Example​

To configure the toolbar (the set of buttons in the toolbar and/or their appearance), import the Toolbar component and make necessary changes to the items array. Do not forget to add the items prop to the Toolbar component. It's also required to pass the api object to Toolbar (for more details, refer to How to access DataGrid API).

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

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

  const items = [
    {
      id: "add-row",
      comp: "button",
      icon: "wxi-plus",
      text: "Add row",
    },
    {
      id: "delete-row",
      comp: "button",
      icon: "wxi-delete",
      text: "Delete",
    },
    { comp: "spacer" },
    {
      id: "copy-row",
      comp: "icon",
      icon: "wxi-content-copy",
    },
  ];

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

Related articles: