Build Assets
UI Component
Documents Table
A data-table preset for stored files: type icon + name, type, size, uploader/date, status, and row actions.
Platform: bothTags: table, documents, files, list, data-display
Purpose
Present a list of stored documents with the columns people expect for files: a type icon + name, extension, human-readable size, who uploaded it and when, a status, and per-row actions (download, more). A specialization of the generic data table, not a new pattern.
Anatomy
- Columns: Name (type icon + filename), Type, Size, Uploaded (date + by), Status, Actions
- Status: icon + label (Ready / Processing / Uploading / Failed)
- Row actions: download and a more-actions menu
- Header with title + count; empty and loading states
States
- Loading: skeleton rows
- Empty: blank state ("Uploaded files will appear here")
- Per row: status shown as icon + text + color
Do
- Show file type with an icon so rows are scannable
- Format sizes for humans (2.4 MB, not 2516582 bytes)
- Convey status with an icon + label, never color alone
- Give row actions descriptive labels ("Download Loan-agreement.pdf")
Don't
- Rely on a colored dot alone for status
- Show raw byte counts or ISO timestamps without formatting
- Make the whole row a single ambiguous click target when it also has actions
- Hide failure reasons for documents that didn't process
Accessibility
- Status uses icon + label, not color alone (WCAG 1.4.1)
- Action buttons have descriptive aria-labels and stop row-click propagation
- Table has a caption for screen readers