Data not displaying in the table

[johnyang90]

Hi, my data is actually exists, but why it doesn't shown in the table? But why it shows only "No data available". I am using Node v20.5.1, Vue 3.3.4.

[bhaveshpatel200]

Can you please provides full demo with code?

You can check all demos and get code from the below link: https://vue3-datatable-document.vercel.app/

[johnyang90]

I've follow the demos, below is my page component, but it still not showing the data in the table.

<script>
import Layout from "@/layouts/main.vue";
import PageHeader from "@/components/page-header";
import Vue3Datatable from '@bhplugin/vue3-datatable';
import '@bhplugin/vue3-datatable/dist/style.css';

export default {
  components: {
    Layout,
    PageHeader,
    Vue3Datatable,
  },
  data() {
    return {
      apiResource: 'admins/admins',
      abilities: {
        view: 'admins.view',
        create: 'admins.create',
        update: 'admins.update',
        delete: 'admins.delete',
      },
      headers: [
        { field: "id", title: "ID" },
        { field: "username", title: "Username" },
        { field: "email", title: "Email" },
        { field: "status", title: "Status" },
        { field: "created_at", title: "Created Date" },
        { field: "updated_at", title: "Updated Date" },
      ],
      items: [],
      totalRows: 0,
      loading: false,
      filters: {
        currentPage: 1,
        perPage: 20,
        sortBy: null,
        sortDesc: false,
        sortByArray: {id: true}
      },
    };
  },
  mounted() {
    this.fetchAdmins();
  },
  methods: {
    fetchAdmins() {
      this.loading = true;
      this.$axios.get(this.apiResource)
      .then(response => {
        const result = response.data;
        this.items = result.data.data;
        this.totalRows = result.data.total;
        this.loading = false;

        console.log(this.items);
      })
      .catch(error => {
        console.log('error:', error);
        this.loading = false;
      })
    },
  },
};
</script>

<template>
  <Layout>
    <PageHeader title="Grid Js" pageTitle="Tables" />
    <BRow>
      <BCard no-body class="card-body">
        <BCardBody>
          <div class="table-responsive table-card">
            {{ items }}
            <vue3-datatable 
              :rows="items" 
              :columns="headers"
              :isServerMode="true"
              :totalRows="totalRows"
            >
            </vue3-datatable>
          </div>
        </BCardBody>
      </BCard> 
    </BRow>
  </Layout>
</template>

[bhaveshpatel200]

Hi,

By default set your items variable to null. items: null,

[johnyang90]

I just tried to set items as null by default, however it is still not working.

Does it conflict with other packages? Below is my package.json, is there any other package doesn't compatible with?

