diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 521c19d32..5f073fb65 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -305,11 +305,17 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
 }
 </script>
 <template>
-    <VnTableFilter
+    <QDrawer
         v-if="$props.rightSearch"
-        :data-key="$attrs['data-key']"
-        :columns="columns"
-    />
+        v-model="stateStore.rightDrawer"
+        side="right"
+        :width="256"
+        show-if-above
+    >
+        <QScrollArea class="fit">
+            <VnTableFilter :data-key="$attrs['data-key']" :columns="columns" />
+        </QScrollArea>
+    </QDrawer>
     <CrudModel
         v-bind="$attrs"
         :class="$attrs['class'] ?? 'q-px-md'"