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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://ryunosukee.gitbook.io/vue3-datatables/child-rows.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.