Table inside component

[nikhil-pandey]

How do i use it inside a component? Can't figure out a way. I get the following error in my console:

Uncaught TypeError: Cannot read property '0' of undefined

At line 45 of lib/v-client-table.js

...
this.allColumns = object_keys(this.data[0]);
...

[matfish2]

You need to pass the table data to the direct parent component. Can't say for sure what you did wrong without seeing your code.

[nikhil-pandey]

@matfish2 Here's what my code looks like. Just the example code.

...
var VueTables = require('vue-tables');
...
Vue.use(VueTables.client, {
    filterByColumn: true,
    perPage: 25
});
...
Vue.component('some-component', {
    data: {
        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: {
            columns:['id','name','age']
        }
    }
});
...

<some-component>
    <v-client-table :data="tableData" :options="options"></v-client-table>
</some-component>

The example on jsfiddle works. But as soon as i make it a component, it stops working.

[nikhil-pandey]

@matfish2 https://jsfiddle.net/57e0u3rm/ Reproduction of error. Am i doing something wrong here?

[matfish2]

To render the HTML you need to add inline-template: (http://vuejs.org/guide/components.html#Inline-Template)

<some-component inline-template>
    <v-client-table :data="tableData" :options="options"></v-client-table>
</some-component>

As a side note, component data should be returned from a function and not passed directly as an object: (http://vuejs.org/guide/components.html#Component-Option-Caveats)

 data: function() {
    return {
        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: {
            columns:['id','name','age']
        }
    }
}

[nikhil-pandey]

Thanks. It Works. I did haveinline-template but did a typo.

[matfish2]

It is working. You should replace data in your HTML with tableData

https://jsfiddle.net/matfish2/9pgoy80b/1/