Interactive Organisms
ImportCC
Available via @stackmates/ui-interactive/organisms
DataTable
Full-featured data table with TanStack Table. Sorting, pagination, row selection, bulk actions.
| Task | Status | Priority | Due Date | |
|---|---|---|---|---|
| Follow up on Acme proposal | not started | high | 1/21/2026 | |
| Prepare demo for TechStart | in progress | urgent | 1/22/2026 | |
| Schedule intro call with Global Ventures | not started | medium | 1/25/2026 |
Rows per page
Page 1 of 2
DataTableProps
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | TData[] | — | Array of row data |
| columns* | ColumnDef<TData>[] | — | TanStack Table column definitions |
| getRowId | (row: TData) => string | — | Row ID accessor |
| enableSorting | boolean | false | Enable column sorting |
| enablePagination | boolean | false | Enable pagination controls |
| enableRowSelection | boolean | false | Enable row selection checkboxes |
Installation
typescript
import { DataTable } from '@stackmates/ui-interactive/organisms';Accessibility
- Table uses <table> semantics
- Sort controls keyboard accessible
- Row selection uses checkbox pattern
Related:
CRUDTable
DataTable with built-in CRUD actions and confirmation dialogs.
| Name | Company | Status | Actions | |
|---|---|---|---|---|
| Sarah Chen | sarah.chen@acme.com | Acme Corp | Active | |
| Marcus Johnson | marcus@techstart.io | TechStart | Active | |
| Elena Rodriguez | elena@globalventures.com | Global Ventures | Active |
Showing 1 to 3 of 4 results
Rows per page
Page 1 of 2
CRUDTableProps
| Prop | Type | Default | Description |
|---|---|---|---|
| entityName | string | — | Entity name for UI labels |
| onView | (row: TData) => void | — | View action handler |
| onEdit | (row: TData) => void | — | Edit action handler |
| onDelete | (row: TData) => Promise<void> | — | Delete action handler |
| onCreateNew | () => void | — | Create new handler |
| onBulkDelete | (rows: TData[]) => Promise<void> | — | Bulk delete handler |
Installation
typescript
import { CRUDTable } from '@stackmates/ui-interactive/organisms';Accessibility
- Action buttons labeled with entity name
- Delete uses AlertDialog
- Bulk actions toolbar on selection
Related:
MessageThread
Scrollable message list with auto-scroll and loading states.
Analyze our sales pipeline.
OR
Orchestrator
I'll analyze using the optimal-stopping algorithm and SPCL scoring.
Run the sales-rfp workflow for Acme.
MessageThreadProps
| Prop | Type | Default | Description |
|---|---|---|---|
| messages* | MessageRowData[] | — | Array of messages to display |
| isLoading | boolean | false | Show typing indicator |
| className | string | — | Additional CSS classes |
Installation
typescript
import { MessageThread } from '@stackmates/ui-interactive/organisms';Accessibility
- Auto-scrolls to newest message
- Loading state shows TypingIndicator
Related:
ConversationPanel
Full conversation area: header + message thread + composer.
Orchestrator
Analyze our sales pipeline.
OR
Orchestrator
I'll analyze using the optimal-stopping algorithm and SPCL scoring.
Run the sales-rfp workflow for Acme.
ConversationPanelProps
| Prop | Type | Default | Description |
|---|---|---|---|
| messages* | MessageRowData[] | — | Array of messages |
| onSend* | (content: string) => void | — | Send message handler |
| isLoading | boolean | false | Loading state |
| headerTitle | string | — | Header title text |
| className | string | — | Additional CSS classes |
Installation
typescript
import { ConversationPanel } from '@stackmates/ui-interactive/organisms';Accessibility
- Header provides context
- Composer auto-resizes
- Enter submits, Shift+Enter newline
Related:
StageTimeline
Vertical timeline of workflow stages with connecting dots and cost summary.
Research & Discovery
Knowledge Architect
8.5s92%completed
Needs Analysis
Navigator
12.3s87%completed
Proposal Generation
Orchestrator
running
Quality Review
Knowledge Architect
pending
Total Cost
$0.12579,600in / 16,500out
StageTimelineProps
| Prop | Type | Default | Description |
|---|---|---|---|
| stages* | StageCardData[] | — | Array of workflow stages |
| totalCostUsd | number | — | Total cost for summary |
| totalTokens | { input: number; output: number } | — | Total token counts |
| className | string | — | Additional CSS classes |
Installation
typescript
import { StageTimeline } from '@stackmates/ui-interactive/organisms';Accessibility
- Semantic list structure
- Stage status via icon + text, not color alone
Related: