API status: unstable. This element may change, watch the changelog.

Design

The tree represents a nested view of other elements with any number of controls.

All the tree element does is provide a way of grouping together nested content. Everything inside a tree is made up of other ACE elements.

Default Tree

The default tree provides the heirarchy with standard Table-style typography.

Document Select
expanded01 Annual Reports43.2 gb
01.01 Annual Report FY 06.pdf13.46 mb
10.23/home/user/.rbenv/versions/2.1.3/bin/ruby ruby13.46 mb

Document-type Tree

Document trees use larger, heading-style typography for document names.

Document Select
expanded01 Annual Reports43.2 gb
01.01 Annual Report FY 06.pdf13.46 mb
10.23/home/user/.rbenv/versions/2.1.3/bin/ruby ruby13.46 mb

Code

Trees wrap tables with a few conventions

  • ace-tree-group manages heirarchy and state.
    • expanded
    • collapsed
    • disabled
    • depth {1..50}
  • The first column always visually implements the heirarchy information
    • Expanded/Collapsed component
    • Depth indication through indentation
    • Content is truncated by default. This behaviour can be disabled at the tree level
    • Headings are compact by default. This behaviour can be overridden at the tree level
Example Element Code
Document Select
expanded01 Annual Reports43.2 gb
01.01 Annual Report FY 06.pdf13.46 mb
10.23/home/user/.rbenv/versions/2.1.3/bin/ruby ruby13.46 mb
Default Tree 

                                                                                          <div class="ace-tree ace-tree-truncated">
                                                                                                    <div class="ace-table-scroll-container">
                                                                                                      <div class="ace-table-container">
                                                                                                        <table class="ace-table ace-tree-with-controls">
                                                                                                                  <thead>
                                                                                                                            <tr class="ace-tree-group ace-tree-level-0">
                                                                                                                                      <th class="ace-tree-item">Document
                                                                                                                                      </th>
                                                                                                                                      <th class="ace-tree-item">Select
                                                                                                                                      </th>
                                                                                                                            </tr>
                                                                                                                  </thead>
                                                                                                                  <tbody>
                                                                                                                            <tr class="ace-tree-group ace-tree-level-0 ace-tree-branch-expanded">
                                                                                                                                      <td class="ace-tree-item"><span class="ace-icon ace-icon-control-expanded" title="expanded">expanded</span><span class="ace-asset ace-asset-directory"><span class="ace-icon ace-icon-objects-folder ace-asset-type"></span><span class="ace-asset-number">01</span>
                                                                                                                                                              <span class="ace-asset-name">Annual Reports</span><span class="ace-asset-size">43.2 gb</span></span>
                                                                                                                                      </td>
                                                                                                                                      <td class="ace-tree-item">
                                                                                                                                            <div class="ace-form-input-checkbox-set">
                                                                                                                                                  <input class="ace-form-input ace-form-input-checkbox" type="checkbox" id="doc-index-default-tree-example-01">
                                                                                                                                                  </input>
                                                                                                                                                  <label class="ace-form-label ace-form-label-assistive" for="doc-index-default-tree-example-01"><span class="ace-text ace-assistive">select</span>
                                                                                                                                                  </label>
                                                                                                                                            </div>
                                                                                                                                      </td>
                                                                                                                            </tr>
                                                                                                                            <tr class="ace-tree-group ace-tree-level-1">
                                                                                                                                      <td class="ace-tree-item"><span class="ace-asset ace-asset-file"><span class="ace-icon ace-icon-document-acrobat ace-asset-type"></span><span class="ace-asset-number">01.01</span>
                                                                                                                                                              <span class="ace-asset-name">Annual Report FY 06.pdf</span><span class="ace-asset-size">13.46 mb</span></span>
                                                                                                                                      </td>
                                                                                                                                      <td class="ace-tree-item">
                                                                                                                                            <div class="ace-form-input-checkbox-set">
                                                                                                                                                  <input class="ace-form-input ace-form-input-checkbox" type="checkbox" id="doc-index-default-tree-example-02">
                                                                                                                                                  </input>
                                                                                                                                                  <label class="ace-form-label ace-form-label-assistive" for="doc-index-default-tree-example-02"><span class="ace-text ace-assistive">select</span>
                                                                                                                                                  </label>
                                                                                                                                            </div>
                                                                                                                                      </td>
                                                                                                                            </tr>
                                                                                                                            <tr class="ace-tree-group ace-tree-level-0 ace-table-disabled">
                                                                                                                                      <td class="ace-tree-item"><span class="ace-asset ace-asset-file"><span class="ace-icon ace-icon-document-generic ace-asset-type"></span><span class="ace-asset-number">10.23</span><span class="ace-asset-path">/home/user/.rbenv/versions/2.1.3/bin/ruby</span>
                                                                                                                                                              <span class="ace-asset-name">ruby</span><span class="ace-asset-size">13.46 mb</span></span>
                                                                                                                                      </td>
                                                                                                                                      <td class="ace-tree-item">
                                                                                                                                            <div class="ace-form-input-checkbox-set">
                                                                                                                                                  <input class="ace-form-input ace-form-input-checkbox" type="checkbox" id="doc-index-default-tree-example-03" disabled="disabled">
                                                                                                                                                  </input>
                                                                                                                                                  <label class="ace-form-label ace-form-label-assistive" for="doc-index-default-tree-example-03"><span class="ace-text ace-assistive">select</span>
                                                                                                                                                  </label>
                                                                                                                                            </div>
                                                                                                                                      </td>
                                                                                                                            </tr>
                                                                                                                  </tbody>
                                                                                                        </table>
                                                                                                      </div>
                                                                                                    </div>
                                                                                          </div>

                                                                                      <% ace.Tree(Array())
                                                                                        ace.TreeHeader
                                                                                          ace.TreeHeaderGroup(Array())
                                                                                            ace.TreeHeaderItem(Array()) %>Document<%
                                                                                            ace.TreeHeaderItemEnd
                                                                                            ace.TreeHeaderItem(Array()) %>Select<%
                                                                                            ace.TreeHeaderItemEnd
                                                                                          ace.TreeHeaderGroupEnd
                                                                                        ace.TreeHeaderEnd
                                                                                      
                                                                                        ace.TreeBody
                                                                                          ace.TreeBodyGroup(Array("expanded", "true"))
                                                                                            ace.TreeBodyItem(Array())
                                                                                              ace.Directory(Array(_
                                                                                                "name", "Annual Reports",_
                                                                                                "size", "43.2 gb",_
                                                                                                "number", "01"_
                                                                                              ))
                                                                                            ace.TreeBodyItemEnd
                                                                                            ace.TreeBodyItem(Array())
                                                                                              ace.Checkbox(Array(_
                                                                                                "id", "doc-index-02-01"_
                                                                                              ))
                                                                                              ace.CheckboxEnd
                                                                                            ace.TreeBodyItemEnd
                                                                                          ace.TreeBodyGroupEnd
                                                                                      
                                                                                          ace.TreeBodyGroup(Array("level", "1"))
                                                                                            ace.TreeBodyItem(Array())
                                                                                              ace.File(Array(_
                                                                                                "name", "Annual Report FY 06.pdf",_
                                                                                                "number", "01.01",_
                                                                                                "size", "13.46 mb",_
                                                                                                "type", "acrobat"_
                                                                                              ))
                                                                                            ace.TreeBodyItemEnd
                                                                                            ace.TreeBodyItem(Array())
                                                                                              ace.Checkbox(Array("id", "doc-index-02-02"))
                                                                                              ace.CheckboxEnd
                                                                                            ace.TreeBodyItemEnd
                                                                                          ace.TreeBodyGroupEnd
                                                                                      
                                                                                          ace.TreeBodyGroup(Array("disabled", "true"))
                                                                                            ace.TreeBodyItem(Array())
                                                                                              ace.File(Array(_
                                                                                                "name", "ruby",_
                                                                                                "number", "10.23",_
                                                                                                "type", "generic",_
                                                                                                "size", "13.46 mb",_
                                                                                                "path", "/home/user/.rbenv/versions/2.1.3/bin/ruby"_
                                                                                              ))
                                                                                            ace.TreeBodyItemEnd
                                                                                            ace.TreeBodyItem(Array())
                                                                                              ace.Checkbox(Array(_
                                                                                                "id", "doc-index-02-03",_
                                                                                                "disabled", "disabled"_
                                                                                              ))
                                                                                              ace.CheckboxEnd
                                                                                            ace.TreeBodyItemEnd
                                                                                          ace.TreeBodyGroupEnd
                                                                                        ace.TreeBodyEnd
                                                                                      ace.TreeEnd %>
