Integrating Tabulator in vue.js

I'm trying to integrate Tabulator in vue.js to create some datatables screens.

To do this i'm following the official documentation of Tabulator, available via this link.

The tabulator installed package (tabulator-tables) version is 5.3.4, and I'm using Vue.js 3.2.37.

The code below contains the instantiation of the datatable as shown in the documentation inside the TheWelcome.vue file representing TheWelcome component..

<script setup lang="ts">
 import WelcomeItem from "./WelcomeItem.vue";
 import DocumentationIcon from "./icons/IconDocumentation.vue";
 import ToolingIcon from "./icons/IconTooling.vue";
 import EcosystemIcon from "./icons/IconEcosystem.vue";
 import CommunityIcon from "./icons/IconCommunity.vue";
 import SupportIcon from "./icons/IconSupport.vue";
 import { Tabulator, FormatModule, EditModule } from "tabulator-tables";
 Tabulator.registerModule([FormatModule, EditModule]);
</script>

<script lang="ts">
 const columns = [
 { title: "Name", field: "name", width: 150 },
 { title: "Age", field: "age", hozAlign: "left", formatter: "progress" },
 { title: "Favourite Color", field: "col" },
 { title: "Date Of Birth", field: "dob", hozAlign: "center" },
 { title: "Rating", field: "rating", hozAlign: "center", formatter: "star" },
 {
  title: "Passed?",
  field: "passed",
  hozAlign: "center",
  formatter: "tickCross",
 },
];

let data = [
 { id: 1, name: "Oli Bob", age: "12", col: "red", dob: "" },
 { id: 2, name: "Mary May", age: "1", col: "blue", dob: "14/05/1982" },
];

new Tabulator("#example-table", {
  data: data, //link data to table
  debugInvalidOptions: false,
  columns: columns,
});

</script>
<template>
  <div id="example-table"></div>
</template>

This component is imported and used inside the App.vue file

relevent code:

<template>
 <TheWelcome />
</template>

The index.html kept unchanged

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Vite App</title>
 </head>
 <body>
  <div id="app">
   <div id="example-table"></div>
  </div>
  <script type="module" src="/src/main.ts"></script>
</body>

newcomer to vue.js, any tip, explanation, orientation would be appreciated.

Integrating Tabulator in vue.js

0 Answers