Logo of UI Challenges
Sign in
Wireframe example for Table tree
An example interpretation of the prompt
Icon of target

Table tree

Icon of book open

Design a tree table for browsing nested records in a dense admin view. Each row represents an item in a hierarchy, with standard columns for name, type, owner, status, and last updated. Parent rows can expand inline to reveal children without breaking column alignment.

Make the hierarchy legible through indentation, connector lines or nesting cues, and a clear disclosure control on every expandable row. The first column should carry the tree affordance; the rest of the row should read like a normal table so users can scan and compare values quickly.

Show the key interaction states: collapsed, expanded, selected, hover, and disabled. If a branch is loading, keep the row in place and indicate progress where the expansion happened. If a node has no children, it should not look expandable.

Include a compact version for tighter layouts and a mobile treatment that preserves the hierarchy without turning the table into an unreadable grid. The result should feel like a table first, with tree behavior layered in—not a generic list with extra icons.

Icon of book open

Employ subtle animations for expanding and collapsing branches to enhance user experience and provide immediate visual feedback.

Better at UI design with every challenge

Select complexity and generate challenge.

Pick a platform.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.

Get design challenge updates in your inbox

New prompts and challenge updates. It’s free.