ds
Components
Tree

Tree

Nested folders and files, buckets and tables.

pipelines
- orders
- customers
  - dag.py
tests
- test_orders.py
pyproject.toml

Show code

<ul class="tree mono" aria-label="Repository">
  <li><details open><summary class="tn"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg><span>pipelines</span></summary>
    <ul>
      <li><details open><summary class="tn"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg><span>orders</span></summary>
        <ul>
          <li><a class="tn" href="#" aria-current="true"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg><span>dag.py</span><small>4.2 KB</small></a></li>
          <li><a class="tn" href="#"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg><span>transform.sql</span><small>1.1 KB</small></a></li>
          <li><a class="tn" href="#"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg><span>schema.yaml</span><small>860 B</small></a></li>
        </ul>
      </details></li>
      <li><details><summary class="tn"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg><span>customers</span></summary>
        <ul><li><a class="tn" href="#"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg><span>dag.py</span></a></li></ul>
      </details></li>
    </ul>
  </details></li>
  <li><details><summary class="tn"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg><span>tests</span></summary>
    <ul><li><a class="tn" href="#"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg><span>test_orders.py</span></a></li></ul>
  </details></li>
  <li><a class="tn" href="#"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg><span>pyproject.toml</span></a></li>
</ul>

Folders are native details elements, so they open with a click, Enter or Space, with no script. A hairline guide runs down each open folder and darkens on hover, which helps when the tree is deep. Sizes sit on the right in faint mono.

Data catalog

analyticsSnowflake
- marts12
- staging41
  - stg_orders
acme-raw-ap-south-1S3
- orders/

Show code

<ul class="tree" aria-label="Catalog">
  <li><details open><summary class="tn"><svg class="i store" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 21V10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v11"/><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 1.132-1.803l7.95-3.974a2 2 0 0 1 1.837 0l7.948 3.974A2 2 0 0 1 22 8z"/><path d="M6 13h12"/><path d="M6 17h12"/></svg><span>analytics</span><small>Snowflake</small></summary>
    <ul>
      <li><details open><summary class="tn"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 13.74a2 2 0 0 1-2 0L2.5 8.87a1 1 0 0 1 0-1.74L11 2.26a2 2 0 0 1 2 0l8.5 4.87a1 1 0 0 1 0 1.74z"/><path d="m20 14.285 1.5.845a1 1 0 0 1 0 1.74L13 21.74a2 2 0 0 1-2 0l-8.5-4.87a1 1 0 0 1 0-1.74l1.5-.845"/></svg><span>marts</span><small>12</small></summary>
        <ul>
          <li><a class="tn" href="#"><svg class="i store" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg><span>fct_orders</span><small>48.2M rows</small></a></li>
          <li><a class="tn" href="#" aria-current="true"><svg class="i store" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg><span>dim_customers</span><small>1.9M rows</small></a></li>
          <li><a class="tn" href="#"><svg class="i store" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg><span>fct_refunds</span><small>310k rows</small></a></li>
        </ul>
      </details></li>
      <li><details><summary class="tn"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 13.74a2 2 0 0 1-2 0L2.5 8.87a1 1 0 0 1 0-1.74L11 2.26a2 2 0 0 1 2 0l8.5 4.87a1 1 0 0 1 0 1.74z"/><path d="m20 14.285 1.5.845a1 1 0 0 1 0 1.74L13 21.74a2 2 0 0 1-2 0l-8.5-4.87a1 1 0 0 1 0-1.74l1.5-.845"/></svg><span>staging</span><small>41</small></summary><ul><li><a class="tn" href="#"><svg class="i store" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg><span>stg_orders</span></a></li></ul></details></li>
    </ul>
  </details></li>
  <li><details><summary class="tn"><svg class="i store" viewBox="0 0 24 24" aria-hidden="true"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg><span>acme-raw-ap-south-1</span><small>S3</small></summary>
    <ul><li><a class="tn" href="#"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg><span>orders/</span></a></li></ul>
  </details></li>
</ul>

Warehouses, buckets and tables carry amber icons: they hold data. Schemas and folders stay grey. The right column holds whatever helps choose between siblings, here row counts.

API

Class	On	What it does
`.tree`	ul	The root list. `.mono` for file names.
`.tn`	summary, a	A node: icon, <span> name, optional <small> on the right. Folders show a chevron.
`.i.store`	svg	Amber icon, for things that hold data.
`aria-current`	.tn	The open file or table.
`ul`	details	Children, indented, with a guide line.

Open the path to the current item on load.
Sort folders before files.
Lazy-load children of big folders on toggle.

Don't

More than five or six levels: show a path and a list instead.
Checkboxes in the tree and actions on every row.
Truncating names without a title.

Accessibility

With details and links, the tree works with Tab, Enter and Space as it is. For large trees, add the full tree pattern: one tab stop, arrow keys to move, Right to open and Left to close.
If you use role="tree", give items role="treeitem" and aria-expanded; otherwise leave the roles off, as a list of links is already understood.