How do you load this - Githubissues

I've already read all the issues, I know you're working on documentation, and I know you'll say to "refer to the example on the src/components/table" page... However that doesn't help.

How am I supposed to load this into a component, here's some code and if anyone could comment back specifically how to fix it I would appreciate it. I'm fine once it loads, but it's just showing a white screen for me and an error about

TypeError: Object(...) is not a function at eval (webpack-internal:///./node_modules/@jobinsjp/vue3-datatable/dist/vue3-datatable.es.js:10)

I'm also aware that the only prop that is required is the "rows' and it's of type Array.

Please see the code below and explain why I only get a white screen. Thank you.


  <!--begin::Table Widget-->
  <div class="card">
    <div class="card-body p-0 d-flex justify-content-between flex-column overflow-hidden">
      <div class="px-9 py-6">
        <!--begin::Table-->
        <data-table :rows="data"/>
      </div>
    </div>
  </div>
  <!--end::Table Widget-->
</template>

<script lang="ts">
import {defineComponent, ref} from "vue";
import {DataTable} from "@jobinsjp/vue3-datatable";

export default defineComponent({
  name: "Table Component",
  components: {
    DataTable
  },
  setup(props) {
    return {};
  },
  data() {
    const data = [
      {
        "id": 1,
        "first_name": "Misti",
        "last_name": "Strase",
        "email": "mstrase0@instagram.com",
        "gender": "Non-binary",
        "ip_address": "151.38.32.165"
      },
      {
        "id": 2,
        "first_name": "Valentina",
        "last_name": "Bonas",
        "email": "vbonas1@is.gd",
        "gender": "Agender",
        "ip_address": "103.10.225.246"
      },
      {
        "id": 3,
        "first_name": "Harriot",
        "last_name": "Sperski",
        "email": "hsperski2@intel.com",
        "gender": "Male",
        "ip_address": "129.200.82.11"
      },
      {
        "id": 4,
        "first_name": "Egbert",
        "last_name": "Fogden",
        "email": "efogden3@si.edu",
        "gender": "Genderqueer",
        "ip_address": "12.0.191.150"
      },
      {
        "id": 5,
        "first_name": "Robenia",
        "last_name": "Lilliman",
        "email": "rlilliman4@cmu.edu",
        "gender": "Bigender",
        "ip_address": "201.9.121.182"
      },
      {
        "id": 6,
        "first_name": "Norby",
        "last_name": "Tamburi",
        "email": "ntamburi5@sakura.ne.jp",
        "gender": "Agender",
        "ip_address": "135.122.0.176"
      },
      {
        "id": 7,
        "first_name": "Genovera",
        "last_name": "Rodwell",
        "email": "grodwell6@youtube.com",
        "gender": "Non-binary",
        "ip_address": "20.253.81.95"
      },
      {
        "id": 8,
        "first_name": "Sinclair",
        "last_name": "Showell",
        "email": "sshowell7@imdb.com",
        "gender": "Genderqueer",
        "ip_address": "240.214.146.150"
      },
      {
        "id": 9,
        "first_name": "Timothee",
        "last_name": "Oger",
        "email": "toger8@cnbc.com",
        "gender": "Genderqueer",
        "ip_address": "134.79.160.170"
      },
      {
        "id": 10,
        "first_name": "Cosetta",
        "last_name": "Cousen",
        "email": "ccousen9@oaic.gov.au",
        "gender": "Bigender",
        "ip_address": "159.26.98.195"
      },
      {
        "id": 11,
        "first_name": "Eward",
        "last_name": "Sole",
        "email": "esolea@histats.com",
        "gender": "Female",
        "ip_address": "61.99.245.53"
      },
      {
        "id": 12,
        "first_name": "Alastair",
        "last_name": "Bello",
        "email": "abellob@blogger.com",
        "gender": "Male",
        "ip_address": "4.84.129.207"
      },
      {
        "id": 13,
        "first_name": "Velvet",
        "last_name": "Odom",
        "email": "vodomc@digg.com",
        "gender": "Polygender",
        "ip_address": "111.3.168.1"
      },
      {
        "id": 14,
        "first_name": "Diannne",
        "last_name": "Bloxland",
        "email": "dbloxlandd@google.com.au",
        "gender": "Agender",
        "ip_address": "153.65.158.248"
      },
      {
        "id": 15,
        "first_name": "Rubia",
        "last_name": "Cobson",
        "email": "rcobsone@goodreads.com",
        "gender": "Male",
        "ip_address": "27.229.201.137"
      },
      {
        "id": 16,
        "first_name": "Grange",
        "last_name": "Waleran",
        "email": "gwaleranf@sitemeter.com",
        "gender": "Genderfluid",
        "ip_address": "137.50.247.251"
      },
      {
        "id": 17,
        "first_name": "Natty",
        "last_name": "Seller",
        "email": "nsellerg@dagondesign.com",
        "gender": "Male",
        "ip_address": "117.100.214.219"
      },
      {
        "id": 18,
        "first_name": "Gerhard",
        "last_name": "Fetherstone",
        "email": "gfetherstoneh@e-recht24.de",
        "gender": "Bigender",
        "ip_address": "160.126.243.174"
      },
      {
        "id": 19,
        "first_name": "Broddie",
        "last_name": "Roper",
        "email": "broperi@nature.com",
        "gender": "Male",
        "ip_address": "32.174.131.236"
      },
      {
        "id": 20,
        "first_name": "Violette",
        "last_name": "Maudett",
        "email": "vmaudettj@scientificamerican.com",
        "gender": "Agender",
        "ip_address": "234.158.45.215"
      },
      {
        "id": 21,
        "first_name": "Ingmar",
        "last_name": "Kyme",
        "email": "ikymek@a8.net",
        "gender": "Polygender",
        "ip_address": "246.220.100.50"
      },
      {
        "id": 22,
        "first_name": "Rosalie",
        "last_name": "Meo",
        "email": "rmeol@answers.com",
        "gender": "Male",
        "ip_address": "163.164.249.16"
      },
      {
        "id": 23,
        "first_name": "Cammi",
        "last_name": "Whitwell",
        "email": "cwhitwellm@bloglovin.com",
        "gender": "Genderfluid",
        "ip_address": "136.205.204.225"
      },
      {
        "id": 24,
        "first_name": "Taryn",
        "last_name": "Gerardi",
        "email": "tgerardin@usnews.com",
        "gender": "Female",
        "ip_address": "245.66.226.113"
      },
      {
        "id": 25,
        "first_name": "Ettie",
        "last_name": "Brunskill",
        "email": "ebrunskillo@japanpost.jp",
        "gender": "Polygender",
        "ip_address": "141.71.5.149"
      },
      {
        "id": 26,
        "first_name": "Jena",
        "last_name": "Mingardo",
        "email": "jmingardop@ucla.edu",
        "gender": "Polygender",
        "ip_address": "44.110.135.50"
      },
      {
        "id": 27,
        "first_name": "Hyatt",
        "last_name": "Paunton",
        "email": "hpauntonq@smugmug.com",
        "gender": "Bigender",
        "ip_address": "150.253.235.13"
      }
    ];
    return {name: 'tommy', data}
  },
  mounted() {
    // console.log('mounted');
  },
  created() {
    // console.log(`test the name is ${this.name}`);
    // console.log('another test of name ' + this.name);
    // console.log(`headers: ${this.headers}`);
    // console.log(`info: ${this.info}`);
    // console.log(`data: ${this.data}`);
  }
});
</script>```

Just to add to this since I've spent the last two days trying to figure this out, version 1.0.2 actually works just fine for me with the above code, however as soon as I update to the most recent version 1.0.12. everything breaks and I only see a white screen. So I'm assuming the issue is not with my implementation.

I will attack my package.json file so you can check the dependencies. Please let me know what's going on as I would like to use this and not have to worry about restricting versions. Thank you.

{
  "name": "demo1",
  "version": "8.0.21",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.2",
    "@jobinsjp/vue3-datatable": "1.0.2",
    "@popperjs/core": "^2.9.1",
    "@soerenmartius/vue3-clipboard": "^0.1.2",
    "@types/object-path": "^0.11.0",
    "@vueform/multiselect": "^1.2.5",
    "@yaireo/tagify": "^3.23.1",
    "animate.css": "^4.1.1",
    "apexcharts": "3.23.1",
    "axios": "^0.21.1",
    "axios-mock-adapter": "^1.18.1",
    "bootstrap": "5.0.1",
    "bootstrap-icons": "^1.4.0",
    "clipboard": "^2.0.6",
    "dropzone": "^5.7.2",
    "element-plus": "^1.0.2-beta.52",
    "i18n": "^0.13.3",
    "line-awesome": "^1.3.0",
    "nouislider": "^14.6.3",
    "object-path": "^0.11.4",
    "popper.js": "^1.16.1",
    "prism-themes": "^1.5.0",
    "prismjs": "^1.23.0",
    "quill": "^1.3.6",
    "socicon": "^3.0.5",
    "sweetalert2": "^9.10.12",
    "vee-validate": "^4.2.1",
    "vue": "3.1.5",
    "vue-axios": "^3.2.2",
    "vue-clipboard3": "^1.0.1",
    "vue-i18n": "^9.1.6",
    "vue-inline-svg": "^3.0.0-beta.2",
    "vue-prism-component": "^1.2.0",
    "vue-router": "^4.0.3",
    "vue3-apexcharts": "^1.2.1",
    "vue3-clipboard": "^1.0.0",
    "vue3-highlightjs": "^1.0.5",
    "vue3-table-lite": "^1.1.3",
    "vuex": "^4.0.0",
    "yup": "^0.32.8"
  },
  "devDependencies": {
    "@types/prismjs": "^1.16.2",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-eslint": "^4.5.10",
    "@vue/cli-plugin-router": "^4.5.10",
    "@vue/cli-plugin-typescript": "^4.5.10",
    "@vue/cli-plugin-vuex": "^4.5.10",
    "@vue/cli-service": "^4.5.10",
    "@vue/compiler-sfc": "^3.0.6",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.4.1",
    "node-sass": "^6.0.1",
    "prettier": "^1.19.1",
    "sass": "1.32.13",
    "sass-loader": "^8.0.2",
    "typescript": "^3.9.9",
    "vuex-module-decorators": "^1.0.1"
  }
}

hello @juandahveed, sorry for the delayed response. I was on holiday.

I tried running your code snippet directly in the datatable and it seems it is working.

Check: https://github.com/JoBinsJP/vue3-datatable/blob/test/src/components/Tables/Test.vue

Honestly the typo line was just from changing things multiple times during testing, I was never able to get it to work, I ended up using primevue instead, I’m sorry.

JD Antosiak | Full Stack Developer T: 888-717-4249 www.highlevelmarketing.com https://app.salesforceiq.com/r?target=608444936c8bce432a026471&t=AFwhZf1C5DH9sa0-FSlmVEMVz8iHeL4PK8cGC99KuB720pD7wdgj5kwuV1RL1TLlqCsrXyH5cwNu_2hOjStuIZXykA6Ta0JXCdxhCzp7d0WWaN-wOv0zPHevcdEWTSRj2CKx68vb-9yL&url=http://www.highlevelmarketing.com/?utm_source=signature&utm_medium=email&utm_campaign=hlm-email-signature Book a meeting https://calendly.com/jantosiak/30min

4.8 Star Google Rating - Over 430 reviews nationwide! Take your business to a high level https://app.salesforceiq.com/r?target=608444936c8bce432a026473&t=AFwhZf1C5DH9sa0-FSlmVEMVz8iHeL4PK8cGC99KuB720pD7wdgj5kwuV1RL1TLlqCsrXyH5cwNu_2hOjStuIZXykA6Ta0JXCdxhCzp7d0WWaN-wOv0zPHevcdEWTSRj2CKx68vb-9yL&url=https://www.highlevelmarketing.com/ace.html?utm_source=signature&utm_medium=email&utm_campaign=hlm-email-signature

On Jan 8, 2022, at 5:13 PM, Kristaps Vītoliņš @.***> wrote:

import {DataTable} from @.***/vue3-datatable";

Hi, have you tried on an empty green field vue3 project by

yarn add @jobinsjp/vue3-datatable

and then import {DataTable} from @.***/vue3-datatable";

your working example imports import { DataTable } from "../../../lib/DataTable" which is not installed package.

seems to me, typings are missing in the package.

— Reply to this email directly, view it on GitHub https://github.com/JoBinsJP/vue3-datatable/issues/19#issuecomment-1008163405, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACNZKRZUZPDQTVCBW7ZTQU3UVCZJNANCNFSM5K4OGKQQ. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you were mentioned.

I was able to run it but this really need some examples,

Why not add under https://vue3-datatable.netlify.app/table/pagination an example how achieve that.

<data-table data="data" pagination='...'>

also a composition api instead of Options api example. Its waste not to use this just because @puncoz is lazy to add some docs. :)

JoBinsJP / vue3-datatable

How do you load this #19