return<div>My custom content for row {row.id}</div>
5
}
6
...
7
}
Copied!
Using a component name or a `.vue` file: (See Templates for a complete example)
1
options:{
2
...
3
childRow:'row-component'
4
...
5
}
Copied!
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`):
1
.VueTables__child-row-toggler{
2
width: 16px;
3
height: 16px;
4
line-height: 16px;
5
display: block;
6
margin: auto;
7
text-align: center;
8
}
9
10
.VueTables__child-row-toggler--closed::before{
11
content:"+";
12
}
13
14
.VueTables__child-row-toggler--open::before{
15
content:"-";
16
}
Copied!
You can also trigger the child row toggler programmtically. E.g, to toggle the row with an id of 4:
1
this.$refs.myTable.toggleChildRow(4);// replace myTable with your own ref
Copied!
Alternatively, you can use the `showChildRowToggler` option to prevent the child row toggler cells from being rendered. (See 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: