Child Rows
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
The syntax is identical to that of templates:
Using Scoped Slots:
Using a function and (optional) JSX:
Using a component name or a `.vue` file: (See for a complete example)
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`):
You can also trigger the child row toggler programmtically. E.g, to toggle the row with an id of 4:
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:
Alternatively, you can use the `showChildRowToggler` option to prevent the child row toggler cells from being rendered. (See )