how to render gridjs from html in vue

[wzskyline]

how to render gridjs from html in vue

[kevinpickett]

I have the following approach working.

My setup is Vue 3.2.19 and gridjs 5.0.2.

package.json

{
    "dependencies": {
        "gridjs": "^5.0.2",
        "vue": "^3.2.19"
    }
}

ExampleSingleFileComponent.vue

<template>
  <div id="table-wrapper"></div>
</template>

<script>
import { Grid } from "gridjs";
import "gridjs/dist/theme/mermaid.css";

export default {
  mounted() {
    this.$nextTick(function () {
      new Grid({
          columns: ["Name", "Email", "Phone Number"],
          data: [
            ["John", "john@example.com", "(353) 01 222 3333"],
            ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
            ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
            ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
            ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
          ]
       }).render(document.getElementById("table-wrapper"));
    })
  }
}
</script>