Configuring toolbar

You can configure Toolbar in two ways:

• using the internal Toolbar component of Grid (import from @svar-ui/svelte-grid) and the defaultToolbarButtons array
• using the external Toolbar component with configurable data (import from @svar-ui/svelte-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.

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

  const { data, columns } = getData();
  let api = $state();
</script>

<Toolbar {api} />

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

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.

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

  const { data, columns } = getData();
  let api = $state();

  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",
    },
  ];
</script>

<Toolbar {api} {items} />

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

Customizing default buttons

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

<script>
    import { getData } from "./common/data";
    import { Grid, Toolbar, defaultToolbarButtons } from "@svar-ui/svelte-grid";
    const { data, columns } = getData();

    let api = $state();

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

<Toolbar {api} {items} />
<Grid {data} {columns} bind:this={api} 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.

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

  const { data, columns } = getData();
  let api;
  let selectedRows;

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

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

  // Initialize API and track selected rows
  function init(_api) {
    api = _api;
    selectedRows = api.getReactiveState().selectedRows;
  }

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

<Toolbar {items} />
<div class="grcell">
  <Grid {data} {columns} {init} />
</div>

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