Toolbar

Description

Toolbar component

Usage

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

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

Parameters

• api - the api gateway object to bind the component to the DataGrid All other Toolbar properties description see here: Toolbar. Please, also refer to the description of Toolbar API.

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 attribute to the Toolbar tag. It's also required to pass the api object to Toolbar (for more details, refer to How to access DataGrid API).

<script>
  import { getData } from "./common/data";
  import { Grid, Toolbar } from "@svar-ui/svelte-grid";

  let api = $state();
  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",
    },
  ];
</script>

<Toolbar {api} {items} />
<Grid {data} {columns} bind:this={api} />

---

Related articles:

• How to access Grid API
• defaultToolbarButtons
• Configure Toolbar