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