> For the complete documentation index, see [llms.txt](https://ryunosukee.gitbook.io/vue3-datatables/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ryunosukee.gitbook.io/vue3-datatables/child-rows.md).

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

\<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>

Using a function and (optional) JSX:

childRow: function(h, row) {

return \<div>My custom content for row {row\.id}\</div>

Using a component name or a \`.vue\` file: (See

[Templates](about:/vue-tables-2/templates#vue-components)

for a complete example)

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 {

.VueTables\_\_child-row-toggler--closed::before {

.VueTables\_\_child-row-toggler--open::before {

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](https://2221522102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7sYHptVdDcwClGe4CEQW%2Fuploads%2FUFtJaL7Q0eFOVEhrnAgd%2Foptions%20api?alt=media)

)

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

disabledChildRows: function(row) {