Document Select
expanded01 Annual Reports43.2 gb
01.01 Annual Report FY 06.pdf13.46 mb
10.23/home/user/.rbenv/versions/2.1.3/bin/ruby ruby13.46 mb
Document Tree 

                                                                                          <div class="ace-tree ace-tree-truncated ace-tree-document">
                                                                                                    <div class="ace-table-scroll-container">
                                                                                                      <div class="ace-table-container">
                                                                                                        <table class="ace-table ace-tree-with-controls">
                                                                                                                  <thead>
                                                                                                                            <tr class="ace-tree-group ace-tree-level-0">
                                                                                                                                      <th class="ace-tree-item">Document
                                                                                                                                      </th>
                                                                                                                                      <th class="ace-tree-item">Select
                                                                                                                                      </th>
                                                                                                                            </tr>
                                                                                                                  </thead>
                                                                                                                  <tbody>
                                                                                                                            <tr class="ace-tree-group ace-tree-level-0 ace-tree-branch-expanded">
                                                                                                                                      <td class="ace-tree-item"><span class="ace-icon ace-icon-control-expanded" title="expanded">expanded</span><span class="ace-asset ace-asset-directory"><span class="ace-icon ace-icon-objects-folder ace-asset-type"></span><span class="ace-asset-number">01</span>
                                                                                                                                                              <span class="ace-asset-name">Annual Reports</span><span class="ace-asset-size">43.2 gb</span></span>
                                                                                                                                      </td>
                                                                                                                                      <td class="ace-tree-item">
                                                                                                                                            <div class="ace-form-input-checkbox-set">
                                                                                                                                                  <input class="ace-form-input ace-form-input-checkbox" type="checkbox" id="doc-index-document-tree-example-01">
                                                                                                                                                  </input>
                                                                                                                                                  <label class="ace-form-label ace-form-label-assistive" for="doc-index-document-tree-example-01"><span class="ace-text ace-assistive">select</span>
                                                                                                                                                  </label>
                                                                                                                                            </div>
                                                                                                                                      </td>
                                                                                                                            </tr>
                                                                                                                            <tr class="ace-tree-group ace-tree-level-1">
                                                                                                                                      <td class="ace-tree-item"><span class="ace-asset ace-asset-file"><span class="ace-icon ace-icon-document-acrobat ace-asset-type"></span><span class="ace-asset-number">01.01</span>
                                                                                                                                                              <span class="ace-asset-name">Annual Report FY 06.pdf</span><span class="ace-asset-size">13.46 mb</span></span>
                                                                                                                                      </td>
                                                                                                                                      <td class="ace-tree-item">
                                                                                                                                            <div class="ace-form-input-checkbox-set">
                                                                                                                                                  <input class="ace-form-input ace-form-input-checkbox" type="checkbox" id="doc-index-document-tree-example-02">
                                                                                                                                                  </input>
                                                                                                                                                  <label class="ace-form-label ace-form-label-assistive" for="doc-index-document-tree-example-02"><span class="ace-text ace-assistive">select</span>
                                                                                                                                                  </label>
                                                                                                                                            </div>
                                                                                                                                      </td>
                                                                                                                            </tr>
                                                                                                                            <tr class="ace-tree-group ace-tree-level-0 ace-table-disabled">
                                                                                                                                      <td class="ace-tree-item"><span class="ace-asset ace-asset-file"><span class="ace-icon ace-icon-document-generic ace-asset-type"></span><span class="ace-asset-number">10.23</span><span class="ace-asset-path">/home/user/.rbenv/versions/2.1.3/bin/ruby</span>
                                                                                                                                                              <span class="ace-asset-name">ruby</span><span class="ace-asset-size">13.46 mb</span></span>
                                                                                                                                      </td>
                                                                                                                                      <td class="ace-tree-item">
                                                                                                                                            <div class="ace-form-input-checkbox-set">
                                                                                                                                                  <input class="ace-form-input ace-form-input-checkbox" type="checkbox" id="doc-index-document-tree-example-03" disabled="disabled">
                                                                                                                                                  </input>
                                                                                                                                                  <label class="ace-form-label ace-form-label-assistive" for="doc-index-document-tree-example-03"><span class="ace-text ace-assistive">select</span>
                                                                                                                                                  </label>
                                                                                                                                            </div>
                                                                                                                                      </td>
                                                                                                                            </tr>
                                                                                                                  </tbody>
                                                                                                        </table>
                                                                                                      </div>
                                                                                                    </div>
                                                                                          </div>

                                                                                      <% ace.Tree(Array("type", "document"))
                                                                                        ace.TreeHeader
                                                                                          ace.TreeHeaderGroup(Array())
                                                                                            ace.TreeHeaderItem(Array()) %>Document<%
                                                                                            ace.TreeHeaderItemEnd
                                                                                            ace.TreeHeaderItem(Array()) %>Select<%
                                                                                            ace.TreeHeaderItemEnd
                                                                                          ace.TreeHeaderGroupEnd
                                                                                        ace.TreeHeaderEnd
                                                                                      
                                                                                        ace.TreeBody
                                                                                          ace.TreeBodyGroup(Array("expanded", "true"))
                                                                                            ace.TreeBodyItem(Array())
                                                                                              ace.Directory(Array(_
                                                                                                "name", "Annual Reports",_
                                                                                                "size", "43.2 gb",_
                                                                                                "number", "01"_
                                                                                              ))
                                                                                            ace.TreeBodyItemEnd
                                                                                            ace.TreeBodyItem(Array())
                                                                                              ace.Checkbox(Array(_
                                                                                                "id", "doc-index-02-01"_
                                                                                              ))
                                                                                              ace.CheckboxEnd
                                                                                            ace.TreeBodyItemEnd
                                                                                          ace.TreeBodyGroupEnd
                                                                                      
                                                                                          ace.TreeBodyGroup(Array("level", "1"))
                                                                                            ace.TreeBodyItem(Array())
                                                                                              ace.File(Array(_
                                                                                                "name", "Annual Report FY 06.pdf",_
                                                                                                "number", "01.01",_
                                                                                                "size", "13.46 mb",_
                                                                                                "type", "acrobat"_
                                                                                              ))
                                                                                            ace.TreeBodyItemEnd
                                                                                            ace.TreeBodyItem(Array())
                                                                                              ace.Checkbox(Array("id", "doc-index-02-02"))
                                                                                              ace.CheckboxEnd
                                                                                            ace.TreeBodyItemEnd
                                                                                          ace.TreeBodyGroupEnd
                                                                                      
                                                                                          ace.TreeBodyGroup(Array("disabled", "true"))
                                                                                            ace.TreeBodyItem(Array())
                                                                                              ace.File(Array(_
                                                                                                "name", "ruby",_
                                                                                                "number", "10.23",_
                                                                                                "type", "generic",_
                                                                                                "size", "13.46 mb",_
                                                                                                "path", "/home/user/.rbenv/versions/2.1.3/bin/ruby"_
                                                                                              ))
                                                                                            ace.TreeBodyItemEnd
                                                                                            ace.TreeBodyItem(Array())
                                                                                              ace.Checkbox(Array(_
                                                                                                "id", "doc-index-02-03",_
                                                                                                "disabled", "disabled"_
                                                                                              ))
                                                                                              ace.CheckboxEnd
                                                                                            ace.TreeBodyItemEnd
                                                                                          ace.TreeBodyGroupEnd
                                                                                        ace.TreeBodyEnd
                                                                                      ace.TreeEnd %>
