Interactive Organisms

ImportCC

Available via @stackmates/ui-interactive/organisms

DataTable

Full-featured data table with TanStack Table. Supports sorting, pagination, row selection, and 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';

Usage

Basic with sorting and pagination

tsx

<DataTable
  data={tasks}
  columns={columns}
  getRowId={(row) => row.id}
  enableSorting
  enablePagination
  enableRowSelection
/>

Accessibility

Table uses <table> semantics with proper headers
Sort controls keyboard accessible
Pagination announced to screen readers
Row selection uses checkbox pattern

CRUDTable ColumnHeader TablePagination

CRUDTable

DataTable with built-in CRUD actions (view, edit, delete) and confirmation dialogs. Extends all DataTable features.

Name	Email	Company	Status
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 (extends DataTableProps)

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';

Usage

With all CRUD actions

tsx

<CRUDTable
  data={contacts}
  columns={columns}
  entityName="contact"
  onView={handleView}
  onEdit={handleEdit}
  onDelete={handleDelete}
  onBulkDelete={handleBulkDelete}
  onCreateNew={handleCreate}
/>

Accessibility

Action buttons labeled with entity name
Delete confirmation dialog uses AlertDialog
Bulk actions toolbar appears on selection

DataTable RowActions

MessageThread

Scrollable message list with auto-scroll and loading states. Composes MessageRow + TypingIndicator.

Analyze our sales pipeline.

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
Messages use semantic list structure

ConversationPanel MessageRow TypingIndicator

ConversationPanel

Full conversation area: header + message thread + composer. Manages local input state internally.

Orchestrator

Analyze our sales pipeline.

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 title provides context for screen readers
Composer textarea auto-resizes
Enter submits, Shift+Enter newline

MessageThread MessageComposer

StageTimeline

Vertical timeline of workflow stages with connecting dots and cost summary. Composes StageCard + CostDisplay.

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

Timeline uses semantic list structure
Stage status conveyed via icon + text (not color alone)
Cost display uses formatted numbers

StageCard CostDisplay

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

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

Name

Company

Status

Sarah Chen

sarah.chen@acme.com

Acme Corp

Active

Marcus Johnson

marcus@techstart.io

TechStart

Active

Elena Rodriguez

elena@globalventures.com

Global Ventures

Active

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

<CRUDTable data={contacts} columns={columns} entityName="contact" onView={handleView} onEdit={handleEdit} onDelete={handleDelete} onBulkDelete={handleBulkDelete} onCreateNew={handleCreate} />

Prop

Type

Default

Description

messages*

MessageRowData[]

—

Array of messages to display

isLoading

boolean

false

Show typing indicator

className

string

—

Additional CSS classes

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

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