<div class="container my-4">

  <p>

    <strong>Treeview functionality makes displaying hierarchical information easy. </strong

      >

  </p>

​

  <p>Below you'll find a treeview table. Add class <code>.show</code>  do the <code>ul</code> element below to show the tree view row content. </p>

  <a href="https://mdbootstrap.com/docs/standard/plugins/tree-view/">Treeview docs for reference</a>

  <br>

  <a href="https://mdbootstrap.com/docs/standard/data/tables/">Tables docs for reference</a>

  <hr />

​

  <p class="font-weight-bold">Basic examples</p>

​

  <p>

    You will <strong>find the code structure for this example in the tabs on the left</strong>. For even <strong>more examples, resources & customization options</strong> click the red <button class="btn btn-danger btn-sm">DOCS</button> button in the upper left corner. 

  </p>

​

  <div class="border p-5 mb-5">

    <!-- Copy this code to have a working example -->

​

    <table class="table">

      <thead>

        <tr>

          <th colspan="4">This a treeview table</th>

        </tr>

      </thead>

      <tbody>

        <tr>

          <th>This a normal row</th>

          <td>item 1</td>

          <td>item 1</td>          

          <td>item 1</td>          

        </tr>

        <tr>

          <th colspan="4" class="p-0">

            <div class="treeview">

              <ul class="m-0"> 

                <li>

                  <a class="p-3">This a treeview row</a>

                  <ul>

                    <li>

                      <table class="table">

                        <tr>

                          <th scope="row">1</th>

                          <td>Mark</td>

                          <td>Otto</td>

                          <td>@mdo</td>

                        </tr>

                        <tr>

                          <th scope="row">2</th>

                          <td>Jacob</td>

                          <td>Thornton</td>

                          <td>@fat</td>

                        </tr>

                        <tr>

                          <th scope="row">3</th>

                          <td colspan="2">Larry the Bird</td>

                          <td>@twitter</td>

                        </tr>

                      </table>

                    </li>

​

                  </ul>

                </li>

              </ul>

            </div>

          </th>

        </tr>

        <tr>

          <th colspan="4" class="p-0">

            <div class="treeview">

              <ul class="m-0"> 

                <li>

                  <a class="p-3">MDBootstrap creators</a>

                  <ul class="show">

                    <li>

                      <table class="table">

                        <tr>

                          <th scope="row">1</th>

                          <td>Michal</td>

                          <td>Szymanski</td>

                          <td>@ascensus_mdb</td>

                        </tr>

                        <tr>

                          <th scope="row">2</th>

                          <td>Dawid</td>

                          <td>Adach</td>

                          <td>@dawidadach</td>

                        </tr>

                      </table>

                    </li>

​

                  </ul>

                </li>

              </ul>

            </div>

          </th>

        </tr>

​

​

      </tbody>

    </table>

​

    <!--/ Copy this code to have a working example -->

  </div>

​

</div>

​

​