Table

Structure

The Table is built with semantic HTML table elements: <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, and a visually hidden <caption>. Using native table elements ensures that assistive technologies can identify the table structure, navigate between cells, and announce row and column relationships without additional ARIA attributes.

When a header cell is made clickable, the component renders a native <button> inside the <th> element. This provides built-in keyboard support and focus management without custom event handlers.

Caption

A Table caption, used to describe a Table's purpose, is required or the component will throw an error. The caption is visually hidden, but assistive technologies will announce it when the Table receives focus.

Scope

The scope attribute is automatically assigned to Table headers depending on whether they're nested within the table head (col) or table body (row). This helps assistive technologies associate headers to the correct table cell.

Keyboard