FileExplorer

Open in Playground

Browse files and folders. The open folder shows as cards (grid) or a table (list) with breadcrumbs, a name filter, folders first, sizes and item counts; the tree layout shows every folder at once with the keyboard behaviour of Tree. A click opens a folder, and calls onSelect for a file. nodes are { id, name, type: 'file' | 'folder', size?, modified?, children?, itemCount? }. Switch layouts with view / defaultView / onViewChange, and limit them with views.

1 folder, 2 files

Click a folder to open it, a file to select it.

Folders loaded on demand. path / defaultPath hold the open folder as the ids from the root; onPathChange(path, folder) fires when the user opens a folder or uses the breadcrumbs, which is where you fetch a folder's children (set itemCount on a folder that is not loaded yet, and loading while you wait). onRefresh adds a reload button. Here a click on a file shows it in a full screen Modal with CodeDisplay; readableSize, languageOf, sortNodes and describeNode are exported.

1 folder, 1 file

Props

  • nodes{ id, name, type: 'file' | 'folder', size?, modified?, children?, itemCount? }[]

    The entries at the root; folders hold their own children.

  • onSelect(file) => void

    Called when a file is clicked.

  • selectedstring

    Id of the highlighted file.

  • view'grid' | 'list' | 'tree'

    Layout (controlled).

  • defaultView'grid' | 'list' | 'tree'
    Default: 'grid'

    Initial layout.

  • onViewChange(view) => void

    Called when the layout switch is used.

  • views('grid' | 'list' | 'tree')[]
    Default: all three

    Layouts the user can switch between.

  • pathstring[]

    Open folder as folder ids from the root (controlled).

  • defaultPathstring[]
    Default: []

    Initial open folder.

  • onPathChange(path, folder?) => void

    Called when a folder is opened or a breadcrumb is used.

  • onRefresh() => void

    Adds a reload button.

  • loadingboolean
    Default: false

    Entries are loading: they cannot be opened.

  • defaultExpandedstring[]

    Initially expanded folder ids (tree view).

  • expandedstring[]

    Expanded folder ids (tree view, controlled).

  • onExpandedChange(keys: string[]) => void

    Called when tree expansion changes.

  • toolbarEndReactNode

    Placed after the layout switch.

  • emptyTextstring
    Default: 'This folder is empty.'

    Shown in an empty folder.

  • labelstring
    Default: 'Files'

    Accessible name of the explorer.

  • classNamestring
    Default: ''

    Extra classes for the root element.