Document
expanded01 Annual Reports43.2 gb
Expanded tree item 

                                                                                      <!-- Within tree body:-->
                                                                                              <tr class="ace-tree-group ace-tree-level-0 ace-tree-branch-expanded">
                                                                                                        <td class="ace-tree-item"><span class="ace-icon ace-icon-control-expanded" title="expanded">expanded</span>
                                                                                                          <!-- Directory Asset goes here-->
                                                                                                        </td>
                                                                                              </tr>

                                                                                      <% ace.TreeBodyGroup(Array("expanded", "true"))
                                                                                         ace.TreeBodyItem(Array())
                                                                                           ace.Directory(Array(_
                                                                                             "name", "Annual Reports",_
                                                                                             "size", "43.2 gb",_
                                                                                             "number", "01"_
                                                                                           ))
                                                                                         ace.TreeBodyItemEnd
                                                                                      ace.TreeBodyGroupEnd %>
Document
collapsed01 Annual Reports43.2 gb
Collapsed tree item 

                                                                                      <!-- Within tree body:-->
                                                                                              <tr class="ace-tree-group ace-tree-level-0 ace-tree-branch-collapsed">
                                                                                                        <td class="ace-tree-item"><span class="ace-icon ace-icon-control-collapsed" title="collapsed">collapsed</span>
                                                                                                          <!-- Directory Asset goes here-->
                                                                                                        </td>
                                                                                              </tr>

                                                                                      <% ace.TreeBodyGroup(Array("expanded", "false"))
                                                                                         ace.TreeBodyItem(Array())
                                                                                           ace.Directory(Array(_
                                                                                             "name", "Annual Reports",_
                                                                                             "size", "43.2 gb",_
                                                                                             "number", "01"_
                                                                                           ))
                                                                                         ace.TreeBodyItemEnd
                                                                                      ace.TreeBodyGroupEnd %>
