> ## Documentation Index
> Fetch the complete documentation index at: https://docs.codenullapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Expandable component

>  You must have an existing Datagrid.

* You must have an existing Datagrid.
* Next, open the settings of the Datagrid where you want to add the expandable row.
* Go to the "Additional settings" section where there is an option for "Nested table".

<figure>
  <img src="https://mintcdn.com/codenull/9RtgKoAtzvpYtN-c/images/TDuioxohNtCiu3kTX9jO.png?fit=max&auto=format&n=9RtgKoAtzvpYtN-c&q=85&s=e71914ce37301c0931c7006367c3b57c" alt="" width="694" height="369" data-path="images/TDuioxohNtCiu3kTX9jO.png" />

  <figcaption />
</figure>

* In this section, add the components you need as you normally would, such as Datagrid, Form, etc.
  * **Tip:** You can go to "Show JSON Editor", create the component directly there, and then paste it here, or finish it later in "Show JSON Editor".

<figure>
  <img src="https://mintcdn.com/codenull/9RtgKoAtzvpYtN-c/images/ElRfcaumYMLtEt8JpXWO.png?fit=max&auto=format&n=9RtgKoAtzvpYtN-c&q=85&s=ec4e7e225f898c8a8df7f43b6ac8ea00" alt="" width="865" height="675" data-path="images/ElRfcaumYMLtEt8JpXWO.png" />

  <figcaption />
</figure>

* Important note: the data for the parent row is taken from "dataItem," and you can use it in the data sources.

<figure>
  <img src="https://mintcdn.com/codenull/9RtgKoAtzvpYtN-c/images/UzmGTipf3kd2dBw5gaX8.png?fit=max&auto=format&n=9RtgKoAtzvpYtN-c&q=85&s=d6572604b689e0779a3a97bcbbb291db" alt="" width="574" height="338" data-path="images/UzmGTipf3kd2dBw5gaX8.png" />

  <figcaption />
</figure>

* Then, simply go to the "Feature" and expand the row you need to test.

<figure>
  <img src="https://mintcdn.com/codenull/9RtgKoAtzvpYtN-c/images/WmxcbvAtPXsRc0vSYsNc.png?fit=max&auto=format&n=9RtgKoAtzvpYtN-c&q=85&s=dc76601736761a4f79bdb1d5b12c4e4f" alt="" width="612" height="272" data-path="images/WmxcbvAtPXsRc0vSYsNc.png" />

  <figcaption />
</figure>

<figure>
  <img src="https://mintcdn.com/codenull/fUND-Qmj85v5Oam-/images/zazuSq5FsIqF4AG99hJ6.png?fit=max&auto=format&n=fUND-Qmj85v5Oam-&q=85&s=622118fb188620715a6efd1cec298efc" alt="" width="1074" height="319" data-path="images/zazuSq5FsIqF4AG99hJ6.png" />

  <figcaption />
</figure>
