sigma-ui/__generated/registry-schemes/style-system/tailwind/table.json

CLI for SIGMA-UI components.

{
  "name": "table",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "Table.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <div class=\"relative w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', $attrs.class ?? '')\">\n      <slot />\n    </table>\n  </div>\n</template>\n"
    },
    {
      "name": "TableBody.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', $attrs.class ?? '')\">\n    <slot />\n  </tbody>\n</template>\n"
    },
    {
      "name": "TableCaption.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', $attrs.class ?? '')\">\n    <slot />\n  </caption>\n</template>\n"
    },
    {
      "name": "TableCell.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-4 align-middle [&:has([role=checkbox])]:pr-0',\n        $attrs.class ?? '',\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n"
    },
    {
      "name": "TableEmpty.vue",
      "content": "<script setup lang=\"ts\">\nimport TableRow from './TableRow.vue';\nimport TableCell from './TableCell.vue';\nimport { cn } from '@ui/utils';\n\nconst props = withDefaults(defineProps<{\n  colspan?: number;\n}>(), {\n  colspan: 1,\n});\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      v-bind=\"props\"\n      :class=\"\n\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          $attrs.class ?? '',\n        )\n      \"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n"
    },
    {
      "name": "TableFooter.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <tfoot :class=\"cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', $attrs.class ?? '')\">\n    <slot />\n  </tfoot>\n</template>\n"
    },
    {
      "name": "TableHead.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <th :class=\"cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', $attrs.class ?? '')\">\n    <slot />\n  </th>\n</template>\n"
    },
    {
      "name": "TableHeader.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', $attrs.class ?? '')\">\n    <slot />\n  </thead>\n</template>\n"
    },
    {
      "name": "TableRow.vue",
      "content": "<script setup lang=\"ts\">\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', $attrs.class ?? '')\">\n    <slot />\n  </tr>\n</template>\n"
    },
    {
      "name": "index.ts",
      "content": "export { default as Table } from './Table.vue';\nexport { default as TableBody } from './TableBody.vue';\nexport { default as TableCell } from './TableCell.vue';\nexport { default as TableHead } from './TableHead.vue';\nexport { default as TableHeader } from './TableHeader.vue';\nexport { default as TableFooter } from './TableFooter.vue';\nexport { default as TableRow } from './TableRow.vue';\nexport { default as TableCaption } from './TableCaption.vue';\nexport { default as TableEmpty } from './TableEmpty.vue';\n"
    }
  ],
  "type": "components:ui"
}