Document
expanded03 root level
expanded03.01 intermediate level
expanded03.01.01 final level43.2 gb
03.01.01.01 the glorious file.pdf13.46 mb
collapsed03.02 that extra directory1.2 gb
Depth indicated with indentation. Set depth on the tree group. 

                                                                                          <div class="ace-tree ace-tree-truncated">
                                                                                                    <div class="ace-table-scroll-container">
                                                                                                      <div class="ace-table-container">
                                                                                                        <table class="ace-table ace-tree-with-controls">
                                                                                                                  <thead>
                                                                                                                            <tr class="ace-tree-group ace-tree-level-0">
                                                                                                                                      <th class="ace-tree-item">Document
                                                                                                                                      </th>
                                                                                                                            </tr>
                                                                                                                  </thead>
                                                                                                                  <tbody>
                                                                                                                            <tr class="ace-tree-group ace-tree-level-0 ace-tree-branch-expanded">
                                                                                                                                      <td class="ace-tree-item"><span class="ace-icon ace-icon-control-expanded" title="expanded">expanded</span><span class="ace-asset ace-asset-directory"><span class="ace-icon ace-icon-objects-folder ace-asset-type"></span><span class="ace-asset-number">03</span>
                                                                                                                                                              <span class="ace-asset-name">root level</span></span>
                                                                                                                                      </td>
                                                                                                                            </tr>
                                                                                                                            <tr class="ace-tree-group ace-tree-level-1 ace-tree-branch-expanded">
                                                                                                                                      <td class="ace-tree-item"><span class="ace-icon ace-icon-control-expanded" title="expanded">expanded</span><span class="ace-asset ace-asset-directory"><span class="ace-icon ace-icon-objects-folder ace-asset-type"></span><span class="ace-asset-number">03.01</span>
                                                                                                                                                              <span class="ace-asset-name">intermediate level</span></span>
                                                                                                                                      </td>
                                                                                                                            </tr>
                                                                                                                            <tr class="ace-tree-group ace-tree-level-2 ace-tree-branch-expanded">
                                                                                                                                      <td class="ace-tree-item"><span class="ace-icon ace-icon-control-expanded" title="expanded">expanded</span><span class="ace-asset ace-asset-directory"><span class="ace-icon ace-icon-objects-folder ace-asset-type"></span><span class="ace-asset-number">03.01.01</span>
                                                                                                                                                              <span class="ace-asset-name">final level</span><span class="ace-asset-size">43.2 gb</span></span>
                                                                                                                                      </td>
                                                                                                                            </tr>
                                                                                                                            <tr class="ace-tree-group ace-tree-level-3">
                                                                                                                                      <td class="ace-tree-item"><span class="ace-asset ace-asset-file"><span class="ace-icon ace-icon-document-acrobat ace-asset-type"></span><span class="ace-asset-number">03.01.01.01</span>
                                                                                                                                                              <span class="ace-asset-name">the glorious file.pdf</span><span class="ace-asset-size">13.46 mb</span></span>
                                                                                                                                      </td>
                                                                                                                            </tr>
                                                                                                                            <tr class="ace-tree-group ace-tree-level-1 ace-tree-branch-collapsed">
                                                                                                                                      <td class="ace-tree-item"><span class="ace-icon ace-icon-control-collapsed" title="collapsed">collapsed</span><span class="ace-asset ace-asset-directory"><span class="ace-icon ace-icon-objects-folder ace-asset-type"></span><span class="ace-asset-number">03.02</span>
                                                                                                                                                              <span class="ace-asset-name">that extra directory</span><span class="ace-asset-size">1.2 gb</span></span>
                                                                                                                                      </td>
                                                                                                                            </tr>
                                                                                                                  </tbody>
                                                                                                        </table>
                                                                                                      </div>
                                                                                                    </div>
                                                                                          </div>

                                                                                      <% ace.Tree(Array())
                                                                                          ace.TreeHeader
                                                                                            ace.TreeHeaderGroup(Array())
                                                                                              ace.TreeHeaderItem(Array()) %>Document<%
                                                                                              ace.TreeHeaderItemEnd
                                                                                            ace.TreeHeaderGroupEnd
                                                                                          ace.TreeHeaderEnd
                                                                                          ace.TreeBody
                                                                                            ace.TreeBodyGroup(Array(_
                                                                                                "expanded", "true",_
                                                                                                "level", "0"_
                                                                                            ))
                                                                                              ace.TreeBodyItem(Array())
                                                                                                ace.Directory(Array(_
                                                                                                  "name", "Root level",_
                                                                                                  "number", "03"_
                                                                                                ))
                                                                                              ace.TreeBodyItemEnd
                                                                                            ace.TreeBodyGroupEnd
                                                                                            ace.TreeBodyGroup(Array(_
                                                                                                "expanded", "true",_
                                                                                                "level", "1"_
                                                                                            ))
                                                                                              ace.TreeBodyItem(Array())
                                                                                                ace.Directory(Array(_
                                                                                                  "name", "intermediate level",_
                                                                                                  "number", "03.01"_
                                                                                                ))
                                                                                              ace.TreeBodyItemEnd
                                                                                            ace.TreeBodyGroupEnd
                                                                                            ace.TreeBodyGroup(Array(_
                                                                                                "expanded", "true",_
                                                                                                "level", "2"_
                                                                                            ))
                                                                                              ace.TreeBodyItem(Array())
                                                                                                ace.Directory(Array(_
                                                                                                  "name", "final level",_
                                                                                                  "size", "43.2 GB",_
                                                                                                  "number", "03.01.01"_
                                                                                                ))
                                                                                              ace.TreeBodyItemEnd
                                                                                            ace.TreeBodyGroupEnd
                                                                                            ace.TreeBodyGroup(Array(_
                                                                                                "level", "3"_
                                                                                            ))
                                                                                                ace.TreeBodyItem(Array())
                                                                                                ace.File(Array(_
                                                                                                  "name", "the glorious file.pdf",_
                                                                                                  "number", "03.01.01.01",_
                                                                                                  "size", "13.46 mb",_
                                                                                                  "type", "acrobat"_
                                                                                                ))
                                                                                                ace.TreeBodyItemEnd
                                                                                            ace.TreeBodyGroupEnd
                                                                                            ace.TreeBodyGroup(Array(_
                                                                                                "expanded", "false",_
                                                                                                "level", "1"_
                                                                                            ))
                                                                                              ace.TreeBodyItem(Array())
                                                                                                ace.Directory(Array(_
                                                                                                  "name", "that extra directory",_
                                                                                                  "number", "03.02"_
                                                                                                ))
                                                                                              ace.TreeBodyItemEnd
                                                                                            ace.TreeBodyGroupEnd
                                                                                          ace.TreeBodyEnd
                                                                                        ace.TreeEnd %>