{
  "name": "velzon",
  "version": "3.0.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@bhplugin/vue3-datatable": "^1.1.4",
    "@ckeditor/ckeditor5-build-classic": "^38.1.1",
    "@ckeditor/ckeditor5-vue": "^5.1.0",
    "@fullcalendar/bootstrap": "^6.1.8",
    "@fullcalendar/core": "^6.1.8",
    "@fullcalendar/daygrid": "^6.1.8",
    "@fullcalendar/interaction": "^6.1.8",
    "@fullcalendar/list": "^6.1.8",
    "@fullcalendar/multimonth": "^6.1.9",
    "@fullcalendar/timegrid": "^6.1.8",
    "@fullcalendar/vue3": "^6.1.8",
    "@j-t-mcc/vue3-chartjs": "^1.3.0",
    "@popperjs/core": "^2.11.8",
    "@simonwep/pickr": "^1.8.2",
    "@vue-leaflet/vue-leaflet": "^0.10.1",
    "@vueform/multiselect": "^2.6.2",
    "@vueform/slider": "^2.1.7",
    "@vueform/toggle": "^2.1.3",
    "@vuelidate/core": "^2.0.3",
    "@vuelidate/validators": "^2.0.3",
    "@zhuowenli/vue-feather-icons": "^5.0.2",
    "aos": "^2.3.4",
    "apexcharts": "^3.41.0",
    "axios": "^1.3.4",
    "bootstrap": "^5.3.2",
    "bootstrap-vue-next": "^0.11.0",
    "chart.js": "^4.3.0",
    "click-outside-vue3": "^4.0.1",
    "core-js": "^3.31.1",
    "echarts": "^5.4.2",
    "feather-icons": "^4.29.0",
    "firebase": "^10.0.0",
    "highlight.js": "^11.8.0",
    "leaflet": "^1.9.4",
    "lottie-web": "^5.12.2",
    "maska": "^1.5.0",
    "moment": "^2.29.4",
    "node-sass": "9.0.0",
    "prismjs": "^1.29.0",
    "sass-loader": "^13.3.2",
    "simplebar": "^6.2.5",
    "simplebar-vue": "^2.3.3",
    "sweetalert2": "^11.7.16",
    "swiper": "^10.0.4",
    "vue": "3.3.4",
    "vue-draggable-next": "^2.2.1",
    "vue-feather": "^2.0.0",
    "vue-flatpickr-component": "^11.0.3",
    "vue-i18n": "^9.2.2",
    "vue-prismjs": "^1.2.0",
    "vue-router": "4.2.4",
    "vue3-apexcharts": "^1.4.1",
    "vue3-count-to": "^1.1.2",
    "vue3-echarts": "^1.1.0",
    "vue3-google-map": "^0.15.0",
    "vuex": "^4.1.0",
    "yarn": "^1.22.19"
  },
  "devDependencies": {
    "@achrinza/node-ipc": "^10.1.7",
    "@babel/eslint-parser": "^7.19.1",
    "@vue/cli-plugin-babel": "~5.0.8",
    "@vue/cli-plugin-eslint": "~5.0.8",
    "@vue/cli-service": "~5.0.8",
    "@vue/compiler-sfc": "^3.2.45",
    "eslint": "^8.31.0",
    "eslint-plugin-vue": "^7.0.0"
  },
  "resolutions": {
    "autoprefixer": "10.4.5"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

[bhaveshpatel200]

No, it should not conflict with other package.

Can you please try to by default set loading true: loading: true and then try to add conditions to vue3-datatable components:

... i think above will solved your issue.

[johnyang90]

I tried using the method you mentioned, but still not working, the table did shown the total rows, but the table rows are not shown.

<script>
import Layout from "@/layouts/main.vue";
import PageHeader from "@/components/page-header";
import Vue3Datatable from '@bhplugin/vue3-datatable';
import '@bhplugin/vue3-datatable/dist/style.css';

export default {
  components: {
    Layout,
    PageHeader,
    Vue3Datatable,
  },
  data: function() {
    return {
      apiResource: 'admins/admins',
      abilities: {
        view: 'admins.view',
        create: 'admins.create',
        update: 'admins.update',
        delete: 'admins.delete',
      },
      headers: [
        { field: "id", title: "ID" },
        { field: "username", title: "Username" },
        { field: "email", title: "Email" },
        { field: "status", title: "Status" },
        { field: "created_at", title: "Created Date" },
        { field: "updated_at", title: "Updated Date" },
      ],
      items: [],
      totalRows: 0,
      loading: true,
      filters: {
        currentPage: 1,
        perPage: 20,
        sortBy: null,
        sortDesc: false,
        sortByArray: {id: true}
      },
    };
  },
  mounted() {
    this.fetchAdmins();
  },
  methods: {
    async fetchAdmins() {
      console.log('in fetchAdmin');
      this.loading = true;
      setTimeout(() => {
        this.$axios.get(this.apiResource)
        .then(response => {
          const result = response.data;
          this.items = result.data.data;
          this.totalRows = result.data.total;
          this.loading = false;

          console.log('items: ', this.items);
          console.log('loading: ', this.loading)
        })
        .catch(error => {
          console.log('error:', error);
          this.loading = false;
        })
      }, 2000);
    },
  },
};
</script>

<template>
  <Layout>
    <PageHeader title="Administrators" pageTitle="Tables" />
    <BRow>
      <BCard no-body class="card-body">
        <BCardBody>
          <div class="table-responsive table-card">
            <div class="mb-3">Items: {{ items }}</div>
            <div class="mb-3">Item Length: {{ items.length }}</div>
            <vue3-datatable 
              v-if="items.length > 0"
              :rows="items" 
              :columns="headers"
              :isServerMode="true"
              :totalRows="totalRows"
              :loading="loading"
            >
            </vue3-datatable>
          </div>
        </BCardBody>
      </BCard> 
    </BRow>
  </Layout>
</template>

[johnyang90]

I finally made it work by upgrading the Vue to version 3.4.21.

[bhaveshpatel200]

Great..

[maha-oueghlani]

Great.. I faced the same problem, I upgraded vue to 3.4.27 and no data is displayed on the table, I think it's an issue !

I run my project under : vue : 3.4.27 vite: 5.0.5 axios : 1.7.2 pinia : 2.1.3 @bhplugin/vue3-datatable : @bhplugin/vue3-datatable

this is my code to retrieving data from server :

 try {
            isRequesting.value = true;
            let res = await productStore.fetchProducts();
            console.log(res);
            console.log(typeof res);
            isRequesting.value = false;
            items.value = res?.data?.data;
            total_rows.value = res?.meta?.tproduct_total_countotal;
            console.log(items.value);
        } catch (err) {
            console.log(err);
            isRequesting.value = false;
        }

and this the fetch action under a store file with axios:

 fetchProducts(params) {
        return new Promise((resolve, reject) => {
          axios
            .get(`/api/products`, { params })
            .then((response) => {
              console.log(params);
              this.products = response.data.data;
              this.totalProducts = this.products.length;
              console.log(response)
              resolve(response);

            })
            .catch((err) => {
              reject(err);
            });
        });
      },

I tested using data from the server with the fetch function without Axios, and it works. Although the data returned by fetch and the data returned by Axios are the same (you can check in the attachment: the yellow one is with Axios and the red one is without Axios).

[sleepcattw]

I used the sample code for a static table, and it displayed data normally in Vue 3.4.15. However, after upgrading Vue, the rows no longer display the specified data. This issue has persisted since May, and I just saw that others are experiencing the same problem. Finally, I checked the Vue runtime version in the dist directory of node_modules/vue3-datatable, and each time the development Vue version must match the dist version to display the rows' data correctly. Additionally, I had to use yarn cache clean to downgrade properly. i recommend reopen this issue.