Comment on page
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>
</template>
Using a function and (optional) JSX:
options:{
...
childRow: function(h, row) {
return <div>My custom content for row {row.id}</div>
}
...
}
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)
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:disabledChildRows: function(row) {
return row.noContent
}
Last modified 2yr ago