Adding child row functionality about vue-tables-2 HOT 8 CLOSED

Hey @matfish2 ,

Thanks for a quick turn around on this.

A couple things:

• It appears that toggling one row toggles all of them?
• I would like to have the content render conditionally for each row (as in v-if) after starting off collapsed, and I am uncertain if this is the default behavior.
• It would also be nice to use straight HTML instead of the css switching for this. A toggle I would like to use is used like this:

        <div class="togglebutton">
            <label>
                <input type="checkbox" v-model="historyVisible" v-bind:true-value="true" v-bind:false-value="false"><span class="toggle"></span>
            </label>
        </div>

So perhaps a more flexible way of handling this would be

options:{
    ...
    child: {
        row: function(h, row) {
            return <div>My custom content for row {row.id}</div>
        }, 
        toggle: function(h, row) {
            return ... 
        }

I haven't fully thought out that implementation, but hopefully that makes sense. It would also be a nice feature to allow the toggle position to be appended instead of prepended as well.

Great work!

from vue-tables-2.

• I couldn't replicate the one-toggler-toggles-all bug.
• I agree. I tried to use conditional rendering but it was more complicated than I thought, so I decided to use a class-based approach. I will give it another shot. In any case all rows start with a closed class, so if you set it to display:none, like the docs demonstrate, you should have them all collapsed at first.
• Not sure about this one. For one thing, using CSS is exactly the approach datatables are using. More importantly, I think it allows for more flexibility in terms of design, as opposed to being limited to a checkbox. Allowing for custom HTML for the toggler itself would be very problematic, because of the inherent logic, that the user would have to implement correctly himself. I think I will leave this one as it is.

from vue-tables-2.

• I am still getting the one one-toggler-toggles-all bug. Here's the relevant main.js, so perhaps I am misconfiguring something? https://gist.github.com/metamet/e13645ff5c5b2e9b9cfc6b3a7238b7d4
• This is understandable. Unfortunately the default styles you included in the manual aren't present in the build itself, so it requires external CSS to get child rows working and collapsed.
• Along with that, maybe including a default style in vue-tables-2 would be convenient? And perhaps an easy way of overriding it that doesn't require external css (since I am not using a .vue template for the table implementation--which maybe I should?--I have to put it on the home html page). Something like the following would be pretty universally applicable. Just thoughts here, though:

.VueTables__child-row-toggler {
  width:16px;
  height:16px;
  line-height: 16px;
  display: block;
  margin: auto;
  text-align: center;
}

.VueTables__child-row-toggler--closed::before {
   content: "+";
}

.VueTables__child-row-toggler--open::before  {
    content: "-";
}

.VueTables__child-row--closed {
    display: none;
}

Good work.

from vue-tables-2.

• Does your dataset have a unique id property? (see docs). This is necessary for keeping track of the toggle position for each row.
• I have added your suggested styling to the docs, along with a dedicated style.css file.

from vue-tables-2.

It looks like my unique ID on this server-side request is actually RequestId. Is it possible to set the unique id property to a particular column?

from vue-tables-2.

I've added a childRowKey option. Use it like so:

{
childRow: function(h, row) {
return <div>My Row Data</div>
},
childRowKey:"RequestId"
}

from vue-tables-2.

Beautiful. It's working. Glad to be your personal tester here, and thanks for the quick turnaround! Very helpful feature.

For future reference, in case someone comes across this, @matfish2 's example has an opening bracket, so the ending bracket is from that (caused me a slight moment of confusion, hah):

{
    childRow: function(h, row) {
        return <div>My Row Data</div>
    },
    childRowKey:"RequestId"
}

Great work, again.

from vue-tables-2.

As for appending rather than prepending the toggler, I've added a custom template option which allows you to duplicate the template and modify it to your needs. You can use this option for fine-grained control over the template. It is passed as the fourth argument to the Vue.use statement. E.g:

Vue.use(VueTables.client, null, false, require('my-template.jsx')('client'))

from vue-tables-2.