Views

Three layouts ship: list, grid and tree.

<DocumentExplorer view="grid" />                       // controlled
<DocumentExplorer defaultView="grid" />                // uncontrolled
<DocumentExplorer views={['list', 'grid', 'tree']} />  // which the switcher offers
<DocumentExplorer views={[]} />                        // no switcher

List

The default. A role="grid" with sortable column headers, configurable columns, and one tab stop for the whole list.

On narrow screens every column but the name collapses away, unless you mark a column optional: false.

Grid

Cards with a type icon, name and subtitle. Semantically a role="listbox" of options — not a grid of cells — because that is what a flat set of selectable cards actually is, and option is what carries aria-selected.

Selection in grid view is by clicking the card or pressing Space; the check indicator is decorative, since an option may not contain interactive children.

Arrow keys follow the visual layout, with the column count measured from the rendered grid rather than assumed.

Tree

A role="tree" showing the whole hierarchy at once. Ancestors of the current folder start expanded, so the tree reflects where the user already is rather than collapsing underneath them.

ArrowRight and ArrowLeft expand and collapse; Enter opens; Space selects.

Breadcrumbs are hidden in tree view — the tree already shows the structure.