BluGrid

import '@bluui/web/styles.css'

import { createGrid } from "@bluui/web/grid";
import "@bluui/web/grid.css";
interface Customer {
  Id: number;
  Name: string;
  Seats: number;
}
export function mount(host: HTMLElement) {
  const toolbar = document.createElement("div"),
    save = document.createElement("button"),
    output = document.createElement("p");
  output.setAttribute("role", "status");
  save.textContent = "Save changes";
  save.type = "button";
  toolbar.append(save, output);
  host.append(toolbar);
  const grid = createGrid<Customer>(host, {
    RowKeyField: "Id",
    Columns: [
      { Field: "Name", Header: "Customer", IsEditable: true, Flex: 1 },
      { Field: "Seats", Type: "Number", IsEditable: true },
    ],
    Rows: [
      { Id: 1, Name: "Atlas Labs", Seats: 12 },
      { Id: 2, Name: "Northstar", Seats: 24 },
    ],
    Config: {
      Height: "360px",
      SelectionMode: "Multiple",
      EnablePagination: true,
      PageSize: 10,
    },
    Events: {
      OnEditStateChanged: (state) => {
        save.disabled = !state.HasChanges || state.IsSaving;
      },
    },
  });
  save.onclick = async () => {
    const request = await grid.beginSave();
    if (!request.SaveToken) return;
    try {
      // Replace this local persistence with a validated backend request returning canonical rows.
      localStorage.setItem("bluui-starter-grid", JSON.stringify(request.Rows));
      grid.completeSave(request.SaveToken, request.Rows);
      output.textContent = "Saved in this browser.";
    } catch {
      grid.failSave(request.SaveToken, [
        {
          RowId: "",
          Field: "",
          Code: "SAVE_FAILED",
          Message: "Could not save. Retry your changes.",
        },
      ]);
    }
  };
  return {
    destroy() {
      grid.destroy();
      toolbar.remove();
    },
  };
}

const instance = mount(document.getElementById('example')!)

// When this page or framework component is removed:
// instance.destroy()