Grid

Interactive data grid with keyboard navigation.

Usage

<w-grid label="Data table">
  <w-slot row>
    <div>
      <w-slot cell><div>A1</div></w-slot>
      <w-slot cell><div>B1</div></w-slot>
      <w-slot cell><div>C1</div></w-slot>
    </div>
  </w-slot>
  <w-slot row>
    <div>
      <w-slot cell><div>A2</div></w-slot>
      <w-slot cell><div>B2</div></w-slot>
      <w-slot cell><div>C2</div></w-slot>
    </div>
  </w-slot>
</w-grid>

Props

Prop	Type	Default	Description
label	string	""	Accessible label

Slots

Slot	Element	Description
row	Container	Grid row
cell	Any	Grid cell
rowheader	Any	Row header cell

Keyboard

Key	Action
ArrowRight	Next cell
ArrowLeft	Previous cell
ArrowDown	Cell below
ArrowUp	Cell above
Home	First cell in row
End	Last cell in row
Ctrl+Home	First cell in grid
Ctrl+End	Last cell in grid

Accessibility

• Container has role="grid"
• Rows have role="row"
• Cells have role="gridcell" or role="rowheader"
• Focusable cells with roving tabindex