GUI Expert

Chapter 08 of 34

GuiExpert Table in Vue 3

Plain objects as props, Vue events for everything the table reports.

After this chapter you can

  • render <GuiexpertTable> in Vue 3
  • handle @tableReady and @mouseClicked
  • register the component globally

Install

Terminal window
npm i @guiexpert/table @guiexpert/vue3-table
frameworks/vue/src/main.ts
import "@guiexpert/table/css/main.css";
import "../../../src/style.css";
import { createApp } from "vue";
import App from "./App.vue";


createApp(App).mount("#app");

The component

frameworks/vue/src/App.vue
<!-- Episode 008 – the same orders model, rendered by the Vue 3 wrapper. -->
<script setup lang="ts">
import { GuiexpertTable } from "@guiexpert/vue3-table";
import { GeMouseEvent, TableApi, TableOptions } from "@guiexpert/table";
import { ref } from "vue";
import { createOrderTableModel } from "./model/order-table";


// plain objects – no ref() needed, the table keeps its own state
const tableModel = createOrderTableModel(100_000);
const tableOptions = { ...new TableOptions() };
const info = ref("");


function onReady(api: TableApi) {
  info.value = `${api.getBodyModel().getRowCount().toLocaleString("en")} orders`;
}
function onClick(evt: GeMouseEvent) {
  info.value = `row ${evt.rowIndex}, column ${evt.columnIndex}`;
}
</script>


<template>
  <header class="app-header"><b>Vue 3</b> <span id="info">{{ info }}</span></header>
  <div class="table-div">
    <GuiexpertTable
      :tableModel="tableModel" :tableOptions="tableOptions"
      @tableReady="onReady" @mouseClicked="onClick" />
  </div>
</template>
Vue 3: the same 100,000 orders. Click a cell – the header shows row and column.
Vue 3: the same 100,000 orders. Click a cell – the header shows row and column.

Rules for Vue

  • Model and options are plain objects – no ref() or reactive() needed. The table keeps its own state; making 100,000 rows reactive would only cost memory.
  • Events are Vue events: @tableReady, @mouseClicked, @selectionChanged, @contextmenu … The payload is the argument (TableApi, GeMouseEvent …).
  • mouseClicked is debounced by debounceMouseClickDelay (default 150 ms), so a double click does not also report two single clicks.

Register globally

Instead of importing the component in every file, install the plugin (default export):

main.ts
import GuiexpertTablePlugin from "@guiexpert/vue3-table";


createApp(App).use(GuiexpertTablePlugin).mount("#app");

Next

chapter 9 (Angular 14–22) – one source, nine Angular versions.

API used in this chapter