Answers

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  May 17

  <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 Posts: 3Questions: 1Answers: 0

  May 17 edited May 17

  @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 Posts: 3Questions: 1Answers: 0

  May 17

  @allan thank, i can do it
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  May 17

  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