Replace direct row rendering with @tanstack/vue-virtual. The table
now only renders visible rows (~20) via padding <tr> placeholders,
eliminating the rendering bottleneck when displaying 100+ rows with
heavy cell components.
Key changes:
- DataTable.vue: integrate useVirtualizer (always-on), virtual row
template with measureElement for variable row heights, defineExpose
virtualizer/sortedData for external access, overflow-y/flex CSS
- useSwipeSelect.ts: dual-mode support via optional
SwipeSelectVirtualContext — data-driven row index lookup and
selection range when virtualizer is present, original DOM-based
path preserved for callers that don't pass virtualContext
Show a semi-transparent blue rectangle overlay while dragging to
select rows, matching the project's primary color theme with dark
mode support. The box spans the full table width from drag start
to current mouse position.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