Configuration

Element Attribute Description Example
.ace-tree .ace-tree-truncated wrap cell contents 

                                                                                                  <div class="ace-tree ace-tree-truncated">
                                                                                                            <div class="ace-table-scroll-container">
                                                                                                              <div class="ace-table-container">
                                                                                                                <table class="ace-table ace-tree-with-controls">
                                                                                                                </table>
                                                                                                              </div>
                                                                                                            </div>
                                                                                                  </div>
.ace-tree .ace-tree-document use full heading style instead of collapsed 

                                                                                                  <div class="ace-tree ace-tree-truncated ace-tree-document">
                                                                                                            <div class="ace-table-scroll-container">
                                                                                                              <div class="ace-table-container">
                                                                                                                <table class="ace-table ace-tree-with-controls">
                                                                                                                </table>
                                                                                                              </div>
                                                                                                            </div>
                                                                                                  </div>
.ace-tree-group .ace-tree-level-{n} nested depth of item 

                                                                                                      <tr class="ace-tree-group ace-tree-level-1">
                                                                                                      </tr>
.ace-tree-group .ace-table-disabled disabled item 

                                                                                                      <tr class="ace-tree-group ace-tree-level-0 ace-table-disabled">
                                                                                                      </tr>
.ace-tree-group .ace-tree-branch-expanded expanded tree group 

                                                                                                      <tr class="ace-tree-group ace-tree-level-0 ace-tree-branch-expanded">
                                                                                                      </tr>
.ace-tree-group .ace-tree-branch-collapsed collapsed tree group 

                                                                                                      <tr class="ace-tree-group ace-tree-level-0 ace-tree-branch-collapsed">
                                                                                                      </tr>
Element Attribute Description Example
ace.Tree truncated wrap cell contents 

                                                                                              ace.Tree(Array("truncated", "true"))
ace.Tree type

use full heading style instead of collapsed

"document" or nothing

 

                                                                                              ace.Tree(Array("type", "document"))
ace.TreeBodyGroup level

nested depth of item

integer-string, "1", "2"

 

                                                                                              ace.TreeBodyGroup(Array("level", "1"))
ace.TreeBodyGroup disabled

disabled item

"true"

 

                                                                                              ace.TreeBodyGroup(Array("disabled", "true"))
ace.TreeBodyGroup expanded

expanded tree group

"true"

 
ace.TreeBodyGroup(Array("expanded", "true"))