# 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.

{% hint style="info" %}
If your identifier key is not \`id\`, use the \`uniqueKey\` option to set it.
{% endhint %}

The syntax is identical to that of templates:

Using Scoped Slots:

```markup
 <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:

```javascript
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](https://matanya.gitbook.io/vue-tables-2/templates#vue-components)  for a complete example)

```javascript
  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\`):

```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:

```javascript
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](https://matanya.gitbook.io/vue-tables-2/options-api))

#### Disabling Specific Child Rows

Sometimes there are some child rows that have no content. You can disable the togglers for these rows by providing the logic to the `disabledChildRows` option, e.g:

```javascript
disabledChildRows: function(row) {
    return row.noContent
}
```