noob-components/.trellis/tasks/archive/2026-03/03-28-table-v2-demo/prd.md

Rework table-v2.vue into Comprehensive Demo Page

Goal

Transform examples/view/base/table-v2.vue from a basic demo into a comprehensive, Element Plus-style documentation page that:

1. Demonstrates every feature/prop of list-table-v2
2. Doubles as automated tests verifying features work correctly and work together

What list-table-v2 Supports (Feature Inventory)

Props

Prop	Status	Notes
columns	✅	key, dataKey, name, i18n, type, width, minWidth, fixed, align, slot, dict, timestamp, filesize, cellRenderer, headerCellRenderer
data	✅	Array or page response {data, total}
page	✅	Pagination
border	✅	Table borders
row-key	✅	Row identifier
height / maxHeight	✅	Fixed/max height
rowHeight	✅	Fixed row height (disables probe)
estimatedRowHeight	✅	Manual estimate for dynamic height
headerHeight	✅	Manual header height
debug	✅	Shows estimated heights
example	✅	Pagination state {page, size}

Events

Event	Status	Notes
@query	✅	Pagination query
@row-click	✅	Row click
@cell-click	✅	Cell click
@selection-change	✅	(interface exists)

Slots

Slot	Status	Notes
slots[columnKey]	✅	Custom cell content per column
#default	✅	SearchRow content

Custom Renderers

Renderer	Status	Notes
cellRenderer	✅	Per-column JSX function
headerCellRenderer	✅	Per-column JSX function

Auto-probe (Dynamic Height)

Feature	Status	Notes
Mini-table probe	✅	Measures actual row height
Header height probe	✅	Measures actual header height
ResizeObserver	✅	Debounced container resize
queueMicrotask	✅	Eliminates flicker

Demo Sections (Patterned after Element Plus table-v2 docs)

Each section is self-contained with:

• Clear section title and description
• Interactive demo
• Feature validation (pass/fail indicators)
• Code reference

Section 1: Basic Usage

• Data binding (array and page response)
• Column definition (key, name, i18n, dataKey)
• Pagination
• Row click and cell click events

Section 2: Styling

• Borders (border prop)
• Column alignment (align: left/center/right)
• Column width distribution (width, minWidth, flexGrow)

Section 3: Fixed Columns

• Fixed left column (fixed: "left")
• Fixed right column (fixed: "right")
• Multiple fixed columns

Section 4: Data Formatting

• Timestamp formatting (timestamp: "unix")
• Dictionary lookup (dict: "key")
• File size formatting (filesize: true)
• Custom formatting function

Section 5: Custom Cell Renderer

• Simple text custom cell
• Rich content (tags, badges)
• Interactive content (buttons in cells)
• Custom cellRenderer function per column
• Mini-table synchronization test (CRITICAL: custom renderer must render in probe row)

Section 6: Custom Header Renderer

• Simple text header
• Rich header (with icons)
• Custom headerCellRenderer function per column
• Mini-table header synchronization test (CRITICAL)

Section 7: Dynamic Height

• Auto-probe mode (no rowHeight set)
• Manual estimate mode (estimatedRowHeight)
• Fixed height mode (rowHeight set)
• Debug info display

Section 8: Pagination

• Server-side pagination with @query
• Page size options
• Total count display

Section 9: Slot-based Custom Cells

• slot: true per column
• Parent slot content rendering via renderSlot

Section 10: Combined Features Test

• All features working together
• Edge case: custom renderer + fixed columns
• Edge case: custom renderer + pagination
• Edge case: custom renderer + dynamic height probe

Architecture

File Structure

examples/view/base/table-v2.vue   # Main demo page

Demo Organization Strategy

Use a tabbed or sectioned layout within a single page:

• Left sidebar with section navigation
• Main content area with active demo
• Each section is self-contained

Data Strategy

• Generate realistic mock data (100 rows)
• Each demo section can override columns/data as needed
• Shared data generator utility within the file

Test/Validation Strategy

Each demo section includes:

1. Visual demo of the feature
2. debug prop enabled to show internal state
3. Event handlers that log to console AND display on-page
4. Explicit "Test" buttons to trigger edge cases
5. Pass/fail indicators where possible (e.g., "Did resize observer fire?")

Technical Notes

Dependencies

• lorem-ipsum (already used for data generation)
• element-plus components used: el-tabs, el-tab-pane, el-link, el-tag, el-button
• noob-mengyxu components: ListTableV2, SearchRow, NoobInput, NoobSelect

Constraints

• Must work with existing ListTableV2 API (no code changes to the component)
• Must build successfully with bun run build
• Demo page should be readable and navigable

Acceptance Criteria

• Page loads with 10+ demo sections
• Each feature of list-table-v2 is demonstrated
• Custom cellRenderer works and syncs with mini-table probe
• Custom headerCellRenderer works and syncs with mini-table probe
• Dynamic height auto-probe works correctly
• Fixed columns work correctly
• Pagination works correctly
• All formatting features work (timestamp, dict, filesize)
• Page builds without errors
• Console has no errors during demo interaction