I'm having trouble using datatable with vite/vue.

nongtan

I'm having trouble using datatable with vite/vue. When I add data it shows this error. Or you can take a look at github. https://github.com/nongtan7898/vue-project

counter.js:22 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core .
at <Dashboard onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > >
at <RouterView>
at <App>
warn$1 @ chunk-U6BEPC57.js?v=bcf09406:1512
logError @ chunk-U6BEPC57.js?v=bcf09406:1724
handleError @ chunk-U6BEPC57.js?v=bcf09406:1716
callWithErrorHandling @ chunk-U6BEPC57.js?v=bcf09406:1661
flushJobs @ chunk-U6BEPC57.js?v=bcf09406:1873
Promise.then (async)
queueFlush @ chunk-U6BEPC57.js?v=bcf09406:1782
queueJob @ chunk-U6BEPC57.js?v=bcf09406:1776
(anonymous) @ chunk-U6BEPC57.js?v=bcf09406:7591
resetScheduling @ chunk-U6BEPC57.js?v=bcf09406:517
instrumentations.<computed> @ chunk-U6BEPC57.js?v=bcf09406:687
pushData @ counter.js:22
(anonymous) @ pinia.js?v=bcf09406:1102
store.<computed> @ pinia.js?v=bcf09406:783
_createElementVNode.onClick._cache.<computed>._cache.<computed> @ dashboard.vue:20
callWithErrorHandling @ chunk-U6BEPC57.js?v=bcf09406:1659
callWithAsyncErrorHandling @ chunk-U6BEPC57.js?v=bcf09406:1666
invoker @ chunk-U6BEPC57.js?v=bcf09406:10297
Show 15 more frames
Show less
chunk-U6BEPC57.js?v=bcf09406:9625 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')
at insert (chunk-U6BEPC57.js?v=bcf09406:9625:12)
at mountElement (chunk-U6BEPC57.js?v=bcf09406:7005:5)
at processElement (chunk-U6BEPC57.js?v=bcf09406:6915:7)
at patch (chunk-U6BEPC57.js?v=bcf09406:6783:11)
at patchKeyedChildren (chunk-U6BEPC57.js?v=bcf09406:7792:11)
at patchChildren (chunk-U6BEPC57.js?v=bcf09406:7627:9)
at processFragment (chunk-U6BEPC57.js?v=bcf09406:7303:9)
at patch (chunk-U6BEPC57.js?v=bcf09406:6769:9)
at patchBlockChildren (chunk-U6BEPC57.js?v=bcf09406:7185:7)
at processFragment (chunk-U6BEPC57.js?v=bcf09406:7277:9)

<template>
  <table id="myTable" class="display nowrap">
    <thead>
      <tr>
        <th>userId</th>
        <th>id</th>
        <th>title</th>
        <th>completed</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in store._getData" :key="index">
        <td>{{ item.userId }}</td>
        <td>{{ item.id }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.completed }}</td>
      </tr>
    </tbody>
  </table>
  <button @click="store.pushData">push</button>
  {{ store._getData }}
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from "vue";
import { useGetStore } from "../stores/counter";
import $ from "jquery";
const store = useGetStore();

onMounted(() => {
  store.getData();
});

watch(
  () => store._getData,
  async () => {
    await nextTick();
    await $("#myTable").DataTable();
  }
);
</script>

<style></style>

allan

<tr v-for="(item, index) in store._getData" :key="index">

Don't use v-for with DataTables. It will not work.

The problem with it is that it results in both DataTables and Vue trying to control the same DOM elements. You'll get a conflict, and undefined behaviour, probably such as this.

Instead, use our Vue component for DataTables and take a look at this example to see how to load int local data.

Allan

nongtan

@allan thank,
how to use tailwind css in datatable

<script setup>
import DataTable from "datatables.net-vue3";
import DataTablesCore from "datatables.net";
import { onMounted } from "vue";
import { useGetStore } from "../stores/counter";
const store = useGetStore();

DataTable.use(DataTablesCore);

onMounted(() => {
  store.getData();
});

const columns = [
  { data: "userId", title: "userId" },
  { data: "id", title: "id" },
  { data: "title", title: "title" },
  { data: "completed", title: "completed" },
];
const options = {
  language: {
    paginate: {
      next: "ถัดไป",
      previous: "ก่อนหน้า",
    },
  },
};
</script>

<template>
  <div>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
    <h1>Simple table</h1>
    <h2>DataTables + Vue3 example</h2>
    <p>
      This example demonstrates the <code>datatables.net-vue3</code> package
      being used to display an interactive DataTable in a Vue application.
    </p>
    <button @click="store.pushData">push</button>

    <DataTable
      :columns="columns"
      :options="options"
      :data="store._getData"
      class="display mt-4 border-collapse"
      width="100%"
    >
    </DataTable>
  </div>
</template>

<style>
@import "datatables.net-dt";
</style>

nongtan

@allan thank, i can do it

allan

There is no Tailwind NPM module for DataTables yet, like there is for Bootstrap etc. There is a preview of an integration here, but it hasn't garnered all that many requests to have it fully supported across all of the DataTables suite yet. It is on my list, but not currently a high priority I'm afraid.

Allan