init

pages/index.vue

@@ -16,7 +16,6 @@
       class="table-wrapper"
     >
       <div :style="{ height: `${totalSize}px` }">
-        <!-- Even though we're still using sematic table tags, we must use CSS grid and flexbox for dynamic row heights -->
         <table>
           <thead>
             <tr
@@ -49,9 +48,9 @@
           <tbody :style="{ height: `${totalSize}px` }">
             <tr
               v-for="vRow in virtualRows"
-              :ref="measureElement /*measure dynamic row height*/"
+              :ref="measureElement"
               :key="rows[vRow?.index]?.id"
-              :data-index=" vRow?.index /* needed for dynamic row height measurement*/ "
+              :data-index=" vRow?.index"
               :style="{ transform: `translateY(${vRow?.start}px)` }"
             >
               <td
@@ -188,14 +187,13 @@ const table = useVueTable({
   getSortedRowModel: getSortedRowModel(),
 })
 
-// The virtualizer needs to know the scrollable container element
 const rows = computed(() => table?.getRowModel()?.rows)
 const tableContainerRef = ref<HTMLDivElement | null>(null)
 
 const rowVirtualizerOptions = computed(() => {
   return {
     count: rows.value.length,
-    estimateSize: () => 50, // estimate row height for accurate scrollbar dragging
+    estimateSize: () => 50,
     getScrollElement: () => tableContainerRef.value,
     overscan: 5,
   }
@@ -215,7 +213,6 @@ function measureElement(el?: Element) {
 
   return undefined
 }
-// virtualizer end
 
 function openPost(post: Post) {
   selectedUser.value = users?.value?.find(user => user?.id === post?.userId)
@@ -228,8 +225,6 @@ function truncate(text: string, max = 15) {
 </script>
 
 <style lang="scss">
-@use '~/assets/scss/utils' as *;
-
 .index-page {
   display: flex;
   flex-direction: column;