Object List
Objects in a bucket, with the prefix hierarchy object stores only pretend to have. There are no folders in S3-shaped storage — `a/b/c.png` is one flat key — so keys deeper than the current prefix collapse into a prefix row with a count.
src/components/ui/object-list.tsxAbout
From the component's own source, where it was written.
Objects in a bucket, with the prefix hierarchy object stores only pretend to have.
There are no folders in S3-shaped storage — a/b/c.png is one flat key with slashes in it. Every console draws folders anyway, because a flat list of fifty thousand keys is unusable, and this does the same grouping: keys under the current prefix are files, anything deeper collapses into a prefix row with a count.
Storage class is shown because it is the difference between a file you can read now and one that needs a restore request and several hours. A list that shows only size and date makes an archived object look immediately available.
Install
npx astralyx-ui add object-list
Usage
import { ObjectList } from '@/components/ui/object-list'
<ObjectList objects={objects} onSelect={open} />Composer
Change the props and the source below follows.
<ObjectList objects={objects} searchable={true} onSelect={open} />Examples
Browsing prefixes
<ObjectList objects={objects} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
ObjectList
Extends Omit<ComponentProps<'div'>, 'onSelect'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| prefix | string | — | Controlled navigation. Uncontrolled by default. |
| objects | StorageObject[] | required | { key, size?, modified?, storageClass?, archived? }. Keys are flat; the folders are derived. |
| onPrefixChange | (prefix: string) => void | — | Controlled navigation. Uncontrolled by default. |
| onSelect | (object: StorageObject) => void | — | — |
| searchable | boolean | true | — |
| searchPlaceholder | string | 'Filter by key…' | — |
| searchLabel | string | 'Filter objects' | — |
| emptyLabel | string | 'Nothing here' | — |
| emptyHint | string | 'This prefix has no objects.' | — |
| archivedLabel | string | 'archived' | — |
| itemsLabel | (count: number) => string | (count) => `${count} item${count === 1 ? '' : 's'}` | — |
| format | (bytes: number) => string | formatBytes | — |
Functions
| Function | Signature | Description |
|---|---|---|
| groupByPrefix | (objects: StorageObject[], prefix: string) => { files: StorageObject[]; folders: { name: string; count: number; }[]; } | Exported, for building your own layout on the same grouping. |
Types
StorageObject
Objects in a bucket, with the prefix hierarchy object stores only pretend to have.
| Field | Type | Description |
|---|---|---|
| key | string | — |
| size? | number | Bytes. |
| modified? | string | Already formatted. |
| storageClass? | string | STANDARD, GLACIER, whatever your provider calls it. |
| archived? | boolean | Not immediately readable — it needs a restore request and hours. A list showing only size and date makes it look available. |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| searching | goes flat | A filter that still hides matches behind folders is not a search. |