Child Rows

Child rows allow for a custom designed output area, namely a hidden child row underneath each row, whose content you are free to set yourself.

When using the `childRow` option you must pass a unqiue `id` property for each row, which is used to track the current state.

The syntax is identical to that of templates:

Using Scoped Slots:

 <template v-slot:child_row="props">
  <div><b>First name:</b> {{props.row.first_name}}</div>
  <div><b>Last name:</b> {{props.row.last_name}}</div>
</template>

Using a function and (optional) JSX:

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

Using a component name or a `.vue` file: (See Templates for a complete example)

  options:{
    ...
        childRow: 'row-component'
    ...
}

When the plugin detects a `childRow` function it appends the child rows and prepends to each row an additional toggler column with a `span` you can design to your liking.

Example styling (also found in `style.css`):

.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: "-";
}

You can also trigger the child row toggler programmtically. E.g, to toggle the row with an id of 4:

this.$refs.myTable.toggleChildRow(4); // replace myTable with your own ref

Alternatively, you can use the `showChildRowToggler` option to prevent the child row toggler cells from being rendered. (See Options API)

​