Actions and events

Built-in actions

<DocumentExplorer
  actions={{ view: true, download: true }}
  onView={(item) => window.open(item.viewUrl)}
  onDownload={(item) => download(item.downloadUrl)}
/>

Both apply only to files; folders have nothing to view or fetch, so no menu is rendered for them.

Custom actions

The library does not need to know what "Share" means:

<DocumentExplorer
  actions={[
    { id: 'view', label: 'View' },
    { id: 'share', label: 'Share' },
    { id: 'archive', label: 'Archive', danger: true, visible: (i) => i.type === 'file' },
  ]}
  onAction={(actionId, item) => handle(actionId, item)}
/>

visible hides an action for rows it does not apply to. If no action applies to a row, no menu trigger is rendered at all.

danger: true styles the item as destructive.

Every event

Event	Fires when
onFolderOpen(folder)	A folder is opened. null for the root.
onDocumentOpen(item)	A file is opened.
onSelectionChange(items)	The selection changes.
onSearch(query)	The search query is committed.
onSort(sort)	The sort changes.
onViewChange(view)	The view switches.
onView(item) / onDownload(item)	The built-in actions run.
onAction(actionId, item)	Any action runs, built-in or custom.

In Angular these are outputs with the same meanings: folderOpen, documentOpen, selectionChange, searchChange, sortChange, viewChange, documentView, documentDownload, and action (emitting { actionId, item }).

Loading and error states

The explorer does not fetch anything, so tell it what your fetch is doing:

<DocumentExplorer data={data} loading={isLoading} error={error} />

loading shows a skeleton; error shows an error state with the message, as a role="alert".