forked from mengyxu/noob-components
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
1.6 KiB
33 lines
1.6 KiB
3 months ago
|
# 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
|