DOM Studio
Vue Data Components
11 components · 9 workflowsReusable components for presenting and manipulating application-owned records, files, documents, schedules, and conversations.
Explore
Data components at a glance
Each preview shows the component's core interaction model. Open a card for live examples, integration patterns, API contracts, and the full component reference.
Data grid
DomDataGridPresents database-style resource rows with typed columns, filters, sorting, selection, pagination, and optional virtual rendering.
Filter bar
DomFilterBarBuilds a controlled, transport-free query from free-text search and logical filter definitions for any resource view or store.
Activity timeline
DomActivityTimelineProjects ordered application-owned rows into an accessible activity trail with logical field mappings, semantic status, and customizable slots.
Kanban
DomKanbanProjects application-owned rows into ordered columns, with accessible card movement, custom renderers, and creation or persistence hooks.
Month calendar
DomMonthCalendarProjects dated records into aligned month grids and continuous ranges, with custom day content and drag-and-drop intent events.
Week planner
DomWeekPlannerPlaces timed records in fixed-width day lanes, with range selection, drag-and-drop helpers, and virtualized multi-week navigation.
Gantt
DomGanttPlans people, projects, and roadmaps on a horizontal timeline, with drag-to-plan, time zoom, and configurable working hours.
Media browser
DomMediaBrowserBrowses server-backed folders and files with selection, custom renderers, optimistic mutations, uploads, metadata, and picker workflows.
Document editor
DomDocumentEditorEdits structured application content with tables, code, AI suggestion review, managed media, video, and optional collaboration adapters.
Agent chat shell
DomAgentChatShellComposes a resizable conversation sidebar, active thread, and contextual tool pane into a complete AI workspace surface.
Agent conversation
DomAgentConversationRenders a scroll-contained AI thread with streaming messages, reasoning summaries, tool calls, audio or text modes, and a fixed composer.
Agent conversation list
DomAgentConversationListProvides searchable AI conversation navigation with agent labels, unread counts, status pills, and active-thread selection.
Overview
Where data components fit
Data components sit between local interface primitives and complete application blocks. They provide reusable query controls, views, and workflow shells for collections of application-owned data: resource rows, activity events, ordered boards, dated records, folders and files, structured documents, and AI conversations.
The components do not replace an application's data layer. They accept records and controlled state, then emit changes and user intent. The application decides how to load, authorize, validate, and persist those changes. The docs pair them with server-shaped examples so loading, empty, error, mutation, pagination, and refresh behaviour can be evaluated in realistic flows.
Boundaries