webdevpuneet.com

Related Snippets

85 in Tables category
2–7 of 60

Accessible Tree Table with Expandable Nested Rows

Virtualized 100,000-Row Table in Vanilla JavaScript

Grid.js Lightweight Searchable Table with Row Details

Tabulator Grouped Rows with Aggregates

Tabulator Editable Cells with Validation and Undo

Tabulator Sortable Filterable Data Grid

Accessible Tree Table with Nested Rows — Free JS Snippet

Accessible Tree Table with Expandable Nested Rows · Tables · Plain HTML, CSS & JS · Live preview

CategoryTables
TagsKeyboard NavigationSVGAccessibilityData TablesCSS Grid

Copy & paste

Source Code

<div class="tt-wrap">
  <div class="tt-bar">
    <input id="ttFilter" type="search" placeholder="Filter files and folders..." aria-label="Filter the tree">
    <button type="button" id="ttExpand">Expand all</button>
    <button type="button" id="ttCollapse">Collapse all</button>
  </div>
  <div class="tt-grid" role="treegrid" aria-label="Project files" id="ttGrid">
    <div class="tt-head" role="row"><span role="columnheader">Name</span><span role="columnheader">Type</span><span role="columnheader">Modified</span><span role="columnheader" class="r">Size</span></div>
    <div id="ttBody"></div>
  </div>
  <p class="tt-help" id="ttHelp">Arrow keys move, <kbd>&rarr;</kbd> opens a folder, <kbd>&larr;</kbd> closes it or jumps to its parent, <kbd>Home</kbd>/<kbd>End</kbd> go to the first and last row.</p>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Expandable nested rows with indentation from a stored depth
Folder sizes computed as a recursive roll-up of descendants
Rendering as a pure function of the tree, open set and filter
Filter keeps ancestors of every match visible and opens them
Match highlighting with HTML-escaped output
WAI-ARIA treegrid roles with aria-level, aria-expanded, aria-posinset and aria-setsize
Roving tabindex so the whole tree is one tab stop
Full keyboard model: arrows, Home, End, Enter, Space

About this UI Snippet

Accessible Tree Table with Expandable Rows — HTML, CSS & JavaScript

Screenshot of the Accessible Tree Table with Expandable Nested Rows snippet rendered live

A tree table combines two structures that browsers do not natively combine: the columns of a table and the expandable hierarchy of a tree. File explorers, chart-of-accounts screens, organisation charts and nested task lists all use it. Building one that merely looks right is easy — indent some rows and toggle their visibility. Building one that behaves correctly for keyboard and screen-reader users is where the work is, and this snippet is structured around that.

The data model does two things worth noticing. Each node stores its parent and its depth, assigned once by a prep() pass, so indentation is a level times 22 pixels and "go to parent" is a property lookup. And folder sizes are a roll-up: a folder's size is the sum of everything beneath it, computed recursively when the tree is prepared, which is how file explorers show that a folder is 60 KB before you open it. Expansion state is kept separately in a Set of open folder ids, so rendering is a pure function of the tree, the open set and the current filter — call render() and the DOM is rebuilt to match.

Only currently visible rows are produced. A recursive walk emits a node and descends into its children only if the folder is open, which yields a flat list that maps straight onto table rows. Filtering has one subtle rule that most implementations get wrong: a node matches if its own name matches or any descendant does. Without the descendant check, searching for "Row" would hide the folders containing Row.tsx and the hit would appear orphaned at the top level. With it, ancestors of every match stay visible and are forced open while a filter is active, and the matched text is highlighted.

The accessibility model follows the WAI-ARIA treegrid pattern. The container has role="treegrid" and rows carry aria-level, aria-posinset, aria-setsize and, for folders, aria-expanded, so a screen reader can announce "Table, folder, expanded, level 3, 2 of 8". Focus uses a roving tabindex — exactly one row is tabindex 0 — so the whole grid is a single tab stop. The keyboard handler implements the standard interactions: Up and Down move between rows, Right opens a closed folder or steps into its first child, Left closes an open folder or jumps to the parent, Home and End go to the ends, and Enter or Space toggles. Chevron rotation is CSS-only, driven from aria-expanded.

Step by step

How to Use

  1. 1
    Expand and collapseClick a folder or its arrow to open it. Folder sizes are the total of everything inside, even when collapsed.
  2. 2
    Use the keyboardTab into the tree, then use the arrow keys. Right opens a folder, Left closes it or jumps to its parent.
  3. 3
    Expand allUse Expand all and Collapse all to open or fold the whole hierarchy at once.
  4. 4
    FilterType "Row" or "hook". Matching files appear with their parent folders kept open and the match highlighted.
  5. 5
    Check the semanticsInspect the rows to see aria-level, aria-expanded, aria-posinset and aria-setsize on each one.

Real-world uses

Common Use Cases

📁
File and asset browsers
Show nested files with rolled-up folder sizes in an asset browser, with indentation derived from each row's stored depth.
🧾
Chart of accounts
Nest categories under parents so totals roll up, with rendering a pure function of the tree, the open set and the filter.
🏢
Org charts and permission trees
Explore reporting lines or permissions, using a filter that keeps the ancestors of every match visible and opens them.
🎓
Treegrid pattern learning
See a complete working example of the WAI-ARIA treegrid keyboard model, with arrow keys moving focus between rows.
🌳
Large tree tables
Combine ideas with the virtualized 100k row table when a tree grows too large to render at once.

Got questions?

Frequently Asked Questions

A tree is a hierarchical list. A treegrid is a hierarchy laid out in rows and columns, so each node can show multiple cells such as type, date and size.

It separates the state from the DOM, so render() can rebuild the view from the data, the open set and the filter every time.

If only the node's own name is tested, folders that contain a match are hidden and the result appears without context. Checking descendants keeps the ancestors visible.

Only one row has tabindex 0 and the others have -1, so the tree is a single tab stop, and arrow keys move focus within it.

Each folder's size is the sum of its children's sizes, computed recursively once when the tree is prepared.

Mark folders as having unloaded children, fetch them on first expand, insert the nodes, then call render() and set aria-busy while loading.

Yes. Use the JSX, Vue, Angular or Tailwind export buttons on this page. It uses no library, so port the tree data and the open-folder Set into component state, render the visible rows from them, and keep the roving tabindex and keyboard handler on the treegrid element.