{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "table",
  "title": "Table",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/table/Table.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\n// Match DataTable's density enum so consumers can opt into the same\n// runtime feel without wiring DataTable. `cozy` is the canonical default\n// for bare tables (cells: py-2, head: h-10); the other two are escape\n// hatches for high-density admin lists and roomy patient-facing views.\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  density?: 'compact' | 'cozy' | 'comfortable'\n}>()\n\nconst densityClass = computed(() => {\n  if (props.density === 'compact') return '[&_td]:py-1.5 [&_td]:text-xs [&_th]:h-8 [&_th]:text-xs'\n  if (props.density === 'comfortable') return '[&_td]:py-3 [&_th]:h-12'\n  // cozy is the new TableCell/TableHead baseline (py-2 / h-10) -- no override.\n  return ''\n})\n</script>\n\n<template>\n  <div\n    data-uipkge\n    data-slot=\"table-container\"\n    class=\"relative w-full overflow-auto\"\n  >\n    <table\n      data-uipkge\n      data-slot=\"table\"\n      :class=\"cn('w-full caption-bottom text-sm', densityClass, props.class)\"\n    >\n      <slot />\n    </table>\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/table/Table.vue"
    },
    {
      "path": "packages/registry-vue/components/table/TableBody.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tbody data-uipkge data-slot=\"table-body\" :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/table/TableBody.vue"
    },
    {
      "path": "packages/registry-vue/components/table/TableCaption.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <caption data-uipkge data-slot=\"table-caption\" :class=\"cn('text-muted-foreground mt-4 text-sm', props.class)\">\n    <slot />\n  </caption>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/table/TableCaption.vue"
    },
    {
      "path": "packages/registry-vue/components/table/TableCell.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <td\n    data-uipkge\n    data-slot=\"table-cell\"\n    :class=\"\n      cn(\n        'px-3 py-2 align-middle text-sm whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/table/TableCell.vue"
    },
    {
      "path": "packages/registry-vue/components/table/TableEmpty.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\nimport TableCell from './TableCell.vue'\nimport TableRow from './TableRow.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    class?: HTMLAttributes['class']\n    colspan?: number\n  }>(),\n  {\n    colspan: 1,\n  },\n)\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"cn('text-foreground p-4 align-middle text-sm whitespace-nowrap', props.class)\"\n      v-bind=\"delegatedProps\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/table/TableEmpty.vue"
    },
    {
      "path": "packages/registry-vue/components/table/TableFooter.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tfoot\n    data-uipkge\n    data-slot=\"table-footer\"\n    :class=\"cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)\"\n  >\n    <slot />\n  </tfoot>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/table/TableFooter.vue"
    },
    {
      "path": "packages/registry-vue/components/table/TableHead.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <th\n    data-uipkge\n    data-slot=\"table-head\"\n    :class=\"\n      cn(\n        'text-foreground h-10 px-3 text-left align-middle text-sm font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </th>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/table/TableHead.vue"
    },
    {
      "path": "packages/registry-vue/components/table/TableHeader.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <thead data-uipkge data-slot=\"table-header\" :class=\"cn('bg-muted/50 [&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/table/TableHeader.vue"
    },
    {
      "path": "packages/registry-vue/components/table/TableRow.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <tr\n    data-uipkge\n    data-slot=\"table-row\"\n    :class=\"cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors duration-150', props.class)\"\n  >\n    <slot />\n  </tr>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/table/TableRow.vue"
    },
    {
      "path": "packages/registry-vue/components/table/index.ts",
      "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/table/index.ts"
    },
    {
      "path": "packages/registry-vue/components/table/utils.ts",
      "content": "import type { Updater } from '@tanstack/vue-table'\n\nimport type { Ref } from 'vue'\nimport { isFunction } from '@tanstack/vue-table'\n\nexport function valueUpdater<T>(updaterOrValue: Updater<T>, ref: Ref<T>) {\n  ref.value = isFunction(updaterOrValue) ? updaterOrValue(ref.value) : updaterOrValue\n}\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/table/utils.ts"
    }
  ],
  "dependencies": [
    "@tanstack/vue-table",
    "@vueuse/core"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Plain HTML table primitives — `<Table>`, `<TableHeader>`, `<TableRow>`, `<TableCell>` — with the registry’s borders, padding, and tokens already applied. Use this when Data Table is too heavy.",
  "categories": [
    "data-display"
  ]
}