import { GuiexpertTable } from "@guiexpert/react-table";
import { GeMouseEvent, TableFactory, TableOptions } from "@guiexpert/table";
import "@guiexpert/table/css/main.css";
import { orders } from "./orders";

// create model and options once – a new object rebuilds the table
const tableModel = TableFactory.createTableModel({
  rows: orders,
  properties: ["id", "customer", "city", "total"]
});
const tableOptions = new TableOptions();

export function OrderTable() {
  return (
    <div style={{ height: 500 }}>
      <GuiexpertTable
        tableModel={tableModel}
        tableOptions={tableOptions}
        mouseClicked={(evt: GeMouseEvent) => console.info("row", evt.rowIndex)} />
    </div>
  );
}

import { Component } from "@angular/core";
import { TableComponent } from "@guiexpert/angular-table";   // styles included
import { GeMouseEvent, TableFactory, TableOptions } from "@guiexpert/table";
import { orders } from "./orders";

@Component({
  selector: "app-order-table",
  imports: [TableComponent],                                   // Angular < 19: standalone: true
  template: `
    <guiexpert-table style="display: block; height: 500px"
      [tableModel]="tableModel" [tableOptions]="tableOptions"
      (mouseClicked)="onClick($event)"></guiexpert-table>`
})
export class OrderTableComponent {
  readonly tableModel = TableFactory.createTableModel({
    rows: orders,
    properties: ["id", "customer", "city", "total"]
  });
  readonly tableOptions = new TableOptions();

  onClick(evt: GeMouseEvent): void { console.info("row", evt.rowIndex); }
}

<script setup lang="ts">
import { GuiexpertTable } from "@guiexpert/vue3-table";
import { GeMouseEvent, TableFactory, TableOptions } from "@guiexpert/table";
import "@guiexpert/table/css/main.css";
import { orders } from "./orders";

// plain objects – no ref() needed, the table keeps its own state
const tableModel = TableFactory.createTableModel({
  rows: orders,
  properties: ["id", "customer", "city", "total"]
});
const tableOptions = new TableOptions();
const onClick = (evt: GeMouseEvent) => console.info("row", evt.rowIndex);
</script>

<template>
  <div style="height: 500px">
    <GuiexpertTable :tableModel="tableModel" :tableOptions="tableOptions" @mouseClicked="onClick" />
  </div>
</template>

<script lang="ts">
  import { GuiexpertTable } from "@guiexpert/svelte-table";   // Svelte 4 and 5
  import { type GeMouseEvent, TableFactory, TableOptions } from "@guiexpert/table";
  import "@guiexpert/table/css/main.css";
  import { orders } from "./orders";

  const tableModel = TableFactory.createTableModel({
    rows: orders,
    properties: ["id", "customer", "city", "total"]
  });
  const tableOptions = new TableOptions();
</script>

<div style="height: 500px">
  <GuiexpertTable
    {tableModel}
    {tableOptions}
    onMouseClicked={(evt: GeMouseEvent) => console.info("row", evt.rowIndex)} />
</div>

// index.html: <guiexpert-table style="display: block; height: 500px"></guiexpert-table>
import { GuiexpertTable } from "@guiexpert/webcomponent-table";
import { GeMouseEvent, TableFactory, TableOptions } from "@guiexpert/table";
import "@guiexpert/table/css/main.css";
import { orders } from "./orders";

customElements.define("guiexpert-table", GuiexpertTable);   // you choose the tag name

const table = document.querySelector<GuiexpertTable>("guiexpert-table")!;
table.addEventListener("mouseClicked", e =>
  console.info("row", (e as CustomEvent<GeMouseEvent>).detail.rowIndex));   // bubbling CustomEvents
table.data = {
  tableModel: TableFactory.createTableModel({ rows: orders, properties: ["id", "customer", "city", "total"] }),
  tableOptions: new TableOptions()
};

import { EventAdapter, GeMouseEvent, SimpleDomService, TableFactory, TableOptions, TableScope } from "@guiexpert/table";
import "@guiexpert/table/css/main.css";
import { orders } from "./orders";

const tableModel = TableFactory.createTableModel({
  rows: orders,
  properties: ["id", "customer", "city", "total"]
});

class Events extends EventAdapter {                // override only the events you need
  override onMouseClicked(evt: GeMouseEvent): void { console.info("row", evt.rowIndex); }
}

const host = document.querySelector<HTMLDivElement>("#orders")!;   // <div id="orders" style="height: 500px">
const tableScope = new TableScope(host, tableModel, new SimpleDomService(), new TableOptions(), new Events());
tableScope.firstInit();
const tableApi = tableScope.getApi();               // scroll, sort, filter, export …