docs: fix DataTable repro links

apps/www/.vitepress/theme/components/CodeSandbox.vue

@@ -10,12 +10,20 @@ const props = defineProps<{
   name: string
   code: string
   style: Style
+  extraFiles?: string[]
 }>()
 
 const sources = ref<Record<string, string>>({})
 
 onMounted(() => {
   sources.value['App.vue'] = props.code
+  if (props.extraFiles) {
+    props.extraFiles.forEach((file) => {
+      import(`../../../src/lib/registry/${props.style}/example/${file}.vue?raw`).then((module) => {
+        sources.value[`${file}.vue`] = module.default
+      })
+    })
+  }
 })
 </script>
 

apps/www/.vitepress/theme/components/ComponentPreview.vue

@@ -12,6 +12,7 @@ const props = withDefaults(defineProps<{
   align?: 'center' | 'start' | 'end'
   sfcTsCode?: string
   sfcTsHtml?: string
+  extraFiles?: string[]
 }>(), { align: 'center' })
 
 const { style } = useConfigStore()
@@ -43,8 +44,8 @@ const { style } = useConfigStore()
           <StyleSwitcher />
 
           <div class="flex items-center gap-x-1">
-            <Stackblitz :key="style" :style="style" :name="name" :code="decodeURIComponent(sfcTsCode ?? '')" />
+            <Stackblitz :key="style" :extra-files="extraFiles" :style="style" :name="name" :code="decodeURIComponent(sfcTsCode ?? '')" />
-            <CodeSandbox :key="style" :style="style" :name="name" :code="decodeURIComponent(sfcTsCode ?? '')" />
+            <CodeSandbox :key="style" :extra-files="extraFiles" :style="style" :name="name" :code="decodeURIComponent(sfcTsCode ?? '')" />
           </div>
         </div>
         <div

apps/www/.vitepress/theme/components/Stackblitz.vue

@@ -10,12 +10,20 @@ const props = defineProps<{
   name: string
   code: string
   style: Style
+  extraFiles?: string[]
 }>()
 
 const sources = ref<Record<string, string>>({})
 
 onMounted(() => {
   sources.value['App.vue'] = props.code
+  if (props.extraFiles) {
+    props.extraFiles.forEach((file) => {
+      import(`../../../src/lib/registry/${props.style}/example/${file}.vue?raw`).then((module) => {
+        sources.value[`${file}.vue`] = module.default
+      })
+    })
+  }
 })
 
 function handleClick() {

apps/www/.vitepress/theme/utils/codeeditor.ts

@@ -75,8 +75,10 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
     },
   }
 
+  const isDataTableDemo = componentName.includes('DataTable')
   const iconPackage = style === 'default' ? 'lucide-vue-next' : '@radix-icons/vue'
   const dependencies = {
+    '@vueuse/core': 'latest',
     'vue': 'latest',
     'radix-vue': deps['radix-vue'],
     '@radix-ui/colors': 'latest',
@@ -88,6 +90,8 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
     'shadcn-vue': 'latest',
     'typescript': 'latest',
   }
+  if (isDataTableDemo)
+    dependencies['@tanstack/vue-table'] = 'latest'
 
   const devDependencies = {
     'vite': 'latest',
@@ -98,6 +102,29 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
     'autoprefixer': 'latest',
   }
 
+  const baseUtilsString = `import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import { camelize, getCurrentInstance, toHandlerKey } from 'vue'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))`
+
+  const baseUtilsStringWithUpdater = `import type { Updater } from '@tanstack/vue-table'
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import { type Ref, camelize, getCurrentInstance, toHandlerKey } from 'vue'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
+  ref.value
+    = typeof updaterOrValue === 'function'
+      ? updaterOrValue(ref.value)
+      : updaterOrValue
+}`
+
   const transformImportPath = (code: string) => {
     let parsed = code
     parsed = parsed.replaceAll(`@/lib/registry/${style}`, '@/components')
@@ -159,13 +186,7 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
     },
     'src/utils.ts': {
       isBinary: false,
-      content: `import { type ClassValue, clsx } from 'clsx'
+      content: isDataTableDemo ? baseUtilsStringWithUpdater : baseUtilsString,
-import { twMerge } from 'tailwind-merge'
-import { camelize, getCurrentInstance, toHandlerKey } from 'vue'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}`,
     },
     'src/assets/index.css': {
       content: cssRaw,

apps/www/src/content/docs/components/data-table.md

@@ -4,7 +4,7 @@ description: Powerful table and datagrids built using TanStack Table.
 ---
 
 
-<ComponentPreview name="DataTableDemo"  /> 
+<ComponentPreview name="DataTableDemo" :extra-files='["DataTableDemoColumn"]' /> 
 
 ## Introduction
 
@@ -20,4 +20,4 @@ We'll start with the basic `<Table />` component and build a complex data table
 
 **Tip:** If you find yourself using the same table in multiple places in your app, you can always extract it into a reusable component.
 
-</Callout>
+</Callout>