forked from mengyxu/noob-components
2 changed files with 76 additions and 0 deletions
@ -0,0 +1,32 @@
@@ -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 @@
@@ -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