Add common mistakes section for:
- Vue 3 refs nested in objects not auto-unwrapped in templates
- Virtual scrolling overscan behavior with small datasets
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Observe miniTableRef instead of container to detect actual height changes
- Track height changes and skip re-probing when height unchanged
- Add IntersectionObserver to detach ResizeObserver for off-screen tables
- Add display:none (via .is-hidden class) for off-screen mini-tables
- Re-attach and remeasure when table becomes visible
Performance improvements:
- Window resize is now smooth with 14 tables on demo page
- Off-screen tables have no ResizeObserver overhead
- Mini-tables are fully removed from layout when off-screen
Also:
- Add oxlint as linting tool (replaces vue-cli-service lint)
- Add oxlintrc.json configuration
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Transform table-v2.vue into a detailed demo page demonstrating all
list-table-v2 features with 14 sections covering:
- Basic usage with pagination and events
- Styling (borders, alignment)
- Fixed columns (left/right)
- Data formatting (timestamp, filesize, dict)
- Custom cellRenderer with JSX
- Custom headerCellRenderer
- Dynamic height auto-probe
- Fixed height mode
- Column width distribution
- Height/maxHeight/headerHeight controls
- Slot-based custom cells
- i18n support
- Combined features stress test
- Renderer edge cases with pagination
Also fix .app-main overflow to enable page scrolling for demo.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Refactor mini-table to use useTemplateRef for better Vue 3 compatibility
- Add conditional wrapper for mini-table rows container
- Add debug info display for row/header height estimation
- Fix md5 import to use named export in router
- Fix loading state bug in getUser callback
- Add @types/js-md5 dev dependency
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add cellRenderer and headerCellRenderer to ListTableColumn interface
- Use functional components (MiniTableCell, MiniTableHeader) to render VNodes properly in mini-table
- Add ts-pattern dependency for type-safe pattern matching
- Fix mini-table CSS to match el-table-v2 cell rendering for accurate height measurement:
- Add font-size: var(--el-font-size-base)
- Change flex-direction to row, align-items to center
- Add padding: 4px to mini-cell
- Add justify-content: center to mini-header-cell
- Document Vue 3 template VNode rendering pattern in quality-guidelines
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Fix call site bug where renamed function handleResize wasn't called
- Use queueMicrotask to clear and set estimatedRowHeight in same microtask
- This minimizes the gap where el-table-v2 uses default row height
- Also update shouldUseProbeRow to check estimatedRowHeight prop
- Add cell-text CSS for proper overflow handling in mini table
- Document queueMicrotask pattern and build commands in spec guides
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add lorem ipsum test data for better visual testing
- Update quality guidelines with el-table-v2 insights
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove ellipsis/truncate from mini-header-content
- Allow text wrapping with word-break: break-word
- Allow header cells to expand vertically with align-self: stretch
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Mini table now includes a header row that mirrors real table headers
- Header height is measured from mini table when prop.headerHeight is not set
- resolvedHeaderHeight computed falls back to measured header height
- Both row and header heights measured via ResizeObserver on container
- Update DEV_MODE_TS timestamp
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Extract cell rendering logic into shared renderCellContent function
- Both real table's cellRenderer and mini table now use the same function
- Eliminates code duplication and ensures consistent rendering
- Update DEV_MODE_TS timestamp
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
