FAQ

Does it upload, delete or rename files?

No, and that is deliberate. The library renders documents and tells you what the user did; the operations are yours, because only your app knows what they mean. Add them as custom actions.

Do I have to reshape my API response?

No. That is the whole point — describe your shape once with a mapper and pass the response through untouched.

Flat rows or a nested tree?

Either. Internally it is flat plus parentId, and nested children input is flattened for you.

What happens if my data has bad rows?

They are repaired and reported, never thrown. Duplicate ids, missing parents, cycles and files used as folders each produce a warning you can inspect. See the data model.

Is the Angular version a port of the React one?

No — that is exactly what would let them drift. Both are thin renderers over one framework-free engine, including the keyboard contract. The Angular test suite mirrors the React one assertion for assertion against the same fixture.

Does it virtualize large lists?

Not yet. The snapshot pipeline is built so a virtualizer can consume a windowed slice without restructuring anything, but no windowing ships today.

Can I show an avatar for the owner?

Yes — avatarColumn is built in, and covers avatar-only (with the name on hover), name-only, both, and a photo URL. See avatars.

Are the header and root-breadcrumb labels fixed?

No. title sets the heading, rootLabel names the root breadcrumb, and both are ordinary props — omit title and no header text is rendered at all.

Why is the Size column not right-aligned?

Because every column is left-aligned by default, so the table is consistent unless you say otherwise. Alignment is explicit — columnAlign for all of them, align on a single column to override. { key: 'size', align: 'right' } gives you the file-manager look. See alignment.

Can I set each column's width?

Yes. width on a ColumnDef takes any CSS grid track — '120px', 'minmax(0, 1fr)', '20%'. That is the starting width; maxWidth caps how far it can then be dragged, minWidth floors it, and resizable: false pins it entirely. See sorting and columns.

Why does a photo avatar still show the name?

Because display and image are independent settings. image decides whether the avatar is a photo or generated initials; display decides how much of the person to show. A photo therefore appears beside the name until you also ask for avatar-only:

avatarColumn({ key: 'metadata.owner', image: 'metadata.pic', display: 'avatar' })

That gives a photo on its own, with the name on hover and in screen-reader text — exactly like the initials-only mode, just with a picture. The full matrix is in avatars.

The status colours — can I change them?

All of them. badgeColumn ships conventional tones so approved is green out of the box, and tones overrides any value or takes the decision entirely. The colours themselves are --de-tone-* tokens. See badges.

A long name overflows its column — can I make it truncate?

It already does: .de-avatar-label truncates with an ellipsis, and the full value is available on hover. Give the column a maxWidth to stop it being dragged wider than you want, or a minWidth to stop it being crushed.

Can I use it without React or Angular?

Yes. @document-explorer/core is framework-free with zero runtime dependencies — see the core API.

Does it work with server-side rendering?

Yes. The React package guards its layout effects, and the Angular component is signal-driven and zoneless-ready.

How do I change the colours?

Override the --de-* custom properties. See Theming.

Why is my dark mode not applying?

Most often because the light token block has been redeclared on a selector inside the explorer, which overrides the dark ancestor. Override individual tokens rather than re-importing the base block. See Theming.