Treegrid

Hierarchical grid combining tree and grid patterns.

Usage

<w-treegrid label="File browser">
  <w-slot row data-level="1" expandable>
    <div>
      <w-slot cell><div>Documents</div></w-slot>
      <w-slot cell><div>Folder</div></w-slot>
    </div>
  </w-slot>
  <w-slot row data-level="2">
    <div>
      <w-slot cell><div>Report.pdf</div></w-slot>
      <w-slot cell><div>File</div></w-slot>
    </div>
  </w-slot>
</w-treegrid>

Props

Prop	Type	Default	Description
label	string	""	Accessible label

Slots

Slot	Element	Description
row	Container	Grid row (use data-level, expandable attributes)
cell	Any	Grid cell

Row Attributes

Attribute	Description
data-level	Nesting level (1, 2, 3, etc.)
expandable	Row can be expanded

Keyboard

Key	Action
ArrowRight	Expand row or move right
ArrowLeft	Collapse row or move left
ArrowDown	Next visible row
ArrowUp	Previous visible row

Accessibility

• Combines role="treegrid" with tree navigation
• Rows have aria-expanded when expandable
• aria-level indicates depth