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></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)