Document
DocumentList
Table-based document listing with selectable rows and per-row actions.
Document
The Document category provides a complete file management system — from drag-and-drop upload through grid/list browsing to in-browser preview. Components are composable: use XADocumentManager for a turnkey solution or assemble individual pieces for custom layouts.
Components
<XADocumentList />
Table-based document listing with sortable columns (name, size, date), inline preview/download buttons, and a per-row dropdown for rename/delete actions.
<XADocumentList
:documents="files"
:loading="isLoading"
:selectable="true"
v-model:selected="selectedIds"
:previewable="true"
:downloadable="true"
:renamable="true"
:deletable="true"
@preview="openPreview"
@download="downloadFile"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
documents | Array | required | Array of document objects |
loading | Boolean | false | Show loading skeleton |
selectable | Boolean | false | Enable multi-select checkboxes |
selected | Array | [] | Selected document IDs (v-model:selected) |
previewable | Boolean | true | Show preview button |
downloadable | Boolean | true | Show download button |
renamable | Boolean | true | Show rename action |
deletable | Boolean | true | Show delete action |
emptyIcon | String | 'i-lucide-files' | Empty state icon |
emptyTitle | String | 'No documents' | Empty state title |
emptyDescription | String | 'Upload files to get started.' | Empty state description |
Emits
click, preview, download, rename, delete, update:selected
AI Context
component: XADocumentList
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Document
use-when: Displaying documents in a table/list layout with sortable columns and per-row actions. Use when a grid card view is not preferred or when a denser tabular layout is needed.
document-object-shape: "{ id, name, size, type, url, thumbnailUrl?, createdAt?, uploadedAt? }"