Vue-tables-2: Example using single file component

[bb78657]

I am trying to get vue-tables-2 working as a single file component. Question: would you be able to please post a working example in the docs. I cant get my example code to render a table. I removed the < and > from the template and v-client-table in code below as wasn't rending in this editor.

• Vue.js version: 2
• consumed using: webpack
• relevant code:

<template>
  <v-client-table
    :data="tableData"
    :columns="columns"
    :options="options">
  </v-client-table>
</template>

<script>
  import VueTables from 'vue-tables-2';
  export default {
    name: 'MyData',
    components: {
      VueTables,
    },
    data() {
      return {
        columns: ['id', 'name', 'age'],
        tableData: [
          { id: 1, name: 'John', age: '20' },
          { id: 2, name: 'Jane', age: '24' },
          { id: 3, name: 'Susan', age: '16' },
          { id: 4, name: 'Chris', age: '55' },
          { id: 5, name: 'Dan', age: '40' },
        ],
        options: {
          // see the options API
        },
      };
    },
  };
</script>

[matfish2]

You are not instantiating it correctly. Please _Read the docs_, and follow the usage instructions.
You should register it in the same file where you have your main Vue instance, thus giving you access to Vue.use

[bb78657]

Thanks Mat,

To the main app entry where I start the app I added:

import ClientTable from 'vue-tables-2';
Vue.use(ClientTable);

then I modified the TableComponent.vue file to:

<template>
  <v-client-table
    :data="tableData"
    :columns="columns"
    :options="options">
  </v-client-table>
</template>

<script>
  export default {
    name: 'TableComponent',
    data() {
      return {
        columns: ['id', 'name', 'age'],
        tableData: [
          { id: 1, name: 'John', age: '20' },
          { id: 2, name: 'Jane', age: '24' },
          { id: 3, name: 'Susan', age: '16' },
          { id: 4, name: 'Chris', age: '55' },
          { id: 5, name: 'Dan', age: '40' },
        ],
        options: {
          // see the options API
        },
      };
    },
  };
</script>

But I get TypeError: t.apply is not a function in the console and the app doesn't load. When I take out the Vue.use(ClientTable) the app loads. This is my third day using Vue so I may be doing something fundamentally wrong.

[matfish2]

As documented, Instead of

import ClientTable from 'vue-tables-2';

Use

import {ClientTable} from 'vue-tables-2';

[bb78657]

Thanks for the prompt reply and taking the time to answer my newbie questions. The import in braces fixed the app loading :-), however the table is not rendering. In the code below the table columns print on screen so the data exists but the v-client-table is not visible on screen or in the rendered html inspected in firefox/chrome. Any ideas?

<template>
  <div id="people">
    <p>People Table Columns: {{columns}}</p>
    <v-client-table
      :data="tableData"
      :columns="columns"
      :options="options">
    </v-client-table>
  </div>
</template>

<script>
  export default {
    name: 'TableComponent',
    data() {
      return {
        columns: ['id', 'name', 'age'],
        tableData: [
          { id: 1, name: 'John', age: '20' },
          { id: 2, name: 'Jane', age: '24' },
          { id: 3, name: 'Susan', age: '16' },
          { id: 4, name: 'Chris', age: '55' },
          { id: 5, name: 'Dan', age: '40' },
        ],
        options: {
          // see the options API
        },
      };
    },
  };
</script>

If I change the template to use:

    <client-table
      :data="tableData"
      :columns="columns"
      :options="options">
    </client-table>

Then on inspecting the elements on screen there are objects inside the table (as opposed to no table at all when using the v- prefix) but still nothing visible on-screen.

[matfish2]

I don't see anything wrong in your code (don't change to client-table, this is not the name of the component).
Please look in vue-devtools under the Components tab, and see if the component is showing.

[VladZen]

@bb78657 i had the same problem. What if i want to use here one object of options, when initializing table, but another in other case?
This worked for me.