Selection

<DocumentExplorer
  data={documents}
  selection
  onSelectionChange={(items) => setSelected(items)}
/>

onSelectionChange hands you the items, not just their ids:

[{ id: '123', name: 'architecture.pdf', type: 'file', size: 2450000, ... }]

Configuration

<DocumentExplorer
  selection={{
    mode: 'multiple',   // or 'single'
    files: true,
    folders: false,     // folders are not selectable
    max: 10,
  }}
/>

Rows that are not selectable render a disabled checkbox, so the constraint is visible rather than mysterious.

When max is reached, selecting another row drops the oldest — which is what a user hitting the cap expects, rather than a silent no-op.

Range selection

Shift+click, or Shift+arrow, selects everything between the anchor and the target in the order currently on screen — so the range matches what the user sees, not the underlying data order. Ctrl/Cmd+A selects everything visible.

Selection survives navigation

Selection is keyed by id, not by row position. It persists when you change folder, sort a column, or filter with a search — and rows that vanish from the data entirely are dropped from it automatically.

The selection bar

When anything is selected, a bar appears with the count and Clear / Select all controls. It is a role="status", so screen readers announce the count.