noob-components/.trellis/tasks/archive/2026-03/03-26-list-table-v2-mini-table/prd.md

list-table-v2 Hidden Mini Table for Row Height

Goal

Replace the current probe row approach with a hidden mini table that uses flex boxes (not el-table-v2) to measure row height without causing visual flickering during resize/scroll.

Requirements

1. Render a hidden container with 3-5 sample rows using pure flex boxes
2. Width must respond to viewport changes (use container queries or width percentage)
3. Row height from mini table used as estimatedRowHeight for el-table-v2
4. No window resize event listeners - use container-based sizing
5. No visual flickering during resize or scroll

Approach

Instead of using a single hidden probe row that gets measured repeatedly on resize:

• Create a mini hidden div that mimics the table's cell layout
• The mini table's width is tied to its container (no explicit resize listener needed)
• CSS-based layout that automatically reflows with container width
• Use ResizeObserver ONLY on the mini table container (not window)

Technical Notes

• Use display: flex; flex-direction: column; for row structure
• Each "row" is a flex container with same padding/styling as actual table cells
• Use container-type: inline-size CSS for container queries (or simple width: 100%)
• ResizeObserver on the mini table wrapper to detect width changes
• Only re-measure when width actually changes (debounced)

Acceptance Criteria

• No flickering when resizing window
• No flickering when scrolling
• Row height updates correctly when container width changes (column flex distribution changes)
• Hidden mini table doesn't affect layout or cause scrollbar issues
• Build passes without errors