{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "table",
  "title": "Table",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/table/Table.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLTableAttributes } from 'svelte/elements'\n\n  export interface TableProps extends HTMLTableAttributes {\n    /**\n     * Extra classes for the scroll container div (e.g. `min-h-0 flex-1` inside a\n     * flex column). A sticky TableHeader pins to THIS div -- an outer overflow\n     * wrapper around <Table> breaks stickiness, so size the scroller here.\n     */\n    containerClass?: string\n    density?: 'compact' | 'cozy' | 'comfortable'\n    ref?: HTMLTableElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, containerClass, density, children, ref = $bindable(null), ...restProps }: TableProps = $props()\n\n  const densityClass = $derived.by(() => {\n    if (density === 'compact') return '[&_td]:py-1.5 [&_td]:text-xs [&_th]:h-8 [&_th]:text-xs'\n    if (density === 'comfortable') return '[&_td]:py-3 [&_th]:h-12'\n    // cozy is the TableCell/TableHead baseline (py-2 / h-10) -- no override.\n    return ''\n  })\n</script>\n\n<div data-uipkge=\"\" data-slot=\"table-container\" class={cn('relative w-full overflow-auto', containerClass)}>\n  <table bind:this={ref} data-uipkge=\"\" data-slot=\"table\" class={cn('w-full caption-bottom text-sm', densityClass, className)} {...restProps}>\n    {@render children?.()}\n  </table>\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/table/Table.svelte"
    },
    {
      "path": "packages/registry-svelte/components/table/TableBody.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface TableBodyProps extends HTMLAttributes<HTMLElement> {\n    ref?: HTMLTableSectionElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: TableBodyProps = $props()\n</script>\n\n<tbody bind:this={ref} data-uipkge=\"\" data-slot=\"table-body\" class={cn('[&_tr:last-child]:border-0', className)} {...restProps}>\n  {@render children?.()}\n</tbody>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/table/TableBody.svelte"
    },
    {
      "path": "packages/registry-svelte/components/table/TableCaption.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface TableCaptionProps extends HTMLAttributes<HTMLElement> {\n    ref?: HTMLElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: TableCaptionProps = $props()\n</script>\n\n<caption bind:this={ref} data-uipkge=\"\" data-slot=\"table-caption\" class={cn('text-muted-foreground mt-4 text-sm', className)} {...restProps}>\n  {@render children?.()}\n</caption>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/table/TableCaption.svelte"
    },
    {
      "path": "packages/registry-svelte/components/table/TableCell.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLTdAttributes } from 'svelte/elements'\n\n  export interface TableCellProps extends HTMLTdAttributes {\n    ref?: HTMLTableCellElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: TableCellProps = $props()\n</script>\n\n<td\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"table-cell\"\n  class={cn(\n    'px-3 py-2 align-middle text-sm whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n    className,\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</td>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/table/TableCell.svelte"
    },
    {
      "path": "packages/registry-svelte/components/table/TableEmpty.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLTdAttributes } from 'svelte/elements'\n\n  export interface TableEmptyProps extends HTMLTdAttributes {\n    colspan?: number\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import TableCell from './TableCell.svelte'\n  import TableRow from './TableRow.svelte'\n\n  let { class: className, colspan = 1, children, ...restProps }: TableEmptyProps = $props()\n</script>\n\n<TableRow>\n  <TableCell class={cn('text-foreground p-4 align-middle text-sm whitespace-nowrap', className)} {colspan} {...restProps}>\n    <div class=\"flex items-center justify-center py-10\">\n      {@render children?.()}\n    </div>\n  </TableCell>\n</TableRow>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/table/TableEmpty.svelte"
    },
    {
      "path": "packages/registry-svelte/components/table/TableFooter.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface TableFooterProps extends HTMLAttributes<HTMLElement> {\n    ref?: HTMLTableSectionElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: TableFooterProps = $props()\n</script>\n\n<tfoot\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"table-footer\"\n  class={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</tfoot>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/table/TableFooter.svelte"
    },
    {
      "path": "packages/registry-svelte/components/table/TableHead.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLTdAttributes } from 'svelte/elements'\n\n  export interface TableHeadProps extends HTMLTdAttributes {\n    ref?: HTMLTableCellElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: TableHeadProps = $props()\n</script>\n\n<th\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"table-head\"\n  class={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    className,\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</th>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/table/TableHead.svelte"
    },
    {
      "path": "packages/registry-svelte/components/table/TableHeader.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface TableHeaderProps extends HTMLAttributes<HTMLElement> {\n    ref?: HTMLTableSectionElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: TableHeaderProps = $props()\n</script>\n\n<thead bind:this={ref} data-uipkge=\"\" data-slot=\"table-header\" class={cn('bg-muted/50 [&_tr]:border-b', className)} {...restProps}>\n  {@render children?.()}\n</thead>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/table/TableHeader.svelte"
    },
    {
      "path": "packages/registry-svelte/components/table/TableRow.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n    ref?: HTMLTableRowElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: TableRowProps = $props()\n</script>\n\n<tr\n  bind:this={ref}\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', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</tr>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/table/TableRow.svelte"
    },
    {
      "path": "packages/registry-svelte/components/table/index.ts",
      "content": "export { default as Table, type TableProps } from './Table.svelte'\nexport { default as TableBody, type TableBodyProps } from './TableBody.svelte'\nexport { default as TableCaption, type TableCaptionProps } from './TableCaption.svelte'\nexport { default as TableCell, type TableCellProps } from './TableCell.svelte'\nexport { default as TableEmpty, type TableEmptyProps } from './TableEmpty.svelte'\nexport { default as TableFooter, type TableFooterProps } from './TableFooter.svelte'\nexport { default as TableHead, type TableHeadProps } from './TableHead.svelte'\nexport { default as TableHeader, type TableHeaderProps } from './TableHeader.svelte'\nexport { default as TableRow, type TableRowProps } from './TableRow.svelte'\nexport { valueUpdater } from './utils'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/table/index.ts"
    },
    {
      "path": "packages/registry-svelte/components/table/utils.ts",
      "content": "/**\n * Applies a TanStack Table updater (value or `(old) => next` function) to a\n * `{ value }` box. The Vue twin imports `Updater`/`isFunction` from\n * `@tanstack/vue-table`; this port inlines the two-line check so plain-table\n * consumers pull zero table-state dependencies. Pair with\n * `@tanstack/svelte-table` when you need full data-table state.\n */\nexport function valueUpdater<T>(updaterOrValue: T | ((old: T) => T), ref: { value: T }) {\n  ref.value = typeof updaterOrValue === 'function' ? (updaterOrValue as (old: T) => T)(ref.value) : updaterOrValue\n}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/table/utils.ts"
    }
  ],
  "dependencies": [],
  "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"
  ]
}