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>
- 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>
- MiniCellRenderer now mirrors the real cellRenderer logic (slots, TzDateTime, dicts)
- Removed useless hard-coded nth-child flex selectors
- Each mini-cell now uses inline styles via getMiniCellStyle() to match real column widths
- Update DEV_MODE_TS timestamp
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace window resize listener with ResizeObserver on .my-table container
- Mini table now uses 3-5 sample rows with pure flex layout
- No flickering during resize/scroll since ResizeObserver only fires on actual size changes
- Remove window resize event listener entirely
- Update DEV_MODE_TS timestamp
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add debounced window resize listener that re-measures probe row height
- Only active in dynamic height mode (when rowHeight is not explicitly set)
- Cleanup properly on component unmount
- Update DEV_MODE_TS timestamp
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add height="0" to el-table and CSS flex layout to prevent overflow
- Add overflow:hidden and explicit height constraints to .root-container and .app-main
- Move inline style bindings to scoped CSS with v-bind()
- Bind height/maxHeight props to .list-table container style for configurability
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
