diff --git a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
index d961859d..0fb0f9e9 100644
--- a/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
+++ b/packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue
@@ -71,94 +71,108 @@ function toggleDurationSortType() {
 </script>
 
 <template>
-  <table w-full border-separate border-spacing-0>
-    <thead border="b base">
-      <tr px2 class="[&_th]:(sticky top-0 z10 border-b border-base)">
-        <th v-if="selectedFields.includes('hookName')" bg-base w32 ws-nowrap p1 text-center font-600>
-          Hook name
-        </th>
-        <th v-if="selectedFields.includes('module')" bg-base min-w100 ws-nowrap p1 text-left font-600>
-          <button flex="~ row gap1 items-center" w-full>
-            Module
-            <VMenu>
-              <span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
-                <i text-xs class="i-carbon-filter" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op50'" />
-              </span>
-              <template #popper>
-                <div class="p2" flex="~ col gap2">
-                  <label
-                    v-for="rule of searchFilterTypes"
-                    :key="rule.name"
-                    border="~ base rounded-md" px2 py1
-                    flex="~ items-center gap-1"
-                    select-none
-                    :title="rule.description"
-                    class="cursor-pointer module-type-filter"
-                  >
-                    <input
-                      type="checkbox"
-                      mr1
-                      :checked="filterModuleTypes?.includes(rule.name)"
-                      @change="toggleModuleType(rule)"
-                    >
-                    <div :class="rule.icon" icon-catppuccin />
-                    <div text-sm>{{ rule.description || rule.name }}</div>
-                  </label>
-                </div>
-              </template>
-            </VMenu>
-          </button>
-        </th>
-        <th v-if="selectedFields.includes('startTime')" rounded-tr-2 bg-base ws-nowrap p1 text-center font-600>
-          Start Time
-        </th>
-        <th v-if="selectedFields.includes('endTime')" rounded-tr-2 bg-base ws-nowrap p1 text-center font-600>
-          End Time
-        </th>
-        <th v-if="selectedFields.includes('duration')" rounded-tr-2 bg-base ws-nowrap p1 text-center font-600>
-          <button flex="~ row gap1 items-center justify-center" w-full @click="toggleDurationSortType">
-            Duration
+  <div role="table" w-full>
+    <div role="row" class="sticky top-0 z10 border-b border-base" flex="~ row">
+      <div v-if="selectedFields.includes('hookName')" role="columnheader" bg-base flex-none w32 ws-nowrap p1 text-center font-600>
+        Hook name
+      </div>
+      <div v-if="selectedFields.includes('module')" role="columnheader" bg-base flex-1 min-w100 ws-nowrap p1 text-left font-600>
+        <button flex="~ row gap1 items-center" w-full>
+          Module
+          <VMenu>
             <span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
-              <i text-xs :class="[durationSortType !== 'asc' ? 'i-carbon-arrow-down' : 'i-carbon-arrow-up', durationSortType ? 'op100 text-primary' : 'op50']" />
+              <i text-xs class="i-carbon-filter" :class="filterModuleTypes.length !== searchFilterTypes.length ? 'text-primary op100' : 'op50'" />
             </span>
-          </button>
-        </th>
-      </tr>
-    </thead>
-    <tbody v-if="filtered.length">
-      <tr v-for="(item, index) in filtered" :key="item.id" class="[&_td]:(border-base border-b-1 border-dashed)" :class="[index === filtered.length - 1 ? '[&_td]:(border-b-0)' : '']">
-        <td v-if="selectedFields.includes('hookName')" w32 ws-nowrap text-center text-sm op80>
-          {{ HOOK_NAME_MAP[item.type] }}
-        </td>
-        <td v-if="selectedFields.includes('module')" min-w100 text-left text-ellipsis line-clamp-2>
-          <DisplayModuleId
-            :id="item.module"
-            w-full border-none
-            :session="session"
-            :link="`/session/${session.id}/graph?module=${item.module}`"
-            hover="bg-active"
-            border="~ base rounded" block px2 py1
-          />
-        </td>
-        <td v-if="selectedFields.includes('startTime')" text-center font-mono text-sm min-w52 op80>
-          <time v-if="item.timestamp_start" :datetime="new Date(item.timestamp_start).toISOString()">{{ normalizeTimestamp(item.timestamp_start) }}</time>
-        </td>
-        <td v-if="selectedFields.includes('endTime')" text-center font-mono text-sm min-w52 op80>
-          <time v-if="item.timestamp_end" :datetime="new Date(item.timestamp_end).toISOString()">{{ normalizeTimestamp(item.timestamp_end) }}</time>
-        </td>
-        <td v-if="selectedFields.includes('duration')" text-center text-sm>
-          <DisplayDuration :duration="item.duration" />
-        </td>
-      </tr>
-    </tbody>
-    <tbody v-else>
-      <tr>
-        <td :colspan="selectedFields.length" p4>
-          <div w-full h-48 flex="~ items-center justify-center" op50 italic>
-            No data
+            <template #popper>
+              <div class="p2" flex="~ col gap2">
+                <label
+                  v-for="rule of searchFilterTypes"
+                  :key="rule.name"
+                  border="~ base rounded-md" px2 py1
+                  flex="~ items-center gap-1"
+                  select-none
+                  :title="rule.description"
+                  class="cursor-pointer module-type-filter"
+                >
+                  <input
+                    type="checkbox"
+                    mr1
+                    :checked="filterModuleTypes?.includes(rule.name)"
+                    @change="toggleModuleType(rule)"
+                  >
+                  <div :class="rule.icon" icon-catppuccin />
+                  <div text-sm>{{ rule.description || rule.name }}</div>
+                </label>
+              </div>
+            </template>
+          </VMenu>
+        </button>
+      </div>
+      <div v-if="selectedFields.includes('startTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
+        Start Time
+      </div>
+      <div v-if="selectedFields.includes('endTime')" role="columnheader" rounded-tr-2 bg-base flex-none min-w52 ws-nowrap p1 text-center font-600>
+        End Time
+      </div>
+      <div v-if="selectedFields.includes('duration')" role="columnheader" rounded-tr-2 bg-base flex-none ws-nowrap p1 text-center font-600 w-27>
+        <button flex="~ row gap1 items-center justify-center" w-full @click="toggleDurationSortType">
+          Duration
+          <span w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center">
+            <i text-xs :class="[durationSortType !== 'asc' ? 'i-carbon-arrow-down' : 'i-carbon-arrow-up', durationSortType ? 'op100 text-primary' : 'op50']" />
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <DataVirtualList
+      v-if="filtered.length && selectedFields.length"
+      role="rowgroup"
+      :items="filtered"
+      key-prop="id"
+    >
+      <template #default="{ item, index }">
+        <div
+          role="row"
+          flex="~ row"
+          class="border-base border-b-1 border-dashed"
+          :class="[index === filtered.length - 1 ? 'border-b-0' : '']"
+        >
+          <div v-if="selectedFields.includes('hookName')" role="cell" flex="~ items-center justify-center" flex-none w32 ws-nowrap text-sm op80>
+            {{ HOOK_NAME_MAP[item.type] }}
+          </div>
+          <div v-if="selectedFields.includes('module')" role="cell" flex-1 min-w100 text-left text-ellipsis line-clamp-2>
+            <DisplayModuleId
+              :id="item.module"
+              w-full border-none
+              :session="session"
+              :link="`/session/${session.id}/graph?module=${item.module}`"
+              hover="bg-active"
+              border="~ base rounded" block px2 py1
+            />
           </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+          <div v-if="selectedFields.includes('startTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
+            <time v-if="item.timestamp_start" :datetime="new Date(item.timestamp_start).toISOString()">{{ normalizeTimestamp(item.timestamp_start) }}</time>
+          </div>
+          <div v-if="selectedFields.includes('endTime')" role="cell" flex="~ items-center justify-center" flex-none text-center font-mono text-sm min-w52 op80>
+            <time v-if="item.timestamp_end" :datetime="new Date(item.timestamp_end).toISOString()">{{ normalizeTimestamp(item.timestamp_end) }}</time>
+          </div>
+          <div v-if="selectedFields.includes('duration')" role="cell" flex="~ items-center justify-center" flex-none text-center text-sm w-27>
+            <DisplayDuration :duration="item.duration" />
+          </div>
+        </div>
+      </template>
+    </DataVirtualList>
+    <div v-else>
+      <div p4>
+        <div w-full h-48 flex="~ items-center justify-center" op50 italic>
+          <p v-if="!selectedFields.length">
+            No columns selected
+          </p>
+          <p v-else>
+            No data
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>