LLabanaat

FileManager

A file/folder browser (grid or list view), reusing the library's own Breadcrumbs for the path trail. Fully controlled — the data, path, selection, and view mode all live in the consumer's state, the same pattern as DataTable: FileManager reports intent (open, select, navigate) rather than owning any of it.

const allItems = {
"Home": [
  { id: "1", name: "Reports", type: "folder" },
  { id: "2", name: "Projects", type: "folder" },
  { id: "3", name: "budget.xlsx", type: "file", size: 245000 },
],
"Home/Reports": [
  { id: "4", name: "Q1.pdf", type: "file", size: 1200000 },
  { id: "5", name: "Q2.pdf", type: "file", size: 980000 },
],
};

function Demo() {
const [path, setPath] = useState(["Home"]);
const key = path.join("/");
return (
  <FileManager
    items={allItems[key] ?? []}
    path={path}
    onPathChange={setPath}
  />
);
}
render(<Demo />);

Editable — change the code above and the preview updates live.

Double-click (or focus + Enter) a folder to open it; click the breadcrumb trail to go back up.

Installation

import { FileManager } from "@labanaat/ui/file-manager";

Props

PropTypeDefaultDescription
itemsFileManagerItem[]—{ id, name, type: "file" | "folder", size?, modifiedAt? } for the current folder
pathstring[]—Breadcrumb path segments, root first
onPathChange(path) => void—Called when the path changes (breadcrumb click, or opening a folder)
onOpen(item) => void—Called when a file or folder is opened
selected / defaultSelectedstring[]—Controlled / uncontrolled selected item ids
onSelectedChange(ids) => void—Change handler
view / defaultView"grid" | "list""grid"Controlled / uncontrolled view mode
onViewChange(view) => void—Change handler