diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 85383e9a..4456e1c1 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -521,6 +521,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/DataTableDemoColumn.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DataTableDemoColumn.vue"],
     },
+    "DataTableReactiveDemo": {
+      name: "DataTableReactiveDemo",
+      type: "components:example",
+      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      component: () => import("../src/lib/registry/default/example/DataTableReactiveDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/DataTableReactiveDemo.vue"],
+    },
     "DatePickerDemo": {
       name: "DatePickerDemo",
       type: "components:example",
@@ -2006,6 +2013,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/DataTableDemoColumn.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DataTableDemoColumn.vue"],
     },
+    "DataTableReactiveDemo": {
+      name: "DataTableReactiveDemo",
+      type: "components:example",
+      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
+      component: () => import("../src/lib/registry/new-york/example/DataTableReactiveDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/DataTableReactiveDemo.vue"],
+    },
     "DatePickerDemo": {
       name: "DatePickerDemo",
       type: "components:example",
diff --git a/apps/www/src/public/registry/styles/default/select.json b/apps/www/src/public/registry/styles/default/select.json
index d4d4ca10..07330a42 100644
--- a/apps/www/src/public/registry/styles/default/select.json
+++ b/apps/www/src/public/registry/styles/default/select.json
@@ -43,7 +43,7 @@
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/select.json b/apps/www/src/public/registry/styles/new-york/select.json
index da8076e4..839aca6d 100644
--- a/apps/www/src/public/registry/styles/new-york/select.json
+++ b/apps/www/src/public/registry/styles/new-york/select.json
@@ -43,7 +43,7 @@
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",