Vue-tables-2: is it possible to have a table as a childRow ?

Created on 24 Feb 2017 · 6Comments · Source: matfish2/vue-tables-2

I know I could mock my own html table, but is it possible to pass an instance of vue-table as a child row ?

So that when you click the toggler it expands and shows multiple table rows associated with each row of the parent table?

Source

vesper8

Most helpful comment

Nevermind, figured it out.

Here's what I did:

Create a child component:

Vue.component('child-table', {
    name: 'ChildRow',
    props: ['data'],
    template: '<v-client-table :data="childData" :columns="childColumns"></v-client-table>',
    data: function () {
        return {
            childColumns: ['foo', 'bazz', 'bar'],
            childData: [{
                foo: 'Col1',
                bazz: 'Col2',
                bar: 'Col3'
            }]
        };
    },
});

Create a parent table like normal. In the parent table, do:

data: { <yourcustomstuff> options: { <your custom options> childRow: 'child-table' } }

Dwood15 on 6 Mar 2018

❤1 👍1

All 6 comments

I don't see why not. Add a property to each row which contains the data for the child table, and pass it as the data prop in the child row template.

matfish2 on 24 Feb 2017

Yep! I was just about to reply.. got it working after ~30m of trials.. and it's sooo awesome!!!!

vesper8 on 24 Feb 2017

👍1

@vesper8 I know this is old, but what did you do to accomplish this? If you're willing, a jsfiddle example would be aweseome.

Dwood15 on 6 Mar 2018

Nevermind, figured it out.

Here's what I did:

Create a child component:

Vue.component('child-table', {
    name: 'ChildRow',
    props: ['data'],
    template: '<v-client-table :data="childData" :columns="childColumns"></v-client-table>',
    data: function () {
        return {
            childColumns: ['foo', 'bazz', 'bar'],
            childData: [{
                foo: 'Col1',
                bazz: 'Col2',
                bar: 'Col3'
            }]
        };
    },
});

Create a parent table like normal. In the parent table, do:

data: { <yourcustomstuff> options: { <your custom options> childRow: 'child-table' } }

Dwood15 on 6 Mar 2018

❤1 👍1

there you go :) glad you figured it out

vesper8 on 7 Mar 2018

Hi,

Very interested in this solution to implement childRow; but I struggle to pass key parameter, as each sub-table data are built from the parent key. How can I link childtable to key of childRow ?