MongocampCollectionData

Paginated, filterable, sortable document table for a collection, with insert/edit/delete, and — for GridFS bucket collections — per-row download and bucket upload.

Usage

<template>
  <MongocampCollectionData collection-name="myCollection" />
</template>

Props

Prop	Type	Description
collectionName	string	Required. Collection to browse.

Columns

Columns are derived from the first fetched row's keys (_id first, metaData last, everything else A–Z).

Cell rendering

• date-time-looking values and MongoDB $date extended JSON → locale-formatted date string
• MongoDB $oid → monospaced ID string
• metaData objects (with created/updated fields) → structured created / updated / by rows
• Other scalar values longer than 60 characters are truncated with …; the full value is available via a hover tooltip
• All other objects and arrays → icon button ({} / list); click opens a modal with pretty-printed JSON

Filtering & sorting

• The search input is debounced (300ms) and built with useMongocampQuery's like/or helpers (col1:"*term*" OR col2:"*term*") across all string-typed columns — disabled until at least one such column exists.
• Column headers are clickable and trigger a server-side sort (field / -field) via documentApi.listDocumentsRaw.

Insert / Edit / Delete

• Insert / Edit — opens a form generated by @sfxcode/nuxt-ui-formkit's FUAutoForm, which infers a FormKit schema directly from the currently-loaded page of rows (unwrapped via useMongocampExtendedJson) — scalar fields, nested objects, and arrays (including arrays of objects, with FUAutoForm's own add/clone/delete row controls) all render as real inputs instead of raw JSON. _id is stripped from the samples/form data before they ever reach FUAutoForm, so it never appears as an editable field — it is not something a document's own value should drive. Saving rewraps the form data back through useMongocampExtendedJson, stamps metaData via useMongocampDocument's ensureMetaData, then calls documentApi.insert/documentApi.update (any _id still present is stripped again before sending, since MongoDB rejects updates to it). Editing preserves any document field the sampled schema never saw — documentApi.update is full-replace, so an unsampled field is carried over from the original row rather than dropped.
• Empty-collection fallback — if the currently-loaded page has zero rows, there's nothing to infer a schema from, so Insert falls back to a raw-JSON textarea modal instead (Edit never hits this path, since editing requires an existing row to have been loaded in the first place).
• Delete — confirmation modal, then documentApi._delete.

GridFS bucket collections

When collectionName ends in .files or .chunks (i.e. you're browsing a GridFS bucket), the toolbar and actions column change:

• The Insert (+) button is replaced with an Upload button — picks a file and uploads it to the underlying bucket via fileApi.insertFile.
• Each row gets a Download button that fetches the file (by _id on .files rows, by files_id on .chunks rows) and triggers a browser download using the real filename.

This logic is provided by useMongocampBucket — see that page for the bucket-naming convention and how file IDs are resolved from each row shape.

Related composables

• useMongocampCollection
• useMongocampBucket
• useMongocampQuery / useMongocampQueryBuilder — for building custom Lucene filters
• useMongocampExtendedJson — extended-JSON unwrap/rewrap that feeds FUAutoForm's Add/Edit modal
• useMongocampDocument — ensureMetaData stamps metaData on insert/update