forked from mengyxu/noob-components
2 changed files with 76 additions and 0 deletions
@ -0,0 +1,32 @@ |
|||||||
|
# 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 |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
{ |
||||||
|
"id": "list-table-v2-mini-table", |
||||||
|
"name": "list-table-v2-mini-table", |
||||||
|
"title": "list-table-v2 hidden mini table for row height", |
||||||
|
"description": "", |
||||||
|
"status": "completed", |
||||||
|
"dev_type": null, |
||||||
|
"scope": null, |
||||||
|
"priority": "P2", |
||||||
|
"creator": "hechang27-sprt", |
||||||
|
"assignee": "hechang27-sprt", |
||||||
|
"createdAt": "2026-03-26", |
||||||
|
"completedAt": "2026-03-26", |
||||||
|
"branch": null, |
||||||
|
"base_branch": "dev", |
||||||
|
"worktree_path": null, |
||||||
|
"current_phase": 0, |
||||||
|
"next_action": [ |
||||||
|
{ |
||||||
|
"phase": 1, |
||||||
|
"action": "implement" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"phase": 2, |
||||||
|
"action": "check" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"phase": 3, |
||||||
|
"action": "finish" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"phase": 4, |
||||||
|
"action": "create-pr" |
||||||
|
} |
||||||
|
], |
||||||
|
"commit": null, |
||||||
|
"pr_url": null, |
||||||
|
"subtasks": [], |
||||||
|
"children": [], |
||||||
|
"parent": null, |
||||||
|
"relatedFiles": [], |
||||||
|
"notes": "", |
||||||
|
"meta": {} |
||||||
|
} |
||||||
Loading…
Reference in new issue