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.

If your identifier key is not `id`, use the `uniqueKey` option to set it.

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>

Using a function and (optional) JSX:

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

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

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)