{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "type": "registry:block",
  "title": "Table",
  "description": "Table",
  "files": [
    {
      "path": "components/usages/tableusage.tsx",
      "content": "import {\n\tTable,\n\tTableBody,\n\tTableCaption,\n\tTableCell,\n\tTableFoot,\n\tTableHead,\n\tTableHeaderCell,\n\tTableRoot,\n\tTableRow,\n} from \"@/registry/open-source/table\";\n\nexport const data: Array<{\n\tid: number;\n\tname: string;\n\tsales: string;\n\tregion: string;\n\tstatus: string;\n\tdeltaType: string;\n\thours: number;\n}> = [\n\t{\n\t\tid: 1,\n\t\tname: \"Peter McCrown\",\n\t\tsales: \"1,000,000\",\n\t\tregion: \"Region A\",\n\t\tstatus: \"overperforming\",\n\t\tdeltaType: \"moderateIncrease\",\n\t\thours: 100,\n\t},\n\t{\n\t\tid: 2,\n\t\tname: \"Jon Mueller\",\n\t\tsales: \"2,202,000\",\n\t\tregion: \"Region B\",\n\t\tstatus: \"overperforming\",\n\t\tdeltaType: \"moderateIncrease\",\n\t\thours: 110,\n\t},\n\t{\n\t\tid: 3,\n\t\tname: \"Peter Federer\",\n\t\tsales: \"1,505,000\",\n\t\tregion: \"Region C\",\n\t\tstatus: \"underperforming\",\n\t\tdeltaType: \"moderateDecrease\",\n\t\thours: 90,\n\t},\n\t{\n\t\tid: 4,\n\t\tname: \"Maxime Bujet\",\n\t\tsales: \"500,000\",\n\t\tregion: \"Region D\",\n\t\tstatus: \"overperforming\",\n\t\tdeltaType: \"moderateDecrease\",\n\t\thours: 92,\n\t},\n\t{\n\t\tid: 5,\n\t\tname: \"Emma Nelly\",\n\t\tsales: \"600,000\",\n\t\tregion: \"Region E\",\n\t\tstatus: \"underperforming\",\n\t\tdeltaType: \"moderateDecrease\",\n\t\thours: 95,\n\t},\n];\n\nexport default function TableHero() {\n\treturn (\n\t\t<TableRoot>\n\t\t\t<Table>\n\t\t\t\t<TableCaption>Recent invoices.</TableCaption>\n\t\t\t\t<TableHead>\n\t\t\t\t\t<TableRow>\n\t\t\t\t\t\t<TableHeaderCell>Name</TableHeaderCell>\n\t\t\t\t\t\t<TableHeaderCell>Sales ($)</TableHeaderCell>\n\t\t\t\t\t\t<TableHeaderCell>Region</TableHeaderCell>\n\t\t\t\t\t\t<TableHeaderCell>Status</TableHeaderCell>\n\t\t\t\t\t\t<TableHeaderCell className=\"text-right\">\n\t\t\t\t\t\t\tWorking Hours (h)\n\t\t\t\t\t\t</TableHeaderCell>\n\t\t\t\t\t</TableRow>\n\t\t\t\t</TableHead>\n\t\t\t\t<TableBody>\n\t\t\t\t\t{data.map((item) => (\n\t\t\t\t\t\t<TableRow key={item.id + \"table-example\"}>\n\t\t\t\t\t\t\t<TableCell>{item.name}</TableCell>\n\t\t\t\t\t\t\t<TableCell className=\"text-right\">{item.sales}</TableCell>\n\t\t\t\t\t\t\t<TableCell>{item.region}</TableCell>\n\t\t\t\t\t\t\t<TableCell>{item.status}</TableCell>\n\t\t\t\t\t\t\t<TableCell className=\"text-right\">{item.hours}</TableCell>\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t))}\n\t\t\t\t</TableBody>\n\t\t\t\t<TableFoot>\n\t\t\t\t\t<TableRow>\n\t\t\t\t\t\t<TableHeaderCell\n\t\t\t\t\t\t\tcolSpan={2}\n\t\t\t\t\t\t\tscope=\"row\"\n\t\t\t\t\t\t\tclassName=\"text-right\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t4,642\n\t\t\t\t\t\t</TableHeaderCell>\n\t\t\t\t\t\t<TableHeaderCell\n\t\t\t\t\t\t\tcolSpan={3}\n\t\t\t\t\t\t\tscope=\"row\"\n\t\t\t\t\t\t\tclassName=\"text-right\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t497\n\t\t\t\t\t\t</TableHeaderCell>\n\t\t\t\t\t</TableRow>\n\t\t\t\t</TableFoot>\n\t\t\t</Table>\n\t\t</TableRoot>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/tableusage.tsx",
      "content": "import {\n\tTable,\n\tTableBody,\n\tTableCaption,\n\tTableCell,\n\tTableFoot,\n\tTableHead,\n\tTableHeaderCell,\n\tTableRoot,\n\tTableRow,\n} from \"@/registry/open-source/table\";\n\nexport const data: Array<{\n\tid: number;\n\tname: string;\n\tsales: string;\n\tregion: string;\n\tstatus: string;\n\tdeltaType: string;\n\thours: number;\n}> = [\n\t{\n\t\tid: 1,\n\t\tname: \"Peter McCrown\",\n\t\tsales: \"1,000,000\",\n\t\tregion: \"Region A\",\n\t\tstatus: \"overperforming\",\n\t\tdeltaType: \"moderateIncrease\",\n\t\thours: 100,\n\t},\n\t{\n\t\tid: 2,\n\t\tname: \"Jon Mueller\",\n\t\tsales: \"2,202,000\",\n\t\tregion: \"Region B\",\n\t\tstatus: \"overperforming\",\n\t\tdeltaType: \"moderateIncrease\",\n\t\thours: 110,\n\t},\n\t{\n\t\tid: 3,\n\t\tname: \"Peter Federer\",\n\t\tsales: \"1,505,000\",\n\t\tregion: \"Region C\",\n\t\tstatus: \"underperforming\",\n\t\tdeltaType: \"moderateDecrease\",\n\t\thours: 90,\n\t},\n\t{\n\t\tid: 4,\n\t\tname: \"Maxime Bujet\",\n\t\tsales: \"500,000\",\n\t\tregion: \"Region D\",\n\t\tstatus: \"overperforming\",\n\t\tdeltaType: \"moderateDecrease\",\n\t\thours: 92,\n\t},\n\t{\n\t\tid: 5,\n\t\tname: \"Emma Nelly\",\n\t\tsales: \"600,000\",\n\t\tregion: \"Region E\",\n\t\tstatus: \"underperforming\",\n\t\tdeltaType: \"moderateDecrease\",\n\t\thours: 95,\n\t},\n];\n\nexport default function TableHero() {\n\treturn (\n\t\t<TableRoot>\n\t\t\t<Table>\n\t\t\t\t<TableCaption>Recent invoices.</TableCaption>\n\t\t\t\t<TableHead>\n\t\t\t\t\t<TableRow>\n\t\t\t\t\t\t<TableHeaderCell>Name</TableHeaderCell>\n\t\t\t\t\t\t<TableHeaderCell>Sales ($)</TableHeaderCell>\n\t\t\t\t\t\t<TableHeaderCell>Region</TableHeaderCell>\n\t\t\t\t\t\t<TableHeaderCell>Status</TableHeaderCell>\n\t\t\t\t\t\t<TableHeaderCell className=\"text-right\">\n\t\t\t\t\t\t\tWorking Hours (h)\n\t\t\t\t\t\t</TableHeaderCell>\n\t\t\t\t\t</TableRow>\n\t\t\t\t</TableHead>\n\t\t\t\t<TableBody>\n\t\t\t\t\t{data.map((item) => (\n\t\t\t\t\t\t<TableRow key={item.id + \"table-example\"}>\n\t\t\t\t\t\t\t<TableCell>{item.name}</TableCell>\n\t\t\t\t\t\t\t<TableCell className=\"text-right\">{item.sales}</TableCell>\n\t\t\t\t\t\t\t<TableCell>{item.region}</TableCell>\n\t\t\t\t\t\t\t<TableCell>{item.status}</TableCell>\n\t\t\t\t\t\t\t<TableCell className=\"text-right\">{item.hours}</TableCell>\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t))}\n\t\t\t\t</TableBody>\n\t\t\t\t<TableFoot>\n\t\t\t\t\t<TableRow>\n\t\t\t\t\t\t<TableHeaderCell\n\t\t\t\t\t\t\tcolSpan={2}\n\t\t\t\t\t\t\tscope=\"row\"\n\t\t\t\t\t\t\tclassName=\"text-right\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t4,642\n\t\t\t\t\t\t</TableHeaderCell>\n\t\t\t\t\t\t<TableHeaderCell\n\t\t\t\t\t\t\tcolSpan={3}\n\t\t\t\t\t\t\tscope=\"row\"\n\t\t\t\t\t\t\tclassName=\"text-right\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t497\n\t\t\t\t\t\t</TableHeaderCell>\n\t\t\t\t\t</TableRow>\n\t\t\t\t</TableFoot>\n\t\t\t</Table>\n\t\t</TableRoot>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/table.tsx",
      "content": "// Tremor Table [v0.0.3]\r\n\r\nimport React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\n\r\nconst TableRoot = React.forwardRef<\r\n\tHTMLDivElement,\r\n\tReact.HTMLAttributes<HTMLDivElement>\r\n>(({ className, children, ...props }, forwardedRef) => (\r\n\t<div\r\n\t\tref={forwardedRef}\r\n\t\t// Activate if table is used in a float environment\r\n\t\t// className=\"flow-root\"\r\n\t>\r\n\t\t<div\r\n\t\t\t// make table scrollable on mobile\r\n\t\t\tclassName={cn(\"w-full overflow-auto whitespace-nowrap\", className)}\r\n\t\t\t{...props}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t</div>\r\n\t</div>\r\n));\r\n\r\nTableRoot.displayName = \"TableRoot\";\r\n\r\nconst Table = React.forwardRef<\r\n\tHTMLTableElement,\r\n\tReact.TableHTMLAttributes<HTMLTableElement>\r\n>(({ className, ...props }, forwardedRef) => (\r\n\t<table\r\n\t\tref={forwardedRef}\r\n\t\ttremor-id=\"tremor-raw\"\r\n\t\tclassName={cn(\r\n\t\t\t// base\r\n\t\t\t\"w-full caption-bottom border-b\",\r\n\t\t\t// border color\r\n\t\t\t\"border-gray-200 dark:border-gray-800\",\r\n\t\t\tclassName\r\n\t\t)}\r\n\t\t{...props}\r\n\t/>\r\n));\r\n\r\nTable.displayName = \"Table\";\r\n\r\nconst TableHead = React.forwardRef<\r\n\tHTMLTableSectionElement,\r\n\tReact.HTMLAttributes<HTMLTableSectionElement>\r\n>(({ className, ...props }, forwardedRef) => (\r\n\t<thead ref={forwardedRef} className={cn(className)} {...props} />\r\n));\r\n\r\nTableHead.displayName = \"TableHead\";\r\n\r\nconst TableHeaderCell = React.forwardRef<\r\n\tHTMLTableCellElement,\r\n\tReact.ThHTMLAttributes<HTMLTableCellElement>\r\n>(({ className, ...props }, forwardedRef) => (\r\n\t<th\r\n\t\tref={forwardedRef}\r\n\t\tclassName={cn(\r\n\t\t\t// base\r\n\t\t\t\"border-b px-4 py-3.5 text-left text-sm font-semibold\",\r\n\t\t\t// text color\r\n\t\t\t\"text-foreground dark:text-foreground\",\r\n\t\t\t// border color\r\n\t\t\t\"border-gray-200 dark:border-gray-800\",\r\n\t\t\tclassName\r\n\t\t)}\r\n\t\t{...props}\r\n\t/>\r\n));\r\n\r\nTableHeaderCell.displayName = \"TableHeaderCell\";\r\n\r\nconst TableBody = React.forwardRef<\r\n\tHTMLTableSectionElement,\r\n\tReact.HTMLAttributes<HTMLTableSectionElement>\r\n>(({ className, ...props }, forwardedRef) => (\r\n\t<tbody\r\n\t\tref={forwardedRef}\r\n\t\tclassName={cn(\r\n\t\t\t// base\r\n\t\t\t\"divide-y\",\r\n\t\t\t// divide color\r\n\t\t\t\"divide-gray-200 dark:divide-gray-800\",\r\n\t\t\tclassName\r\n\t\t)}\r\n\t\t{...props}\r\n\t/>\r\n));\r\n\r\nTableBody.displayName = \"TableBody\";\r\n\r\nconst TableRow = React.forwardRef<\r\n\tHTMLTableRowElement,\r\n\tReact.HTMLAttributes<HTMLTableRowElement>\r\n>(({ className, ...props }, forwardedRef) => (\r\n\t<tr\r\n\t\tref={forwardedRef}\r\n\t\tclassName={cn(\r\n\t\t\t\"[&_td:last-child]:pr-4 [&_th:last-child]:pr-4\",\r\n\t\t\t\"[&_td:first-child]:pl-4 [&_th:first-child]:pl-4\",\r\n\t\t\tclassName\r\n\t\t)}\r\n\t\t{...props}\r\n\t/>\r\n));\r\n\r\nTableRow.displayName = \"TableRow\";\r\n\r\nconst TableCell = React.forwardRef<\r\n\tHTMLTableCellElement,\r\n\tReact.TdHTMLAttributes<HTMLTableCellElement>\r\n>(({ className, ...props }, forwardedRef) => (\r\n\t<td\r\n\t\tref={forwardedRef}\r\n\t\tclassName={cn(\r\n\t\t\t// base\r\n\t\t\t\"p-4 text-sm\",\r\n\t\t\t// text color\r\n\t\t\t\"text-foreground dark:text-foreground\",\r\n\t\t\tclassName\r\n\t\t)}\r\n\t\t{...props}\r\n\t/>\r\n));\r\n\r\nTableCell.displayName = \"TableCell\";\r\n\r\nconst TableFoot = React.forwardRef<\r\n\tHTMLTableSectionElement,\r\n\tReact.HTMLAttributes<HTMLTableSectionElement>\r\n>(({ className, ...props }, forwardedRef) => {\r\n\treturn (\r\n\t\t<tfoot\r\n\t\t\tref={forwardedRef}\r\n\t\t\tclassName={cn(\r\n\t\t\t\t// base\r\n\t\t\t\t\"border-t text-left font-medium\",\r\n\t\t\t\t// text color\r\n\t\t\t\t\"text-foreground dark:text-foreground\",\r\n\t\t\t\t// border color\r\n\t\t\t\t\"border-gray-200 dark:border-gray-800\",\r\n\t\t\t\tclassName\r\n\t\t\t)}\r\n\t\t\t{...props}\r\n\t\t/>\r\n\t);\r\n});\r\n\r\nTableFoot.displayName = \"TableFoot\";\r\n\r\nconst TableCaption = React.forwardRef<\r\n\tHTMLTableCaptionElement,\r\n\tReact.HTMLAttributes<HTMLTableCaptionElement>\r\n>(({ className, ...props }, forwardedRef) => (\r\n\t<caption\r\n\t\tref={forwardedRef}\r\n\t\tclassName={cn(\r\n\t\t\t// base\r\n\t\t\t\"mt-3 px-3 text-center text-sm\",\r\n\t\t\t// text color\r\n\t\t\t\"text-foreground dark:text-foreground\",\r\n\t\t\tclassName\r\n\t\t)}\r\n\t\t{...props}\r\n\t/>\r\n));\r\n\r\nTableCaption.displayName = \"TableCaption\";\r\n\r\nexport {\r\n\tTable,\r\n\tTableBody,\r\n\tTableCaption,\r\n\tTableCell,\r\n\tTableFoot,\r\n\tTableHead,\r\n\tTableHeaderCell,\r\n\tTableRoot,\r\n\tTableRow,\r\n};\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}