From fd8b392ce6c157a29dcd104f992089a28752bf1f Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sun, 6 Sep 2026 10:38:32 +0200
Subject: [PATCH 1/3] feat: migrate TanStack Table to v9

---
 .../members/members-page-client.tsx           | 68 ++++++++++----
 .../[id]/members/team-members-page-client.tsx | 33 +++++--
 apps/examples/calcom/package.json             |  2 +-
 apps/origin/package.json                      |  2 +-
 apps/origin/public/r/comp-477.json            |  2 +-
 apps/origin/public/r/comp-478.json            |  2 +-
 apps/origin/public/r/comp-479.json            |  2 +-
 apps/origin/public/r/comp-480.json            |  2 +-
 apps/origin/public/r/comp-481.json            |  2 +-
 apps/origin/public/r/comp-482.json            |  2 +-
 apps/origin/public/r/comp-483.json            |  2 +-
 apps/origin/public/r/comp-484.json            |  2 +-
 apps/origin/public/r/comp-485.json            |  2 +-
 .../registry/default/components/comp-477.tsx  | 17 +++-
 .../registry/default/components/comp-478.tsx  | 75 +++++++++------
 .../registry/default/components/comp-479.tsx  | 33 +++++--
 .../registry/default/components/comp-480.tsx  | 91 ++++++++++++-------
 .../registry/default/components/comp-481.tsx  | 42 +++++++--
 .../registry/default/components/comp-482.tsx  | 23 +++--
 .../registry/default/components/comp-483.tsx  | 49 +++++++---
 .../registry/default/components/comp-484.tsx  | 46 +++++++---
 .../registry/default/components/comp-485.tsx  | 76 +++++++++++-----
 apps/ui/package.json                          |  2 +-
 apps/ui/public/r/p-table-3.json               |  2 +-
 apps/ui/public/r/p-table-4.json               |  2 +-
 apps/ui/public/r/p-table-6.json               |  2 +-
 apps/ui/public/r/p-table-8.json               |  2 +-
 .../registry/default/particles/p-table-3.tsx  | 18 ++--
 .../registry/default/particles/p-table-4.tsx  | 47 +++++++---
 .../registry/default/particles/p-table-6.tsx  | 18 ++--
 .../registry/default/particles/p-table-8.tsx  | 47 +++++++---
 bun.lock                                      | 18 ++--
 32 files changed, 500 insertions(+), 233 deletions(-)

diff --git a/apps/examples/calcom/app/(dashboard)/members/members-page-client.tsx b/apps/examples/calcom/app/(dashboard)/members/members-page-client.tsx
index 21d01890d..d84dbfece 100644
--- a/apps/examples/calcom/app/(dashboard)/members/members-page-client.tsx
+++ b/apps/examples/calcom/app/(dashboard)/members/members-page-client.tsx
@@ -42,11 +42,20 @@ import {
   type Column,
   type ColumnDef,
   type ColumnSizingState,
+  columnFilteringFeature,
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
+  rowSelectionFeature,
+  rowSortingFeature,
   type SortingState,
-  useReactTable,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ArrowUpRightIcon,
@@ -127,6 +136,21 @@ type Member = {
   avatarUrl?: string;
 };
 
+const features = tableFeatures({
+  columnFilteringFeature,
+  columnPinningFeature,
+  columnSizingFeature,
+  columnResizingFeature,
+  columnVisibilityFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
 const members: Member[] = [
   {
     avatarUrl:
@@ -352,25 +376,30 @@ function OptionalBadge({ value }: { value?: string }) {
 const FILLER_EXCLUDED_COLUMN_IDS = new Set(["select", "actions"]);
 
 const INITIAL_COLUMN_PINNING = {
-  left: ["select", "name"],
-  right: ["actions"],
+  end: ["actions"],
+  start: ["select", "name"],
 };
 
-function getPinningStyles(column: Column<Member>): CSSProperties {
+function getPinningStyles(
+  column: Column<typeof features, Member, unknown>,
+): CSSProperties {
   const isPinned = column.getIsPinned();
 
   return {
-    "--pinned-left-offset":
-      isPinned === "left" ? `${column.getStart("left")}px` : undefined,
-    left: undefined,
-    position: isPinned === "right" ? "sticky" : undefined,
-    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+    "--pinned-start-offset":
+      isPinned === "start" ? `${column.getStart("start")}px` : undefined,
+    insetInlineEnd:
+      isPinned === "end" ? `${column.getAfter("end")}px` : undefined,
+    insetInlineStart: undefined,
+    position: isPinned === "end" ? "sticky" : undefined,
     zIndex: isPinned ? 1 : 0,
   } as CSSProperties;
 }
 
-function getPinnedDataAttribute(column: Column<Member>): {
-  "data-pinned"?: "left" | "right";
+function getPinnedDataAttribute(
+  column: Column<typeof features, Member, unknown>,
+): {
+  "data-pinned"?: "end" | "start";
 } {
   const isPinned = column.getIsPinned();
   return isPinned ? { "data-pinned": isPinned } : {};
@@ -421,8 +450,8 @@ function getColumnDisplayWidth({
 
 function getColumns(
   columnVisibility: Record<ColumnKey, boolean>,
-): ColumnDef<Member>[] {
-  const cols: ColumnDef<Member>[] = [
+): ColumnDef<typeof features, Member>[] {
+  const cols: ColumnDef<typeof features, Member>[] = [
     {
       cell: ({ row }) => (
         <Label>
@@ -663,15 +692,14 @@ export function MembersPageClient() {
     return () => observer.disconnect();
   }, []);
 
-  const table = useReactTable({
+  const table = useTable({
     columnResizeMode: "onChange",
     columns,
     data: filteredMembers,
     enableRowSelection: true,
     enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
+    features,
     getRowId: (row) => row.id,
-    getSortedRowModel: getSortedRowModel(),
     initialState: {
       columnPinning: INITIAL_COLUMN_PINNING,
     },
@@ -832,7 +860,7 @@ export function MembersPageClient() {
                             ? "descending"
                             : "none"
                       }
-                      className="relative z-1 select-none bg-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] before:pointer-events-none before:absolute before:inset-y-0 before:z-1 not-data-pinned:before:hidden before:w-4 before:from-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] before:to-transparent data-[pinned=left]:before:start-full data-[pinned=right]:before:end-full in-data-overflow-x-end:data-[pinned=right]:before:bg-linear-to-l last:*:data-[slot=column-resize-handle]:opacity-0 data-[pinned=left]:max-md:before:hidden data-[pinned=left]:md:sticky data-[pinned=left]:md:left-(--pinned-left-offset) in-data-overflow-x-start:data-[pinned=left]:md:before:bg-linear-to-r dark:bg-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))] dark:before:from-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))]"
+                      className="relative z-1 select-none bg-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] before:pointer-events-none before:absolute before:inset-y-0 before:z-1 not-data-pinned:before:hidden before:w-4 before:from-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] before:to-transparent data-[pinned=start]:before:start-full data-[pinned=end]:before:end-full in-data-overflow-x-end:data-[pinned=end]:before:bg-linear-to-l last:*:data-[slot=column-resize-handle]:opacity-0 data-[pinned=start]:max-md:before:hidden data-[pinned=start]:md:sticky data-[pinned=start]:md:start-(--pinned-start-offset) in-data-overflow-x-start:data-[pinned=start]:md:before:bg-linear-to-r dark:bg-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))] dark:before:from-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))]"
                       colSpan={header.colSpan}
                       key={header.id}
                       {...getPinnedDataAttribute(header.column)}
@@ -919,7 +947,7 @@ export function MembersPageClient() {
                   >
                     {row.getVisibleCells().map((cell) => (
                       <TableCell
-                        className="before:pointer-events-none before:absolute before:inset-y-0 before:z-1 not-data-pinned:before:hidden before:w-4 before:from-card in-[[data-slot=table-row]:hover]:before:from-[color-mix(in_srgb,var(--card),var(--color-black)_2%)] in-[[data-slot=table-row][data-state=selected]]:before:from-[color-mix(in_srgb,var(--card),var(--color-black)_4%)] before:to-transparent data-[pinned=left]:before:start-full data-[pinned=right]:before:end-full in-data-overflow-x-end:data-[pinned=right]:before:bg-linear-to-l data-[pinned=left]:max-md:before:hidden data-[pinned=left]:md:sticky data-[pinned=left]:md:left-(--pinned-left-offset) in-data-overflow-x-start:data-[pinned=left]:md:before:bg-linear-to-r dark:in-[[data-slot=table-row]:hover]:before:from-[color-mix(in_srgb,var(--card),var(--color-white)_2%)] dark:in-[[data-slot=table-row][data-state=selected]]:before:from-[color-mix(in_srgb,var(--card),var(--color-white)_4%)]"
+                        className="before:pointer-events-none before:absolute before:inset-y-0 before:z-1 not-data-pinned:before:hidden before:w-4 before:from-card in-[[data-slot=table-row]:hover]:before:from-[color-mix(in_srgb,var(--card),var(--color-black)_2%)] in-[[data-slot=table-row][data-state=selected]]:before:from-[color-mix(in_srgb,var(--card),var(--color-black)_4%)] before:to-transparent data-[pinned=start]:before:start-full data-[pinned=end]:before:end-full in-data-overflow-x-end:data-[pinned=end]:before:bg-linear-to-l data-[pinned=start]:max-md:before:hidden data-[pinned=start]:md:sticky data-[pinned=start]:md:start-(--pinned-start-offset) in-data-overflow-x-start:data-[pinned=start]:md:before:bg-linear-to-r dark:in-[[data-slot=table-row]:hover]:before:from-[color-mix(in_srgb,var(--card),var(--color-white)_2%)] dark:in-[[data-slot=table-row][data-state=selected]]:before:from-[color-mix(in_srgb,var(--card),var(--color-white)_4%)]"
                         key={cell.id}
                         {...getPinnedDataAttribute(cell.column)}
                         style={{
diff --git a/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx b/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx
index ddeae8462..2624827a7 100644
--- a/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx
+++ b/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx
@@ -48,11 +48,17 @@ import {
 } from "@coss/ui/components/table";
 import {
   type ColumnDef,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
+  rowSelectionFeature,
+  rowSortingFeature,
   type SortingState,
-  useReactTable,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ArrowUpRightIcon,
@@ -98,6 +104,18 @@ type TeamMember = {
   hasOptions?: boolean;
 };
 
+const features = tableFeatures({
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
 const members: TeamMember[] = [
   {
     avatarUrl:
@@ -230,8 +248,8 @@ function getColumns({
 }: {
   showRoleColumn: boolean;
   showLastActiveColumn: boolean;
-}): ColumnDef<TeamMember>[] {
-  const cols: ColumnDef<TeamMember>[] = [
+}): ColumnDef<typeof features, TeamMember>[] {
+  const cols: ColumnDef<typeof features, TeamMember>[] = [
     {
       cell: ({ row }) => (
         <Label className="before:absolute before:inset-0">
@@ -389,14 +407,13 @@ export function TeamMembersPageClient() {
     });
   }, [showLastActiveColumn, showRoleColumn]);
 
-  const table = useReactTable({
+  const table = useTable({
     columns,
     data: filteredMembers,
     enableRowSelection: true,
     enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
+    features,
     getRowId: (row) => row.id,
-    getSortedRowModel: getSortedRowModel(),
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,
     state: {
diff --git a/apps/examples/calcom/package.json b/apps/examples/calcom/package.json
index e776f33fa..1ffc54080 100644
--- a/apps/examples/calcom/package.json
+++ b/apps/examples/calcom/package.json
@@ -7,7 +7,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@hugeicons/core-free-icons": "^2.0.0",
     "@hugeicons/react": "^1.1.1",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^9.2.4",
     "dompurify": "^3.3.1",
     "lucide-react": "^0.555.0",
     "marked": "^17.0.1",
diff --git a/apps/origin/package.json b/apps/origin/package.json
index a0a2f461b..22756e999 100644
--- a/apps/origin/package.json
+++ b/apps/origin/package.json
@@ -10,7 +10,7 @@
     "@origin-space/image-cropper": "^0.1.9",
     "@radix-ui/react-icons": "^1.3.2",
     "@remixicon/react": "^4.7.0",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^9.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.1.1",
diff --git a/apps/origin/public/r/comp-477.json b/apps/origin/public/r/comp-477.json
index 73fe24bb1..2b81959e8 100644
--- a/apps/origin/public/r/comp-477.json
+++ b/apps/origin/public/r/comp-477.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-477.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { useEffect, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columns,\n    data,\n    getCoreRowModel: getCoreRowModel(),\n  });\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter className=\"bg-transparent\">\n          <TableRow className=\"hover:bg-transparent\">\n            <TableCell colSpan={5}>Total</TableCell>\n            <TableCell className=\"text-right\">\n              {new Intl.NumberFormat(\"en-US\", {\n                currency: \"USD\",\n                style: \"currency\",\n              }).format(data.reduce((total, item) => total + item.balance, 0))}\n            </TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Basic data table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  columnVisibilityFeature,\n  type ColumnDef,\n  flexRender,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowSelectionFeature,\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable({\n    columns,\n    data,\n    features,\n  });\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter className=\"bg-transparent\">\n          <TableRow className=\"hover:bg-transparent\">\n            <TableCell colSpan={5}>Total</TableCell>\n            <TableCell className=\"text-right\">\n              {new Intl.NumberFormat(\"en-US\", {\n                currency: \"USD\",\n                style: \"currency\",\n              }).format(data.reduce((total, item) => total + item.balance, 0))}\n            </TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Basic data table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-478.json b/apps/origin/public/r/comp-478.json
index c20953dbf..5087227f0 100644
--- a/apps/origin/public/r/comp-478.json
+++ b/apps/origin/public/r/comp-478.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-478.tsx",
-      "content": "\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  type ColumnFiltersState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedMinMaxValues,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getSortedRowModel,\n  type RowData,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  ExternalLinkIcon,\n  SearchIcon,\n} from \"lucide-react\";\nimport { useId, useMemo, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ndeclare module \"@tanstack/react-table\" {\n  //allows us to define custom properties for our columns\n  // Type parameters TData and TValue must match TanStack Table's declaration exactly\n  // biome-ignore lint: Type parameters required for module augmentation compatibility\n  interface ColumnMeta<TData extends RowData, TValue> {\n    filterVariant?: \"text\" | \"range\" | \"select\";\n  }\n}\n\ntype Item = {\n  id: string;\n  keyword: string;\n  intents: Array<\n    \"Informational\" | \"Navigational\" | \"Commercial\" | \"Transactional\"\n  >;\n  volume: number;\n  cpc: number;\n  traffic: number;\n  link: string;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"keyword\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"keyword\")}</div>\n    ),\n    header: \"Keyword\",\n  },\n  {\n    accessorKey: \"intents\",\n    cell: ({ row }) => {\n      const intents = row.getValue(\"intents\") as string[];\n      return (\n        <div className=\"flex gap-1\">\n          {intents.map((intent) => {\n            const styles = {\n              Commercial: \"bg-amber-400/20 text-amber-500\",\n              Informational: \"bg-indigo-400/20 text-indigo-500\",\n              Navigational: \"bg-emerald-400/20 text-emerald-500\",\n              Transactional: \"bg-rose-400/20 text-rose-500\",\n            }[intent];\n\n            return (\n              <div\n                className={cn(\n                  \"flex size-5 items-center justify-center rounded font-medium text-xs\",\n                  styles,\n                )}\n                key={intent}\n              >\n                {intent.charAt(0)}\n              </div>\n            );\n          })}\n        </div>\n      );\n    },\n    enableSorting: false,\n    filterFn: (row, id, filterValue) => {\n      const rowValue = row.getValue(id);\n      return Array.isArray(rowValue) && rowValue.includes(filterValue);\n    },\n    header: \"Intents\",\n    meta: {\n      filterVariant: \"select\",\n    },\n  },\n  {\n    accessorKey: \"volume\",\n    cell: ({ row }) => {\n      const volume = Number.parseInt(row.getValue(\"volume\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(volume);\n    },\n    header: \"Volume\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"cpc\",\n    cell: ({ row }) => <div>${row.getValue(\"cpc\")}</div>,\n    header: \"CPC\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"traffic\",\n    cell: ({ row }) => {\n      const traffic = Number.parseInt(row.getValue(\"traffic\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(traffic);\n    },\n    header: \"Traffic\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"link\",\n    cell: ({ row }) => (\n      <a className=\"inline-flex items-center gap-1 hover:underline\" href=\"#\">\n        {row.getValue(\"link\")} <ExternalLinkIcon aria-hidden=\"true\" size={12} />\n      </a>\n    ),\n    enableSorting: false,\n    header: \"Link\",\n  },\n];\n\nconst items: Item[] = [\n  {\n    cpc: 2.5,\n    id: \"1\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react components\",\n    link: \"https://coss.com/origin\",\n    traffic: 88,\n    volume: 2507,\n  },\n  {\n    cpc: 4.75,\n    id: \"2\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"buy react templates\",\n    link: \"https://coss.com/origin/input\",\n    traffic: 65,\n    volume: 1850,\n  },\n  {\n    cpc: 3.25,\n    id: \"3\",\n    intents: [\"Informational\", \"Commercial\"],\n    keyword: \"react ui library\",\n    link: \"https://coss.com/origin/badge\",\n    traffic: 112,\n    volume: 3200,\n  },\n  {\n    cpc: 1.95,\n    id: \"4\",\n    intents: [\"Transactional\"],\n    keyword: \"tailwind components download\",\n    link: \"https://coss.com/origin/alert\",\n    traffic: 45,\n    volume: 890,\n  },\n  {\n    cpc: 5.5,\n    id: \"5\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react dashboard template free\",\n    link: \"https://coss.com/origin/tabs\",\n    traffic: 156,\n    volume: 4100,\n  },\n  {\n    cpc: 1.25,\n    id: \"6\",\n    intents: [\"Informational\"],\n    keyword: \"how to use react components\",\n    link: \"https://coss.com/origin/table\",\n    traffic: 42,\n    volume: 1200,\n  },\n  {\n    cpc: 6.8,\n    id: \"7\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react ui kit premium\",\n    link: \"https://coss.com/origin/avatar\",\n    traffic: 28,\n    volume: 760,\n  },\n  {\n    cpc: 1.8,\n    id: \"8\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react component documentation\",\n    link: \"https://coss.com/origin\",\n    traffic: 35,\n    volume: 950,\n  },\n];\n\nexport default function Component() {\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"traffic\",\n    },\n  ]);\n\n  const table = useReactTable({\n    columns,\n    data: items,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getFacetedMinMaxValues: getFacetedMinMaxValues(), // generate min/max values for range filter\n    getFacetedRowModel: getFacetedRowModel(), // client-side faceting\n    getFacetedUniqueValues: getFacetedUniqueValues(), // generate unique values for select filter/autocomplete\n    getFilteredRowModel: getFilteredRowModel(), //client-side filtering\n    getSortedRowModel: getSortedRowModel(),\n    onColumnFiltersChange: setColumnFilters,\n    onSortingChange: setSorting,\n    state: {\n      columnFilters,\n      sorting,\n    },\n  });\n\n  const keywordColumn = table.getColumn(\"keyword\");\n  const intentsColumn = table.getColumn(\"intents\");\n  const volumeColumn = table.getColumn(\"volume\");\n  const cpcColumn = table.getColumn(\"cpc\");\n  const trafficColumn = table.getColumn(\"traffic\");\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap gap-3\">\n        {/* Search input */}\n        {keywordColumn && (\n          <div className=\"w-44\">\n            <Filter column={keywordColumn} />\n          </div>\n        )}\n        {/* Intents select */}\n        {intentsColumn && (\n          <div className=\"w-36\">\n            <Filter column={intentsColumn} />\n          </div>\n        )}\n        {/* Volume inputs */}\n        {volumeColumn && (\n          <div className=\"w-36\">\n            <Filter column={volumeColumn} />\n          </div>\n        )}\n        {/* CPC inputs */}\n        {cpcColumn && (\n          <div className=\"w-36\">\n            <Filter column={cpcColumn} />\n          </div>\n        )}\n        {/* Traffic inputs */}\n        {trafficColumn && (\n          <div className=\"w-36\">\n            <Filter column={trafficColumn} />\n          </div>\n        )}\n      </div>\n\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t\"\n                    key={header.id}\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? (\n                          <span aria-hidden=\"true\" className=\"size-4\" />\n                        )}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Data table with filters made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction Filter({ column }: { column: Column<Item, unknown> }) {\n  const id = useId();\n  const columnFilterValue = column.getFilterValue();\n  const { filterVariant } = column.columnDef.meta ?? {};\n  const columnHeader =\n    typeof column.columnDef.header === \"string\" ? column.columnDef.header : \"\";\n  const sortedUniqueValues = useMemo(() => {\n    if (filterVariant === \"range\") return [];\n\n    // Get all unique values from the column\n    const values = Array.from(column.getFacetedUniqueValues().keys());\n\n    // If the values are arrays, flatten them and get unique items\n    const flattenedValues = values.reduce((acc: string[], curr) => {\n      if (Array.isArray(curr)) {\n        acc.push(...curr);\n      } else {\n        acc.push(curr);\n      }\n      return acc;\n    }, []);\n\n    // Get unique values and sort them\n    return Array.from(new Set(flattenedValues)).sort();\n  }, [column, filterVariant]);\n\n  if (filterVariant === \"range\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label>{columnHeader}</Label>\n        <div className=\"flex\">\n          <Input\n            aria-label={`${columnHeader} min`}\n            className=\"flex-1 rounded-e-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-1`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                e.target.value ? Number(e.target.value) : undefined,\n                old?.[1],\n              ])\n            }\n            placeholder=\"Min\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[0] ?? \"\"}\n          />\n          <Input\n            aria-label={`${columnHeader} max`}\n            className=\"-ms-px flex-1 rounded-s-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-2`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                old?.[0],\n                e.target.value ? Number(e.target.value) : undefined,\n              ])\n            }\n            placeholder=\"Max\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[1] ?? \"\"}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  if (filterVariant === \"select\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label htmlFor={`${id}-select`}>{columnHeader}</Label>\n        <Select\n          onValueChange={(value) => {\n            column.setFilterValue(value === \"all\" ? undefined : value);\n          }}\n          value={columnFilterValue?.toString() ?? \"all\"}\n        >\n          <SelectTrigger id={`${id}-select`}>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"all\">All</SelectItem>\n            {sortedUniqueValues.map((value) => (\n              <SelectItem key={String(value)} value={String(value)}>\n                {String(value)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={`${id}-input`}>{columnHeader}</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"peer ps-9\"\n          id={`${id}-input`}\n          onChange={(e) => column.setFilterValue(e.target.value)}\n          placeholder={`Search ${columnHeader.toLowerCase()}`}\n          type=\"text\"\n          value={(columnFilterValue ?? \"\") as string}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <SearchIcon size={16} />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  columnFacetingFeature,\n  columnFilteringFeature,\n  columnVisibilityFeature,\n  type Column,\n  type ColumnDef,\n  type ColumnFiltersState,\n  createFacetedMinMaxValues,\n  createFacetedRowModel,\n  createFacetedUniqueValues,\n  createFilteredRowModel,\n  createSortedRowModel,\n  filterFn_includesString,\n  filterFn_inNumberRange,\n  flexRender,\n  metaHelper,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  type SortingState,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  ExternalLinkIcon,\n  SearchIcon,\n} from \"lucide-react\";\nimport { useId, useMemo, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  keyword: string;\n  intents: Array<\n    \"Informational\" | \"Navigational\" | \"Commercial\" | \"Transactional\"\n  >;\n  volume: number;\n  cpc: number;\n  traffic: number;\n  link: string;\n};\n\nconst features = tableFeatures({\n  columnFilteringFeature,\n  columnFacetingFeature,\n  columnVisibilityFeature,\n  facetedMinMaxValues: createFacetedMinMaxValues(),\n  facetedRowModel: createFacetedRowModel(),\n  facetedUniqueValues: createFacetedUniqueValues(),\n  filteredRowModel: createFilteredRowModel(),\n  filterFns: {\n    includesString: filterFn_includesString,\n    inNumberRange: filterFn_inNumberRange,\n  },\n  columnMeta: metaHelper<{\n    filterVariant?: \"text\" | \"range\" | \"select\";\n  }>(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"keyword\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"keyword\")}</div>\n    ),\n    header: \"Keyword\",\n  },\n  {\n    accessorKey: \"intents\",\n    cell: ({ row }) => {\n      const intents = row.getValue(\"intents\") as string[];\n      return (\n        <div className=\"flex gap-1\">\n          {intents.map((intent) => {\n            const styles = {\n              Commercial: \"bg-amber-400/20 text-amber-500\",\n              Informational: \"bg-indigo-400/20 text-indigo-500\",\n              Navigational: \"bg-emerald-400/20 text-emerald-500\",\n              Transactional: \"bg-rose-400/20 text-rose-500\",\n            }[intent];\n\n            return (\n              <div\n                className={cn(\n                  \"flex size-5 items-center justify-center rounded font-medium text-xs\",\n                  styles,\n                )}\n                key={intent}\n              >\n                {intent.charAt(0)}\n              </div>\n            );\n          })}\n        </div>\n      );\n    },\n    enableSorting: false,\n    filterFn: (row, id, filterValue) => {\n      const rowValue = row.getValue(id);\n      return Array.isArray(rowValue) && rowValue.includes(filterValue);\n    },\n    header: \"Intents\",\n    meta: {\n      filterVariant: \"select\",\n    },\n  },\n  {\n    accessorKey: \"volume\",\n    cell: ({ row }) => {\n      const volume = Number.parseInt(row.getValue(\"volume\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(volume);\n    },\n    header: \"Volume\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"cpc\",\n    cell: ({ row }) => <div>${row.getValue(\"cpc\")}</div>,\n    header: \"CPC\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"traffic\",\n    cell: ({ row }) => {\n      const traffic = Number.parseInt(row.getValue(\"traffic\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(traffic);\n    },\n    header: \"Traffic\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"link\",\n    cell: ({ row }) => (\n      <a className=\"inline-flex items-center gap-1 hover:underline\" href=\"#\">\n        {row.getValue(\"link\")} <ExternalLinkIcon aria-hidden=\"true\" size={12} />\n      </a>\n    ),\n    enableSorting: false,\n    header: \"Link\",\n  },\n];\n\nconst items: Item[] = [\n  {\n    cpc: 2.5,\n    id: \"1\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react components\",\n    link: \"https://coss.com/origin\",\n    traffic: 88,\n    volume: 2507,\n  },\n  {\n    cpc: 4.75,\n    id: \"2\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"buy react templates\",\n    link: \"https://coss.com/origin/input\",\n    traffic: 65,\n    volume: 1850,\n  },\n  {\n    cpc: 3.25,\n    id: \"3\",\n    intents: [\"Informational\", \"Commercial\"],\n    keyword: \"react ui library\",\n    link: \"https://coss.com/origin/badge\",\n    traffic: 112,\n    volume: 3200,\n  },\n  {\n    cpc: 1.95,\n    id: \"4\",\n    intents: [\"Transactional\"],\n    keyword: \"tailwind components download\",\n    link: \"https://coss.com/origin/alert\",\n    traffic: 45,\n    volume: 890,\n  },\n  {\n    cpc: 5.5,\n    id: \"5\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react dashboard template free\",\n    link: \"https://coss.com/origin/tabs\",\n    traffic: 156,\n    volume: 4100,\n  },\n  {\n    cpc: 1.25,\n    id: \"6\",\n    intents: [\"Informational\"],\n    keyword: \"how to use react components\",\n    link: \"https://coss.com/origin/table\",\n    traffic: 42,\n    volume: 1200,\n  },\n  {\n    cpc: 6.8,\n    id: \"7\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react ui kit premium\",\n    link: \"https://coss.com/origin/avatar\",\n    traffic: 28,\n    volume: 760,\n  },\n  {\n    cpc: 1.8,\n    id: \"8\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react component documentation\",\n    link: \"https://coss.com/origin\",\n    traffic: 35,\n    volume: 950,\n  },\n];\n\nexport default function Component() {\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"traffic\",\n    },\n  ]);\n\n  const table = useTable({\n    columns,\n    data: items,\n    enableSortingRemoval: false,\n    features,\n    onColumnFiltersChange: setColumnFilters,\n    onSortingChange: setSorting,\n    state: {\n      columnFilters,\n      sorting,\n    },\n  });\n\n  const keywordColumn = table.getColumn(\"keyword\");\n  const intentsColumn = table.getColumn(\"intents\");\n  const volumeColumn = table.getColumn(\"volume\");\n  const cpcColumn = table.getColumn(\"cpc\");\n  const trafficColumn = table.getColumn(\"traffic\");\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap gap-3\">\n        {/* Search input */}\n        {keywordColumn && (\n          <div className=\"w-44\">\n            <Filter column={keywordColumn} />\n          </div>\n        )}\n        {/* Intents select */}\n        {intentsColumn && (\n          <div className=\"w-36\">\n            <Filter column={intentsColumn} />\n          </div>\n        )}\n        {/* Volume inputs */}\n        {volumeColumn && (\n          <div className=\"w-36\">\n            <Filter column={volumeColumn} />\n          </div>\n        )}\n        {/* CPC inputs */}\n        {cpcColumn && (\n          <div className=\"w-36\">\n            <Filter column={cpcColumn} />\n          </div>\n        )}\n        {/* Traffic inputs */}\n        {trafficColumn && (\n          <div className=\"w-36\">\n            <Filter column={trafficColumn} />\n          </div>\n        )}\n      </div>\n\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t\"\n                    key={header.id}\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? (\n                          <span aria-hidden=\"true\" className=\"size-4\" />\n                        )}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Data table with filters made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction Filter({\n  column,\n}: {\n  column: Column<typeof features, Item, unknown>;\n}) {\n  const id = useId();\n  const columnFilterValue = column.getFilterValue();\n  const { filterVariant } = column.columnDef.meta ?? {};\n  const columnHeader =\n    typeof column.columnDef.header === \"string\" ? column.columnDef.header : \"\";\n  const sortedUniqueValues = useMemo(() => {\n    if (filterVariant === \"range\") return [];\n\n    // Get all unique values from the column\n    const values = Array.from(column.getFacetedUniqueValues().keys());\n\n    // If the values are arrays, flatten them and get unique items\n    const flattenedValues = values.reduce((acc: string[], curr) => {\n      if (Array.isArray(curr)) {\n        acc.push(...curr);\n      } else {\n        acc.push(curr);\n      }\n      return acc;\n    }, []);\n\n    // Get unique values and sort them\n    return Array.from(new Set(flattenedValues)).sort();\n  }, [column, filterVariant]);\n\n  if (filterVariant === \"range\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label>{columnHeader}</Label>\n        <div className=\"flex\">\n          <Input\n            aria-label={`${columnHeader} min`}\n            className=\"flex-1 rounded-e-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-1`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                e.target.value ? Number(e.target.value) : undefined,\n                old?.[1],\n              ])\n            }\n            placeholder=\"Min\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[0] ?? \"\"}\n          />\n          <Input\n            aria-label={`${columnHeader} max`}\n            className=\"-ms-px flex-1 rounded-s-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-2`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                old?.[0],\n                e.target.value ? Number(e.target.value) : undefined,\n              ])\n            }\n            placeholder=\"Max\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[1] ?? \"\"}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  if (filterVariant === \"select\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label htmlFor={`${id}-select`}>{columnHeader}</Label>\n        <Select\n          onValueChange={(value) => {\n            column.setFilterValue(value === \"all\" ? undefined : value);\n          }}\n          value={columnFilterValue?.toString() ?? \"all\"}\n        >\n          <SelectTrigger id={`${id}-select`}>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"all\">All</SelectItem>\n            {sortedUniqueValues.map((value) => (\n              <SelectItem key={String(value)} value={String(value)}>\n                {String(value)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={`${id}-input`}>{columnHeader}</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"peer ps-9\"\n          id={`${id}-input`}\n          onChange={(e) => column.setFilterValue(e.target.value)}\n          placeholder={`Search ${columnHeader.toLowerCase()}`}\n          type=\"text\"\n          value={(columnFilterValue ?? \"\") as string}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <SearchIcon size={16} />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-479.json b/apps/origin/public/r/comp-479.json
index 9aa20c08b..aaf05cde6 100644
--- a/apps/origin/public/r/comp-479.json
+++ b/apps/origin/public/r/comp-479.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-479.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Excellent\" | \"Good\" | \"Average\" | \"Poor\";\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columnResizeMode: \"onChange\",\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onSortingChange: setSorting,\n    state: {\n      sorting,\n    },\n  });\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed\"\n        style={{\n          width: table.getCenterTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t last:[&>.cursor-col-resize]:opacity-0\"\n                    key={header.id}\n                    {...{\n                      colSpan: header.colSpan,\n                      style: {\n                        width: header.getSize(),\n                      },\n                    }}\n                  >\n                    {header.isPlaceholder ? null : (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        <span className=\"truncate\">\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                        </span>\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    )}\n                    {header.column.getCanResize() && (\n                      <div\n                        {...{\n                          className:\n                            \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:translate-x-px\",\n                          onDoubleClick: () => header.column.resetSize(),\n                          onMouseDown: header.getResizeHandler(),\n                          onTouchStart: header.getResizeHandler(),\n                        }}\n                      />\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell className=\"truncate\" key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Resizable and sortable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  columnResizingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createSortedRowModel,\n  type ColumnDef,\n  flexRender,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  type SortingState,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Excellent\" | \"Good\" | \"Average\" | \"Poor\";\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnResizingFeature,\n  columnVisibilityFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable({\n    columnResizeMode: \"onChange\",\n    columns,\n    data,\n    enableSortingRemoval: false,\n    features,\n    onSortingChange: setSorting,\n    state: {\n      sorting,\n    },\n  });\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed\"\n        style={{\n          width: table.getCenterTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t last:[&>.cursor-col-resize]:opacity-0\"\n                    key={header.id}\n                    {...{\n                      colSpan: header.colSpan,\n                      style: {\n                        width: header.getSize(),\n                      },\n                    }}\n                  >\n                    {header.isPlaceholder ? null : (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        <span className=\"truncate\">\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                        </span>\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    )}\n                    {header.column.getCanResize() && (\n                      <div\n                        {...{\n                          className:\n                            \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:translate-x-px\",\n                          onDoubleClick: () => header.column.resetSize(),\n                          onMouseDown: header.getResizeHandler(),\n                          onTouchStart: header.getResizeHandler(),\n                        }}\n                      />\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell className=\"truncate\" key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Resizable and sortable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-480.json b/apps/origin/public/r/comp-480.json
index 3cc3a68fa..f8da1643a 100644
--- a/apps/origin/public/r/comp-480.json
+++ b/apps/origin/public/r/comp-480.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-480.tsx",
-      "content": "\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n  ArrowLeftToLineIcon,\n  ArrowRightToLineIcon,\n  EllipsisIcon,\n  PinOffIcon,\n} from \"lucide-react\";\nimport { type CSSProperties, useEffect, useState } from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Good\" | \"Very Good\" | \"Excellent\" | \"Outstanding\";\n};\n\n// Helper function to compute pinning styles for columns\nconst getPinningStyles = (column: Column<Item>): CSSProperties => {\n  const isPinned = column.getIsPinned();\n  return {\n    left: isPinned === \"left\" ? `${column.getStart(\"left\")}px` : undefined,\n    position: isPinned ? \"sticky\" : \"relative\",\n    right: isPinned === \"right\" ? `${column.getAfter(\"right\")}px` : undefined,\n    width: column.getSize(),\n    zIndex: isPinned ? 1 : 0,\n  };\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columnResizeMode: \"onChange\",\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onSortingChange: setSorting,\n    state: {\n      sorting,\n    },\n  });\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed border-separate border-spacing-0 [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-border [&_th]:border-b [&_tr:not(:last-child)_td]:border-b [&_tr]:border-none\"\n        style={{\n          width: table.getTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const { column } = header;\n                const isPinned = column.getIsPinned();\n                const isLastLeftPinned =\n                  isPinned === \"left\" && column.getIsLastColumn(\"left\");\n                const isFirstRightPinned =\n                  isPinned === \"right\" && column.getIsFirstColumn(\"right\");\n\n                return (\n                  <TableHead\n                    className=\"relative h-10 truncate border-t data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border\"\n                    colSpan={header.colSpan}\n                    data-last-col={\n                      isLastLeftPinned\n                        ? \"left\"\n                        : isFirstRightPinned\n                          ? \"right\"\n                          : undefined\n                    }\n                    data-pinned={isPinned || undefined}\n                    key={header.id}\n                    style={{ ...getPinningStyles(column) }}\n                  >\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <span className=\"truncate\">\n                        {header.isPlaceholder\n                          ? null\n                          : flexRender(\n                              header.column.columnDef.header,\n                              header.getContext(),\n                            )}\n                      </span>\n                      {/* Pin/Unpin column controls with enhanced accessibility */}\n                      {!header.isPlaceholder &&\n                        header.column.getCanPin() &&\n                        (header.column.getIsPinned() ? (\n                          <Button\n                            aria-label={`Unpin ${header.column.columnDef.header as string} column`}\n                            className=\"-mr-1 size-7 shadow-none\"\n                            onClick={() => header.column.pin(false)}\n                            size=\"icon\"\n                            title={`Unpin ${header.column.columnDef.header as string} column`}\n                            variant=\"ghost\"\n                          >\n                            <PinOffIcon\n                              aria-hidden=\"true\"\n                              className=\"opacity-60\"\n                              size={16}\n                            />\n                          </Button>\n                        ) : (\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-label={`Pin options for ${header.column.columnDef.header as string} column`}\n                                className=\"-mr-1 size-7 shadow-none\"\n                                size=\"icon\"\n                                title={`Pin options for ${header.column.columnDef.header as string} column`}\n                                variant=\"ghost\"\n                              >\n                                <EllipsisIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"left\")}\n                              >\n                                <ArrowLeftToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to left\n                              </DropdownMenuItem>\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"right\")}\n                              >\n                                <ArrowRightToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to right\n                              </DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        ))}\n                      {header.column.getCanResize() && (\n                        <div\n                          {...{\n                            className:\n                              \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:-translate-x-px\",\n                            onDoubleClick: () => header.column.resetSize(),\n                            onMouseDown: header.getResizeHandler(),\n                            onTouchStart: header.getResizeHandler(),\n                          }}\n                        />\n                      )}\n                    </div>\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => {\n                  const { column } = cell;\n                  const isPinned = column.getIsPinned();\n                  const isLastLeftPinned =\n                    isPinned === \"left\" && column.getIsLastColumn(\"left\");\n                  const isFirstRightPinned =\n                    isPinned === \"right\" && column.getIsFirstColumn(\"right\");\n\n                  return (\n                    <TableCell\n                      className=\"truncate data-pinned:bg-background/90 data-pinned:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border\"\n                      data-last-col={\n                        isLastLeftPinned\n                          ? \"left\"\n                          : isFirstRightPinned\n                            ? \"right\"\n                            : undefined\n                      }\n                      data-pinned={isPinned || undefined}\n                      key={cell.id}\n                      style={{ ...getPinningStyles(column) }}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  );\n                })}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Pinnable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  columnOrderingFeature,\n  columnPinningFeature,\n  columnResizingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createSortedRowModel,\n  type Column,\n  type ColumnDef,\n  flexRender,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  type SortingState,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ArrowLeftToLineIcon,\n  ArrowRightToLineIcon,\n  EllipsisIcon,\n  PinOffIcon,\n} from \"lucide-react\";\nimport { type CSSProperties, useEffect, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Good\" | \"Very Good\" | \"Excellent\" | \"Outstanding\";\n};\n\nconst features = tableFeatures({\n  columnOrderingFeature,\n  columnPinningFeature,\n  columnSizingFeature,\n  columnResizingFeature,\n  columnVisibilityFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\n// Helper function to compute pinning styles for columns\nconst getPinningStyles = (\n  column: Column<typeof features, Item, unknown>,\n): CSSProperties => {\n  const isPinned = column.getIsPinned();\n  return {\n    insetInlineEnd:\n      isPinned === \"end\" ? `${column.getAfter(\"end\")}px` : undefined,\n    insetInlineStart:\n      isPinned === \"start\" ? `${column.getStart(\"start\")}px` : undefined,\n    position: isPinned ? \"sticky\" : \"relative\",\n    width: column.getSize(),\n    zIndex: isPinned ? 1 : 0,\n  };\n};\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable({\n    columnResizeMode: \"onChange\",\n    columns,\n    data,\n    enableSortingRemoval: false,\n    features,\n    onSortingChange: setSorting,\n    state: {\n      sorting,\n    },\n  });\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed border-separate border-spacing-0 [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-border [&_th]:border-b [&_tr:not(:last-child)_td]:border-b [&_tr]:border-none\"\n        style={{\n          width: table.getTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const { column } = header;\n                const isPinned = column.getIsPinned();\n                const isLastStartPinned =\n                  isPinned === \"start\" && column.getIsLastColumn(\"start\");\n                const isFirstEndPinned =\n                  isPinned === \"end\" && column.getIsFirstColumn(\"end\");\n\n                return (\n                  <TableHead\n                    className=\"relative h-10 truncate border-t data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=start]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=end]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=end][data-last-col=end]]:border-s [&[data-pinned=start][data-last-col=start]]:border-e [&[data-pinned][data-last-col]]:border-border\"\n                    colSpan={header.colSpan}\n                    data-last-col={\n                      isLastStartPinned\n                        ? \"start\"\n                        : isFirstEndPinned\n                          ? \"end\"\n                          : undefined\n                    }\n                    data-pinned={isPinned || undefined}\n                    key={header.id}\n                    style={{ ...getPinningStyles(column) }}\n                  >\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <span className=\"truncate\">\n                        {header.isPlaceholder\n                          ? null\n                          : flexRender(\n                              header.column.columnDef.header,\n                              header.getContext(),\n                            )}\n                      </span>\n                      {/* Pin/Unpin column controls with enhanced accessibility */}\n                      {!header.isPlaceholder &&\n                        header.column.getCanPin() &&\n                        (header.column.getIsPinned() ? (\n                          <Button\n                            aria-label={`Unpin ${header.column.columnDef.header as string} column`}\n                            className=\"-mr-1 size-7 shadow-none\"\n                            onClick={() => header.column.pin(false)}\n                            size=\"icon\"\n                            title={`Unpin ${header.column.columnDef.header as string} column`}\n                            variant=\"ghost\"\n                          >\n                            <PinOffIcon\n                              aria-hidden=\"true\"\n                              className=\"opacity-60\"\n                              size={16}\n                            />\n                          </Button>\n                        ) : (\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-label={`Pin options for ${header.column.columnDef.header as string} column`}\n                                className=\"-mr-1 size-7 shadow-none\"\n                                size=\"icon\"\n                                title={`Pin options for ${header.column.columnDef.header as string} column`}\n                                variant=\"ghost\"\n                              >\n                                <EllipsisIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"start\")}\n                              >\n                                <ArrowLeftToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to start\n                              </DropdownMenuItem>\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"end\")}\n                              >\n                                <ArrowRightToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to end\n                              </DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        ))}\n                      {header.column.getCanResize() && (\n                        <div\n                          {...{\n                            className:\n                              \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:-translate-x-px\",\n                            onDoubleClick: () => header.column.resetSize(),\n                            onMouseDown: header.getResizeHandler(),\n                            onTouchStart: header.getResizeHandler(),\n                          }}\n                        />\n                      )}\n                    </div>\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => {\n                  const { column } = cell;\n                  const isPinned = column.getIsPinned();\n                  const isLastStartPinned =\n                    isPinned === \"start\" && column.getIsLastColumn(\"start\");\n                  const isFirstEndPinned =\n                    isPinned === \"end\" && column.getIsFirstColumn(\"end\");\n\n                  return (\n                    <TableCell\n                      className=\"truncate data-pinned:bg-background/90 data-pinned:backdrop-blur-xs [&[data-pinned=end][data-last-col=end]]:border-s [&[data-pinned=start][data-last-col=start]]:border-e [&[data-pinned][data-last-col]]:border-border\"\n                      data-last-col={\n                        isLastStartPinned\n                          ? \"start\"\n                          : isFirstEndPinned\n                            ? \"end\"\n                            : undefined\n                      }\n                      data-pinned={isPinned || undefined}\n                      key={cell.id}\n                      style={{ ...getPinningStyles(column) }}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  );\n                })}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Pinnable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-481.json b/apps/origin/public/r/comp-481.json
index 0b3c33e18..72b7b175b 100644
--- a/apps/origin/public/r/comp-481.json
+++ b/apps/origin/public/r/comp-481.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-481.tsx",
-      "content": "\"use client\";\n\nimport {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToHorizontalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  useSortable,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport {\n  type Cell,\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  type Header,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, GripVerticalIcon } from \"lucide-react\";\nimport { type CSSProperties, useEffect, useId, useState } from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    id: \"name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    id: \"email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    id: \"location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    id: \"status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    id: \"balance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [columnOrder, setColumnOrder] = useState<string[]>(\n    columns.map((column) => column.id as string),\n  );\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columnResizeMode: \"onChange\",\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onColumnOrderChange: setColumnOrder,\n    onSortingChange: setSorting,\n    state: {\n      columnOrder,\n      sorting,\n    },\n  });\n\n  // reorder columns after drag & drop\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event;\n    if (active && over && active.id !== over.id) {\n      setColumnOrder((columnOrder) => {\n        const oldIndex = columnOrder.indexOf(active.id as string);\n        const newIndex = columnOrder.indexOf(over.id as string);\n        return arrayMove(columnOrder, oldIndex, newIndex); //this is just a splice util\n      });\n    }\n  }\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {}),\n  );\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={useId()}\n      modifiers={[restrictToHorizontalAxis]}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              <SortableContext\n                items={columnOrder}\n                strategy={horizontalListSortingStrategy}\n              >\n                {headerGroup.headers.map((header) => (\n                  <DraggableTableHeader header={header} key={header.id} />\n                ))}\n              </SortableContext>\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <SortableContext\n                    items={columnOrder}\n                    key={cell.id}\n                    strategy={horizontalListSortingStrategy}\n                  >\n                    <DragAlongCell cell={cell} key={cell.id} />\n                  </SortableContext>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Draggable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>{\" \"}\n        and{\" \"}\n        <a href=\"https://dndkit.com/\" rel=\"noopener noreferrer\" target=\"_blank\">\n          dnd kit\n        </a>\n      </p>\n    </DndContext>\n  );\n}\n\nconst DraggableTableHeader = ({\n  header,\n}: {\n  header: Header<Item, unknown>;\n}) => {\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({\n    id: header.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    whiteSpace: \"nowrap\",\n    width: header.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableHead\n      aria-sort={\n        header.column.getIsSorted() === \"asc\"\n          ? \"ascending\"\n          : header.column.getIsSorted() === \"desc\"\n            ? \"descending\"\n            : \"none\"\n      }\n      className=\"relative h-10 border-t before:absolute before:inset-y-0 before:start-0 before:w-px before:bg-border first:before:bg-transparent\"\n      ref={setNodeRef}\n      style={style}\n    >\n      <div className=\"flex items-center justify-start gap-0.5\">\n        <Button\n          className=\"-ml-2 size-7 shadow-none\"\n          size=\"icon\"\n          variant=\"ghost\"\n          {...attributes}\n          {...listeners}\n          aria-label=\"Drag to reorder\"\n        >\n          <GripVerticalIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60\"\n            size={16}\n          />\n        </Button>\n        <span className=\"grow truncate\">\n          {header.isPlaceholder\n            ? null\n            : flexRender(header.column.columnDef.header, header.getContext())}\n        </span>\n        <Button\n          className=\"group -mr-1 size-7 shadow-none\"\n          onClick={header.column.getToggleSortingHandler()}\n          onKeyDown={(e) => {\n            // Enhanced keyboard handling for sorting\n            if (\n              header.column.getCanSort() &&\n              (e.key === \"Enter\" || e.key === \" \")\n            ) {\n              e.preventDefault();\n              header.column.getToggleSortingHandler()?.(e);\n            }\n          }}\n          size=\"icon\"\n          variant=\"ghost\"\n        >\n          {{\n            asc: (\n              <ChevronUpIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n            desc: (\n              <ChevronDownIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n          }[header.column.getIsSorted() as string] ?? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"shrink-0 opacity-0 group-hover:opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      </div>\n    </TableHead>\n  );\n};\n\nconst DragAlongCell = ({ cell }: { cell: Cell<Item, unknown> }) => {\n  const { isDragging, setNodeRef, transform, transition } = useSortable({\n    id: cell.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    width: cell.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableCell className=\"truncate\" ref={setNodeRef} style={style}>\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </TableCell>\n  );\n};\n",
+      "content": "\"use client\";\n\nimport {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToHorizontalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  useSortable,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport {\n  columnOrderingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createSortedRowModel,\n  type Cell,\n  type ColumnDef,\n  flexRender,\n  type Header,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  type SortingState,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, GripVerticalIcon } from \"lucide-react\";\nimport { type CSSProperties, useEffect, useId, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnOrderingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    id: \"name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    id: \"email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    id: \"location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    id: \"status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    id: \"balance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [columnOrder, setColumnOrder] = useState<string[]>(\n    columns.map((column) => column.id as string),\n  );\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    features,\n    onColumnOrderChange: setColumnOrder,\n    onSortingChange: setSorting,\n    state: {\n      columnOrder,\n      sorting,\n    },\n  });\n\n  // reorder columns after drag & drop\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event;\n    if (active && over && active.id !== over.id) {\n      setColumnOrder((columnOrder) => {\n        const oldIndex = columnOrder.indexOf(active.id as string);\n        const newIndex = columnOrder.indexOf(over.id as string);\n        return arrayMove(columnOrder, oldIndex, newIndex); //this is just a splice util\n      });\n    }\n  }\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {}),\n  );\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={useId()}\n      modifiers={[restrictToHorizontalAxis]}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              <SortableContext\n                items={columnOrder}\n                strategy={horizontalListSortingStrategy}\n              >\n                {headerGroup.headers.map((header) => (\n                  <DraggableTableHeader header={header} key={header.id} />\n                ))}\n              </SortableContext>\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <SortableContext\n                    items={columnOrder}\n                    key={cell.id}\n                    strategy={horizontalListSortingStrategy}\n                  >\n                    <DragAlongCell cell={cell} key={cell.id} />\n                  </SortableContext>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Draggable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>{\" \"}\n        and{\" \"}\n        <a href=\"https://dndkit.com/\" rel=\"noopener noreferrer\" target=\"_blank\">\n          dnd kit\n        </a>\n      </p>\n    </DndContext>\n  );\n}\n\nconst DraggableTableHeader = ({\n  header,\n}: {\n  header: Header<typeof features, Item, unknown>;\n}) => {\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({\n    id: header.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    whiteSpace: \"nowrap\",\n    width: header.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableHead\n      aria-sort={\n        header.column.getIsSorted() === \"asc\"\n          ? \"ascending\"\n          : header.column.getIsSorted() === \"desc\"\n            ? \"descending\"\n            : \"none\"\n      }\n      className=\"relative h-10 border-t before:absolute before:inset-y-0 before:start-0 before:w-px before:bg-border first:before:bg-transparent\"\n      ref={setNodeRef}\n      style={style}\n    >\n      <div className=\"flex items-center justify-start gap-0.5\">\n        <Button\n          className=\"-ml-2 size-7 shadow-none\"\n          size=\"icon\"\n          variant=\"ghost\"\n          {...attributes}\n          {...listeners}\n          aria-label=\"Drag to reorder\"\n        >\n          <GripVerticalIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60\"\n            size={16}\n          />\n        </Button>\n        <span className=\"grow truncate\">\n          {header.isPlaceholder\n            ? null\n            : flexRender(header.column.columnDef.header, header.getContext())}\n        </span>\n        <Button\n          className=\"group -mr-1 size-7 shadow-none\"\n          onClick={header.column.getToggleSortingHandler()}\n          onKeyDown={(e) => {\n            // Enhanced keyboard handling for sorting\n            if (\n              header.column.getCanSort() &&\n              (e.key === \"Enter\" || e.key === \" \")\n            ) {\n              e.preventDefault();\n              header.column.getToggleSortingHandler()?.(e);\n            }\n          }}\n          size=\"icon\"\n          variant=\"ghost\"\n        >\n          {{\n            asc: (\n              <ChevronUpIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n            desc: (\n              <ChevronDownIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n          }[header.column.getIsSorted() as string] ?? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"shrink-0 opacity-0 group-hover:opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      </div>\n    </TableHead>\n  );\n};\n\nconst DragAlongCell = ({\n  cell,\n}: {\n  cell: Cell<typeof features, Item, unknown>;\n}) => {\n  const { isDragging, setNodeRef, transform, transition } = useSortable({\n    id: cell.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    width: cell.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableCell className=\"truncate\" ref={setNodeRef} style={style}>\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </TableCell>\n  );\n};\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-482.json b/apps/origin/public/r/comp-482.json
index d3c576275..bc3ebda73 100644
--- a/apps/origin/public/r/comp-482.json
+++ b/apps/origin/public/r/comp-482.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-482.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, InfoIcon } from \"lucide-react\";\nimport { Fragment, useEffect, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  note?: string;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => {\n      return row.getCanExpand() ? (\n        <Button\n          {...{\n            \"aria-expanded\": row.getIsExpanded(),\n            \"aria-label\": row.getIsExpanded()\n              ? `Collapse details for ${row.original.name}`\n              : `Expand details for ${row.original.name}`,\n            className: \"size-7 shadow-none text-muted-foreground\",\n            onClick: row.getToggleExpandedHandler(),\n            size: \"icon\",\n            variant: \"ghost\",\n          }}\n        >\n          {row.getIsExpanded() ? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          ) : (\n            <ChevronDownIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      ) : undefined;\n    },\n    header: () => null,\n    id: \"expander\",\n  },\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columns,\n    data,\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getRowCanExpand: (row) => Boolean(row.original.note),\n  });\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <Fragment key={row.id}>\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell\n                      className=\"whitespace-nowrap [&:has([aria-expanded])]:w-px [&:has([aria-expanded])]:py-0 [&:has([aria-expanded])]:pr-0\"\n                      key={cell.id}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n                {row.getIsExpanded() && (\n                  <TableRow>\n                    <TableCell colSpan={row.getVisibleCells().length}>\n                      <div className=\"flex items-start py-2 text-primary/80\">\n                        <span\n                          aria-hidden=\"true\"\n                          className=\"me-3 mt-0.5 flex w-7 shrink-0 justify-center\"\n                        >\n                          <InfoIcon className=\"opacity-60\" size={16} />\n                        </span>\n                        <p className=\"text-sm\">{row.original.note}</p>\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                )}\n              </Fragment>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Expanding sub-row made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  columnVisibilityFeature,\n  createExpandedRowModel,\n  type ColumnDef,\n  flexRender,\n  rowExpandingFeature,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, InfoIcon } from \"lucide-react\";\nimport { Fragment, useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  note?: string;\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowExpandingFeature,\n  expandedRowModel: createExpandedRowModel(),\n  rowSelectionFeature,\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => {\n      return row.getCanExpand() ? (\n        <Button\n          {...{\n            \"aria-expanded\": row.getIsExpanded(),\n            \"aria-label\": row.getIsExpanded()\n              ? `Collapse details for ${row.original.name}`\n              : `Expand details for ${row.original.name}`,\n            className: \"size-7 shadow-none text-muted-foreground\",\n            onClick: row.getToggleExpandedHandler(),\n            size: \"icon\",\n            variant: \"ghost\",\n          }}\n        >\n          {row.getIsExpanded() ? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          ) : (\n            <ChevronDownIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      ) : undefined;\n    },\n    header: () => null,\n    id: \"expander\",\n  },\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable({\n    columns,\n    data,\n    features,\n    getRowCanExpand: (row) => Boolean(row.original.note),\n  });\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <Fragment key={row.id}>\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell\n                      className=\"whitespace-nowrap [&:has([aria-expanded])]:w-px [&:has([aria-expanded])]:py-0 [&:has([aria-expanded])]:pr-0\"\n                      key={cell.id}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n                {row.getIsExpanded() && (\n                  <TableRow>\n                    <TableCell colSpan={row.getVisibleCells().length}>\n                      <div className=\"flex items-start py-2 text-primary/80\">\n                        <span\n                          aria-hidden=\"true\"\n                          className=\"me-3 mt-0.5 flex w-7 shrink-0 justify-center\"\n                        >\n                          <InfoIcon className=\"opacity-60\" size={16} />\n                        </span>\n                        <p className=\"text-sm\">{row.original.note}</p>\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                )}\n              </Fragment>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Expanding sub-row made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-483.json b/apps/origin/public/r/comp-483.json
index 78825b091..139a9bea6 100644
--- a/apps/origin/public/r/comp-483.json
+++ b/apps/origin/public/r/comp-483.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-483.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 5,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData([...data, ...data]);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.getState().pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.getState().pagination.pageIndex *\n                table.getState().pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.getState().pagination.pageIndex *\n                    table.getState().pagination.pageSize +\n                    table.getState().pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Paginated table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  type ColumnDef,\n  flexRender,\n  type PaginationState,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  type SortingState,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 5,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData([...data, ...data]);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    features,\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.state.pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.state.pagination.pageIndex *\n                table.state.pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.state.pagination.pageIndex *\n                    table.state.pagination.pageSize +\n                    table.state.pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Paginated table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-484.json b/apps/origin/public/r/comp-484.json
index b0c1a7ee5..76e48760f 100644
--- a/apps/origin/public/r/comp-484.json
+++ b/apps/origin/public/r/comp-484.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-484.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\n\nimport { usePagination } from \"@/registry/default/hooks/use-pagination\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all rows\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const pageSize = 5;\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage: table.getState().pagination.pageIndex + 1,\n    paginationItemsToDisplay: 5,\n    totalPages: table.getPageCount(),\n  });\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-3 max-sm:flex-col\">\n        {/* Page number information */}\n        <p\n          aria-live=\"polite\"\n          className=\"flex-1 whitespace-nowrap text-muted-foreground text-sm\"\n        >\n          Page{\" \"}\n          <span className=\"text-foreground\">\n            {table.getState().pagination.pageIndex + 1}\n          </span>{\" \"}\n          of <span className=\"text-foreground\">{table.getPageCount()}</span>\n        </p>\n\n        {/* Pagination buttons */}\n        <div className=\"grow\">\n          <Pagination>\n            <PaginationContent>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n\n              {/* Left ellipsis (...) */}\n              {showLeftEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Page number buttons */}\n              {pages.map((page) => {\n                const isActive =\n                  page === table.getState().pagination.pageIndex + 1;\n                return (\n                  <PaginationItem key={page}>\n                    <Button\n                      aria-current={isActive ? \"page\" : undefined}\n                      onClick={() => table.setPageIndex(page - 1)}\n                      size=\"icon\"\n                      variant={`${isActive ? \"outline\" : \"ghost\"}`}\n                    >\n                      {page}\n                    </Button>\n                  </PaginationItem>\n                );\n              })}\n\n              {/* Right ellipsis (...) */}\n              {showRightEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n\n        {/* Results per page */}\n        <div className=\"flex flex-1 justify-end\">\n          <Select\n            aria-label=\"Results per page\"\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.getState().pagination.pageSize.toString()}\n          >\n            <SelectTrigger\n              className=\"w-fit whitespace-nowrap\"\n              id=\"results-per-page\"\n            >\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent>\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize} / page\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Numeric pagination made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  type ColumnDef,\n  flexRender,\n  type PaginationState,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  type SortingState,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { usePagination } from \"@/registry/default/hooks/use-pagination\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all rows\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const pageSize = 5;\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    features,\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage: table.state.pagination.pageIndex + 1,\n    paginationItemsToDisplay: 5,\n    totalPages: table.getPageCount(),\n  });\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-3 max-sm:flex-col\">\n        {/* Page number information */}\n        <p\n          aria-live=\"polite\"\n          className=\"flex-1 whitespace-nowrap text-muted-foreground text-sm\"\n        >\n          Page{\" \"}\n          <span className=\"text-foreground\">\n            {table.state.pagination.pageIndex + 1}\n          </span>{\" \"}\n          of <span className=\"text-foreground\">{table.getPageCount()}</span>\n        </p>\n\n        {/* Pagination buttons */}\n        <div className=\"grow\">\n          <Pagination>\n            <PaginationContent>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n\n              {/* Left ellipsis (...) */}\n              {showLeftEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Page number buttons */}\n              {pages.map((page) => {\n                const isActive = page === table.state.pagination.pageIndex + 1;\n                return (\n                  <PaginationItem key={page}>\n                    <Button\n                      aria-current={isActive ? \"page\" : undefined}\n                      onClick={() => table.setPageIndex(page - 1)}\n                      size=\"icon\"\n                      variant={`${isActive ? \"outline\" : \"ghost\"}`}\n                    >\n                      {page}\n                    </Button>\n                  </PaginationItem>\n                );\n              })}\n\n              {/* Right ellipsis (...) */}\n              {showRightEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n\n        {/* Results per page */}\n        <div className=\"flex flex-1 justify-end\">\n          <Select\n            aria-label=\"Results per page\"\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.state.pagination.pageSize.toString()}\n          >\n            <SelectTrigger\n              className=\"w-fit whitespace-nowrap\"\n              id=\"results-per-page\"\n            >\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent>\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize} / page\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Numeric pagination made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/origin/public/r/comp-485.json b/apps/origin/public/r/comp-485.json
index 62bbc1eaa..a269a8a76 100644
--- a/apps/origin/public/r/comp-485.json
+++ b/apps/origin/public/r/comp-485.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-485.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  type ColumnFiltersState,\n  type FilterFn,\n  flexRender,\n  getCoreRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type Row,\n  type SortingState,\n  useReactTable,\n  type VisibilityState,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CircleAlertIcon,\n  CircleXIcon,\n  Columns3Icon,\n  EllipsisIcon,\n  FilterIcon,\n  ListFilterIcon,\n  PlusIcon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\n// Custom filter function for multi-column searching\nconst multiColumnFilterFn: FilterFn<Item> = (row, _columnId, filterValue) => {\n  const searchableRowContent =\n    `${row.original.name} ${row.original.email}`.toLowerCase();\n  const searchTerm = (filterValue ?? \"\").toLowerCase();\n  return searchableRowContent.includes(searchTerm);\n};\n\nconst statusFilterFn: FilterFn<Item> = (\n  row,\n  columnId,\n  filterValue: string[],\n) => {\n  if (!filterValue?.length) return true;\n  const status = row.getValue(columnId) as string;\n  return filterValue.includes(status);\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableHiding: false,\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    enableHiding: false,\n    filterFn: multiColumnFilterFn,\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 220,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    filterFn: statusFilterFn,\n    header: \"Status\",\n    size: 100,\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n  {\n    cell: ({ row }) => <RowActions row={row} />,\n    enableHiding: false,\n    header: () => <span className=\"sr-only\">Actions</span>,\n    id: \"actions\",\n    size: 60,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 10,\n  });\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const handleDeleteRows = () => {\n    const selectedRows = table.getSelectedRowModel().rows;\n    const updatedData = data.filter(\n      (item) => !selectedRows.some((row) => row.original.id === item.id),\n    );\n    setData(updatedData);\n    table.resetRowSelection();\n  };\n\n  const table = useReactTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      columnFilters,\n      columnVisibility,\n      pagination,\n      sorting,\n    },\n  });\n\n  // Get unique status values\n  const uniqueStatusValues = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n\n    if (!statusColumn) return [];\n\n    const values = Array.from(statusColumn.getFacetedUniqueValues().keys());\n\n    return values.sort();\n  }, [table.getColumn]);\n\n  // Get counts for each status\n  const statusCounts = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n    if (!statusColumn) return new Map();\n    return statusColumn.getFacetedUniqueValues();\n  }, [table]);\n\n  const selectedStatuses = useMemo(() => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    return filterValue ?? [];\n  }, [table]);\n\n  const handleStatusChange = (checked: boolean, value: string) => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    const newFilterValue = filterValue ? [...filterValue] : [];\n\n    if (checked) {\n      newFilterValue.push(value);\n    } else {\n      const index = newFilterValue.indexOf(value);\n      if (index > -1) {\n        newFilterValue.splice(index, 1);\n      }\n    }\n\n    table\n      .getColumn(\"status\")\n      ?.setFilterValue(newFilterValue.length ? newFilterValue : undefined);\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div className=\"flex items-center gap-3\">\n          {/* Filter by name or email */}\n          <div className=\"relative\">\n            <Input\n              aria-label=\"Filter by name or email\"\n              className={cn(\n                \"peer min-w-60 ps-9\",\n                Boolean(table.getColumn(\"name\")?.getFilterValue()) && \"pe-9\",\n              )}\n              id={`${id}-input`}\n              onChange={(e) =>\n                table.getColumn(\"name\")?.setFilterValue(e.target.value)\n              }\n              placeholder=\"Filter by name or email...\"\n              ref={inputRef}\n              type=\"text\"\n              value={\n                (table.getColumn(\"name\")?.getFilterValue() ?? \"\") as string\n              }\n            />\n            <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n              <ListFilterIcon aria-hidden=\"true\" size={16} />\n            </div>\n            {Boolean(table.getColumn(\"name\")?.getFilterValue()) && (\n              <button\n                aria-label=\"Clear filter\"\n                className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n                onClick={() => {\n                  table.getColumn(\"name\")?.setFilterValue(\"\");\n                  if (inputRef.current) {\n                    inputRef.current.focus();\n                  }\n                }}\n                type=\"button\"\n              >\n                <CircleXIcon aria-hidden=\"true\" size={16} />\n              </button>\n            )}\n          </div>\n          {/* Filter by status */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button variant=\"outline\">\n                <FilterIcon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                Status\n                {selectedStatuses.length > 0 && (\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {selectedStatuses.length}\n                  </span>\n                )}\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-auto min-w-36 p-3\">\n              <div className=\"space-y-3\">\n                <div className=\"font-medium text-muted-foreground text-xs\">\n                  Filters\n                </div>\n                <div className=\"space-y-3\">\n                  {uniqueStatusValues.map((value, i) => (\n                    <div className=\"flex items-center gap-2\" key={value}>\n                      <Checkbox\n                        checked={selectedStatuses.includes(value)}\n                        id={`${id}-${i}`}\n                        onCheckedChange={(checked: boolean) =>\n                          handleStatusChange(checked, value)\n                        }\n                      />\n                      <Label\n                        className=\"flex grow justify-between gap-2 font-normal\"\n                        htmlFor={`${id}-${i}`}\n                      >\n                        {value}{\" \"}\n                        <span className=\"ms-2 text-muted-foreground text-xs\">\n                          {statusCounts.get(value)}\n                        </span>\n                      </Label>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </PopoverContent>\n          </Popover>\n          {/* Toggle columns visibility */}\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\">\n                <Columns3Icon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                View\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n              {table\n                .getAllColumns()\n                .filter((column) => column.getCanHide())\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      checked={column.getIsVisible()}\n                      className=\"capitalize\"\n                      key={column.id}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                      onSelect={(event) => event.preventDefault()}\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  );\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          {/* Delete button */}\n          {table.getSelectedRowModel().rows.length > 0 && (\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button className=\"ml-auto\" variant=\"outline\">\n                  <TrashIcon\n                    aria-hidden=\"true\"\n                    className=\"-ms-1 opacity-60\"\n                    size={16}\n                  />\n                  Delete\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {table.getSelectedRowModel().rows.length}\n                  </span>\n                </Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <div className=\"flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4\">\n                  <div\n                    aria-hidden=\"true\"\n                    className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\n                  >\n                    <CircleAlertIcon className=\"opacity-80\" size={16} />\n                  </div>\n                  <AlertDialogHeader>\n                    <AlertDialogTitle>\n                      Are you absolutely sure?\n                    </AlertDialogTitle>\n                    <AlertDialogDescription>\n                      This action cannot be undone. This will permanently delete{\" \"}\n                      {table.getSelectedRowModel().rows.length} selected{\" \"}\n                      {table.getSelectedRowModel().rows.length === 1\n                        ? \"row\"\n                        : \"rows\"}\n                      .\n                    </AlertDialogDescription>\n                  </AlertDialogHeader>\n                </div>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction onClick={handleDeleteRows}>\n                    Delete\n                  </AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          )}\n          {/* Add user button */}\n          <Button className=\"ml-auto\" variant=\"outline\">\n            <PlusIcon\n              aria-hidden=\"true\"\n              className=\"-ms-1 opacity-60\"\n              size={16}\n            />\n            Add user\n          </Button>\n        </div>\n      </div>\n\n      {/* Table */}\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell className=\"last:py-0\" key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.getState().pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.getState().pagination.pageIndex *\n                table.getState().pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.getState().pagination.pageIndex *\n                    table.getState().pagination.pageSize +\n                    table.getState().pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Example of a more complex table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction RowActions({ row: _row }: { row: Row<Item> }) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <div className=\"flex justify-end\">\n          <Button\n            aria-label=\"Edit item\"\n            className=\"shadow-none\"\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <EllipsisIcon aria-hidden=\"true\" size={16} />\n          </Button>\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Edit</span>\n            <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <span>Duplicate</span>\n            <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Archive</span>\n            <DropdownMenuShortcut>⌘A</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Move to project</DropdownMenuItem>\n                <DropdownMenuItem>Move to folder</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>Advanced options</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Share</DropdownMenuItem>\n          <DropdownMenuItem>Add to favorites</DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem className=\"text-destructive focus:text-destructive\">\n          <span>Delete</span>\n          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  columnFacetingFeature,\n  columnFilteringFeature,\n  columnSizingFeature,\n  type ColumnVisibilityState,\n  columnVisibilityFeature,\n  createFacetedUniqueValues,\n  createFilteredRowModel,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type FilterFn,\n  flexRender,\n  type PaginationState,\n  rowPaginationFeature,\n  type Row,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  type SortingState,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CircleAlertIcon,\n  CircleXIcon,\n  Columns3Icon,\n  EllipsisIcon,\n  FilterIcon,\n  ListFilterIcon,\n  PlusIcon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnFilteringFeature,\n  columnFacetingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  facetedUniqueValues: createFacetedUniqueValues(),\n  filteredRowModel: createFilteredRowModel(),\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\n// Custom filter function for multi-column searching\nconst multiColumnFilterFn: FilterFn<typeof features, Item> = (\n  row,\n  _columnId,\n  filterValue,\n) => {\n  const searchableRowContent =\n    `${row.original.name} ${row.original.email}`.toLowerCase();\n  const searchTerm = (filterValue ?? \"\").toLowerCase();\n  return searchableRowContent.includes(searchTerm);\n};\n\nconst statusFilterFn: FilterFn<typeof features, Item> = (\n  row,\n  columnId,\n  filterValue: string[],\n) => {\n  if (!filterValue?.length) return true;\n  const status = row.getValue(columnId) as string;\n  return filterValue.includes(status);\n};\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableHiding: false,\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    enableHiding: false,\n    filterFn: multiColumnFilterFn,\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 220,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    filterFn: statusFilterFn,\n    header: \"Status\",\n    size: 100,\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n  {\n    cell: ({ row }) => <RowActions row={row} />,\n    enableHiding: false,\n    header: () => <span className=\"sr-only\">Actions</span>,\n    id: \"actions\",\n    size: 60,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [columnVisibility, setColumnVisibility] =\n    useState<ColumnVisibilityState>({});\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 10,\n  });\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const handleDeleteRows = () => {\n    const selectedRows = table.getSelectedRowModel().rows;\n    const updatedData = data.filter(\n      (item) => !selectedRows.some((row) => row.original.id === item.id),\n    );\n    setData(updatedData);\n    table.resetRowSelection();\n  };\n\n  const table = useTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    features,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      columnFilters,\n      columnVisibility,\n      pagination,\n      sorting,\n    },\n  });\n\n  // Get unique status values\n  const uniqueStatusValues = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n\n    if (!statusColumn) return [];\n\n    const values = Array.from(statusColumn.getFacetedUniqueValues().keys());\n\n    return values.sort();\n  }, [table.getColumn]);\n\n  // Get counts for each status\n  const statusCounts = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n    if (!statusColumn) return new Map();\n    return statusColumn.getFacetedUniqueValues();\n  }, [table]);\n\n  const selectedStatuses = useMemo(() => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    return filterValue ?? [];\n  }, [table]);\n\n  const handleStatusChange = (checked: boolean, value: string) => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    const newFilterValue = filterValue ? [...filterValue] : [];\n\n    if (checked) {\n      newFilterValue.push(value);\n    } else {\n      const index = newFilterValue.indexOf(value);\n      if (index > -1) {\n        newFilterValue.splice(index, 1);\n      }\n    }\n\n    table\n      .getColumn(\"status\")\n      ?.setFilterValue(newFilterValue.length ? newFilterValue : undefined);\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div className=\"flex items-center gap-3\">\n          {/* Filter by name or email */}\n          <div className=\"relative\">\n            <Input\n              aria-label=\"Filter by name or email\"\n              className={cn(\n                \"peer min-w-60 ps-9\",\n                Boolean(table.getColumn(\"name\")?.getFilterValue()) && \"pe-9\",\n              )}\n              id={`${id}-input`}\n              onChange={(e) =>\n                table.getColumn(\"name\")?.setFilterValue(e.target.value)\n              }\n              placeholder=\"Filter by name or email...\"\n              ref={inputRef}\n              type=\"text\"\n              value={\n                (table.getColumn(\"name\")?.getFilterValue() ?? \"\") as string\n              }\n            />\n            <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n              <ListFilterIcon aria-hidden=\"true\" size={16} />\n            </div>\n            {Boolean(table.getColumn(\"name\")?.getFilterValue()) && (\n              <button\n                aria-label=\"Clear filter\"\n                className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n                onClick={() => {\n                  table.getColumn(\"name\")?.setFilterValue(\"\");\n                  if (inputRef.current) {\n                    inputRef.current.focus();\n                  }\n                }}\n                type=\"button\"\n              >\n                <CircleXIcon aria-hidden=\"true\" size={16} />\n              </button>\n            )}\n          </div>\n          {/* Filter by status */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button variant=\"outline\">\n                <FilterIcon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                Status\n                {selectedStatuses.length > 0 && (\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {selectedStatuses.length}\n                  </span>\n                )}\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-auto min-w-36 p-3\">\n              <div className=\"space-y-3\">\n                <div className=\"font-medium text-muted-foreground text-xs\">\n                  Filters\n                </div>\n                <div className=\"space-y-3\">\n                  {uniqueStatusValues.map((value, i) => (\n                    <div className=\"flex items-center gap-2\" key={value}>\n                      <Checkbox\n                        checked={selectedStatuses.includes(value)}\n                        id={`${id}-${i}`}\n                        onCheckedChange={(checked: boolean) =>\n                          handleStatusChange(checked, value)\n                        }\n                      />\n                      <Label\n                        className=\"flex grow justify-between gap-2 font-normal\"\n                        htmlFor={`${id}-${i}`}\n                      >\n                        {value}{\" \"}\n                        <span className=\"ms-2 text-muted-foreground text-xs\">\n                          {statusCounts.get(value)}\n                        </span>\n                      </Label>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </PopoverContent>\n          </Popover>\n          {/* Toggle columns visibility */}\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\">\n                <Columns3Icon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                View\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n              {table\n                .getAllColumns()\n                .filter((column) => column.getCanHide())\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      checked={column.getIsVisible()}\n                      className=\"capitalize\"\n                      key={column.id}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                      onSelect={(event) => event.preventDefault()}\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  );\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          {/* Delete button */}\n          {table.getSelectedRowModel().rows.length > 0 && (\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button className=\"ml-auto\" variant=\"outline\">\n                  <TrashIcon\n                    aria-hidden=\"true\"\n                    className=\"-ms-1 opacity-60\"\n                    size={16}\n                  />\n                  Delete\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {table.getSelectedRowModel().rows.length}\n                  </span>\n                </Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <div className=\"flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4\">\n                  <div\n                    aria-hidden=\"true\"\n                    className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\n                  >\n                    <CircleAlertIcon className=\"opacity-80\" size={16} />\n                  </div>\n                  <AlertDialogHeader>\n                    <AlertDialogTitle>\n                      Are you absolutely sure?\n                    </AlertDialogTitle>\n                    <AlertDialogDescription>\n                      This action cannot be undone. This will permanently delete{\" \"}\n                      {table.getSelectedRowModel().rows.length} selected{\" \"}\n                      {table.getSelectedRowModel().rows.length === 1\n                        ? \"row\"\n                        : \"rows\"}\n                      .\n                    </AlertDialogDescription>\n                  </AlertDialogHeader>\n                </div>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction onClick={handleDeleteRows}>\n                    Delete\n                  </AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          )}\n          {/* Add user button */}\n          <Button className=\"ml-auto\" variant=\"outline\">\n            <PlusIcon\n              aria-hidden=\"true\"\n              className=\"-ms-1 opacity-60\"\n              size={16}\n            />\n            Add user\n          </Button>\n        </div>\n      </div>\n\n      {/* Table */}\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell className=\"last:py-0\" key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.state.pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.state.pagination.pageIndex *\n                table.state.pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.state.pagination.pageIndex *\n                    table.state.pagination.pageSize +\n                    table.state.pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Example of a more complex table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction RowActions({ row: _row }: { row: Row<typeof features, Item> }) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <div className=\"flex justify-end\">\n          <Button\n            aria-label=\"Edit item\"\n            className=\"shadow-none\"\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <EllipsisIcon aria-hidden=\"true\" size={16} />\n          </Button>\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Edit</span>\n            <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <span>Duplicate</span>\n            <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Archive</span>\n            <DropdownMenuShortcut>⌘A</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Move to project</DropdownMenuItem>\n                <DropdownMenuItem>Move to folder</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>Advanced options</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Share</DropdownMenuItem>\n          <DropdownMenuItem>Add to favorites</DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem className=\"text-destructive focus:text-destructive\">\n          <span>Delete</span>\n          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/registry/default/components/comp-477.tsx b/apps/origin/registry/default/components/comp-477.tsx
index 85ab73cd4..b0670a79d 100644
--- a/apps/origin/registry/default/components/comp-477.tsx
+++ b/apps/origin/registry/default/components/comp-477.tsx
@@ -2,9 +2,11 @@
 
 import {
   type ColumnDef,
+  columnVisibilityFeature,
   flexRender,
-  getCoreRowModel,
-  useReactTable,
+  rowSelectionFeature,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { useEffect, useState } from "react";
 import { cn } from "@/registry/default/lib/utils";
@@ -30,7 +32,12 @@ type Item = {
   balance: number;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnVisibilityFeature,
+  rowSelectionFeature,
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -114,10 +121,10 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
+  const table = useTable({
     columns,
     data,
-    getCoreRowModel: getCoreRowModel(),
+    features,
   });
 
   return (
diff --git a/apps/origin/registry/default/components/comp-478.tsx b/apps/origin/registry/default/components/comp-478.tsx
index 9a0522c58..4f474f79b 100644
--- a/apps/origin/registry/default/components/comp-478.tsx
+++ b/apps/origin/registry/default/components/comp-478.tsx
@@ -4,16 +4,25 @@ import {
   type Column,
   type ColumnDef,
   type ColumnFiltersState,
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  createFacetedMinMaxValues,
+  createFacetedRowModel,
+  createFacetedUniqueValues,
+  createFilteredRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  filterFn_inNumberRange,
   flexRender,
-  getCoreRowModel,
-  getFacetedMinMaxValues,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getSortedRowModel,
-  type RowData,
+  metaHelper,
+  rowSelectionFeature,
+  rowSortingFeature,
   type SortingState,
-  useReactTable,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ChevronDownIcon,
@@ -42,15 +51,6 @@ import {
   TableRow,
 } from "@/registry/default/ui/table";
 
-declare module "@tanstack/react-table" {
-  //allows us to define custom properties for our columns
-  // Type parameters TData and TValue must match TanStack Table's declaration exactly
-  // biome-ignore lint: Type parameters required for module augmentation compatibility
-  interface ColumnMeta<TData extends RowData, TValue> {
-    filterVariant?: "text" | "range" | "select";
-  }
-}
-
 type Item = {
   id: string;
   keyword: string;
@@ -63,7 +63,31 @@ type Item = {
   link: string;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnFilteringFeature,
+  columnFacetingFeature,
+  columnVisibilityFeature,
+  facetedMinMaxValues: createFacetedMinMaxValues(),
+  facetedRowModel: createFacetedRowModel(),
+  facetedUniqueValues: createFacetedUniqueValues(),
+  filteredRowModel: createFilteredRowModel(),
+  filterFns: {
+    includesString: filterFn_includesString,
+    inNumberRange: filterFn_inNumberRange,
+  },
+  columnMeta: metaHelper<{
+    filterVariant?: "text" | "range" | "select";
+  }>(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -262,16 +286,11 @@ export default function Component() {
     },
   ]);
 
-  const table = useReactTable({
+  const table = useTable({
     columns,
     data: items,
     enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getFacetedMinMaxValues: getFacetedMinMaxValues(), // generate min/max values for range filter
-    getFacetedRowModel: getFacetedRowModel(), // client-side faceting
-    getFacetedUniqueValues: getFacetedUniqueValues(), // generate unique values for select filter/autocomplete
-    getFilteredRowModel: getFilteredRowModel(), //client-side filtering
-    getSortedRowModel: getSortedRowModel(),
+    features,
     onColumnFiltersChange: setColumnFilters,
     onSortingChange: setSorting,
     state: {
@@ -431,7 +450,11 @@ export default function Component() {
   );
 }
 
-function Filter({ column }: { column: Column<Item, unknown> }) {
+function Filter({
+  column,
+}: {
+  column: Column<typeof features, Item, unknown>;
+}) {
   const id = useId();
   const columnFilterValue = column.getFilterValue();
   const { filterVariant } = column.columnDef.meta ?? {};
diff --git a/apps/origin/registry/default/components/comp-479.tsx b/apps/origin/registry/default/components/comp-479.tsx
index 6473143a8..28eed82c4 100644
--- a/apps/origin/registry/default/components/comp-479.tsx
+++ b/apps/origin/registry/default/components/comp-479.tsx
@@ -2,11 +2,18 @@
 
 import {
   type ColumnDef,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
+  rowSelectionFeature,
+  rowSortingFeature,
   type SortingState,
-  useReactTable,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -35,7 +42,20 @@ type Item = {
   performance: "Excellent" | "Good" | "Average" | "Poor";
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnSizingFeature,
+  columnResizingFeature,
+  columnVisibilityFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     accessorKey: "name",
     cell: ({ row }) => (
@@ -117,13 +137,12 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
+  const table = useTable({
     columnResizeMode: "onChange",
     columns,
     data,
     enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    features,
     onSortingChange: setSorting,
     state: {
       sorting,
diff --git a/apps/origin/registry/default/components/comp-480.tsx b/apps/origin/registry/default/components/comp-480.tsx
index a858a0311..7f89ef0a8 100644
--- a/apps/origin/registry/default/components/comp-480.tsx
+++ b/apps/origin/registry/default/components/comp-480.tsx
@@ -3,11 +3,20 @@
 import {
   type Column,
   type ColumnDef,
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
+  rowSelectionFeature,
+  rowSortingFeature,
   type SortingState,
-  useReactTable,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ArrowLeftToLineIcon,
@@ -47,19 +56,38 @@ type Item = {
   performance: "Good" | "Very Good" | "Excellent" | "Outstanding";
 };
 
+const features = tableFeatures({
+  columnOrderingFeature,
+  columnPinningFeature,
+  columnSizingFeature,
+  columnResizingFeature,
+  columnVisibilityFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
 // Helper function to compute pinning styles for columns
-const getPinningStyles = (column: Column<Item>): CSSProperties => {
+const getPinningStyles = (
+  column: Column<typeof features, Item, unknown>,
+): CSSProperties => {
   const isPinned = column.getIsPinned();
   return {
-    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
+    insetInlineEnd:
+      isPinned === "end" ? `${column.getAfter("end")}px` : undefined,
+    insetInlineStart:
+      isPinned === "start" ? `${column.getStart("start")}px` : undefined,
     position: isPinned ? "sticky" : "relative",
-    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
     width: column.getSize(),
     zIndex: isPinned ? 1 : 0,
   };
 };
 
-const columns: ColumnDef<Item>[] = [
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     accessorKey: "name",
     cell: ({ row }) => (
@@ -134,13 +162,12 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
+  const table = useTable({
     columnResizeMode: "onChange",
     columns,
     data,
     enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    features,
     onSortingChange: setSorting,
     state: {
       sorting,
@@ -161,20 +188,20 @@ export default function Component() {
               {headerGroup.headers.map((header) => {
                 const { column } = header;
                 const isPinned = column.getIsPinned();
-                const isLastLeftPinned =
-                  isPinned === "left" && column.getIsLastColumn("left");
-                const isFirstRightPinned =
-                  isPinned === "right" && column.getIsFirstColumn("right");
+                const isLastStartPinned =
+                  isPinned === "start" && column.getIsLastColumn("start");
+                const isFirstEndPinned =
+                  isPinned === "end" && column.getIsFirstColumn("end");
 
                 return (
                   <TableHead
-                    className="relative h-10 truncate border-t data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border"
+                    className="relative h-10 truncate border-t data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=start]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=end]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=end][data-last-col=end]]:border-s [&[data-pinned=start][data-last-col=start]]:border-e [&[data-pinned][data-last-col]]:border-border"
                     colSpan={header.colSpan}
                     data-last-col={
-                      isLastLeftPinned
-                        ? "left"
-                        : isFirstRightPinned
-                          ? "right"
+                      isLastStartPinned
+                        ? "start"
+                        : isFirstEndPinned
+                          ? "end"
                           : undefined
                     }
                     data-pinned={isPinned || undefined}
@@ -227,24 +254,24 @@ export default function Component() {
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
                               <DropdownMenuItem
-                                onClick={() => header.column.pin("left")}
+                                onClick={() => header.column.pin("start")}
                               >
                                 <ArrowLeftToLineIcon
                                   aria-hidden="true"
                                   className="opacity-60"
                                   size={16}
                                 />
-                                Stick to left
+                                Stick to start
                               </DropdownMenuItem>
                               <DropdownMenuItem
-                                onClick={() => header.column.pin("right")}
+                                onClick={() => header.column.pin("end")}
                               >
                                 <ArrowRightToLineIcon
                                   aria-hidden="true"
                                   className="opacity-60"
                                   size={16}
                                 />
-                                Stick to right
+                                Stick to end
                               </DropdownMenuItem>
                             </DropdownMenuContent>
                           </DropdownMenu>
@@ -277,19 +304,19 @@ export default function Component() {
                 {row.getVisibleCells().map((cell) => {
                   const { column } = cell;
                   const isPinned = column.getIsPinned();
-                  const isLastLeftPinned =
-                    isPinned === "left" && column.getIsLastColumn("left");
-                  const isFirstRightPinned =
-                    isPinned === "right" && column.getIsFirstColumn("right");
+                  const isLastStartPinned =
+                    isPinned === "start" && column.getIsLastColumn("start");
+                  const isFirstEndPinned =
+                    isPinned === "end" && column.getIsFirstColumn("end");
 
                   return (
                     <TableCell
-                      className="truncate data-pinned:bg-background/90 data-pinned:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border"
+                      className="truncate data-pinned:bg-background/90 data-pinned:backdrop-blur-xs [&[data-pinned=end][data-last-col=end]]:border-s [&[data-pinned=start][data-last-col=start]]:border-e [&[data-pinned][data-last-col]]:border-border"
                       data-last-col={
-                        isLastLeftPinned
-                          ? "left"
-                          : isFirstRightPinned
-                            ? "right"
+                        isLastStartPinned
+                          ? "start"
+                          : isFirstEndPinned
+                            ? "end"
                             : undefined
                       }
                       data-pinned={isPinned || undefined}
diff --git a/apps/origin/registry/default/components/comp-481.tsx b/apps/origin/registry/default/components/comp-481.tsx
index ec7dd64b1..c24ced7cb 100644
--- a/apps/origin/registry/default/components/comp-481.tsx
+++ b/apps/origin/registry/default/components/comp-481.tsx
@@ -21,12 +21,19 @@ import { CSS } from "@dnd-kit/utilities";
 import {
   type Cell,
   type ColumnDef,
+  columnOrderingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
   type Header,
+  rowSelectionFeature,
+  rowSortingFeature,
   type SortingState,
-  useReactTable,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { ChevronDownIcon, ChevronUpIcon, GripVerticalIcon } from "lucide-react";
 import { type CSSProperties, useEffect, useId, useState } from "react";
@@ -50,7 +57,20 @@ type Item = {
   balance: number;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnOrderingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     accessorKey: "name",
     cell: ({ row }) => (
@@ -115,13 +135,11 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
-    columnResizeMode: "onChange",
+  const table = useTable({
     columns,
     data,
     enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    features,
     onColumnOrderChange: setColumnOrder,
     onSortingChange: setSorting,
     state: {
@@ -220,7 +238,7 @@ export default function Component() {
 const DraggableTableHeader = ({
   header,
 }: {
-  header: Header<Item, unknown>;
+  header: Header<typeof features, Item, unknown>;
 }) => {
   const {
     attributes,
@@ -320,7 +338,11 @@ const DraggableTableHeader = ({
   );
 };
 
-const DragAlongCell = ({ cell }: { cell: Cell<Item, unknown> }) => {
+const DragAlongCell = ({
+  cell,
+}: {
+  cell: Cell<typeof features, Item, unknown>;
+}) => {
   const { isDragging, setNodeRef, transform, transition } = useSortable({
     id: cell.column.id,
   });
diff --git a/apps/origin/registry/default/components/comp-482.tsx b/apps/origin/registry/default/components/comp-482.tsx
index 4d0fe53e8..2685438de 100644
--- a/apps/origin/registry/default/components/comp-482.tsx
+++ b/apps/origin/registry/default/components/comp-482.tsx
@@ -2,10 +2,13 @@
 
 import {
   type ColumnDef,
+  columnVisibilityFeature,
+  createExpandedRowModel,
   flexRender,
-  getCoreRowModel,
-  getExpandedRowModel,
-  useReactTable,
+  rowExpandingFeature,
+  rowSelectionFeature,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { ChevronDownIcon, ChevronUpIcon, InfoIcon } from "lucide-react";
 import { Fragment, useEffect, useState } from "react";
@@ -33,7 +36,14 @@ type Item = {
   note?: string;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnVisibilityFeature,
+  rowExpandingFeature,
+  expandedRowModel: createExpandedRowModel(),
+  rowSelectionFeature,
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => {
       return row.getCanExpand() ? (
@@ -151,11 +161,10 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
+  const table = useTable({
     columns,
     data,
-    getCoreRowModel: getCoreRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
+    features,
     getRowCanExpand: (row) => Boolean(row.original.note),
   });
 
diff --git a/apps/origin/registry/default/components/comp-483.tsx b/apps/origin/registry/default/components/comp-483.tsx
index 088f1167f..ca175d228 100644
--- a/apps/origin/registry/default/components/comp-483.tsx
+++ b/apps/origin/registry/default/components/comp-483.tsx
@@ -2,13 +2,20 @@
 
 import {
   type ColumnDef,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createPaginatedRowModel,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
   type PaginationState,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
   type SortingState,
-  useReactTable,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ChevronDownIcon,
@@ -55,7 +62,21 @@ type Item = {
   balance: number;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -158,13 +179,11 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
+  const table = useTable({
     columns,
     data,
     enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    features,
     onPaginationChange: setPagination,
     onSortingChange: setSorting,
     state: {
@@ -281,7 +300,7 @@ export default function Component() {
             onValueChange={(value) => {
               table.setPageSize(Number(value));
             }}
-            value={table.getState().pagination.pageSize.toString()}
+            value={table.state.pagination.pageSize.toString()}
           >
             <SelectTrigger className="w-fit whitespace-nowrap" id={id}>
               <SelectValue placeholder="Select number of results" />
@@ -302,15 +321,15 @@ export default function Component() {
             className="whitespace-nowrap text-muted-foreground text-sm"
           >
             <span className="text-foreground">
-              {table.getState().pagination.pageIndex *
-                table.getState().pagination.pageSize +
+              {table.state.pagination.pageIndex *
+                table.state.pagination.pageSize +
                 1}
               -
               {Math.min(
                 Math.max(
-                  table.getState().pagination.pageIndex *
-                    table.getState().pagination.pageSize +
-                    table.getState().pagination.pageSize,
+                  table.state.pagination.pageIndex *
+                    table.state.pagination.pageSize +
+                    table.state.pagination.pageSize,
                   0,
                 ),
                 table.getRowCount(),
diff --git a/apps/origin/registry/default/components/comp-484.tsx b/apps/origin/registry/default/components/comp-484.tsx
index 5b3590636..a4abee11d 100644
--- a/apps/origin/registry/default/components/comp-484.tsx
+++ b/apps/origin/registry/default/components/comp-484.tsx
@@ -2,13 +2,20 @@
 
 import {
   type ColumnDef,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createPaginatedRowModel,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
   type PaginationState,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
   type SortingState,
-  useReactTable,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ChevronDownIcon,
@@ -54,7 +61,21 @@ type Item = {
   balance: number;
 };
 
-const columns: ColumnDef<Item>[] = [
+const features = tableFeatures({
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -158,13 +179,11 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useReactTable({
+  const table = useTable({
     columns,
     data,
     enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    features,
     onPaginationChange: setPagination,
     onSortingChange: setSorting,
     state: {
@@ -174,7 +193,7 @@ export default function Component() {
   });
 
   const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({
-    currentPage: table.getState().pagination.pageIndex + 1,
+    currentPage: table.state.pagination.pageIndex + 1,
     paginationItemsToDisplay: 5,
     totalPages: table.getPageCount(),
   });
@@ -285,7 +304,7 @@ export default function Component() {
         >
           Page{" "}
           <span className="text-foreground">
-            {table.getState().pagination.pageIndex + 1}
+            {table.state.pagination.pageIndex + 1}
           </span>{" "}
           of <span className="text-foreground">{table.getPageCount()}</span>
         </p>
@@ -317,8 +336,7 @@ export default function Component() {
 
               {/* Page number buttons */}
               {pages.map((page) => {
-                const isActive =
-                  page === table.getState().pagination.pageIndex + 1;
+                const isActive = page === table.state.pagination.pageIndex + 1;
                 return (
                   <PaginationItem key={page}>
                     <Button
@@ -364,7 +382,7 @@ export default function Component() {
             onValueChange={(value) => {
               table.setPageSize(Number(value));
             }}
-            value={table.getState().pagination.pageSize.toString()}
+            value={table.state.pagination.pageSize.toString()}
           >
             <SelectTrigger
               className="w-fit whitespace-nowrap"
diff --git a/apps/origin/registry/default/components/comp-485.tsx b/apps/origin/registry/default/components/comp-485.tsx
index fa339a46a..8f9f4e4e0 100644
--- a/apps/origin/registry/default/components/comp-485.tsx
+++ b/apps/origin/registry/default/components/comp-485.tsx
@@ -3,18 +3,27 @@
 import {
   type ColumnDef,
   type ColumnFiltersState,
+  type ColumnVisibilityState,
+  columnFacetingFeature,
+  columnFilteringFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createFacetedUniqueValues,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
   type FilterFn,
   flexRender,
-  getCoreRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
   type PaginationState,
   type Row,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
   type SortingState,
-  useReactTable,
-  type VisibilityState,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import {
   ChevronDownIcon,
@@ -101,15 +110,37 @@ type Item = {
   balance: number;
 };
 
+const features = tableFeatures({
+  columnFilteringFeature,
+  columnFacetingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  facetedUniqueValues: createFacetedUniqueValues(),
+  filteredRowModel: createFilteredRowModel(),
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
 // Custom filter function for multi-column searching
-const multiColumnFilterFn: FilterFn<Item> = (row, _columnId, filterValue) => {
+const multiColumnFilterFn: FilterFn<typeof features, Item> = (
+  row,
+  _columnId,
+  filterValue,
+) => {
   const searchableRowContent =
     `${row.original.name} ${row.original.email}`.toLowerCase();
   const searchTerm = (filterValue ?? "").toLowerCase();
   return searchableRowContent.includes(searchTerm);
 };
 
-const statusFilterFn: FilterFn<Item> = (
+const statusFilterFn: FilterFn<typeof features, Item> = (
   row,
   columnId,
   filterValue: string[],
@@ -119,7 +150,7 @@ const statusFilterFn: FilterFn<Item> = (
   return filterValue.includes(status);
 };
 
-const columns: ColumnDef<Item>[] = [
+const columns: ColumnDef<typeof features, Item>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -214,7 +245,8 @@ const columns: ColumnDef<Item>[] = [
 export default function Component() {
   const id = useId();
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [columnVisibility, setColumnVisibility] =
+    useState<ColumnVisibilityState>({});
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 10,
@@ -249,15 +281,11 @@ export default function Component() {
     table.resetRowSelection();
   };
 
-  const table = useReactTable({
+  const table = useTable({
     columns,
     data,
     enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    features,
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibility,
     onPaginationChange: setPagination,
@@ -603,7 +631,7 @@ export default function Component() {
             onValueChange={(value) => {
               table.setPageSize(Number(value));
             }}
-            value={table.getState().pagination.pageSize.toString()}
+            value={table.state.pagination.pageSize.toString()}
           >
             <SelectTrigger className="w-fit whitespace-nowrap" id={id}>
               <SelectValue placeholder="Select number of results" />
@@ -624,15 +652,15 @@ export default function Component() {
             className="whitespace-nowrap text-muted-foreground text-sm"
           >
             <span className="text-foreground">
-              {table.getState().pagination.pageIndex *
-                table.getState().pagination.pageSize +
+              {table.state.pagination.pageIndex *
+                table.state.pagination.pageSize +
                 1}
               -
               {Math.min(
                 Math.max(
-                  table.getState().pagination.pageIndex *
-                    table.getState().pagination.pageSize +
-                    table.getState().pagination.pageSize,
+                  table.state.pagination.pageIndex *
+                    table.state.pagination.pageSize +
+                    table.state.pagination.pageSize,
                   0,
                 ),
                 table.getRowCount(),
@@ -720,7 +748,7 @@ export default function Component() {
   );
 }
 
-function RowActions({ row: _row }: { row: Row<Item> }) {
+function RowActions({ row: _row }: { row: Row<typeof features, Item> }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
diff --git a/apps/ui/package.json b/apps/ui/package.json
index 9f5723b5a..25b16bd95 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -6,7 +6,7 @@
     "@hugeicons/core-free-icons": "^2.0.0",
     "@hugeicons/react": "^1.1.1",
     "@remixicon/react": "^4.7.0",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^9.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
diff --git a/apps/ui/public/r/p-table-3.json b/apps/ui/public/r/p-table-3.json
index fe51cb4f9..248ed0b2b 100644
--- a/apps/ui/public/r/p-table-3.json
+++ b/apps/ui/public/r/p-table-3.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-table-3.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport type React from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame } from \"@/registry/default/ui/frame\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Project = {\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n  budget: number;\n};\n\nconst data: Project[] = [\n  {\n    budget: 12500,\n    id: \"1\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"2\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"3\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"4\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"5\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"6\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst getStatusColor = (status: Project[\"status\"]) => {\n  switch (status) {\n    case \"Paid\":\n      return \"bg-emerald-500\";\n    case \"Unpaid\":\n      return \"bg-muted-foreground/64\";\n    case \"Pending\":\n      return \"bg-amber-500\";\n    case \"Failed\":\n      return \"bg-red-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst getColumns = (): ColumnDef<Project>[] => [\n  {\n    cell: ({ row }) => {\n      const toggleHandler = row.getToggleSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select row\"\n          checked={row.getIsSelected()}\n          disabled={!row.getCanSelect()}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select all\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    id: \"select\",\n  },\n  {\n    accessorKey: \"project\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"project\")}</div>\n    ),\n    header: \"Project\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Project[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"team\",\n    header: \"Team\",\n  },\n  {\n    accessorKey: \"budget\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"budget\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        maximumFractionDigits: 0,\n        minimumFractionDigits: 0,\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Budget</div>,\n  },\n];\n\nexport default function Particle() {\n  const [tableData] = useState<Project[]>(data);\n  const [rowSelection, setRowSelection] = useState({});\n\n  const columns = useMemo(() => getColumns(), []);\n\n  const table = useReactTable({\n    columns,\n    data: tableData,\n    enableRowSelection: true,\n    getCoreRowModel: getCoreRowModel(),\n    onRowSelectionChange: setRowSelection,\n    state: {\n      rowSelection,\n    },\n  });\n\n  const totalBudget = tableData.reduce(\n    (sum, project) => sum + project.budget,\n    0,\n  );\n  const formattedTotal = new Intl.NumberFormat(\"en-US\", {\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0,\n    style: \"currency\",\n  }).format(totalBudget);\n\n  return (\n    <Frame className=\"w-full\">\n      <Table variant=\"card\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={4}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">{formattedTotal}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Frame>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnVisibilityFeature,\n  flexRender,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport type React from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame } from \"@/registry/default/ui/frame\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Project = {\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n  budget: number;\n};\n\nconst data: Project[] = [\n  {\n    budget: 12500,\n    id: \"1\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"2\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"3\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"4\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"5\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"6\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst getStatusColor = (status: Project[\"status\"]) => {\n  switch (status) {\n    case \"Paid\":\n      return \"bg-emerald-500\";\n    case \"Unpaid\":\n      return \"bg-muted-foreground/64\";\n    case \"Pending\":\n      return \"bg-amber-500\";\n    case \"Failed\":\n      return \"bg-red-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowSelectionFeature,\n});\n\nconst getColumns = (): ColumnDef<typeof features, Project>[] => [\n  {\n    cell: ({ row }) => {\n      const toggleHandler = row.getToggleSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select row\"\n          checked={row.getIsSelected()}\n          disabled={!row.getCanSelect()}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select all\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    id: \"select\",\n  },\n  {\n    accessorKey: \"project\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"project\")}</div>\n    ),\n    header: \"Project\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Project[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"team\",\n    header: \"Team\",\n  },\n  {\n    accessorKey: \"budget\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"budget\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        maximumFractionDigits: 0,\n        minimumFractionDigits: 0,\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Budget</div>,\n  },\n];\n\nexport default function Particle() {\n  const [tableData] = useState<Project[]>(data);\n  const [rowSelection, setRowSelection] = useState({});\n\n  const columns = useMemo(() => getColumns(), []);\n\n  const table = useTable({\n    columns,\n    data: tableData,\n    enableRowSelection: true,\n    features,\n    onRowSelectionChange: setRowSelection,\n    state: {\n      rowSelection,\n    },\n  });\n\n  const totalBudget = tableData.reduce(\n    (sum, project) => sum + project.budget,\n    0,\n  );\n  const formattedTotal = new Intl.NumberFormat(\"en-US\", {\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0,\n    style: \"currency\",\n  }).format(totalBudget);\n\n  return (\n    <Frame className=\"w-full\">\n      <Table variant=\"card\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={4}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">{formattedTotal}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Frame>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-table-4.json b/apps/ui/public/r/p-table-4.json
index 34dc508a6..3909b5a11 100644
--- a/apps/ui/public/r/p-table-4.json
+++ b/apps/ui/public/r/p-table-4.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-table-4.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame, FrameFooter } from \"@/registry/default/ui/frame\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Flight = {\n  id: string;\n  flightCode: string;\n  destination: string;\n  departureTime: string;\n  arrivalTime: string;\n  terminal: string;\n  duration: string;\n  status: \"On Time\" | \"Delayed\" | \"Cancelled\" | \"Boarding\";\n  gate: string;\n};\n\nconst getStatusColor = (status: Flight[\"status\"]) => {\n  switch (status) {\n    case \"On Time\":\n      return \"bg-emerald-500\";\n    case \"Delayed\":\n      return \"bg-amber-500\";\n    case \"Cancelled\":\n      return \"bg-red-500\";\n    case \"Boarding\":\n      return \"bg-blue-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst columns: ColumnDef<Flight>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all rows\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"flightCode\",\n    cell: ({ row }) => (\n      <div className=\"font-medium font-mono text-muted-foreground\">\n        {row.getValue(\"flightCode\")}\n      </div>\n    ),\n    header: \"Flight\",\n    size: 80,\n  },\n  {\n    accessorKey: \"departureTime\",\n    cell: ({ row }) => {\n      const isCancelled = row.original.status === \"Cancelled\";\n      const isDelayed = row.original.status === \"Delayed\";\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-1.5 font-normal tabular-nums\",\n            isCancelled && \"text-muted-foreground line-through opacity-50\",\n          )}\n        >\n          <div className={isDelayed ? \"text-warning-foreground\" : undefined}>\n            {row.original.departureTime}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div\n            className={cn(\n              \"text-muted-foreground\",\n              isCancelled && \"line-through\",\n            )}\n          >\n            {row.original.duration}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div>{row.original.arrivalTime}</div>\n        </div>\n      );\n    },\n    header: \"Time\",\n    size: 220,\n  },\n  {\n    accessorKey: \"destination\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"destination\")}</div>\n    ),\n    header: \"Destination\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Flight[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-1.5 rounded-full\", getStatusColor(status))}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"terminal\",\n    cell: ({ row }) => (\n      <Badge className=\"font-normal tabular-nums\" size=\"lg\" variant=\"outline\">\n        <PlaneTakeoffIcon />\n        <span>{row.getValue(\"terminal\")}</span>\n      </Badge>\n    ),\n    header: \"Terminal\",\n    size: 90,\n  },\n  {\n    accessorKey: \"gate\",\n    header: \"Gate\",\n    size: 80,\n  },\n];\n\nexport default function Particle() {\n  const pageSize = 10;\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"departureTime\",\n    },\n  ]);\n\n  const table = useReactTable({\n    columns,\n    data: flights,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  return (\n    <Frame className=\"w-full\">\n      <Table variant=\"card\" className=\"table-fixed\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const columnSize = header.column.getSize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    style={\n                      columnSize ? { width: `${columnSize}px` } : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className=\"flex h-full cursor-pointer select-none items-center justify-between gap-2\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        role=\"button\"\n                        tabIndex={0}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <FrameFooter className=\"p-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          {/* Results range selector */}\n          <div className=\"flex items-center gap-2 whitespace-nowrap\">\n            <p className=\"text-muted-foreground text-sm\">Viewing</p>\n            <Select\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\n                const start = i * table.getState().pagination.pageSize + 1;\n                const end = Math.min(\n                  (i + 1) * table.getState().pagination.pageSize,\n                  table.getRowCount(),\n                );\n                const pageNum = i + 1;\n                return { label: `${start}-${end}`, value: pageNum };\n              })}\n              onValueChange={(value) => {\n                table.setPageIndex((value as number) - 1);\n              }}\n              value={table.getState().pagination.pageIndex + 1}\n            >\n              <SelectTrigger\n                aria-label=\"Select result range\"\n                className=\"w-fit min-w-none\"\n                size=\"sm\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\n                  const start = i * table.getState().pagination.pageSize + 1;\n                  const end = Math.min(\n                    (i + 1) * table.getState().pagination.pageSize,\n                    table.getRowCount(),\n                  );\n                  const pageNum = i + 1;\n                  return (\n                    <SelectItem key={pageNum} value={pageNum}>\n                      {`${start}-${end}`}\n                    </SelectItem>\n                  );\n                })}\n              </SelectPopup>\n            </Select>\n            <p className=\"text-muted-foreground text-sm\">\n              of{\" \"}\n              <strong className=\"font-medium text-foreground\">\n                {table.getRowCount()}\n              </strong>{\" \"}\n              results\n            </p>\n          </div>\n\n          {/* Pagination */}\n          <Pagination className=\"justify-end\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanPreviousPage()}\n                      onClick={() => table.previousPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n              <PaginationItem>\n                <PaginationNext\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanNextPage()}\n                      onClick={() => table.nextPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </FrameFooter>\n    </Frame>\n  );\n}\n\nconst flights: Flight[] = [\n  {\n    arrivalTime: \"11:45\",\n    departureTime: \"08:30\",\n    destination: \"Los Angeles\",\n    duration: \"5h 15m\",\n    flightCode: \"AA1234\",\n    gate: \"A12\",\n    id: \"1\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"17:10\",\n    departureTime: \"14:20\",\n    destination: \"San Francisco\",\n    duration: \"4h 50m\",\n    flightCode: \"DL5678\",\n    gate: \"B24\",\n    id: \"2\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:30\",\n    departureTime: \"10:15\",\n    destination: \"Miami\",\n    duration: \"3h 15m\",\n    flightCode: \"UA9012\",\n    gate: \"C8\",\n    id: \"3\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"18:20\",\n    departureTime: \"16:45\",\n    destination: \"Seattle\",\n    duration: \"2h 35m\",\n    flightCode: \"SW3456\",\n    gate: \"D15\",\n    id: \"4\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:30\",\n    departureTime: \"09:00\",\n    destination: \"Salt Lake City\",\n    duration: \"5h 30m\",\n    flightCode: \"JB7890\",\n    gate: \"E3\",\n    id: \"5\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:30\",\n    destination: \"Phoenix\",\n    duration: \"2h 45m\",\n    flightCode: \"AS2345\",\n    gate: \"F7\",\n    id: \"6\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:30\",\n    departureTime: \"13:00\",\n    destination: \"Las Vegas\",\n    duration: \"5h 30m\",\n    flightCode: \"HA6789\",\n    gate: \"G12\",\n    id: \"7\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"09:00\",\n    departureTime: \"07:15\",\n    destination: \"Dallas\",\n    duration: \"1h 45m\",\n    flightCode: \"FX0123\",\n    gate: \"H5\",\n    id: \"8\",\n    status: \"Boarding\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"08:30\",\n    departureTime: \"06:00\",\n    destination: \"Denver\",\n    duration: \"2h 30m\",\n    flightCode: \"WN4567\",\n    gate: \"I9\",\n    id: \"9\",\n    status: \"Boarding\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:45\",\n    destination: \"Portland\",\n    duration: \"2h 35m\",\n    flightCode: \"B61234\",\n    gate: \"J14\",\n    id: \"10\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"18:45\",\n    departureTime: \"15:30\",\n    destination: \"Atlanta\",\n    duration: \"3h 15m\",\n    flightCode: \"NK8901\",\n    gate: \"K6\",\n    id: \"11\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:00\",\n    departureTime: \"09:45\",\n    destination: \"Chicago\",\n    duration: \"2h 15m\",\n    flightCode: \"F92345\",\n    gate: \"L11\",\n    id: \"12\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:00\",\n    destination: \"Boston\",\n    duration: \"3h 15m\",\n    flightCode: \"SY6789\",\n    gate: \"M3\",\n    id: \"13\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:45\",\n    departureTime: \"13:30\",\n    destination: \"New York\",\n    duration: \"3h 15m\",\n    flightCode: \"G40123\",\n    gate: \"N8\",\n    id: \"14\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"11:20\",\n    departureTime: \"08:00\",\n    destination: \"Washington\",\n    duration: \"3h 20m\",\n    flightCode: \"YX5678\",\n    gate: \"O12\",\n    id: \"15\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:50\",\n    departureTime: \"10:30\",\n    destination: \"Orlando\",\n    duration: \"3h 20m\",\n    flightCode: \"4U9012\",\n    gate: \"P5\",\n    id: \"16\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:30\",\n    departureTime: \"14:00\",\n    destination: \"Houston\",\n    duration: \"2h 30m\",\n    flightCode: \"QF3456\",\n    gate: \"Q9\",\n    id: \"17\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"10:00\",\n    departureTime: \"07:30\",\n    destination: \"Minneapolis\",\n    duration: \"2h 30m\",\n    flightCode: \"LH7890\",\n    gate: \"R7\",\n    id: \"18\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"19:30\",\n    departureTime: \"16:15\",\n    destination: \"Detroit\",\n    duration: \"3h 15m\",\n    flightCode: \"KL2345\",\n    gate: \"S4\",\n    id: \"19\",\n    status: \"Cancelled\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"15:10\",\n    departureTime: \"12:00\",\n    destination: \"Philadelphia\",\n    duration: \"3h 10m\",\n    flightCode: \"AF6789\",\n    gate: \"T16\",\n    id: \"20\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:25\",\n    departureTime: \"09:15\",\n    destination: \"Charlotte\",\n    duration: \"3h 10m\",\n    flightCode: \"BA0123\",\n    gate: \"U10\",\n    id: \"21\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"18:00\",\n    departureTime: \"15:45\",\n    destination: \"Nashville\",\n    duration: \"2h 15m\",\n    flightCode: \"IB4567\",\n    gate: \"V8\",\n    id: \"22\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"14:00\",\n    departureTime: \"11:45\",\n    destination: \"Austin\",\n    duration: \"2h 15m\",\n    flightCode: \"EK8901\",\n    gate: \"W13\",\n    id: \"23\",\n    status: \"Cancelled\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"16:40\",\n    departureTime: \"13:15\",\n    destination: \"Tampa\",\n    duration: \"3h 25m\",\n    flightCode: \"QR2345\",\n    gate: \"X6\",\n    id: \"24\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"11:30\",\n    departureTime: \"08:45\",\n    destination: \"Raleigh\",\n    duration: \"2h 45m\",\n    flightCode: \"TK6789\",\n    gate: \"Y11\",\n    id: \"25\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:45\",\n    departureTime: \"10:00\",\n    destination: \"Indianapolis\",\n    duration: \"2h 45m\",\n    flightCode: \"VS3456\",\n    gate: \"Z4\",\n    id: \"26\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"20:00\",\n    departureTime: \"17:30\",\n    destination: \"Kansas City\",\n    duration: \"2h 30m\",\n    flightCode: \"LX7890\",\n    gate: \"A8\",\n    id: \"27\",\n    status: \"Delayed\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:30\",\n    destination: \"Columbus\",\n    duration: \"2h 50m\",\n    flightCode: \"OS1234\",\n    gate: \"B19\",\n    id: \"28\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:15\",\n    departureTime: \"18:00\",\n    destination: \"Milwaukee\",\n    duration: \"2h 15m\",\n    flightCode: \"SN5678\",\n    gate: \"C22\",\n    id: \"29\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"21:30\",\n    departureTime: \"19:15\",\n    destination: \"Memphis\",\n    duration: \"2h 15m\",\n    flightCode: \"TP9012\",\n    gate: \"D6\",\n    id: \"30\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n];\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  flexRender,\n  type PaginationState,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  type SortingState,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame, FrameFooter } from \"@/registry/default/ui/frame\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Flight = {\n  id: string;\n  flightCode: string;\n  destination: string;\n  departureTime: string;\n  arrivalTime: string;\n  terminal: string;\n  duration: string;\n  status: \"On Time\" | \"Delayed\" | \"Cancelled\" | \"Boarding\";\n  gate: string;\n};\n\nconst getStatusColor = (status: Flight[\"status\"]) => {\n  switch (status) {\n    case \"On Time\":\n      return \"bg-emerald-500\";\n    case \"Delayed\":\n      return \"bg-amber-500\";\n    case \"Cancelled\":\n      return \"bg-red-500\";\n    case \"Boarding\":\n      return \"bg-blue-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Flight>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all rows\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"flightCode\",\n    cell: ({ row }) => (\n      <div className=\"font-medium font-mono text-muted-foreground\">\n        {row.getValue(\"flightCode\")}\n      </div>\n    ),\n    header: \"Flight\",\n    size: 80,\n  },\n  {\n    accessorKey: \"departureTime\",\n    cell: ({ row }) => {\n      const isCancelled = row.original.status === \"Cancelled\";\n      const isDelayed = row.original.status === \"Delayed\";\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-1.5 font-normal tabular-nums\",\n            isCancelled && \"text-muted-foreground line-through opacity-50\",\n          )}\n        >\n          <div className={isDelayed ? \"text-warning-foreground\" : undefined}>\n            {row.original.departureTime}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div\n            className={cn(\n              \"text-muted-foreground\",\n              isCancelled && \"line-through\",\n            )}\n          >\n            {row.original.duration}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div>{row.original.arrivalTime}</div>\n        </div>\n      );\n    },\n    header: \"Time\",\n    size: 220,\n  },\n  {\n    accessorKey: \"destination\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"destination\")}</div>\n    ),\n    header: \"Destination\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Flight[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-1.5 rounded-full\", getStatusColor(status))}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"terminal\",\n    cell: ({ row }) => (\n      <Badge className=\"font-normal tabular-nums\" size=\"lg\" variant=\"outline\">\n        <PlaneTakeoffIcon />\n        <span>{row.getValue(\"terminal\")}</span>\n      </Badge>\n    ),\n    header: \"Terminal\",\n    size: 90,\n  },\n  {\n    accessorKey: \"gate\",\n    header: \"Gate\",\n    size: 80,\n  },\n];\n\nexport default function Particle() {\n  const pageSize = 10;\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"departureTime\",\n    },\n  ]);\n\n  const table = useTable({\n    columns,\n    data: flights,\n    enableSortingRemoval: false,\n    features,\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  return (\n    <Frame className=\"w-full\">\n      <Table variant=\"card\" className=\"table-fixed\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const columnSize = header.column.getSize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    style={\n                      columnSize ? { width: `${columnSize}px` } : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className=\"flex h-full cursor-pointer select-none items-center justify-between gap-2\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        role=\"button\"\n                        tabIndex={0}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <FrameFooter className=\"p-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          {/* Results range selector */}\n          <div className=\"flex items-center gap-2 whitespace-nowrap\">\n            <p className=\"text-muted-foreground text-sm\">Viewing</p>\n            <Select\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\n                const start = i * table.state.pagination.pageSize + 1;\n                const end = Math.min(\n                  (i + 1) * table.state.pagination.pageSize,\n                  table.getRowCount(),\n                );\n                const pageNum = i + 1;\n                return { label: `${start}-${end}`, value: pageNum };\n              })}\n              onValueChange={(value) => {\n                table.setPageIndex((value as number) - 1);\n              }}\n              value={table.state.pagination.pageIndex + 1}\n            >\n              <SelectTrigger\n                aria-label=\"Select result range\"\n                className=\"w-fit min-w-none\"\n                size=\"sm\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\n                  const start = i * table.state.pagination.pageSize + 1;\n                  const end = Math.min(\n                    (i + 1) * table.state.pagination.pageSize,\n                    table.getRowCount(),\n                  );\n                  const pageNum = i + 1;\n                  return (\n                    <SelectItem key={pageNum} value={pageNum}>\n                      {`${start}-${end}`}\n                    </SelectItem>\n                  );\n                })}\n              </SelectPopup>\n            </Select>\n            <p className=\"text-muted-foreground text-sm\">\n              of{\" \"}\n              <strong className=\"font-medium text-foreground\">\n                {table.getRowCount()}\n              </strong>{\" \"}\n              results\n            </p>\n          </div>\n\n          {/* Pagination */}\n          <Pagination className=\"justify-end\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanPreviousPage()}\n                      onClick={() => table.previousPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n              <PaginationItem>\n                <PaginationNext\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanNextPage()}\n                      onClick={() => table.nextPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </FrameFooter>\n    </Frame>\n  );\n}\n\nconst flights: Flight[] = [\n  {\n    arrivalTime: \"11:45\",\n    departureTime: \"08:30\",\n    destination: \"Los Angeles\",\n    duration: \"5h 15m\",\n    flightCode: \"AA1234\",\n    gate: \"A12\",\n    id: \"1\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"17:10\",\n    departureTime: \"14:20\",\n    destination: \"San Francisco\",\n    duration: \"4h 50m\",\n    flightCode: \"DL5678\",\n    gate: \"B24\",\n    id: \"2\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:30\",\n    departureTime: \"10:15\",\n    destination: \"Miami\",\n    duration: \"3h 15m\",\n    flightCode: \"UA9012\",\n    gate: \"C8\",\n    id: \"3\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"18:20\",\n    departureTime: \"16:45\",\n    destination: \"Seattle\",\n    duration: \"2h 35m\",\n    flightCode: \"SW3456\",\n    gate: \"D15\",\n    id: \"4\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:30\",\n    departureTime: \"09:00\",\n    destination: \"Salt Lake City\",\n    duration: \"5h 30m\",\n    flightCode: \"JB7890\",\n    gate: \"E3\",\n    id: \"5\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:30\",\n    destination: \"Phoenix\",\n    duration: \"2h 45m\",\n    flightCode: \"AS2345\",\n    gate: \"F7\",\n    id: \"6\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:30\",\n    departureTime: \"13:00\",\n    destination: \"Las Vegas\",\n    duration: \"5h 30m\",\n    flightCode: \"HA6789\",\n    gate: \"G12\",\n    id: \"7\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"09:00\",\n    departureTime: \"07:15\",\n    destination: \"Dallas\",\n    duration: \"1h 45m\",\n    flightCode: \"FX0123\",\n    gate: \"H5\",\n    id: \"8\",\n    status: \"Boarding\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"08:30\",\n    departureTime: \"06:00\",\n    destination: \"Denver\",\n    duration: \"2h 30m\",\n    flightCode: \"WN4567\",\n    gate: \"I9\",\n    id: \"9\",\n    status: \"Boarding\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:45\",\n    destination: \"Portland\",\n    duration: \"2h 35m\",\n    flightCode: \"B61234\",\n    gate: \"J14\",\n    id: \"10\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"18:45\",\n    departureTime: \"15:30\",\n    destination: \"Atlanta\",\n    duration: \"3h 15m\",\n    flightCode: \"NK8901\",\n    gate: \"K6\",\n    id: \"11\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:00\",\n    departureTime: \"09:45\",\n    destination: \"Chicago\",\n    duration: \"2h 15m\",\n    flightCode: \"F92345\",\n    gate: \"L11\",\n    id: \"12\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:00\",\n    destination: \"Boston\",\n    duration: \"3h 15m\",\n    flightCode: \"SY6789\",\n    gate: \"M3\",\n    id: \"13\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:45\",\n    departureTime: \"13:30\",\n    destination: \"New York\",\n    duration: \"3h 15m\",\n    flightCode: \"G40123\",\n    gate: \"N8\",\n    id: \"14\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"11:20\",\n    departureTime: \"08:00\",\n    destination: \"Washington\",\n    duration: \"3h 20m\",\n    flightCode: \"YX5678\",\n    gate: \"O12\",\n    id: \"15\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:50\",\n    departureTime: \"10:30\",\n    destination: \"Orlando\",\n    duration: \"3h 20m\",\n    flightCode: \"4U9012\",\n    gate: \"P5\",\n    id: \"16\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:30\",\n    departureTime: \"14:00\",\n    destination: \"Houston\",\n    duration: \"2h 30m\",\n    flightCode: \"QF3456\",\n    gate: \"Q9\",\n    id: \"17\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"10:00\",\n    departureTime: \"07:30\",\n    destination: \"Minneapolis\",\n    duration: \"2h 30m\",\n    flightCode: \"LH7890\",\n    gate: \"R7\",\n    id: \"18\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"19:30\",\n    departureTime: \"16:15\",\n    destination: \"Detroit\",\n    duration: \"3h 15m\",\n    flightCode: \"KL2345\",\n    gate: \"S4\",\n    id: \"19\",\n    status: \"Cancelled\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"15:10\",\n    departureTime: \"12:00\",\n    destination: \"Philadelphia\",\n    duration: \"3h 10m\",\n    flightCode: \"AF6789\",\n    gate: \"T16\",\n    id: \"20\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:25\",\n    departureTime: \"09:15\",\n    destination: \"Charlotte\",\n    duration: \"3h 10m\",\n    flightCode: \"BA0123\",\n    gate: \"U10\",\n    id: \"21\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"18:00\",\n    departureTime: \"15:45\",\n    destination: \"Nashville\",\n    duration: \"2h 15m\",\n    flightCode: \"IB4567\",\n    gate: \"V8\",\n    id: \"22\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"14:00\",\n    departureTime: \"11:45\",\n    destination: \"Austin\",\n    duration: \"2h 15m\",\n    flightCode: \"EK8901\",\n    gate: \"W13\",\n    id: \"23\",\n    status: \"Cancelled\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"16:40\",\n    departureTime: \"13:15\",\n    destination: \"Tampa\",\n    duration: \"3h 25m\",\n    flightCode: \"QR2345\",\n    gate: \"X6\",\n    id: \"24\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"11:30\",\n    departureTime: \"08:45\",\n    destination: \"Raleigh\",\n    duration: \"2h 45m\",\n    flightCode: \"TK6789\",\n    gate: \"Y11\",\n    id: \"25\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:45\",\n    departureTime: \"10:00\",\n    destination: \"Indianapolis\",\n    duration: \"2h 45m\",\n    flightCode: \"VS3456\",\n    gate: \"Z4\",\n    id: \"26\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"20:00\",\n    departureTime: \"17:30\",\n    destination: \"Kansas City\",\n    duration: \"2h 30m\",\n    flightCode: \"LX7890\",\n    gate: \"A8\",\n    id: \"27\",\n    status: \"Delayed\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:30\",\n    destination: \"Columbus\",\n    duration: \"2h 50m\",\n    flightCode: \"OS1234\",\n    gate: \"B19\",\n    id: \"28\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:15\",\n    departureTime: \"18:00\",\n    destination: \"Milwaukee\",\n    duration: \"2h 15m\",\n    flightCode: \"SN5678\",\n    gate: \"C22\",\n    id: \"29\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"21:30\",\n    departureTime: \"19:15\",\n    destination: \"Memphis\",\n    duration: \"2h 15m\",\n    flightCode: \"TP9012\",\n    gate: \"D6\",\n    id: \"30\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n];\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-table-6.json b/apps/ui/public/r/p-table-6.json
index 71cbff9a3..106de9dd9 100644
--- a/apps/ui/public/r/p-table-6.json
+++ b/apps/ui/public/r/p-table-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-table-6.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport type React from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { CardFrame } from \"@/registry/default/ui/card\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Project = {\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n  budget: number;\n};\n\nconst data: Project[] = [\n  {\n    budget: 12500,\n    id: \"1\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"2\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"3\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"4\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"5\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"6\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst getStatusColor = (status: Project[\"status\"]) => {\n  switch (status) {\n    case \"Paid\":\n      return \"bg-emerald-500\";\n    case \"Unpaid\":\n      return \"bg-muted-foreground/64\";\n    case \"Pending\":\n      return \"bg-amber-500\";\n    case \"Failed\":\n      return \"bg-red-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst getColumns = (): ColumnDef<Project>[] => [\n  {\n    cell: ({ row }) => {\n      const toggleHandler = row.getToggleSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select row\"\n          checked={row.getIsSelected()}\n          disabled={!row.getCanSelect()}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select all\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    id: \"select\",\n  },\n  {\n    accessorKey: \"project\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"project\")}</div>\n    ),\n    header: \"Project\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Project[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"team\",\n    header: \"Team\",\n  },\n  {\n    accessorKey: \"budget\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"budget\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        maximumFractionDigits: 0,\n        minimumFractionDigits: 0,\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Budget</div>,\n  },\n];\n\nexport default function Particle() {\n  const [tableData] = useState<Project[]>(data);\n  const [rowSelection, setRowSelection] = useState({});\n\n  const columns = useMemo(() => getColumns(), []);\n\n  const table = useReactTable({\n    columns,\n    data: tableData,\n    enableRowSelection: true,\n    getCoreRowModel: getCoreRowModel(),\n    onRowSelectionChange: setRowSelection,\n    state: {\n      rowSelection,\n    },\n  });\n\n  const totalBudget = tableData.reduce(\n    (sum, project) => sum + project.budget,\n    0,\n  );\n  const formattedTotal = new Intl.NumberFormat(\"en-US\", {\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0,\n    style: \"currency\",\n  }).format(totalBudget);\n\n  return (\n    <CardFrame className=\"w-full\">\n      <Table variant=\"card\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={4}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">{formattedTotal}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </CardFrame>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnVisibilityFeature,\n  flexRender,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport type React from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { CardFrame } from \"@/registry/default/ui/card\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Project = {\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n  budget: number;\n};\n\nconst data: Project[] = [\n  {\n    budget: 12500,\n    id: \"1\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"2\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"3\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"4\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"5\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"6\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst getStatusColor = (status: Project[\"status\"]) => {\n  switch (status) {\n    case \"Paid\":\n      return \"bg-emerald-500\";\n    case \"Unpaid\":\n      return \"bg-muted-foreground/64\";\n    case \"Pending\":\n      return \"bg-amber-500\";\n    case \"Failed\":\n      return \"bg-red-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowSelectionFeature,\n});\n\nconst getColumns = (): ColumnDef<typeof features, Project>[] => [\n  {\n    cell: ({ row }) => {\n      const toggleHandler = row.getToggleSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select row\"\n          checked={row.getIsSelected()}\n          disabled={!row.getCanSelect()}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select all\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    id: \"select\",\n  },\n  {\n    accessorKey: \"project\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"project\")}</div>\n    ),\n    header: \"Project\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Project[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"team\",\n    header: \"Team\",\n  },\n  {\n    accessorKey: \"budget\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"budget\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        maximumFractionDigits: 0,\n        minimumFractionDigits: 0,\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Budget</div>,\n  },\n];\n\nexport default function Particle() {\n  const [tableData] = useState<Project[]>(data);\n  const [rowSelection, setRowSelection] = useState({});\n\n  const columns = useMemo(() => getColumns(), []);\n\n  const table = useTable({\n    columns,\n    data: tableData,\n    enableRowSelection: true,\n    features,\n    onRowSelectionChange: setRowSelection,\n    state: {\n      rowSelection,\n    },\n  });\n\n  const totalBudget = tableData.reduce(\n    (sum, project) => sum + project.budget,\n    0,\n  );\n  const formattedTotal = new Intl.NumberFormat(\"en-US\", {\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0,\n    style: \"currency\",\n  }).format(totalBudget);\n\n  return (\n    <CardFrame className=\"w-full\">\n      <Table variant=\"card\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={4}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">{formattedTotal}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </CardFrame>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-table-8.json b/apps/ui/public/r/p-table-8.json
index a0c2e9fc5..4f4c50180 100644
--- a/apps/ui/public/r/p-table-8.json
+++ b/apps/ui/public/r/p-table-8.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-table-8.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { CardFrame, CardFrameFooter } from \"@/registry/default/ui/card\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Flight = {\n  id: string;\n  flightCode: string;\n  destination: string;\n  departureTime: string;\n  arrivalTime: string;\n  terminal: string;\n  duration: string;\n  status: \"On Time\" | \"Delayed\" | \"Cancelled\" | \"Boarding\";\n  gate: string;\n};\n\nconst getStatusColor = (status: Flight[\"status\"]) => {\n  switch (status) {\n    case \"On Time\":\n      return \"bg-emerald-500\";\n    case \"Delayed\":\n      return \"bg-amber-500\";\n    case \"Cancelled\":\n      return \"bg-red-500\";\n    case \"Boarding\":\n      return \"bg-blue-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst columns: ColumnDef<Flight>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all rows\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"flightCode\",\n    cell: ({ row }) => (\n      <div className=\"font-medium font-mono text-muted-foreground\">\n        {row.getValue(\"flightCode\")}\n      </div>\n    ),\n    header: \"Flight\",\n    size: 80,\n  },\n  {\n    accessorKey: \"departureTime\",\n    cell: ({ row }) => {\n      const isCancelled = row.original.status === \"Cancelled\";\n      const isDelayed = row.original.status === \"Delayed\";\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-1.5 font-normal tabular-nums\",\n            isCancelled && \"text-muted-foreground line-through opacity-50\",\n          )}\n        >\n          <div className={isDelayed ? \"text-warning-foreground\" : undefined}>\n            {row.original.departureTime}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div\n            className={cn(\n              \"text-muted-foreground\",\n              isCancelled && \"line-through\",\n            )}\n          >\n            {row.original.duration}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div>{row.original.arrivalTime}</div>\n        </div>\n      );\n    },\n    header: \"Time\",\n    size: 220,\n  },\n  {\n    accessorKey: \"destination\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"destination\")}</div>\n    ),\n    header: \"Destination\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Flight[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-1.5 rounded-full\", getStatusColor(status))}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"terminal\",\n    cell: ({ row }) => (\n      <Badge className=\"font-normal tabular-nums\" size=\"lg\" variant=\"outline\">\n        <PlaneTakeoffIcon />\n        <span>{row.getValue(\"terminal\")}</span>\n      </Badge>\n    ),\n    header: \"Terminal\",\n    size: 90,\n  },\n  {\n    accessorKey: \"gate\",\n    header: \"Gate\",\n    size: 80,\n  },\n];\n\nexport default function Particle() {\n  const pageSize = 10;\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"departureTime\",\n    },\n  ]);\n\n  const table = useReactTable({\n    columns,\n    data: flights,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  return (\n    <CardFrame className=\"w-full\">\n      <Table variant=\"card\" className=\"table-fixed\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const columnSize = header.column.getSize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    style={\n                      columnSize ? { width: `${columnSize}px` } : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className=\"flex h-full cursor-pointer select-none items-center justify-between gap-2\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        role=\"button\"\n                        tabIndex={0}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <CardFrameFooter className=\"p-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          {/* Results range selector */}\n          <div className=\"flex items-center gap-2 whitespace-nowrap\">\n            <p className=\"text-muted-foreground text-sm\">Viewing</p>\n            <Select\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\n                const start = i * table.getState().pagination.pageSize + 1;\n                const end = Math.min(\n                  (i + 1) * table.getState().pagination.pageSize,\n                  table.getRowCount(),\n                );\n                const pageNum = i + 1;\n                return { label: `${start}-${end}`, value: pageNum };\n              })}\n              onValueChange={(value) => {\n                table.setPageIndex((value as number) - 1);\n              }}\n              value={table.getState().pagination.pageIndex + 1}\n            >\n              <SelectTrigger\n                aria-label=\"Select result range\"\n                className=\"w-fit min-w-none\"\n                size=\"sm\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\n                  const start = i * table.getState().pagination.pageSize + 1;\n                  const end = Math.min(\n                    (i + 1) * table.getState().pagination.pageSize,\n                    table.getRowCount(),\n                  );\n                  const pageNum = i + 1;\n                  return (\n                    <SelectItem key={pageNum} value={pageNum}>\n                      {`${start}-${end}`}\n                    </SelectItem>\n                  );\n                })}\n              </SelectPopup>\n            </Select>\n            <p className=\"text-muted-foreground text-sm\">\n              of{\" \"}\n              <strong className=\"font-medium text-foreground\">\n                {table.getRowCount()}\n              </strong>{\" \"}\n              results\n            </p>\n          </div>\n\n          {/* Pagination */}\n          <Pagination className=\"justify-end\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanPreviousPage()}\n                      onClick={() => table.previousPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n              <PaginationItem>\n                <PaginationNext\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanNextPage()}\n                      onClick={() => table.nextPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </CardFrameFooter>\n    </CardFrame>\n  );\n}\n\nconst flights: Flight[] = [\n  {\n    arrivalTime: \"11:45\",\n    departureTime: \"08:30\",\n    destination: \"Los Angeles\",\n    duration: \"5h 15m\",\n    flightCode: \"AA1234\",\n    gate: \"A12\",\n    id: \"1\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"17:10\",\n    departureTime: \"14:20\",\n    destination: \"San Francisco\",\n    duration: \"4h 50m\",\n    flightCode: \"DL5678\",\n    gate: \"B24\",\n    id: \"2\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:30\",\n    departureTime: \"10:15\",\n    destination: \"Miami\",\n    duration: \"3h 15m\",\n    flightCode: \"UA9012\",\n    gate: \"C8\",\n    id: \"3\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"18:20\",\n    departureTime: \"16:45\",\n    destination: \"Seattle\",\n    duration: \"2h 35m\",\n    flightCode: \"SW3456\",\n    gate: \"D15\",\n    id: \"4\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:30\",\n    departureTime: \"09:00\",\n    destination: \"Salt Lake City\",\n    duration: \"5h 30m\",\n    flightCode: \"JB7890\",\n    gate: \"E3\",\n    id: \"5\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:30\",\n    destination: \"Phoenix\",\n    duration: \"2h 45m\",\n    flightCode: \"AS2345\",\n    gate: \"F7\",\n    id: \"6\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:30\",\n    departureTime: \"13:00\",\n    destination: \"Las Vegas\",\n    duration: \"5h 30m\",\n    flightCode: \"HA6789\",\n    gate: \"G12\",\n    id: \"7\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"09:00\",\n    departureTime: \"07:15\",\n    destination: \"Dallas\",\n    duration: \"1h 45m\",\n    flightCode: \"FX0123\",\n    gate: \"H5\",\n    id: \"8\",\n    status: \"Boarding\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"08:30\",\n    departureTime: \"06:00\",\n    destination: \"Denver\",\n    duration: \"2h 30m\",\n    flightCode: \"WN4567\",\n    gate: \"I9\",\n    id: \"9\",\n    status: \"Boarding\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:45\",\n    destination: \"Portland\",\n    duration: \"2h 35m\",\n    flightCode: \"B61234\",\n    gate: \"J14\",\n    id: \"10\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"18:45\",\n    departureTime: \"15:30\",\n    destination: \"Atlanta\",\n    duration: \"3h 15m\",\n    flightCode: \"NK8901\",\n    gate: \"K6\",\n    id: \"11\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:00\",\n    departureTime: \"09:45\",\n    destination: \"Chicago\",\n    duration: \"2h 15m\",\n    flightCode: \"F92345\",\n    gate: \"L11\",\n    id: \"12\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:00\",\n    destination: \"Boston\",\n    duration: \"3h 15m\",\n    flightCode: \"SY6789\",\n    gate: \"M3\",\n    id: \"13\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:45\",\n    departureTime: \"13:30\",\n    destination: \"New York\",\n    duration: \"3h 15m\",\n    flightCode: \"G40123\",\n    gate: \"N8\",\n    id: \"14\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"11:20\",\n    departureTime: \"08:00\",\n    destination: \"Washington\",\n    duration: \"3h 20m\",\n    flightCode: \"YX5678\",\n    gate: \"O12\",\n    id: \"15\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:50\",\n    departureTime: \"10:30\",\n    destination: \"Orlando\",\n    duration: \"3h 20m\",\n    flightCode: \"4U9012\",\n    gate: \"P5\",\n    id: \"16\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:30\",\n    departureTime: \"14:00\",\n    destination: \"Houston\",\n    duration: \"2h 30m\",\n    flightCode: \"QF3456\",\n    gate: \"Q9\",\n    id: \"17\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"10:00\",\n    departureTime: \"07:30\",\n    destination: \"Minneapolis\",\n    duration: \"2h 30m\",\n    flightCode: \"LH7890\",\n    gate: \"R7\",\n    id: \"18\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"19:30\",\n    departureTime: \"16:15\",\n    destination: \"Detroit\",\n    duration: \"3h 15m\",\n    flightCode: \"KL2345\",\n    gate: \"S4\",\n    id: \"19\",\n    status: \"Cancelled\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"15:10\",\n    departureTime: \"12:00\",\n    destination: \"Philadelphia\",\n    duration: \"3h 10m\",\n    flightCode: \"AF6789\",\n    gate: \"T16\",\n    id: \"20\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:25\",\n    departureTime: \"09:15\",\n    destination: \"Charlotte\",\n    duration: \"3h 10m\",\n    flightCode: \"BA0123\",\n    gate: \"U10\",\n    id: \"21\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"18:00\",\n    departureTime: \"15:45\",\n    destination: \"Nashville\",\n    duration: \"2h 15m\",\n    flightCode: \"IB4567\",\n    gate: \"V8\",\n    id: \"22\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"14:00\",\n    departureTime: \"11:45\",\n    destination: \"Austin\",\n    duration: \"2h 15m\",\n    flightCode: \"EK8901\",\n    gate: \"W13\",\n    id: \"23\",\n    status: \"Cancelled\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"16:40\",\n    departureTime: \"13:15\",\n    destination: \"Tampa\",\n    duration: \"3h 25m\",\n    flightCode: \"QR2345\",\n    gate: \"X6\",\n    id: \"24\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"11:30\",\n    departureTime: \"08:45\",\n    destination: \"Raleigh\",\n    duration: \"2h 45m\",\n    flightCode: \"TK6789\",\n    gate: \"Y11\",\n    id: \"25\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:45\",\n    departureTime: \"10:00\",\n    destination: \"Indianapolis\",\n    duration: \"2h 45m\",\n    flightCode: \"VS3456\",\n    gate: \"Z4\",\n    id: \"26\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"20:00\",\n    departureTime: \"17:30\",\n    destination: \"Kansas City\",\n    duration: \"2h 30m\",\n    flightCode: \"LX7890\",\n    gate: \"A8\",\n    id: \"27\",\n    status: \"Delayed\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:30\",\n    destination: \"Columbus\",\n    duration: \"2h 50m\",\n    flightCode: \"OS1234\",\n    gate: \"B19\",\n    id: \"28\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:15\",\n    departureTime: \"18:00\",\n    destination: \"Milwaukee\",\n    duration: \"2h 15m\",\n    flightCode: \"SN5678\",\n    gate: \"C22\",\n    id: \"29\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"21:30\",\n    departureTime: \"19:15\",\n    destination: \"Memphis\",\n    duration: \"2h 15m\",\n    flightCode: \"TP9012\",\n    gate: \"D6\",\n    id: \"30\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n];\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  flexRender,\n  type PaginationState,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  type SortingState,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { CardFrame, CardFrameFooter } from \"@/registry/default/ui/card\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Flight = {\n  id: string;\n  flightCode: string;\n  destination: string;\n  departureTime: string;\n  arrivalTime: string;\n  terminal: string;\n  duration: string;\n  status: \"On Time\" | \"Delayed\" | \"Cancelled\" | \"Boarding\";\n  gate: string;\n};\n\nconst getStatusColor = (status: Flight[\"status\"]) => {\n  switch (status) {\n    case \"On Time\":\n      return \"bg-emerald-500\";\n    case \"Delayed\":\n      return \"bg-amber-500\";\n    case \"Cancelled\":\n      return \"bg-red-500\";\n    case \"Boarding\":\n      return \"bg-blue-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Flight>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all rows\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"flightCode\",\n    cell: ({ row }) => (\n      <div className=\"font-medium font-mono text-muted-foreground\">\n        {row.getValue(\"flightCode\")}\n      </div>\n    ),\n    header: \"Flight\",\n    size: 80,\n  },\n  {\n    accessorKey: \"departureTime\",\n    cell: ({ row }) => {\n      const isCancelled = row.original.status === \"Cancelled\";\n      const isDelayed = row.original.status === \"Delayed\";\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-1.5 font-normal tabular-nums\",\n            isCancelled && \"text-muted-foreground line-through opacity-50\",\n          )}\n        >\n          <div className={isDelayed ? \"text-warning-foreground\" : undefined}>\n            {row.original.departureTime}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div\n            className={cn(\n              \"text-muted-foreground\",\n              isCancelled && \"line-through\",\n            )}\n          >\n            {row.original.duration}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div>{row.original.arrivalTime}</div>\n        </div>\n      );\n    },\n    header: \"Time\",\n    size: 220,\n  },\n  {\n    accessorKey: \"destination\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"destination\")}</div>\n    ),\n    header: \"Destination\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Flight[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-1.5 rounded-full\", getStatusColor(status))}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"terminal\",\n    cell: ({ row }) => (\n      <Badge className=\"font-normal tabular-nums\" size=\"lg\" variant=\"outline\">\n        <PlaneTakeoffIcon />\n        <span>{row.getValue(\"terminal\")}</span>\n      </Badge>\n    ),\n    header: \"Terminal\",\n    size: 90,\n  },\n  {\n    accessorKey: \"gate\",\n    header: \"Gate\",\n    size: 80,\n  },\n];\n\nexport default function Particle() {\n  const pageSize = 10;\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"departureTime\",\n    },\n  ]);\n\n  const table = useTable({\n    columns,\n    data: flights,\n    enableSortingRemoval: false,\n    features,\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  return (\n    <CardFrame className=\"w-full\">\n      <Table variant=\"card\" className=\"table-fixed\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const columnSize = header.column.getSize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    style={\n                      columnSize ? { width: `${columnSize}px` } : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className=\"flex h-full cursor-pointer select-none items-center justify-between gap-2\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        role=\"button\"\n                        tabIndex={0}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <CardFrameFooter className=\"p-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          {/* Results range selector */}\n          <div className=\"flex items-center gap-2 whitespace-nowrap\">\n            <p className=\"text-muted-foreground text-sm\">Viewing</p>\n            <Select\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\n                const start = i * table.state.pagination.pageSize + 1;\n                const end = Math.min(\n                  (i + 1) * table.state.pagination.pageSize,\n                  table.getRowCount(),\n                );\n                const pageNum = i + 1;\n                return { label: `${start}-${end}`, value: pageNum };\n              })}\n              onValueChange={(value) => {\n                table.setPageIndex((value as number) - 1);\n              }}\n              value={table.state.pagination.pageIndex + 1}\n            >\n              <SelectTrigger\n                aria-label=\"Select result range\"\n                className=\"w-fit min-w-none\"\n                size=\"sm\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\n                  const start = i * table.state.pagination.pageSize + 1;\n                  const end = Math.min(\n                    (i + 1) * table.state.pagination.pageSize,\n                    table.getRowCount(),\n                  );\n                  const pageNum = i + 1;\n                  return (\n                    <SelectItem key={pageNum} value={pageNum}>\n                      {`${start}-${end}`}\n                    </SelectItem>\n                  );\n                })}\n              </SelectPopup>\n            </Select>\n            <p className=\"text-muted-foreground text-sm\">\n              of{\" \"}\n              <strong className=\"font-medium text-foreground\">\n                {table.getRowCount()}\n              </strong>{\" \"}\n              results\n            </p>\n          </div>\n\n          {/* Pagination */}\n          <Pagination className=\"justify-end\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanPreviousPage()}\n                      onClick={() => table.previousPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n              <PaginationItem>\n                <PaginationNext\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanNextPage()}\n                      onClick={() => table.nextPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </CardFrameFooter>\n    </CardFrame>\n  );\n}\n\nconst flights: Flight[] = [\n  {\n    arrivalTime: \"11:45\",\n    departureTime: \"08:30\",\n    destination: \"Los Angeles\",\n    duration: \"5h 15m\",\n    flightCode: \"AA1234\",\n    gate: \"A12\",\n    id: \"1\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"17:10\",\n    departureTime: \"14:20\",\n    destination: \"San Francisco\",\n    duration: \"4h 50m\",\n    flightCode: \"DL5678\",\n    gate: \"B24\",\n    id: \"2\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:30\",\n    departureTime: \"10:15\",\n    destination: \"Miami\",\n    duration: \"3h 15m\",\n    flightCode: \"UA9012\",\n    gate: \"C8\",\n    id: \"3\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"18:20\",\n    departureTime: \"16:45\",\n    destination: \"Seattle\",\n    duration: \"2h 35m\",\n    flightCode: \"SW3456\",\n    gate: \"D15\",\n    id: \"4\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:30\",\n    departureTime: \"09:00\",\n    destination: \"Salt Lake City\",\n    duration: \"5h 30m\",\n    flightCode: \"JB7890\",\n    gate: \"E3\",\n    id: \"5\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:30\",\n    destination: \"Phoenix\",\n    duration: \"2h 45m\",\n    flightCode: \"AS2345\",\n    gate: \"F7\",\n    id: \"6\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:30\",\n    departureTime: \"13:00\",\n    destination: \"Las Vegas\",\n    duration: \"5h 30m\",\n    flightCode: \"HA6789\",\n    gate: \"G12\",\n    id: \"7\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"09:00\",\n    departureTime: \"07:15\",\n    destination: \"Dallas\",\n    duration: \"1h 45m\",\n    flightCode: \"FX0123\",\n    gate: \"H5\",\n    id: \"8\",\n    status: \"Boarding\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"08:30\",\n    departureTime: \"06:00\",\n    destination: \"Denver\",\n    duration: \"2h 30m\",\n    flightCode: \"WN4567\",\n    gate: \"I9\",\n    id: \"9\",\n    status: \"Boarding\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:45\",\n    destination: \"Portland\",\n    duration: \"2h 35m\",\n    flightCode: \"B61234\",\n    gate: \"J14\",\n    id: \"10\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"18:45\",\n    departureTime: \"15:30\",\n    destination: \"Atlanta\",\n    duration: \"3h 15m\",\n    flightCode: \"NK8901\",\n    gate: \"K6\",\n    id: \"11\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:00\",\n    departureTime: \"09:45\",\n    destination: \"Chicago\",\n    duration: \"2h 15m\",\n    flightCode: \"F92345\",\n    gate: \"L11\",\n    id: \"12\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:00\",\n    destination: \"Boston\",\n    duration: \"3h 15m\",\n    flightCode: \"SY6789\",\n    gate: \"M3\",\n    id: \"13\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:45\",\n    departureTime: \"13:30\",\n    destination: \"New York\",\n    duration: \"3h 15m\",\n    flightCode: \"G40123\",\n    gate: \"N8\",\n    id: \"14\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"11:20\",\n    departureTime: \"08:00\",\n    destination: \"Washington\",\n    duration: \"3h 20m\",\n    flightCode: \"YX5678\",\n    gate: \"O12\",\n    id: \"15\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:50\",\n    departureTime: \"10:30\",\n    destination: \"Orlando\",\n    duration: \"3h 20m\",\n    flightCode: \"4U9012\",\n    gate: \"P5\",\n    id: \"16\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:30\",\n    departureTime: \"14:00\",\n    destination: \"Houston\",\n    duration: \"2h 30m\",\n    flightCode: \"QF3456\",\n    gate: \"Q9\",\n    id: \"17\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"10:00\",\n    departureTime: \"07:30\",\n    destination: \"Minneapolis\",\n    duration: \"2h 30m\",\n    flightCode: \"LH7890\",\n    gate: \"R7\",\n    id: \"18\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"19:30\",\n    departureTime: \"16:15\",\n    destination: \"Detroit\",\n    duration: \"3h 15m\",\n    flightCode: \"KL2345\",\n    gate: \"S4\",\n    id: \"19\",\n    status: \"Cancelled\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"15:10\",\n    departureTime: \"12:00\",\n    destination: \"Philadelphia\",\n    duration: \"3h 10m\",\n    flightCode: \"AF6789\",\n    gate: \"T16\",\n    id: \"20\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:25\",\n    departureTime: \"09:15\",\n    destination: \"Charlotte\",\n    duration: \"3h 10m\",\n    flightCode: \"BA0123\",\n    gate: \"U10\",\n    id: \"21\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"18:00\",\n    departureTime: \"15:45\",\n    destination: \"Nashville\",\n    duration: \"2h 15m\",\n    flightCode: \"IB4567\",\n    gate: \"V8\",\n    id: \"22\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"14:00\",\n    departureTime: \"11:45\",\n    destination: \"Austin\",\n    duration: \"2h 15m\",\n    flightCode: \"EK8901\",\n    gate: \"W13\",\n    id: \"23\",\n    status: \"Cancelled\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"16:40\",\n    departureTime: \"13:15\",\n    destination: \"Tampa\",\n    duration: \"3h 25m\",\n    flightCode: \"QR2345\",\n    gate: \"X6\",\n    id: \"24\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"11:30\",\n    departureTime: \"08:45\",\n    destination: \"Raleigh\",\n    duration: \"2h 45m\",\n    flightCode: \"TK6789\",\n    gate: \"Y11\",\n    id: \"25\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:45\",\n    departureTime: \"10:00\",\n    destination: \"Indianapolis\",\n    duration: \"2h 45m\",\n    flightCode: \"VS3456\",\n    gate: \"Z4\",\n    id: \"26\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"20:00\",\n    departureTime: \"17:30\",\n    destination: \"Kansas City\",\n    duration: \"2h 30m\",\n    flightCode: \"LX7890\",\n    gate: \"A8\",\n    id: \"27\",\n    status: \"Delayed\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:30\",\n    destination: \"Columbus\",\n    duration: \"2h 50m\",\n    flightCode: \"OS1234\",\n    gate: \"B19\",\n    id: \"28\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:15\",\n    departureTime: \"18:00\",\n    destination: \"Milwaukee\",\n    duration: \"2h 15m\",\n    flightCode: \"SN5678\",\n    gate: \"C22\",\n    id: \"29\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"21:30\",\n    departureTime: \"19:15\",\n    destination: \"Memphis\",\n    duration: \"2h 15m\",\n    flightCode: \"TP9012\",\n    gate: \"D6\",\n    id: \"30\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n];\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/registry/default/particles/p-table-3.tsx b/apps/ui/registry/default/particles/p-table-3.tsx
index 07f1e0c00..9ab526ef6 100644
--- a/apps/ui/registry/default/particles/p-table-3.tsx
+++ b/apps/ui/registry/default/particles/p-table-3.tsx
@@ -2,9 +2,11 @@
 
 import {
   type ColumnDef,
+  columnVisibilityFeature,
   flexRender,
-  getCoreRowModel,
-  useReactTable,
+  rowSelectionFeature,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import type React from "react";
 import { useMemo, useState } from "react";
@@ -89,7 +91,12 @@ const getStatusColor = (status: Project["status"]) => {
   }
 };
 
-const getColumns = (): ColumnDef<Project>[] => [
+const features = tableFeatures({
+  columnVisibilityFeature,
+  rowSelectionFeature,
+});
+
+const getColumns = (): ColumnDef<typeof features, Project>[] => [
   {
     cell: ({ row }) => {
       const toggleHandler = row.getToggleSelectedHandler();
@@ -108,7 +115,6 @@ const getColumns = (): ColumnDef<Project>[] => [
         />
       );
     },
-    enableSorting: false,
     header: ({ table }) => {
       const isAllSelected = table.getIsAllPageRowsSelected();
       const isSomeSelected = table.getIsSomePageRowsSelected();
@@ -179,11 +185,11 @@ export default function Particle() {
 
   const columns = useMemo(() => getColumns(), []);
 
-  const table = useReactTable({
+  const table = useTable({
     columns,
     data: tableData,
     enableRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
+    features,
     onRowSelectionChange: setRowSelection,
     state: {
       rowSelection,
diff --git a/apps/ui/registry/default/particles/p-table-4.tsx b/apps/ui/registry/default/particles/p-table-4.tsx
index 7f09c9dd8..d05cdccf2 100644
--- a/apps/ui/registry/default/particles/p-table-4.tsx
+++ b/apps/ui/registry/default/particles/p-table-4.tsx
@@ -2,13 +2,20 @@
 
 import {
   type ColumnDef,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createPaginatedRowModel,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
   type PaginationState,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
   type SortingState,
-  useReactTable,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from "lucide-react";
 import { useState } from "react";
@@ -67,7 +74,21 @@ const getStatusColor = (status: Flight["status"]) => {
   }
 };
 
-const columns: ColumnDef<Flight>[] = [
+const features = tableFeatures({
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Flight>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -198,13 +219,11 @@ export default function Particle() {
     },
   ]);
 
-  const table = useReactTable({
+  const table = useTable({
     columns,
     data: flights,
     enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    features,
     onPaginationChange: setPagination,
     onSortingChange: setSorting,
     state: {
@@ -302,9 +321,9 @@ export default function Particle() {
             <p className="text-muted-foreground text-sm">Viewing</p>
             <Select
               items={Array.from({ length: table.getPageCount() }, (_, i) => {
-                const start = i * table.getState().pagination.pageSize + 1;
+                const start = i * table.state.pagination.pageSize + 1;
                 const end = Math.min(
-                  (i + 1) * table.getState().pagination.pageSize,
+                  (i + 1) * table.state.pagination.pageSize,
                   table.getRowCount(),
                 );
                 const pageNum = i + 1;
@@ -313,7 +332,7 @@ export default function Particle() {
               onValueChange={(value) => {
                 table.setPageIndex((value as number) - 1);
               }}
-              value={table.getState().pagination.pageIndex + 1}
+              value={table.state.pagination.pageIndex + 1}
             >
               <SelectTrigger
                 aria-label="Select result range"
@@ -324,9 +343,9 @@ export default function Particle() {
               </SelectTrigger>
               <SelectPopup>
                 {Array.from({ length: table.getPageCount() }, (_, i) => {
-                  const start = i * table.getState().pagination.pageSize + 1;
+                  const start = i * table.state.pagination.pageSize + 1;
                   const end = Math.min(
-                    (i + 1) * table.getState().pagination.pageSize,
+                    (i + 1) * table.state.pagination.pageSize,
                     table.getRowCount(),
                   );
                   const pageNum = i + 1;
diff --git a/apps/ui/registry/default/particles/p-table-6.tsx b/apps/ui/registry/default/particles/p-table-6.tsx
index de2fcdc61..b3b8bbb01 100644
--- a/apps/ui/registry/default/particles/p-table-6.tsx
+++ b/apps/ui/registry/default/particles/p-table-6.tsx
@@ -2,9 +2,11 @@
 
 import {
   type ColumnDef,
+  columnVisibilityFeature,
   flexRender,
-  getCoreRowModel,
-  useReactTable,
+  rowSelectionFeature,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import type React from "react";
 import { useMemo, useState } from "react";
@@ -89,7 +91,12 @@ const getStatusColor = (status: Project["status"]) => {
   }
 };
 
-const getColumns = (): ColumnDef<Project>[] => [
+const features = tableFeatures({
+  columnVisibilityFeature,
+  rowSelectionFeature,
+});
+
+const getColumns = (): ColumnDef<typeof features, Project>[] => [
   {
     cell: ({ row }) => {
       const toggleHandler = row.getToggleSelectedHandler();
@@ -108,7 +115,6 @@ const getColumns = (): ColumnDef<Project>[] => [
         />
       );
     },
-    enableSorting: false,
     header: ({ table }) => {
       const isAllSelected = table.getIsAllPageRowsSelected();
       const isSomeSelected = table.getIsSomePageRowsSelected();
@@ -179,11 +185,11 @@ export default function Particle() {
 
   const columns = useMemo(() => getColumns(), []);
 
-  const table = useReactTable({
+  const table = useTable({
     columns,
     data: tableData,
     enableRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
+    features,
     onRowSelectionChange: setRowSelection,
     state: {
       rowSelection,
diff --git a/apps/ui/registry/default/particles/p-table-8.tsx b/apps/ui/registry/default/particles/p-table-8.tsx
index d8e5d2990..629b7d43a 100644
--- a/apps/ui/registry/default/particles/p-table-8.tsx
+++ b/apps/ui/registry/default/particles/p-table-8.tsx
@@ -2,13 +2,20 @@
 
 import {
   type ColumnDef,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  createPaginatedRowModel,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
   type PaginationState,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
   type SortingState,
-  useReactTable,
+  sortFn_alphanumeric,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from "lucide-react";
 import { useState } from "react";
@@ -67,7 +74,21 @@ const getStatusColor = (status: Flight["status"]) => {
   }
 };
 
-const columns: ColumnDef<Flight>[] = [
+const features = tableFeatures({
+  columnSizingFeature,
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
+});
+
+const columns: ColumnDef<typeof features, Flight>[] = [
   {
     cell: ({ row }) => (
       <Checkbox
@@ -198,13 +219,11 @@ export default function Particle() {
     },
   ]);
 
-  const table = useReactTable({
+  const table = useTable({
     columns,
     data: flights,
     enableSortingRemoval: false,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    features,
     onPaginationChange: setPagination,
     onSortingChange: setSorting,
     state: {
@@ -302,9 +321,9 @@ export default function Particle() {
             <p className="text-muted-foreground text-sm">Viewing</p>
             <Select
               items={Array.from({ length: table.getPageCount() }, (_, i) => {
-                const start = i * table.getState().pagination.pageSize + 1;
+                const start = i * table.state.pagination.pageSize + 1;
                 const end = Math.min(
-                  (i + 1) * table.getState().pagination.pageSize,
+                  (i + 1) * table.state.pagination.pageSize,
                   table.getRowCount(),
                 );
                 const pageNum = i + 1;
@@ -313,7 +332,7 @@ export default function Particle() {
               onValueChange={(value) => {
                 table.setPageIndex((value as number) - 1);
               }}
-              value={table.getState().pagination.pageIndex + 1}
+              value={table.state.pagination.pageIndex + 1}
             >
               <SelectTrigger
                 aria-label="Select result range"
@@ -324,9 +343,9 @@ export default function Particle() {
               </SelectTrigger>
               <SelectPopup>
                 {Array.from({ length: table.getPageCount() }, (_, i) => {
-                  const start = i * table.getState().pagination.pageSize + 1;
+                  const start = i * table.state.pagination.pageSize + 1;
                   const end = Math.min(
-                    (i + 1) * table.getState().pagination.pageSize,
+                    (i + 1) * table.state.pagination.pageSize,
                     table.getRowCount(),
                   );
                   const pageNum = i + 1;
diff --git a/bun.lock b/bun.lock
index 4812e6546..4f31f428d 100644
--- a/bun.lock
+++ b/bun.lock
@@ -22,7 +22,7 @@
         "@dnd-kit/utilities": "^3.2.2",
         "@hugeicons/core-free-icons": "^2.0.0",
         "@hugeicons/react": "^1.1.1",
-        "@tanstack/react-table": "^8.21.3",
+        "@tanstack/react-table": "^9.2.4",
         "dompurify": "^3.3.1",
         "lucide-react": "^0.555.0",
         "marked": "^17.0.1",
@@ -55,7 +55,7 @@
         "@origin-space/image-cropper": "^0.1.9",
         "@radix-ui/react-icons": "^1.3.2",
         "@remixicon/react": "^4.7.0",
-        "@tanstack/react-table": "^8.21.3",
+        "@tanstack/react-table": "^9.2.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "1.1.1",
@@ -110,7 +110,7 @@
         "@hugeicons/core-free-icons": "^2.0.0",
         "@hugeicons/react": "^1.1.1",
         "@remixicon/react": "^4.7.0",
-        "@tanstack/react-table": "^8.21.3",
+        "@tanstack/react-table": "^9.2.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
@@ -936,9 +936,13 @@
 
     "@tailwindcss/postcss": ["@tailwindcss/postcss@4.1.17", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.17", "@tailwindcss/oxide": "4.1.17", "postcss": "^8.4.41", "tailwindcss": "4.1.17" } }, "sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw=="],
 
-    "@tanstack/react-table": ["@tanstack/react-table@8.21.3", "", { "dependencies": { "@tanstack/table-core": "8.21.3" }, "peerDependencies": { "react": "19.2.0", "react-dom": "19.2.0" } }, "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww=="],
+    "@tanstack/react-store": ["@tanstack/react-store@0.11.1", "", { "dependencies": { "@tanstack/store": "0.11.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-HaIGKI3YLmjBYIvy5DFDY23oNaYZIsTZfngey07Uh5iLVJgM3bIGCnZeOFOqzjFld9JHWcaHJnasD/bKoGKwJQ=="],
 
-    "@tanstack/table-core": ["@tanstack/table-core@8.21.3", "", {}, "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg=="],
+    "@tanstack/react-table": ["@tanstack/react-table@9.2.4", "", { "dependencies": { "@tanstack/react-store": "^0.11.1", "@tanstack/table-core": "9.2.4" }, "peerDependencies": { "react": ">=18" } }, "sha512-Rzp1Q4e0/nIgEjmISYR5HeEgLTNtrG+C7NFZf/AbCxPO5hg+zC3yNGwcoECigUk8SFzzvhXbd2rFdtP2ZiGrfA=="],
+
+    "@tanstack/store": ["@tanstack/store@0.11.1", "", {}, "sha512-mzTOBhypOuDJAy/D8n2MfUZ1HFkXnmSETviRyhqEC8LUE7/IZQExOTxMANj3KjTofYTkFNpBY67qaVrT41YccA=="],
+
+    "@tanstack/table-core": ["@tanstack/table-core@9.2.4", "", { "dependencies": { "@tanstack/store": "^0.11.1" } }, "sha512-GwdDyGGr6UXAtubF14yAwcXvdaogqfsQgIk89Suebjxob/Rjq2xvfmXsjDF1rQmKmhHsJm9TOY7myxv3i6geJw=="],
 
     "@tootallnate/quickjs-emscripten": ["@tootallnate/quickjs-emscripten@0.23.0", "", {}, "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA=="],
 
@@ -2630,10 +2634,6 @@
 
     "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
-    "@tanstack/react-table/react": ["react@19.2.0", "", {}, "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ=="],
-
-    "@tanstack/react-table/react-dom": ["react-dom@19.2.0", "", { "dependencies": { "scheduler": "0.27.0" }, "peerDependencies": { "react": "19.2.0" } }, "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ=="],
-
     "@ts-morph/common/minimatch": ["minimatch@10.0.3", "", { "dependencies": { "@isaacs/brace-expansion": "5.0.0" } }, "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw=="],
 
     "@turbo/gen/commander": ["commander@10.0.1", "", {}, "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug=="],

From f5f0e3908a0e6734ac89e6cfa67444f4f7fb6ff7 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sun, 6 Sep 2026 12:40:21 +0200
Subject: [PATCH 2/3] perf: optimize TanStack Table state updates

---
 .../members/members-page-client.tsx           | 403 +++++++++---------
 .../[id]/members/team-members-page-client.tsx | 224 +++++-----
 apps/origin/public/r/comp-477.json            |   2 +-
 apps/origin/public/r/comp-478.json            |   2 +-
 apps/origin/public/r/comp-479.json            |   2 +-
 apps/origin/public/r/comp-480.json            |   2 +-
 apps/origin/public/r/comp-481.json            |   2 +-
 apps/origin/public/r/comp-482.json            |   2 +-
 apps/origin/public/r/comp-483.json            |   2 +-
 apps/origin/public/r/comp-484.json            |   2 +-
 apps/origin/public/r/comp-485.json            |   2 +-
 .../registry/default/components/comp-477.tsx  |  13 +-
 .../registry/default/components/comp-478.tsx  |  41 +-
 .../registry/default/components/comp-479.tsx  |  44 +-
 .../registry/default/components/comp-480.tsx  |  40 +-
 .../registry/default/components/comp-481.tsx  |  45 +-
 .../registry/default/components/comp-482.tsx  |  18 +-
 .../registry/default/components/comp-483.tsx  |  49 ++-
 .../registry/default/components/comp-484.tsx  |  49 ++-
 .../registry/default/components/comp-485.tsx  |  59 ++-
 apps/ui/public/r/p-table-3.json               |   2 +-
 apps/ui/public/r/p-table-4.json               |   2 +-
 apps/ui/public/r/p-table-6.json               |   2 +-
 apps/ui/public/r/p-table-8.json               |   2 +-
 .../registry/default/particles/p-table-3.tsx  |  65 +--
 .../registry/default/particles/p-table-4.tsx  |  48 +--
 .../registry/default/particles/p-table-6.tsx  |  65 +--
 .../registry/default/particles/p-table-8.tsx  |  48 +--
 28 files changed, 595 insertions(+), 642 deletions(-)

diff --git a/apps/examples/calcom/app/(dashboard)/members/members-page-client.tsx b/apps/examples/calcom/app/(dashboard)/members/members-page-client.tsx
index d84dbfece..97ab05926 100644
--- a/apps/examples/calcom/app/(dashboard)/members/members-page-client.tsx
+++ b/apps/examples/calcom/app/(dashboard)/members/members-page-client.tsx
@@ -41,7 +41,6 @@ import { cn } from "@coss/ui/lib/utils";
 import {
   type Column,
   type ColumnDef,
-  type ColumnSizingState,
   columnFilteringFeature,
   columnPinningFeature,
   columnResizingFeature,
@@ -624,10 +623,8 @@ export function MembersPageClient() {
   const [columnVisibility, setColumnVisibility] = useState(
     DEFAULT_COLUMN_VISIBILITY,
   );
-  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
   const tableContainerRef = useRef<HTMLDivElement>(null);
   const [containerWidth, setContainerWidth] = useState(0);
-  const [rowSelection, setRowSelection] = useState({});
   const [sorting, setSorting] = useState<SortingState>([
     { desc: false, id: "name" },
   ]);
@@ -692,34 +689,25 @@ export function MembersPageClient() {
     return () => observer.disconnect();
   }, []);
 
-  const table = useTable({
-    columnResizeMode: "onChange",
-    columns,
-    data: filteredMembers,
-    enableRowSelection: true,
-    enableSortingRemoval: false,
-    features,
-    getRowId: (row) => row.id,
-    initialState: {
-      columnPinning: INITIAL_COLUMN_PINNING,
-    },
-    onColumnSizingChange: setColumnSizing,
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    state: {
-      columnSizing,
-      rowSelection,
-      sorting,
+  const table = useTable(
+    {
+      columnResizeMode: "onChange",
+      columns,
+      data: filteredMembers,
+      enableRowSelection: true,
+      enableSortingRemoval: false,
+      features,
+      getRowId: (row) => row.id,
+      initialState: {
+        columnPinning: INITIAL_COLUMN_PINNING,
+      },
+      onSortingChange: setSorting,
+      state: {
+        sorting,
+      },
     },
-  });
-
-  const headers = table.getHeaderGroups()[0]?.headers ?? [];
-  const columnsTotalSize = table.getCenterTotalSize();
-  const tableWidth =
-    containerWidth > 0
-      ? Math.max(containerWidth + 2, columnsTotalSize)
-      : columnsTotalSize;
-  const fillerColumnId = getFillerColumnId(headers);
+    () => null,
+  );
 
   return (
     <>
@@ -837,175 +825,204 @@ export function MembersPageClient() {
           </Button>
         </div>
 
-        <CardFrame
-          className="w-full before:bg-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] **:data-[slot=table-container]:overflow-x-visible dark:before:bg-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))]"
-          ref={tableContainerRef}
+        <table.Subscribe
+          selector={(state) => ({
+            columnSizing: state.columnSizing,
+            rowSelection: state.rowSelection,
+            sorting: state.sorting,
+          })}
         >
-          <Table
-            render={
-              <ScrollArea className="**:data-[slot=scroll-area-scrollbar]:z-10 **:data-[slot=scroll-area-scrollbar]:translate-y-3" />
-            }
-            className="table-fixed [--border:color-mix(in_srgb,var(--color-black)_8%,color-mix(in_srgb,var(--color-black)_3%,var(--background)))] dark:[--border:color-mix(in_srgb,var(--color-white)_6%,color-mix(in_srgb,var(--color-white)_4.6%,var(--background)))]"
-            variant="card"
-          >
-            <TableHeader>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => (
-                    <TableHead
-                      aria-sort={
-                        header.column.getIsSorted() === "asc"
-                          ? "ascending"
-                          : header.column.getIsSorted() === "desc"
-                            ? "descending"
-                            : "none"
-                      }
-                      className="relative z-1 select-none bg-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] before:pointer-events-none before:absolute before:inset-y-0 before:z-1 not-data-pinned:before:hidden before:w-4 before:from-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] before:to-transparent data-[pinned=start]:before:start-full data-[pinned=end]:before:end-full in-data-overflow-x-end:data-[pinned=end]:before:bg-linear-to-l last:*:data-[slot=column-resize-handle]:opacity-0 data-[pinned=start]:max-md:before:hidden data-[pinned=start]:md:sticky data-[pinned=start]:md:start-(--pinned-start-offset) in-data-overflow-x-start:data-[pinned=start]:md:before:bg-linear-to-r dark:bg-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))] dark:before:from-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))]"
-                      colSpan={header.colSpan}
-                      key={header.id}
-                      {...getPinnedDataAttribute(header.column)}
-                      style={{
-                        ...getPinningStyles(header.column),
-                        width: getColumnDisplayWidth({
-                          columnId: header.column.id,
-                          columnsTotalSize,
-                          fillerColumnId,
-                          headers,
-                          size: header.getSize(),
-                          tableWidth,
-                        }),
-                      }}
-                    >
-                      {header.isPlaceholder ? null : header.column.getCanSort() ? (
-                        <div
-                          className="flex h-full cursor-pointer select-none items-center justify-between gap-2"
-                          onClick={header.column.getToggleSortingHandler()}
-                          onKeyDown={(event) => {
-                            if (event.key === "Enter" || event.key === " ") {
-                              event.preventDefault();
-                              header.column.getToggleSortingHandler()?.(event);
+          {() => {
+            const headers = table.getHeaderGroups()[0]?.headers ?? [];
+            const columnsTotalSize = table.getCenterTotalSize();
+            const tableWidth =
+              containerWidth > 0
+                ? Math.max(containerWidth + 2, columnsTotalSize)
+                : columnsTotalSize;
+            const fillerColumnId = getFillerColumnId(headers);
+
+            return (
+              <CardFrame
+                className="w-full before:bg-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] **:data-[slot=table-container]:overflow-x-visible dark:before:bg-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))]"
+                ref={tableContainerRef}
+              >
+                <Table
+                  render={
+                    <ScrollArea className="**:data-[slot=scroll-area-scrollbar]:z-10 **:data-[slot=scroll-area-scrollbar]:translate-y-3" />
+                  }
+                  className="table-fixed [--border:color-mix(in_srgb,var(--color-black)_8%,color-mix(in_srgb,var(--color-black)_3%,var(--background)))] dark:[--border:color-mix(in_srgb,var(--color-white)_6%,color-mix(in_srgb,var(--color-white)_4.6%,var(--background)))]"
+                  variant="card"
+                >
+                  <TableHeader>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                      <TableRow key={headerGroup.id}>
+                        {headerGroup.headers.map((header) => (
+                          <TableHead
+                            aria-sort={
+                              header.column.getIsSorted() === "asc"
+                                ? "ascending"
+                                : header.column.getIsSorted() === "desc"
+                                  ? "descending"
+                                  : "none"
                             }
-                          }}
-                          role="button"
-                          tabIndex={0}
-                        >
-                          <span className="truncate text-sm">
-                            {flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
+                            className="relative z-1 select-none bg-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] before:pointer-events-none before:absolute before:inset-y-0 before:z-1 not-data-pinned:before:hidden before:w-4 before:from-[color-mix(in_srgb,var(--color-black)_3%,var(--background))] before:to-transparent data-[pinned=start]:before:start-full data-[pinned=end]:before:end-full in-data-overflow-x-end:data-[pinned=end]:before:bg-linear-to-l last:*:data-[slot=column-resize-handle]:opacity-0 data-[pinned=start]:max-md:before:hidden data-[pinned=start]:md:sticky data-[pinned=start]:md:start-(--pinned-start-offset) in-data-overflow-x-start:data-[pinned=start]:md:before:bg-linear-to-r dark:bg-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))] dark:before:from-[color-mix(in_srgb,var(--color-white)_4.6%,var(--background))]"
+                            colSpan={header.colSpan}
+                            key={header.id}
+                            {...getPinnedDataAttribute(header.column)}
+                            style={{
+                              ...getPinningStyles(header.column),
+                              width: getColumnDisplayWidth({
+                                columnId: header.column.id,
+                                columnsTotalSize,
+                                fillerColumnId,
+                                headers,
+                                size: header.getSize(),
+                                tableWidth,
+                              }),
+                            }}
+                          >
+                            {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                              <div
+                                className="flex h-full cursor-pointer select-none items-center justify-between gap-2"
+                                onClick={header.column.getToggleSortingHandler()}
+                                onKeyDown={(event) => {
+                                  if (
+                                    event.key === "Enter" ||
+                                    event.key === " "
+                                  ) {
+                                    event.preventDefault();
+                                    header.column.getToggleSortingHandler()?.(
+                                      event,
+                                    );
+                                  }
+                                }}
+                                role="button"
+                                tabIndex={0}
+                              >
+                                <span className="truncate text-sm">
+                                  {flexRender(
+                                    header.column.columnDef.header,
+                                    header.getContext(),
+                                  )}
+                                </span>
+                                {{
+                                  asc: (
+                                    <ChevronUpIcon
+                                      aria-hidden="true"
+                                      className="size-4 shrink-0 opacity-80"
+                                    />
+                                  ),
+                                  desc: (
+                                    <ChevronDownIcon
+                                      aria-hidden="true"
+                                      className="size-4 shrink-0 opacity-80"
+                                    />
+                                  ),
+                                }[header.column.getIsSorted() as string] ??
+                                  null}
+                              </div>
+                            ) : (
+                              <span className="truncate">
+                                {flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext(),
+                                )}
+                              </span>
                             )}
-                          </span>
-                          {{
-                            asc: (
-                              <ChevronUpIcon
+                            {header.column.getCanResize() ? (
+                              <div
                                 aria-hidden="true"
-                                className="size-4 shrink-0 opacity-80"
+                                className="user-select-none absolute -end-2 top-0 z-10 flex h-full w-4 touch-none items-center justify-center before:absolute before:inset-y-2 before:w-px before:-translate-x-px before:bg-input"
+                                data-slot="column-resize-handle"
+                                onDoubleClick={() => header.column.resetSize()}
+                                onMouseDown={header.getResizeHandler()}
+                                style={{ cursor: "col-resize" }}
+                                onTouchStart={header.getResizeHandler()}
                               />
-                            ),
-                            desc: (
-                              <ChevronDownIcon
-                                aria-hidden="true"
-                                className="size-4 shrink-0 opacity-80"
-                              />
-                            ),
-                          }[header.column.getIsSorted() as string] ?? null}
-                        </div>
-                      ) : (
-                        <span className="truncate">
-                          {flexRender(
-                            header.column.columnDef.header,
-                            header.getContext(),
-                          )}
-                        </span>
-                      )}
-                      {header.column.getCanResize() ? (
-                        <div
-                          aria-hidden="true"
-                          className="user-select-none absolute -end-2 top-0 z-10 flex h-full w-4 touch-none items-center justify-center before:absolute before:inset-y-2 before:w-px before:-translate-x-px before:bg-input"
-                          data-slot="column-resize-handle"
-                          onDoubleClick={() => header.column.resetSize()}
-                          onMouseDown={header.getResizeHandler()}
-                          style={{ cursor: "col-resize" }}
-                          onTouchStart={header.getResizeHandler()}
-                        />
-                      ) : null}
-                    </TableHead>
-                  ))}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody className="in-data-overflow-x-start:before:rounded-ss-none in-data-overflow-x-end:before:rounded-se-none in-data-overflow-x-start:in-data-[variant=card]:*:[tr]:first:*:[td]:first:rounded-ss-none in-data-overflow-x-end:in-data-[variant=card]:*:[tr]:last:*:[td]:last:rounded-ee-none in-data-overflow-x-end:in-data-[variant=card]:*:[tr]:first:*:[td]:last:rounded-se-none in-data-overflow-x-start:in-data-[variant=card]:*:[tr]:last:*:[td]:first:rounded-es-none">
-              {table.getRowModel().rows.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    data-state={row.getIsSelected() ? "selected" : undefined}
-                    key={row.id}
-                    onClick={(event) => {
-                      if (shouldIgnoreRowSelectionClick(event.target)) return;
-                      row.toggleSelected();
-                    }}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell
-                        className="before:pointer-events-none before:absolute before:inset-y-0 before:z-1 not-data-pinned:before:hidden before:w-4 before:from-card in-[[data-slot=table-row]:hover]:before:from-[color-mix(in_srgb,var(--card),var(--color-black)_2%)] in-[[data-slot=table-row][data-state=selected]]:before:from-[color-mix(in_srgb,var(--card),var(--color-black)_4%)] before:to-transparent data-[pinned=start]:before:start-full data-[pinned=end]:before:end-full in-data-overflow-x-end:data-[pinned=end]:before:bg-linear-to-l data-[pinned=start]:max-md:before:hidden data-[pinned=start]:md:sticky data-[pinned=start]:md:start-(--pinned-start-offset) in-data-overflow-x-start:data-[pinned=start]:md:before:bg-linear-to-r dark:in-[[data-slot=table-row]:hover]:before:from-[color-mix(in_srgb,var(--card),var(--color-white)_2%)] dark:in-[[data-slot=table-row][data-state=selected]]:before:from-[color-mix(in_srgb,var(--card),var(--color-white)_4%)]"
-                        key={cell.id}
-                        {...getPinnedDataAttribute(cell.column)}
-                        style={{
-                          ...getPinningStyles(cell.column),
-                          width: getColumnDisplayWidth({
-                            columnId: cell.column.id,
-                            columnsTotalSize,
-                            fillerColumnId,
-                            headers,
-                            size: cell.column.getSize(),
-                            tableWidth,
-                          }),
-                        }}
-                      >
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </TableCell>
+                            ) : null}
+                          </TableHead>
+                        ))}
+                      </TableRow>
                     ))}
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell
-                    className="h-24 text-center"
-                    colSpan={columns.length}
-                  >
-                    No members found.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-          <CardFrameFooter className="flex items-center justify-between gap-2 border-t">
-            <p className="text-muted-foreground text-sm">
-              {table.getFilteredSelectedRowModel().rows.length > 0 ? (
-                <>
-                  <strong className="font-medium text-foreground">
-                    {table.getFilteredSelectedRowModel().rows.length}
-                  </strong>{" "}
-                  of{" "}
-                  <strong className="font-medium text-foreground">
-                    {table.getFilteredRowModel().rows.length}
-                  </strong>{" "}
-                  selected
-                </>
-              ) : (
-                <>
-                  <strong className="font-medium text-foreground">
-                    {table.getFilteredRowModel().rows.length}
-                  </strong>{" "}
-                  members
-                </>
-              )}
-            </p>
-          </CardFrameFooter>
-        </CardFrame>
+                  </TableHeader>
+                  <TableBody className="in-data-overflow-x-start:before:rounded-ss-none in-data-overflow-x-end:before:rounded-se-none in-data-overflow-x-start:in-data-[variant=card]:*:[tr]:first:*:[td]:first:rounded-ss-none in-data-overflow-x-end:in-data-[variant=card]:*:[tr]:last:*:[td]:last:rounded-ee-none in-data-overflow-x-end:in-data-[variant=card]:*:[tr]:first:*:[td]:last:rounded-se-none in-data-overflow-x-start:in-data-[variant=card]:*:[tr]:last:*:[td]:first:rounded-es-none">
+                    {table.getRowModel().rows.length ? (
+                      table.getRowModel().rows.map((row) => (
+                        <TableRow
+                          data-state={
+                            row.getIsSelected() ? "selected" : undefined
+                          }
+                          key={row.id}
+                          onClick={(event) => {
+                            if (shouldIgnoreRowSelectionClick(event.target))
+                              return;
+                            row.toggleSelected();
+                          }}
+                        >
+                          {row.getVisibleCells().map((cell) => (
+                            <TableCell
+                              className="before:pointer-events-none before:absolute before:inset-y-0 before:z-1 not-data-pinned:before:hidden before:w-4 before:from-card in-[[data-slot=table-row]:hover]:before:from-[color-mix(in_srgb,var(--card),var(--color-black)_2%)] in-[[data-slot=table-row][data-state=selected]]:before:from-[color-mix(in_srgb,var(--card),var(--color-black)_4%)] before:to-transparent data-[pinned=start]:before:start-full data-[pinned=end]:before:end-full in-data-overflow-x-end:data-[pinned=end]:before:bg-linear-to-l data-[pinned=start]:max-md:before:hidden data-[pinned=start]:md:sticky data-[pinned=start]:md:start-(--pinned-start-offset) in-data-overflow-x-start:data-[pinned=start]:md:before:bg-linear-to-r dark:in-[[data-slot=table-row]:hover]:before:from-[color-mix(in_srgb,var(--card),var(--color-white)_2%)] dark:in-[[data-slot=table-row][data-state=selected]]:before:from-[color-mix(in_srgb,var(--card),var(--color-white)_4%)]"
+                              key={cell.id}
+                              {...getPinnedDataAttribute(cell.column)}
+                              style={{
+                                ...getPinningStyles(cell.column),
+                                width: getColumnDisplayWidth({
+                                  columnId: cell.column.id,
+                                  columnsTotalSize,
+                                  fillerColumnId,
+                                  headers,
+                                  size: cell.column.getSize(),
+                                  tableWidth,
+                                }),
+                              }}
+                            >
+                              {flexRender(
+                                cell.column.columnDef.cell,
+                                cell.getContext(),
+                              )}
+                            </TableCell>
+                          ))}
+                        </TableRow>
+                      ))
+                    ) : (
+                      <TableRow>
+                        <TableCell
+                          className="h-24 text-center"
+                          colSpan={columns.length}
+                        >
+                          No members found.
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </TableBody>
+                </Table>
+                <CardFrameFooter className="flex items-center justify-between gap-2 border-t">
+                  <p className="text-muted-foreground text-sm">
+                    {table.getFilteredSelectedRowModel().rows.length > 0 ? (
+                      <>
+                        <strong className="font-medium text-foreground">
+                          {table.getFilteredSelectedRowModel().rows.length}
+                        </strong>{" "}
+                        of{" "}
+                        <strong className="font-medium text-foreground">
+                          {table.getFilteredRowModel().rows.length}
+                        </strong>{" "}
+                        selected
+                      </>
+                    ) : (
+                      <>
+                        <strong className="font-medium text-foreground">
+                          {table.getFilteredRowModel().rows.length}
+                        </strong>{" "}
+                        members
+                      </>
+                    )}
+                  </p>
+                </CardFrameFooter>
+              </CardFrame>
+            );
+          }}
+        </table.Subscribe>
       </div>
     </>
   );
diff --git a/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx b/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx
index 2624827a7..7d2cca51f 100644
--- a/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx
+++ b/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx
@@ -348,7 +348,6 @@ export function TeamMembersPageClient() {
   const [searchValue, setSearchValue] = useState("");
   const [showRoleColumn, setShowRoleColumn] = useState(true);
   const [showLastActiveColumn, setShowLastActiveColumn] = useState(true);
-  const [rowSelection, setRowSelection] = useState({});
   const [sorting, setSorting] = useState<SortingState>([
     { desc: false, id: "name" },
   ]);
@@ -407,20 +406,21 @@ export function TeamMembersPageClient() {
     });
   }, [showLastActiveColumn, showRoleColumn]);
 
-  const table = useTable({
-    columns,
-    data: filteredMembers,
-    enableRowSelection: true,
-    enableSortingRemoval: false,
-    features,
-    getRowId: (row) => row.id,
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    state: {
-      rowSelection,
-      sorting,
+  const table = useTable(
+    {
+      columns,
+      data: filteredMembers,
+      enableRowSelection: true,
+      enableSortingRemoval: false,
+      features,
+      getRowId: (row) => row.id,
+      onSortingChange: setSorting,
+      state: {
+        sorting,
+      },
     },
-  });
+    () => null,
+  );
 
   return (
     <>
@@ -538,100 +538,114 @@ export function TeamMembersPageClient() {
           </Button>
         </div>
 
-        <CardFrame className="w-full">
-          <Table variant="card" className="table-fixed">
-            <TableHeader>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => {
-                    const columnSize = header.column.getSize();
-
-                    return (
-                      <TableHead
-                        className={
-                          header.column.id === "name" ? "sm:w-auto!" : undefined
-                        }
-                        key={header.id}
-                        style={
-                          columnSize ? { width: `${columnSize}px` } : undefined
-                        }
-                      >
-                        {header.isPlaceholder ? null : header.column.getCanSort() ? (
-                          <div
-                            className="flex h-full cursor-pointer select-none items-center justify-between gap-2"
-                            onClick={header.column.getToggleSortingHandler()}
-                            onKeyDown={(event) => {
-                              if (event.key === "Enter" || event.key === " ") {
-                                event.preventDefault();
-                                header.column.getToggleSortingHandler()?.(
-                                  event,
-                                );
-                              }
-                            }}
-                            role="button"
-                            tabIndex={0}
-                          >
-                            {flexRender(
+        <table.Subscribe
+          selector={(state) => ({
+            rowSelection: state.rowSelection,
+            sorting: state.sorting,
+          })}
+        >
+          <CardFrame className="w-full">
+            <Table variant="card" className="table-fixed">
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => {
+                      const columnSize = header.column.getSize();
+
+                      return (
+                        <TableHead
+                          className={
+                            header.column.id === "name"
+                              ? "sm:w-auto!"
+                              : undefined
+                          }
+                          key={header.id}
+                          style={
+                            columnSize
+                              ? { width: `${columnSize}px` }
+                              : undefined
+                          }
+                        >
+                          {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                            <div
+                              className="flex h-full cursor-pointer select-none items-center justify-between gap-2"
+                              onClick={header.column.getToggleSortingHandler()}
+                              onKeyDown={(event) => {
+                                if (
+                                  event.key === "Enter" ||
+                                  event.key === " "
+                                ) {
+                                  event.preventDefault();
+                                  header.column.getToggleSortingHandler()?.(
+                                    event,
+                                  );
+                                }
+                              }}
+                              role="button"
+                              tabIndex={0}
+                            >
+                              {flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                              {{
+                                asc: (
+                                  <ChevronUpIcon
+                                    aria-hidden="true"
+                                    className="size-4 shrink-0 opacity-80"
+                                  />
+                                ),
+                                desc: (
+                                  <ChevronDownIcon
+                                    aria-hidden="true"
+                                    className="size-4 shrink-0 opacity-80"
+                                  />
+                                ),
+                              }[header.column.getIsSorted() as string] ?? null}
+                            </div>
+                          ) : (
+                            flexRender(
                               header.column.columnDef.header,
                               header.getContext(),
-                            )}
-                            {{
-                              asc: (
-                                <ChevronUpIcon
-                                  aria-hidden="true"
-                                  className="size-4 shrink-0 opacity-80"
-                                />
-                              ),
-                              desc: (
-                                <ChevronDownIcon
-                                  aria-hidden="true"
-                                  className="size-4 shrink-0 opacity-80"
-                                />
-                              ),
-                            }[header.column.getIsSorted() as string] ?? null}
-                          </div>
-                        ) : (
-                          flexRender(
-                            header.column.columnDef.header,
-                            header.getContext(),
-                          )
-                        )}
-                      </TableHead>
-                    );
-                  })}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody>
-              {table.getRowModel().rows.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    data-state={row.getIsSelected() ? "selected" : undefined}
-                    key={row.id}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </TableCell>
-                    ))}
+                            )
+                          )}
+                        </TableHead>
+                      );
+                    })}
                   </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell
-                    className="h-24 text-center"
-                    colSpan={columns.length}
-                  >
-                    No members found.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </CardFrame>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      data-state={row.getIsSelected() ? "selected" : undefined}
+                      key={row.id}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      className="h-24 text-center"
+                      colSpan={columns.length}
+                    >
+                      No members found.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </CardFrame>
+        </table.Subscribe>
       </div>
     </>
   );
diff --git a/apps/origin/public/r/comp-477.json b/apps/origin/public/r/comp-477.json
index 2b81959e8..e150ef997 100644
--- a/apps/origin/public/r/comp-477.json
+++ b/apps/origin/public/r/comp-477.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-477.tsx",
-      "content": "\"use client\";\n\nimport {\n  columnVisibilityFeature,\n  type ColumnDef,\n  flexRender,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowSelectionFeature,\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable({\n    columns,\n    data,\n    features,\n  });\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter className=\"bg-transparent\">\n          <TableRow className=\"hover:bg-transparent\">\n            <TableCell colSpan={5}>Total</TableCell>\n            <TableCell className=\"text-right\">\n              {new Intl.NumberFormat(\"en-US\", {\n                currency: \"USD\",\n                style: \"currency\",\n              }).format(data.reduce((total, item) => total + item.balance, 0))}\n            </TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Basic data table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnVisibilityFeature,\n  flexRender,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowSelectionFeature,\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      features,\n    },\n    (state) => ({ rowSelection: state.rowSelection }),\n  );\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter className=\"bg-transparent\">\n          <TableRow className=\"hover:bg-transparent\">\n            <TableCell colSpan={5}>Total</TableCell>\n            <TableCell className=\"text-right\">\n              {new Intl.NumberFormat(\"en-US\", {\n                currency: \"USD\",\n                style: \"currency\",\n              }).format(data.reduce((total, item) => total + item.balance, 0))}\n            </TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Basic data table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-478.json b/apps/origin/public/r/comp-478.json
index 5087227f0..93c0f9222 100644
--- a/apps/origin/public/r/comp-478.json
+++ b/apps/origin/public/r/comp-478.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-478.tsx",
-      "content": "\"use client\";\n\nimport {\n  columnFacetingFeature,\n  columnFilteringFeature,\n  columnVisibilityFeature,\n  type Column,\n  type ColumnDef,\n  type ColumnFiltersState,\n  createFacetedMinMaxValues,\n  createFacetedRowModel,\n  createFacetedUniqueValues,\n  createFilteredRowModel,\n  createSortedRowModel,\n  filterFn_includesString,\n  filterFn_inNumberRange,\n  flexRender,\n  metaHelper,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  type SortingState,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  ExternalLinkIcon,\n  SearchIcon,\n} from \"lucide-react\";\nimport { useId, useMemo, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  keyword: string;\n  intents: Array<\n    \"Informational\" | \"Navigational\" | \"Commercial\" | \"Transactional\"\n  >;\n  volume: number;\n  cpc: number;\n  traffic: number;\n  link: string;\n};\n\nconst features = tableFeatures({\n  columnFilteringFeature,\n  columnFacetingFeature,\n  columnVisibilityFeature,\n  facetedMinMaxValues: createFacetedMinMaxValues(),\n  facetedRowModel: createFacetedRowModel(),\n  facetedUniqueValues: createFacetedUniqueValues(),\n  filteredRowModel: createFilteredRowModel(),\n  filterFns: {\n    includesString: filterFn_includesString,\n    inNumberRange: filterFn_inNumberRange,\n  },\n  columnMeta: metaHelper<{\n    filterVariant?: \"text\" | \"range\" | \"select\";\n  }>(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"keyword\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"keyword\")}</div>\n    ),\n    header: \"Keyword\",\n  },\n  {\n    accessorKey: \"intents\",\n    cell: ({ row }) => {\n      const intents = row.getValue(\"intents\") as string[];\n      return (\n        <div className=\"flex gap-1\">\n          {intents.map((intent) => {\n            const styles = {\n              Commercial: \"bg-amber-400/20 text-amber-500\",\n              Informational: \"bg-indigo-400/20 text-indigo-500\",\n              Navigational: \"bg-emerald-400/20 text-emerald-500\",\n              Transactional: \"bg-rose-400/20 text-rose-500\",\n            }[intent];\n\n            return (\n              <div\n                className={cn(\n                  \"flex size-5 items-center justify-center rounded font-medium text-xs\",\n                  styles,\n                )}\n                key={intent}\n              >\n                {intent.charAt(0)}\n              </div>\n            );\n          })}\n        </div>\n      );\n    },\n    enableSorting: false,\n    filterFn: (row, id, filterValue) => {\n      const rowValue = row.getValue(id);\n      return Array.isArray(rowValue) && rowValue.includes(filterValue);\n    },\n    header: \"Intents\",\n    meta: {\n      filterVariant: \"select\",\n    },\n  },\n  {\n    accessorKey: \"volume\",\n    cell: ({ row }) => {\n      const volume = Number.parseInt(row.getValue(\"volume\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(volume);\n    },\n    header: \"Volume\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"cpc\",\n    cell: ({ row }) => <div>${row.getValue(\"cpc\")}</div>,\n    header: \"CPC\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"traffic\",\n    cell: ({ row }) => {\n      const traffic = Number.parseInt(row.getValue(\"traffic\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(traffic);\n    },\n    header: \"Traffic\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"link\",\n    cell: ({ row }) => (\n      <a className=\"inline-flex items-center gap-1 hover:underline\" href=\"#\">\n        {row.getValue(\"link\")} <ExternalLinkIcon aria-hidden=\"true\" size={12} />\n      </a>\n    ),\n    enableSorting: false,\n    header: \"Link\",\n  },\n];\n\nconst items: Item[] = [\n  {\n    cpc: 2.5,\n    id: \"1\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react components\",\n    link: \"https://coss.com/origin\",\n    traffic: 88,\n    volume: 2507,\n  },\n  {\n    cpc: 4.75,\n    id: \"2\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"buy react templates\",\n    link: \"https://coss.com/origin/input\",\n    traffic: 65,\n    volume: 1850,\n  },\n  {\n    cpc: 3.25,\n    id: \"3\",\n    intents: [\"Informational\", \"Commercial\"],\n    keyword: \"react ui library\",\n    link: \"https://coss.com/origin/badge\",\n    traffic: 112,\n    volume: 3200,\n  },\n  {\n    cpc: 1.95,\n    id: \"4\",\n    intents: [\"Transactional\"],\n    keyword: \"tailwind components download\",\n    link: \"https://coss.com/origin/alert\",\n    traffic: 45,\n    volume: 890,\n  },\n  {\n    cpc: 5.5,\n    id: \"5\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react dashboard template free\",\n    link: \"https://coss.com/origin/tabs\",\n    traffic: 156,\n    volume: 4100,\n  },\n  {\n    cpc: 1.25,\n    id: \"6\",\n    intents: [\"Informational\"],\n    keyword: \"how to use react components\",\n    link: \"https://coss.com/origin/table\",\n    traffic: 42,\n    volume: 1200,\n  },\n  {\n    cpc: 6.8,\n    id: \"7\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react ui kit premium\",\n    link: \"https://coss.com/origin/avatar\",\n    traffic: 28,\n    volume: 760,\n  },\n  {\n    cpc: 1.8,\n    id: \"8\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react component documentation\",\n    link: \"https://coss.com/origin\",\n    traffic: 35,\n    volume: 950,\n  },\n];\n\nexport default function Component() {\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"traffic\",\n    },\n  ]);\n\n  const table = useTable({\n    columns,\n    data: items,\n    enableSortingRemoval: false,\n    features,\n    onColumnFiltersChange: setColumnFilters,\n    onSortingChange: setSorting,\n    state: {\n      columnFilters,\n      sorting,\n    },\n  });\n\n  const keywordColumn = table.getColumn(\"keyword\");\n  const intentsColumn = table.getColumn(\"intents\");\n  const volumeColumn = table.getColumn(\"volume\");\n  const cpcColumn = table.getColumn(\"cpc\");\n  const trafficColumn = table.getColumn(\"traffic\");\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap gap-3\">\n        {/* Search input */}\n        {keywordColumn && (\n          <div className=\"w-44\">\n            <Filter column={keywordColumn} />\n          </div>\n        )}\n        {/* Intents select */}\n        {intentsColumn && (\n          <div className=\"w-36\">\n            <Filter column={intentsColumn} />\n          </div>\n        )}\n        {/* Volume inputs */}\n        {volumeColumn && (\n          <div className=\"w-36\">\n            <Filter column={volumeColumn} />\n          </div>\n        )}\n        {/* CPC inputs */}\n        {cpcColumn && (\n          <div className=\"w-36\">\n            <Filter column={cpcColumn} />\n          </div>\n        )}\n        {/* Traffic inputs */}\n        {trafficColumn && (\n          <div className=\"w-36\">\n            <Filter column={trafficColumn} />\n          </div>\n        )}\n      </div>\n\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t\"\n                    key={header.id}\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? (\n                          <span aria-hidden=\"true\" className=\"size-4\" />\n                        )}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Data table with filters made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction Filter({\n  column,\n}: {\n  column: Column<typeof features, Item, unknown>;\n}) {\n  const id = useId();\n  const columnFilterValue = column.getFilterValue();\n  const { filterVariant } = column.columnDef.meta ?? {};\n  const columnHeader =\n    typeof column.columnDef.header === \"string\" ? column.columnDef.header : \"\";\n  const sortedUniqueValues = useMemo(() => {\n    if (filterVariant === \"range\") return [];\n\n    // Get all unique values from the column\n    const values = Array.from(column.getFacetedUniqueValues().keys());\n\n    // If the values are arrays, flatten them and get unique items\n    const flattenedValues = values.reduce((acc: string[], curr) => {\n      if (Array.isArray(curr)) {\n        acc.push(...curr);\n      } else {\n        acc.push(curr);\n      }\n      return acc;\n    }, []);\n\n    // Get unique values and sort them\n    return Array.from(new Set(flattenedValues)).sort();\n  }, [column, filterVariant]);\n\n  if (filterVariant === \"range\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label>{columnHeader}</Label>\n        <div className=\"flex\">\n          <Input\n            aria-label={`${columnHeader} min`}\n            className=\"flex-1 rounded-e-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-1`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                e.target.value ? Number(e.target.value) : undefined,\n                old?.[1],\n              ])\n            }\n            placeholder=\"Min\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[0] ?? \"\"}\n          />\n          <Input\n            aria-label={`${columnHeader} max`}\n            className=\"-ms-px flex-1 rounded-s-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-2`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                old?.[0],\n                e.target.value ? Number(e.target.value) : undefined,\n              ])\n            }\n            placeholder=\"Max\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[1] ?? \"\"}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  if (filterVariant === \"select\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label htmlFor={`${id}-select`}>{columnHeader}</Label>\n        <Select\n          onValueChange={(value) => {\n            column.setFilterValue(value === \"all\" ? undefined : value);\n          }}\n          value={columnFilterValue?.toString() ?? \"all\"}\n        >\n          <SelectTrigger id={`${id}-select`}>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"all\">All</SelectItem>\n            {sortedUniqueValues.map((value) => (\n              <SelectItem key={String(value)} value={String(value)}>\n                {String(value)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={`${id}-input`}>{columnHeader}</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"peer ps-9\"\n          id={`${id}-input`}\n          onChange={(e) => column.setFilterValue(e.target.value)}\n          placeholder={`Search ${columnHeader.toLowerCase()}`}\n          type=\"text\"\n          value={(columnFilterValue ?? \"\") as string}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <SearchIcon size={16} />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  columnFacetingFeature,\n  columnFilteringFeature,\n  columnVisibilityFeature,\n  createFacetedMinMaxValues,\n  createFacetedRowModel,\n  createFacetedUniqueValues,\n  createFilteredRowModel,\n  createSortedRowModel,\n  filterFn_includesString,\n  filterFn_inNumberRange,\n  flexRender,\n  metaHelper,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  ExternalLinkIcon,\n  SearchIcon,\n} from \"lucide-react\";\nimport { useId, useMemo } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  keyword: string;\n  intents: Array<\n    \"Informational\" | \"Navigational\" | \"Commercial\" | \"Transactional\"\n  >;\n  volume: number;\n  cpc: number;\n  traffic: number;\n  link: string;\n};\n\nconst features = tableFeatures({\n  columnFilteringFeature,\n  columnFacetingFeature,\n  columnVisibilityFeature,\n  facetedMinMaxValues: createFacetedMinMaxValues(),\n  facetedRowModel: createFacetedRowModel(),\n  facetedUniqueValues: createFacetedUniqueValues(),\n  filteredRowModel: createFilteredRowModel(),\n  filterFns: {\n    includesString: filterFn_includesString,\n    inNumberRange: filterFn_inNumberRange,\n  },\n  columnMeta: metaHelper<{\n    filterVariant?: \"text\" | \"range\" | \"select\";\n  }>(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"keyword\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"keyword\")}</div>\n    ),\n    header: \"Keyword\",\n  },\n  {\n    accessorKey: \"intents\",\n    cell: ({ row }) => {\n      const intents = row.getValue(\"intents\") as string[];\n      return (\n        <div className=\"flex gap-1\">\n          {intents.map((intent) => {\n            const styles = {\n              Commercial: \"bg-amber-400/20 text-amber-500\",\n              Informational: \"bg-indigo-400/20 text-indigo-500\",\n              Navigational: \"bg-emerald-400/20 text-emerald-500\",\n              Transactional: \"bg-rose-400/20 text-rose-500\",\n            }[intent];\n\n            return (\n              <div\n                className={cn(\n                  \"flex size-5 items-center justify-center rounded font-medium text-xs\",\n                  styles,\n                )}\n                key={intent}\n              >\n                {intent.charAt(0)}\n              </div>\n            );\n          })}\n        </div>\n      );\n    },\n    enableSorting: false,\n    filterFn: (row, id, filterValue) => {\n      const rowValue = row.getValue(id);\n      return Array.isArray(rowValue) && rowValue.includes(filterValue);\n    },\n    header: \"Intents\",\n    meta: {\n      filterVariant: \"select\",\n    },\n  },\n  {\n    accessorKey: \"volume\",\n    cell: ({ row }) => {\n      const volume = Number.parseInt(row.getValue(\"volume\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(volume);\n    },\n    header: \"Volume\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"cpc\",\n    cell: ({ row }) => <div>${row.getValue(\"cpc\")}</div>,\n    header: \"CPC\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"traffic\",\n    cell: ({ row }) => {\n      const traffic = Number.parseInt(row.getValue(\"traffic\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(traffic);\n    },\n    header: \"Traffic\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"link\",\n    cell: ({ row }) => (\n      <a className=\"inline-flex items-center gap-1 hover:underline\" href=\"#\">\n        {row.getValue(\"link\")} <ExternalLinkIcon aria-hidden=\"true\" size={12} />\n      </a>\n    ),\n    enableSorting: false,\n    header: \"Link\",\n  },\n];\n\nconst items: Item[] = [\n  {\n    cpc: 2.5,\n    id: \"1\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react components\",\n    link: \"https://coss.com/origin\",\n    traffic: 88,\n    volume: 2507,\n  },\n  {\n    cpc: 4.75,\n    id: \"2\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"buy react templates\",\n    link: \"https://coss.com/origin/input\",\n    traffic: 65,\n    volume: 1850,\n  },\n  {\n    cpc: 3.25,\n    id: \"3\",\n    intents: [\"Informational\", \"Commercial\"],\n    keyword: \"react ui library\",\n    link: \"https://coss.com/origin/badge\",\n    traffic: 112,\n    volume: 3200,\n  },\n  {\n    cpc: 1.95,\n    id: \"4\",\n    intents: [\"Transactional\"],\n    keyword: \"tailwind components download\",\n    link: \"https://coss.com/origin/alert\",\n    traffic: 45,\n    volume: 890,\n  },\n  {\n    cpc: 5.5,\n    id: \"5\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react dashboard template free\",\n    link: \"https://coss.com/origin/tabs\",\n    traffic: 156,\n    volume: 4100,\n  },\n  {\n    cpc: 1.25,\n    id: \"6\",\n    intents: [\"Informational\"],\n    keyword: \"how to use react components\",\n    link: \"https://coss.com/origin/table\",\n    traffic: 42,\n    volume: 1200,\n  },\n  {\n    cpc: 6.8,\n    id: \"7\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react ui kit premium\",\n    link: \"https://coss.com/origin/avatar\",\n    traffic: 28,\n    volume: 760,\n  },\n  {\n    cpc: 1.8,\n    id: \"8\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react component documentation\",\n    link: \"https://coss.com/origin\",\n    traffic: 35,\n    volume: 950,\n  },\n];\n\nexport default function Component() {\n  const table = useTable(\n    {\n      columns,\n      data: items,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        sorting: [\n          {\n            desc: false,\n            id: \"traffic\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      columnFilters: state.columnFilters,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  const keywordColumn = table.getColumn(\"keyword\");\n  const intentsColumn = table.getColumn(\"intents\");\n  const volumeColumn = table.getColumn(\"volume\");\n  const cpcColumn = table.getColumn(\"cpc\");\n  const trafficColumn = table.getColumn(\"traffic\");\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap gap-3\">\n        {/* Search input */}\n        {keywordColumn && (\n          <div className=\"w-44\">\n            <Filter column={keywordColumn} />\n          </div>\n        )}\n        {/* Intents select */}\n        {intentsColumn && (\n          <div className=\"w-36\">\n            <Filter column={intentsColumn} />\n          </div>\n        )}\n        {/* Volume inputs */}\n        {volumeColumn && (\n          <div className=\"w-36\">\n            <Filter column={volumeColumn} />\n          </div>\n        )}\n        {/* CPC inputs */}\n        {cpcColumn && (\n          <div className=\"w-36\">\n            <Filter column={cpcColumn} />\n          </div>\n        )}\n        {/* Traffic inputs */}\n        {trafficColumn && (\n          <div className=\"w-36\">\n            <Filter column={trafficColumn} />\n          </div>\n        )}\n      </div>\n\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t\"\n                    key={header.id}\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? (\n                          <span aria-hidden=\"true\" className=\"size-4\" />\n                        )}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Data table with filters made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction Filter({\n  column,\n}: {\n  column: Column<typeof features, Item, unknown>;\n}) {\n  const id = useId();\n  const columnFilterValue = column.getFilterValue();\n  const { filterVariant } = column.columnDef.meta ?? {};\n  const columnHeader =\n    typeof column.columnDef.header === \"string\" ? column.columnDef.header : \"\";\n  const sortedUniqueValues = useMemo(() => {\n    if (filterVariant === \"range\") return [];\n\n    // Get all unique values from the column\n    const values = Array.from(column.getFacetedUniqueValues().keys());\n\n    // If the values are arrays, flatten them and get unique items\n    const flattenedValues = values.reduce((acc: string[], curr) => {\n      if (Array.isArray(curr)) {\n        acc.push(...curr);\n      } else {\n        acc.push(curr);\n      }\n      return acc;\n    }, []);\n\n    // Get unique values and sort them\n    return Array.from(new Set(flattenedValues)).sort();\n  }, [column, filterVariant]);\n\n  if (filterVariant === \"range\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label>{columnHeader}</Label>\n        <div className=\"flex\">\n          <Input\n            aria-label={`${columnHeader} min`}\n            className=\"flex-1 rounded-e-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-1`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                e.target.value ? Number(e.target.value) : undefined,\n                old?.[1],\n              ])\n            }\n            placeholder=\"Min\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[0] ?? \"\"}\n          />\n          <Input\n            aria-label={`${columnHeader} max`}\n            className=\"-ms-px flex-1 rounded-s-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-2`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                old?.[0],\n                e.target.value ? Number(e.target.value) : undefined,\n              ])\n            }\n            placeholder=\"Max\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[1] ?? \"\"}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  if (filterVariant === \"select\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label htmlFor={`${id}-select`}>{columnHeader}</Label>\n        <Select\n          onValueChange={(value) => {\n            column.setFilterValue(value === \"all\" ? undefined : value);\n          }}\n          value={columnFilterValue?.toString() ?? \"all\"}\n        >\n          <SelectTrigger id={`${id}-select`}>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"all\">All</SelectItem>\n            {sortedUniqueValues.map((value) => (\n              <SelectItem key={String(value)} value={String(value)}>\n                {String(value)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={`${id}-input`}>{columnHeader}</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"peer ps-9\"\n          id={`${id}-input`}\n          onChange={(e) => column.setFilterValue(e.target.value)}\n          placeholder={`Search ${columnHeader.toLowerCase()}`}\n          type=\"text\"\n          value={(columnFilterValue ?? \"\") as string}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <SearchIcon size={16} />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-479.json b/apps/origin/public/r/comp-479.json
index aaf05cde6..433acec77 100644
--- a/apps/origin/public/r/comp-479.json
+++ b/apps/origin/public/r/comp-479.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-479.tsx",
-      "content": "\"use client\";\n\nimport {\n  columnResizingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createSortedRowModel,\n  type ColumnDef,\n  flexRender,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  type SortingState,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Excellent\" | \"Good\" | \"Average\" | \"Poor\";\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnResizingFeature,\n  columnVisibilityFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable({\n    columnResizeMode: \"onChange\",\n    columns,\n    data,\n    enableSortingRemoval: false,\n    features,\n    onSortingChange: setSorting,\n    state: {\n      sorting,\n    },\n  });\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed\"\n        style={{\n          width: table.getCenterTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t last:[&>.cursor-col-resize]:opacity-0\"\n                    key={header.id}\n                    {...{\n                      colSpan: header.colSpan,\n                      style: {\n                        width: header.getSize(),\n                      },\n                    }}\n                  >\n                    {header.isPlaceholder ? null : (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        <span className=\"truncate\">\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                        </span>\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    )}\n                    {header.column.getCanResize() && (\n                      <div\n                        {...{\n                          className:\n                            \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:translate-x-px\",\n                          onDoubleClick: () => header.column.resetSize(),\n                          onMouseDown: header.getResizeHandler(),\n                          onTouchStart: header.getResizeHandler(),\n                        }}\n                      />\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell className=\"truncate\" key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Resizable and sortable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnResizingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createSortedRowModel,\n  flexRender,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Excellent\" | \"Good\" | \"Average\" | \"Poor\";\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnResizingFeature,\n  columnVisibilityFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columnResizeMode: \"onChange\",\n      columns,\n      data,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        sorting: [\n          {\n            desc: false,\n            id: \"name\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      columnSizing: state.columnSizing,\n      sorting: state.sorting,\n    }),\n  );\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed\"\n        style={{\n          width: table.getCenterTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t last:[&>.cursor-col-resize]:opacity-0\"\n                    key={header.id}\n                    {...{\n                      colSpan: header.colSpan,\n                      style: {\n                        width: header.getSize(),\n                      },\n                    }}\n                  >\n                    {header.isPlaceholder ? null : (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        <span className=\"truncate\">\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                        </span>\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    )}\n                    {header.column.getCanResize() && (\n                      <div\n                        {...{\n                          className:\n                            \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:translate-x-px\",\n                          onDoubleClick: () => header.column.resetSize(),\n                          onMouseDown: header.getResizeHandler(),\n                          onTouchStart: header.getResizeHandler(),\n                        }}\n                      />\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow key={row.id}>\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell className=\"truncate\" key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Resizable and sortable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-480.json b/apps/origin/public/r/comp-480.json
index f8da1643a..6ff42c2a8 100644
--- a/apps/origin/public/r/comp-480.json
+++ b/apps/origin/public/r/comp-480.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-480.tsx",
-      "content": "\"use client\";\n\nimport {\n  columnOrderingFeature,\n  columnPinningFeature,\n  columnResizingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createSortedRowModel,\n  type Column,\n  type ColumnDef,\n  flexRender,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  type SortingState,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ArrowLeftToLineIcon,\n  ArrowRightToLineIcon,\n  EllipsisIcon,\n  PinOffIcon,\n} from \"lucide-react\";\nimport { type CSSProperties, useEffect, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Good\" | \"Very Good\" | \"Excellent\" | \"Outstanding\";\n};\n\nconst features = tableFeatures({\n  columnOrderingFeature,\n  columnPinningFeature,\n  columnSizingFeature,\n  columnResizingFeature,\n  columnVisibilityFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\n// Helper function to compute pinning styles for columns\nconst getPinningStyles = (\n  column: Column<typeof features, Item, unknown>,\n): CSSProperties => {\n  const isPinned = column.getIsPinned();\n  return {\n    insetInlineEnd:\n      isPinned === \"end\" ? `${column.getAfter(\"end\")}px` : undefined,\n    insetInlineStart:\n      isPinned === \"start\" ? `${column.getStart(\"start\")}px` : undefined,\n    position: isPinned ? \"sticky\" : \"relative\",\n    width: column.getSize(),\n    zIndex: isPinned ? 1 : 0,\n  };\n};\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable({\n    columnResizeMode: \"onChange\",\n    columns,\n    data,\n    enableSortingRemoval: false,\n    features,\n    onSortingChange: setSorting,\n    state: {\n      sorting,\n    },\n  });\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed border-separate border-spacing-0 [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-border [&_th]:border-b [&_tr:not(:last-child)_td]:border-b [&_tr]:border-none\"\n        style={{\n          width: table.getTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const { column } = header;\n                const isPinned = column.getIsPinned();\n                const isLastStartPinned =\n                  isPinned === \"start\" && column.getIsLastColumn(\"start\");\n                const isFirstEndPinned =\n                  isPinned === \"end\" && column.getIsFirstColumn(\"end\");\n\n                return (\n                  <TableHead\n                    className=\"relative h-10 truncate border-t data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=start]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=end]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=end][data-last-col=end]]:border-s [&[data-pinned=start][data-last-col=start]]:border-e [&[data-pinned][data-last-col]]:border-border\"\n                    colSpan={header.colSpan}\n                    data-last-col={\n                      isLastStartPinned\n                        ? \"start\"\n                        : isFirstEndPinned\n                          ? \"end\"\n                          : undefined\n                    }\n                    data-pinned={isPinned || undefined}\n                    key={header.id}\n                    style={{ ...getPinningStyles(column) }}\n                  >\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <span className=\"truncate\">\n                        {header.isPlaceholder\n                          ? null\n                          : flexRender(\n                              header.column.columnDef.header,\n                              header.getContext(),\n                            )}\n                      </span>\n                      {/* Pin/Unpin column controls with enhanced accessibility */}\n                      {!header.isPlaceholder &&\n                        header.column.getCanPin() &&\n                        (header.column.getIsPinned() ? (\n                          <Button\n                            aria-label={`Unpin ${header.column.columnDef.header as string} column`}\n                            className=\"-mr-1 size-7 shadow-none\"\n                            onClick={() => header.column.pin(false)}\n                            size=\"icon\"\n                            title={`Unpin ${header.column.columnDef.header as string} column`}\n                            variant=\"ghost\"\n                          >\n                            <PinOffIcon\n                              aria-hidden=\"true\"\n                              className=\"opacity-60\"\n                              size={16}\n                            />\n                          </Button>\n                        ) : (\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-label={`Pin options for ${header.column.columnDef.header as string} column`}\n                                className=\"-mr-1 size-7 shadow-none\"\n                                size=\"icon\"\n                                title={`Pin options for ${header.column.columnDef.header as string} column`}\n                                variant=\"ghost\"\n                              >\n                                <EllipsisIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"start\")}\n                              >\n                                <ArrowLeftToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to start\n                              </DropdownMenuItem>\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"end\")}\n                              >\n                                <ArrowRightToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to end\n                              </DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        ))}\n                      {header.column.getCanResize() && (\n                        <div\n                          {...{\n                            className:\n                              \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:-translate-x-px\",\n                            onDoubleClick: () => header.column.resetSize(),\n                            onMouseDown: header.getResizeHandler(),\n                            onTouchStart: header.getResizeHandler(),\n                          }}\n                        />\n                      )}\n                    </div>\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => {\n                  const { column } = cell;\n                  const isPinned = column.getIsPinned();\n                  const isLastStartPinned =\n                    isPinned === \"start\" && column.getIsLastColumn(\"start\");\n                  const isFirstEndPinned =\n                    isPinned === \"end\" && column.getIsFirstColumn(\"end\");\n\n                  return (\n                    <TableCell\n                      className=\"truncate data-pinned:bg-background/90 data-pinned:backdrop-blur-xs [&[data-pinned=end][data-last-col=end]]:border-s [&[data-pinned=start][data-last-col=start]]:border-e [&[data-pinned][data-last-col]]:border-border\"\n                      data-last-col={\n                        isLastStartPinned\n                          ? \"start\"\n                          : isFirstEndPinned\n                            ? \"end\"\n                            : undefined\n                      }\n                      data-pinned={isPinned || undefined}\n                      key={cell.id}\n                      style={{ ...getPinningStyles(column) }}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  );\n                })}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Pinnable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  columnOrderingFeature,\n  columnPinningFeature,\n  columnResizingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  flexRender,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ArrowLeftToLineIcon,\n  ArrowRightToLineIcon,\n  EllipsisIcon,\n  PinOffIcon,\n} from \"lucide-react\";\nimport { type CSSProperties, useEffect, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Good\" | \"Very Good\" | \"Excellent\" | \"Outstanding\";\n};\n\nconst features = tableFeatures({\n  columnOrderingFeature,\n  columnPinningFeature,\n  columnSizingFeature,\n  columnResizingFeature,\n  columnVisibilityFeature,\n});\n\n// Helper function to compute pinning styles for columns\nconst getPinningStyles = (\n  column: Column<typeof features, Item, unknown>,\n): CSSProperties => {\n  const isPinned = column.getIsPinned();\n  return {\n    insetInlineEnd:\n      isPinned === \"end\" ? `${column.getAfter(\"end\")}px` : undefined,\n    insetInlineStart:\n      isPinned === \"start\" ? `${column.getStart(\"start\")}px` : undefined,\n    position: isPinned ? \"sticky\" : \"relative\",\n    width: column.getSize(),\n    zIndex: isPinned ? 1 : 0,\n  };\n};\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columnResizeMode: \"onChange\",\n      columns,\n      data,\n      features,\n    },\n    (state) => ({\n      columnPinning: state.columnPinning,\n      columnSizing: state.columnSizing,\n    }),\n  );\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed border-separate border-spacing-0 [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-border [&_th]:border-b [&_tr:not(:last-child)_td]:border-b [&_tr]:border-none\"\n        style={{\n          width: table.getTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const { column } = header;\n                const isPinned = column.getIsPinned();\n                const isLastStartPinned =\n                  isPinned === \"start\" && column.getIsLastColumn(\"start\");\n                const isFirstEndPinned =\n                  isPinned === \"end\" && column.getIsFirstColumn(\"end\");\n\n                return (\n                  <TableHead\n                    className=\"relative h-10 truncate border-t data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=start]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=end]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=end][data-last-col=end]]:border-s [&[data-pinned=start][data-last-col=start]]:border-e [&[data-pinned][data-last-col]]:border-border\"\n                    colSpan={header.colSpan}\n                    data-last-col={\n                      isLastStartPinned\n                        ? \"start\"\n                        : isFirstEndPinned\n                          ? \"end\"\n                          : undefined\n                    }\n                    data-pinned={isPinned || undefined}\n                    key={header.id}\n                    style={{ ...getPinningStyles(column) }}\n                  >\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <span className=\"truncate\">\n                        {header.isPlaceholder\n                          ? null\n                          : flexRender(\n                              header.column.columnDef.header,\n                              header.getContext(),\n                            )}\n                      </span>\n                      {/* Pin/Unpin column controls with enhanced accessibility */}\n                      {!header.isPlaceholder &&\n                        header.column.getCanPin() &&\n                        (header.column.getIsPinned() ? (\n                          <Button\n                            aria-label={`Unpin ${header.column.columnDef.header as string} column`}\n                            className=\"-mr-1 size-7 shadow-none\"\n                            onClick={() => header.column.pin(false)}\n                            size=\"icon\"\n                            title={`Unpin ${header.column.columnDef.header as string} column`}\n                            variant=\"ghost\"\n                          >\n                            <PinOffIcon\n                              aria-hidden=\"true\"\n                              className=\"opacity-60\"\n                              size={16}\n                            />\n                          </Button>\n                        ) : (\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-label={`Pin options for ${header.column.columnDef.header as string} column`}\n                                className=\"-mr-1 size-7 shadow-none\"\n                                size=\"icon\"\n                                title={`Pin options for ${header.column.columnDef.header as string} column`}\n                                variant=\"ghost\"\n                              >\n                                <EllipsisIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"start\")}\n                              >\n                                <ArrowLeftToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to start\n                              </DropdownMenuItem>\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"end\")}\n                              >\n                                <ArrowRightToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to end\n                              </DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        ))}\n                      {header.column.getCanResize() && (\n                        <div\n                          {...{\n                            className:\n                              \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:-translate-x-px\",\n                            onDoubleClick: () => header.column.resetSize(),\n                            onMouseDown: header.getResizeHandler(),\n                            onTouchStart: header.getResizeHandler(),\n                          }}\n                        />\n                      )}\n                    </div>\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow key={row.id}>\n                {row.getVisibleCells().map((cell) => {\n                  const { column } = cell;\n                  const isPinned = column.getIsPinned();\n                  const isLastStartPinned =\n                    isPinned === \"start\" && column.getIsLastColumn(\"start\");\n                  const isFirstEndPinned =\n                    isPinned === \"end\" && column.getIsFirstColumn(\"end\");\n\n                  return (\n                    <TableCell\n                      className=\"truncate data-pinned:bg-background/90 data-pinned:backdrop-blur-xs [&[data-pinned=end][data-last-col=end]]:border-s [&[data-pinned=start][data-last-col=start]]:border-e [&[data-pinned][data-last-col]]:border-border\"\n                      data-last-col={\n                        isLastStartPinned\n                          ? \"start\"\n                          : isFirstEndPinned\n                            ? \"end\"\n                            : undefined\n                      }\n                      data-pinned={isPinned || undefined}\n                      key={cell.id}\n                      style={{ ...getPinningStyles(column) }}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  );\n                })}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Pinnable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-481.json b/apps/origin/public/r/comp-481.json
index 72b7b175b..885d04d0d 100644
--- a/apps/origin/public/r/comp-481.json
+++ b/apps/origin/public/r/comp-481.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-481.tsx",
-      "content": "\"use client\";\n\nimport {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToHorizontalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  useSortable,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport {\n  columnOrderingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createSortedRowModel,\n  type Cell,\n  type ColumnDef,\n  flexRender,\n  type Header,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  type SortingState,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, GripVerticalIcon } from \"lucide-react\";\nimport { type CSSProperties, useEffect, useId, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnOrderingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    id: \"name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    id: \"email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    id: \"location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    id: \"status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    id: \"balance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [columnOrder, setColumnOrder] = useState<string[]>(\n    columns.map((column) => column.id as string),\n  );\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    features,\n    onColumnOrderChange: setColumnOrder,\n    onSortingChange: setSorting,\n    state: {\n      columnOrder,\n      sorting,\n    },\n  });\n\n  // reorder columns after drag & drop\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event;\n    if (active && over && active.id !== over.id) {\n      setColumnOrder((columnOrder) => {\n        const oldIndex = columnOrder.indexOf(active.id as string);\n        const newIndex = columnOrder.indexOf(over.id as string);\n        return arrayMove(columnOrder, oldIndex, newIndex); //this is just a splice util\n      });\n    }\n  }\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {}),\n  );\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={useId()}\n      modifiers={[restrictToHorizontalAxis]}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              <SortableContext\n                items={columnOrder}\n                strategy={horizontalListSortingStrategy}\n              >\n                {headerGroup.headers.map((header) => (\n                  <DraggableTableHeader header={header} key={header.id} />\n                ))}\n              </SortableContext>\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <SortableContext\n                    items={columnOrder}\n                    key={cell.id}\n                    strategy={horizontalListSortingStrategy}\n                  >\n                    <DragAlongCell cell={cell} key={cell.id} />\n                  </SortableContext>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Draggable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>{\" \"}\n        and{\" \"}\n        <a href=\"https://dndkit.com/\" rel=\"noopener noreferrer\" target=\"_blank\">\n          dnd kit\n        </a>\n      </p>\n    </DndContext>\n  );\n}\n\nconst DraggableTableHeader = ({\n  header,\n}: {\n  header: Header<typeof features, Item, unknown>;\n}) => {\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({\n    id: header.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    whiteSpace: \"nowrap\",\n    width: header.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableHead\n      aria-sort={\n        header.column.getIsSorted() === \"asc\"\n          ? \"ascending\"\n          : header.column.getIsSorted() === \"desc\"\n            ? \"descending\"\n            : \"none\"\n      }\n      className=\"relative h-10 border-t before:absolute before:inset-y-0 before:start-0 before:w-px before:bg-border first:before:bg-transparent\"\n      ref={setNodeRef}\n      style={style}\n    >\n      <div className=\"flex items-center justify-start gap-0.5\">\n        <Button\n          className=\"-ml-2 size-7 shadow-none\"\n          size=\"icon\"\n          variant=\"ghost\"\n          {...attributes}\n          {...listeners}\n          aria-label=\"Drag to reorder\"\n        >\n          <GripVerticalIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60\"\n            size={16}\n          />\n        </Button>\n        <span className=\"grow truncate\">\n          {header.isPlaceholder\n            ? null\n            : flexRender(header.column.columnDef.header, header.getContext())}\n        </span>\n        <Button\n          className=\"group -mr-1 size-7 shadow-none\"\n          onClick={header.column.getToggleSortingHandler()}\n          onKeyDown={(e) => {\n            // Enhanced keyboard handling for sorting\n            if (\n              header.column.getCanSort() &&\n              (e.key === \"Enter\" || e.key === \" \")\n            ) {\n              e.preventDefault();\n              header.column.getToggleSortingHandler()?.(e);\n            }\n          }}\n          size=\"icon\"\n          variant=\"ghost\"\n        >\n          {{\n            asc: (\n              <ChevronUpIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n            desc: (\n              <ChevronDownIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n          }[header.column.getIsSorted() as string] ?? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"shrink-0 opacity-0 group-hover:opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      </div>\n    </TableHead>\n  );\n};\n\nconst DragAlongCell = ({\n  cell,\n}: {\n  cell: Cell<typeof features, Item, unknown>;\n}) => {\n  const { isDragging, setNodeRef, transform, transition } = useSortable({\n    id: cell.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    width: cell.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableCell className=\"truncate\" ref={setNodeRef} style={style}>\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </TableCell>\n  );\n};\n",
+      "content": "\"use client\";\n\nimport {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToHorizontalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  useSortable,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport {\n  type Cell,\n  type ColumnDef,\n  columnOrderingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createSortedRowModel,\n  flexRender,\n  type Header,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, GripVerticalIcon } from \"lucide-react\";\nimport { type CSSProperties, useEffect, useId, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnOrderingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    id: \"name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    id: \"email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    id: \"location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    id: \"status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    id: \"balance\",\n  },\n];\n\nconst initialColumnOrder = columns.map((column) => column.id as string);\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        columnOrder: initialColumnOrder,\n      },\n    },\n    (state) => ({\n      columnOrder: state.columnOrder,\n      sorting: state.sorting,\n    }),\n  );\n\n  // reorder columns after drag & drop\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event;\n    if (active && over && active.id !== over.id) {\n      table.setColumnOrder((columnOrder) => {\n        const oldIndex = columnOrder.indexOf(active.id as string);\n        const newIndex = columnOrder.indexOf(over.id as string);\n        return arrayMove(columnOrder, oldIndex, newIndex); //this is just a splice util\n      });\n    }\n  }\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {}),\n  );\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={useId()}\n      modifiers={[restrictToHorizontalAxis]}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              <SortableContext\n                items={table.state.columnOrder}\n                strategy={horizontalListSortingStrategy}\n              >\n                {headerGroup.headers.map((header) => (\n                  <DraggableTableHeader header={header} key={header.id} />\n                ))}\n              </SortableContext>\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow key={row.id}>\n                {row.getVisibleCells().map((cell) => (\n                  <SortableContext\n                    items={table.state.columnOrder}\n                    key={cell.id}\n                    strategy={horizontalListSortingStrategy}\n                  >\n                    <DragAlongCell cell={cell} key={cell.id} />\n                  </SortableContext>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Draggable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>{\" \"}\n        and{\" \"}\n        <a href=\"https://dndkit.com/\" rel=\"noopener noreferrer\" target=\"_blank\">\n          dnd kit\n        </a>\n      </p>\n    </DndContext>\n  );\n}\n\nconst DraggableTableHeader = ({\n  header,\n}: {\n  header: Header<typeof features, Item, unknown>;\n}) => {\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({\n    id: header.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    whiteSpace: \"nowrap\",\n    width: header.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableHead\n      aria-sort={\n        header.column.getIsSorted() === \"asc\"\n          ? \"ascending\"\n          : header.column.getIsSorted() === \"desc\"\n            ? \"descending\"\n            : \"none\"\n      }\n      className=\"relative h-10 border-t before:absolute before:inset-y-0 before:start-0 before:w-px before:bg-border first:before:bg-transparent\"\n      ref={setNodeRef}\n      style={style}\n    >\n      <div className=\"flex items-center justify-start gap-0.5\">\n        <Button\n          className=\"-ml-2 size-7 shadow-none\"\n          size=\"icon\"\n          variant=\"ghost\"\n          {...attributes}\n          {...listeners}\n          aria-label=\"Drag to reorder\"\n        >\n          <GripVerticalIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60\"\n            size={16}\n          />\n        </Button>\n        <span className=\"grow truncate\">\n          {header.isPlaceholder\n            ? null\n            : flexRender(header.column.columnDef.header, header.getContext())}\n        </span>\n        <Button\n          className=\"group -mr-1 size-7 shadow-none\"\n          onClick={header.column.getToggleSortingHandler()}\n          onKeyDown={(e) => {\n            // Enhanced keyboard handling for sorting\n            if (\n              header.column.getCanSort() &&\n              (e.key === \"Enter\" || e.key === \" \")\n            ) {\n              e.preventDefault();\n              header.column.getToggleSortingHandler()?.(e);\n            }\n          }}\n          size=\"icon\"\n          variant=\"ghost\"\n        >\n          {{\n            asc: (\n              <ChevronUpIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n            desc: (\n              <ChevronDownIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n          }[header.column.getIsSorted() as string] ?? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"shrink-0 opacity-0 group-hover:opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      </div>\n    </TableHead>\n  );\n};\n\nconst DragAlongCell = ({\n  cell,\n}: {\n  cell: Cell<typeof features, Item, unknown>;\n}) => {\n  const { isDragging, setNodeRef, transform, transition } = useSortable({\n    id: cell.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    width: cell.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableCell className=\"truncate\" ref={setNodeRef} style={style}>\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </TableCell>\n  );\n};\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-482.json b/apps/origin/public/r/comp-482.json
index bc3ebda73..3e3b008ba 100644
--- a/apps/origin/public/r/comp-482.json
+++ b/apps/origin/public/r/comp-482.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-482.tsx",
-      "content": "\"use client\";\n\nimport {\n  columnVisibilityFeature,\n  createExpandedRowModel,\n  type ColumnDef,\n  flexRender,\n  rowExpandingFeature,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, InfoIcon } from \"lucide-react\";\nimport { Fragment, useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  note?: string;\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowExpandingFeature,\n  expandedRowModel: createExpandedRowModel(),\n  rowSelectionFeature,\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => {\n      return row.getCanExpand() ? (\n        <Button\n          {...{\n            \"aria-expanded\": row.getIsExpanded(),\n            \"aria-label\": row.getIsExpanded()\n              ? `Collapse details for ${row.original.name}`\n              : `Expand details for ${row.original.name}`,\n            className: \"size-7 shadow-none text-muted-foreground\",\n            onClick: row.getToggleExpandedHandler(),\n            size: \"icon\",\n            variant: \"ghost\",\n          }}\n        >\n          {row.getIsExpanded() ? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          ) : (\n            <ChevronDownIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      ) : undefined;\n    },\n    header: () => null,\n    id: \"expander\",\n  },\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable({\n    columns,\n    data,\n    features,\n    getRowCanExpand: (row) => Boolean(row.original.note),\n  });\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <Fragment key={row.id}>\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell\n                      className=\"whitespace-nowrap [&:has([aria-expanded])]:w-px [&:has([aria-expanded])]:py-0 [&:has([aria-expanded])]:pr-0\"\n                      key={cell.id}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n                {row.getIsExpanded() && (\n                  <TableRow>\n                    <TableCell colSpan={row.getVisibleCells().length}>\n                      <div className=\"flex items-start py-2 text-primary/80\">\n                        <span\n                          aria-hidden=\"true\"\n                          className=\"me-3 mt-0.5 flex w-7 shrink-0 justify-center\"\n                        >\n                          <InfoIcon className=\"opacity-60\" size={16} />\n                        </span>\n                        <p className=\"text-sm\">{row.original.note}</p>\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                )}\n              </Fragment>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Expanding sub-row made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnVisibilityFeature,\n  createExpandedRowModel,\n  flexRender,\n  rowExpandingFeature,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, InfoIcon } from \"lucide-react\";\nimport { Fragment, useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  note?: string;\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowExpandingFeature,\n  expandedRowModel: createExpandedRowModel(),\n  rowSelectionFeature,\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => {\n      return row.getCanExpand() ? (\n        <Button\n          {...{\n            \"aria-expanded\": row.getIsExpanded(),\n            \"aria-label\": row.getIsExpanded()\n              ? `Collapse details for ${row.original.name}`\n              : `Expand details for ${row.original.name}`,\n            className: \"size-7 shadow-none text-muted-foreground\",\n            onClick: row.getToggleExpandedHandler(),\n            size: \"icon\",\n            variant: \"ghost\",\n          }}\n        >\n          {row.getIsExpanded() ? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          ) : (\n            <ChevronDownIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      ) : undefined;\n    },\n    header: () => null,\n    id: \"expander\",\n  },\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      features,\n      getRowCanExpand: (row) => Boolean(row.original.note),\n    },\n    (state) => ({\n      expanded: state.expanded,\n      rowSelection: state.rowSelection,\n    }),\n  );\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <Fragment key={row.id}>\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell\n                      className=\"whitespace-nowrap [&:has([aria-expanded])]:w-px [&:has([aria-expanded])]:py-0 [&:has([aria-expanded])]:pr-0\"\n                      key={cell.id}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n                {row.getIsExpanded() && (\n                  <TableRow>\n                    <TableCell colSpan={row.getVisibleCells().length}>\n                      <div className=\"flex items-start py-2 text-primary/80\">\n                        <span\n                          aria-hidden=\"true\"\n                          className=\"me-3 mt-0.5 flex w-7 shrink-0 justify-center\"\n                        >\n                          <InfoIcon className=\"opacity-60\" size={16} />\n                        </span>\n                        <p className=\"text-sm\">{row.original.note}</p>\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                )}\n              </Fragment>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Expanding sub-row made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-483.json b/apps/origin/public/r/comp-483.json
index 139a9bea6..665bf6018 100644
--- a/apps/origin/public/r/comp-483.json
+++ b/apps/origin/public/r/comp-483.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-483.tsx",
-      "content": "\"use client\";\n\nimport {\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  type ColumnDef,\n  flexRender,\n  type PaginationState,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  type SortingState,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 5,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData([...data, ...data]);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    features,\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.state.pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.state.pagination.pageIndex *\n                table.state.pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.state.pagination.pageIndex *\n                    table.state.pagination.pageSize +\n                    table.state.pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Paginated table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  flexRender,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData([...data, ...data]);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        pagination: {\n          pageIndex: 0,\n          pageSize: 5,\n        },\n        sorting: [\n          {\n            desc: false,\n            id: \"name\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      pagination: state.pagination,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.state.pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.state.pagination.pageIndex *\n                table.state.pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.state.pagination.pageIndex *\n                    table.state.pagination.pageSize +\n                    table.state.pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Paginated table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/public/r/comp-484.json b/apps/origin/public/r/comp-484.json
index 76e48760f..ca6c16e54 100644
--- a/apps/origin/public/r/comp-484.json
+++ b/apps/origin/public/r/comp-484.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-484.tsx",
-      "content": "\"use client\";\n\nimport {\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  type ColumnDef,\n  flexRender,\n  type PaginationState,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  type SortingState,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { usePagination } from \"@/registry/default/hooks/use-pagination\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all rows\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const pageSize = 5;\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    features,\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage: table.state.pagination.pageIndex + 1,\n    paginationItemsToDisplay: 5,\n    totalPages: table.getPageCount(),\n  });\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-3 max-sm:flex-col\">\n        {/* Page number information */}\n        <p\n          aria-live=\"polite\"\n          className=\"flex-1 whitespace-nowrap text-muted-foreground text-sm\"\n        >\n          Page{\" \"}\n          <span className=\"text-foreground\">\n            {table.state.pagination.pageIndex + 1}\n          </span>{\" \"}\n          of <span className=\"text-foreground\">{table.getPageCount()}</span>\n        </p>\n\n        {/* Pagination buttons */}\n        <div className=\"grow\">\n          <Pagination>\n            <PaginationContent>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n\n              {/* Left ellipsis (...) */}\n              {showLeftEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Page number buttons */}\n              {pages.map((page) => {\n                const isActive = page === table.state.pagination.pageIndex + 1;\n                return (\n                  <PaginationItem key={page}>\n                    <Button\n                      aria-current={isActive ? \"page\" : undefined}\n                      onClick={() => table.setPageIndex(page - 1)}\n                      size=\"icon\"\n                      variant={`${isActive ? \"outline\" : \"ghost\"}`}\n                    >\n                      {page}\n                    </Button>\n                  </PaginationItem>\n                );\n              })}\n\n              {/* Right ellipsis (...) */}\n              {showRightEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n\n        {/* Results per page */}\n        <div className=\"flex flex-1 justify-end\">\n          <Select\n            aria-label=\"Results per page\"\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.state.pagination.pageSize.toString()}\n          >\n            <SelectTrigger\n              className=\"w-fit whitespace-nowrap\"\n              id=\"results-per-page\"\n            >\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent>\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize} / page\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Numeric pagination made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  flexRender,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { usePagination } from \"@/registry/default/hooks/use-pagination\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all rows\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const pageSize = 5;\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        pagination: {\n          pageIndex: 0,\n          pageSize,\n        },\n        sorting: [\n          {\n            desc: false,\n            id: \"name\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      pagination: state.pagination,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage: table.state.pagination.pageIndex + 1,\n    paginationItemsToDisplay: 5,\n    totalPages: table.getPageCount(),\n  });\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-3 max-sm:flex-col\">\n        {/* Page number information */}\n        <p\n          aria-live=\"polite\"\n          className=\"flex-1 whitespace-nowrap text-muted-foreground text-sm\"\n        >\n          Page{\" \"}\n          <span className=\"text-foreground\">\n            {table.state.pagination.pageIndex + 1}\n          </span>{\" \"}\n          of <span className=\"text-foreground\">{table.getPageCount()}</span>\n        </p>\n\n        {/* Pagination buttons */}\n        <div className=\"grow\">\n          <Pagination>\n            <PaginationContent>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n\n              {/* Left ellipsis (...) */}\n              {showLeftEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Page number buttons */}\n              {pages.map((page) => {\n                const isActive = page === table.state.pagination.pageIndex + 1;\n                return (\n                  <PaginationItem key={page}>\n                    <Button\n                      aria-current={isActive ? \"page\" : undefined}\n                      onClick={() => table.setPageIndex(page - 1)}\n                      size=\"icon\"\n                      variant={`${isActive ? \"outline\" : \"ghost\"}`}\n                    >\n                      {page}\n                    </Button>\n                  </PaginationItem>\n                );\n              })}\n\n              {/* Right ellipsis (...) */}\n              {showRightEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n\n        {/* Results per page */}\n        <div className=\"flex flex-1 justify-end\">\n          <Select\n            aria-label=\"Results per page\"\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.state.pagination.pageSize.toString()}\n          >\n            <SelectTrigger\n              className=\"w-fit whitespace-nowrap\"\n              id=\"results-per-page\"\n            >\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent>\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize} / page\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Numeric pagination made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/origin/public/r/comp-485.json b/apps/origin/public/r/comp-485.json
index a269a8a76..4b44a6bcf 100644
--- a/apps/origin/public/r/comp-485.json
+++ b/apps/origin/public/r/comp-485.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/default/components/comp-485.tsx",
-      "content": "\"use client\";\n\nimport {\n  columnFacetingFeature,\n  columnFilteringFeature,\n  columnSizingFeature,\n  type ColumnVisibilityState,\n  columnVisibilityFeature,\n  createFacetedUniqueValues,\n  createFilteredRowModel,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type FilterFn,\n  flexRender,\n  type PaginationState,\n  rowPaginationFeature,\n  type Row,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  type SortingState,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CircleAlertIcon,\n  CircleXIcon,\n  Columns3Icon,\n  EllipsisIcon,\n  FilterIcon,\n  ListFilterIcon,\n  PlusIcon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnFilteringFeature,\n  columnFacetingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  facetedUniqueValues: createFacetedUniqueValues(),\n  filteredRowModel: createFilteredRowModel(),\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\n// Custom filter function for multi-column searching\nconst multiColumnFilterFn: FilterFn<typeof features, Item> = (\n  row,\n  _columnId,\n  filterValue,\n) => {\n  const searchableRowContent =\n    `${row.original.name} ${row.original.email}`.toLowerCase();\n  const searchTerm = (filterValue ?? \"\").toLowerCase();\n  return searchableRowContent.includes(searchTerm);\n};\n\nconst statusFilterFn: FilterFn<typeof features, Item> = (\n  row,\n  columnId,\n  filterValue: string[],\n) => {\n  if (!filterValue?.length) return true;\n  const status = row.getValue(columnId) as string;\n  return filterValue.includes(status);\n};\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableHiding: false,\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    enableHiding: false,\n    filterFn: multiColumnFilterFn,\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 220,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    filterFn: statusFilterFn,\n    header: \"Status\",\n    size: 100,\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n  {\n    cell: ({ row }) => <RowActions row={row} />,\n    enableHiding: false,\n    header: () => <span className=\"sr-only\">Actions</span>,\n    id: \"actions\",\n    size: 60,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [columnVisibility, setColumnVisibility] =\n    useState<ColumnVisibilityState>({});\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 10,\n  });\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const handleDeleteRows = () => {\n    const selectedRows = table.getSelectedRowModel().rows;\n    const updatedData = data.filter(\n      (item) => !selectedRows.some((row) => row.original.id === item.id),\n    );\n    setData(updatedData);\n    table.resetRowSelection();\n  };\n\n  const table = useTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    features,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      columnFilters,\n      columnVisibility,\n      pagination,\n      sorting,\n    },\n  });\n\n  // Get unique status values\n  const uniqueStatusValues = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n\n    if (!statusColumn) return [];\n\n    const values = Array.from(statusColumn.getFacetedUniqueValues().keys());\n\n    return values.sort();\n  }, [table.getColumn]);\n\n  // Get counts for each status\n  const statusCounts = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n    if (!statusColumn) return new Map();\n    return statusColumn.getFacetedUniqueValues();\n  }, [table]);\n\n  const selectedStatuses = useMemo(() => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    return filterValue ?? [];\n  }, [table]);\n\n  const handleStatusChange = (checked: boolean, value: string) => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    const newFilterValue = filterValue ? [...filterValue] : [];\n\n    if (checked) {\n      newFilterValue.push(value);\n    } else {\n      const index = newFilterValue.indexOf(value);\n      if (index > -1) {\n        newFilterValue.splice(index, 1);\n      }\n    }\n\n    table\n      .getColumn(\"status\")\n      ?.setFilterValue(newFilterValue.length ? newFilterValue : undefined);\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div className=\"flex items-center gap-3\">\n          {/* Filter by name or email */}\n          <div className=\"relative\">\n            <Input\n              aria-label=\"Filter by name or email\"\n              className={cn(\n                \"peer min-w-60 ps-9\",\n                Boolean(table.getColumn(\"name\")?.getFilterValue()) && \"pe-9\",\n              )}\n              id={`${id}-input`}\n              onChange={(e) =>\n                table.getColumn(\"name\")?.setFilterValue(e.target.value)\n              }\n              placeholder=\"Filter by name or email...\"\n              ref={inputRef}\n              type=\"text\"\n              value={\n                (table.getColumn(\"name\")?.getFilterValue() ?? \"\") as string\n              }\n            />\n            <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n              <ListFilterIcon aria-hidden=\"true\" size={16} />\n            </div>\n            {Boolean(table.getColumn(\"name\")?.getFilterValue()) && (\n              <button\n                aria-label=\"Clear filter\"\n                className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n                onClick={() => {\n                  table.getColumn(\"name\")?.setFilterValue(\"\");\n                  if (inputRef.current) {\n                    inputRef.current.focus();\n                  }\n                }}\n                type=\"button\"\n              >\n                <CircleXIcon aria-hidden=\"true\" size={16} />\n              </button>\n            )}\n          </div>\n          {/* Filter by status */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button variant=\"outline\">\n                <FilterIcon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                Status\n                {selectedStatuses.length > 0 && (\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {selectedStatuses.length}\n                  </span>\n                )}\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-auto min-w-36 p-3\">\n              <div className=\"space-y-3\">\n                <div className=\"font-medium text-muted-foreground text-xs\">\n                  Filters\n                </div>\n                <div className=\"space-y-3\">\n                  {uniqueStatusValues.map((value, i) => (\n                    <div className=\"flex items-center gap-2\" key={value}>\n                      <Checkbox\n                        checked={selectedStatuses.includes(value)}\n                        id={`${id}-${i}`}\n                        onCheckedChange={(checked: boolean) =>\n                          handleStatusChange(checked, value)\n                        }\n                      />\n                      <Label\n                        className=\"flex grow justify-between gap-2 font-normal\"\n                        htmlFor={`${id}-${i}`}\n                      >\n                        {value}{\" \"}\n                        <span className=\"ms-2 text-muted-foreground text-xs\">\n                          {statusCounts.get(value)}\n                        </span>\n                      </Label>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </PopoverContent>\n          </Popover>\n          {/* Toggle columns visibility */}\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\">\n                <Columns3Icon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                View\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n              {table\n                .getAllColumns()\n                .filter((column) => column.getCanHide())\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      checked={column.getIsVisible()}\n                      className=\"capitalize\"\n                      key={column.id}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                      onSelect={(event) => event.preventDefault()}\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  );\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          {/* Delete button */}\n          {table.getSelectedRowModel().rows.length > 0 && (\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button className=\"ml-auto\" variant=\"outline\">\n                  <TrashIcon\n                    aria-hidden=\"true\"\n                    className=\"-ms-1 opacity-60\"\n                    size={16}\n                  />\n                  Delete\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {table.getSelectedRowModel().rows.length}\n                  </span>\n                </Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <div className=\"flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4\">\n                  <div\n                    aria-hidden=\"true\"\n                    className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\n                  >\n                    <CircleAlertIcon className=\"opacity-80\" size={16} />\n                  </div>\n                  <AlertDialogHeader>\n                    <AlertDialogTitle>\n                      Are you absolutely sure?\n                    </AlertDialogTitle>\n                    <AlertDialogDescription>\n                      This action cannot be undone. This will permanently delete{\" \"}\n                      {table.getSelectedRowModel().rows.length} selected{\" \"}\n                      {table.getSelectedRowModel().rows.length === 1\n                        ? \"row\"\n                        : \"rows\"}\n                      .\n                    </AlertDialogDescription>\n                  </AlertDialogHeader>\n                </div>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction onClick={handleDeleteRows}>\n                    Delete\n                  </AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          )}\n          {/* Add user button */}\n          <Button className=\"ml-auto\" variant=\"outline\">\n            <PlusIcon\n              aria-hidden=\"true\"\n              className=\"-ms-1 opacity-60\"\n              size={16}\n            />\n            Add user\n          </Button>\n        </div>\n      </div>\n\n      {/* Table */}\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell className=\"last:py-0\" key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.state.pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.state.pagination.pageIndex *\n                table.state.pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.state.pagination.pageIndex *\n                    table.state.pagination.pageSize +\n                    table.state.pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Example of a more complex table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction RowActions({ row: _row }: { row: Row<typeof features, Item> }) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <div className=\"flex justify-end\">\n          <Button\n            aria-label=\"Edit item\"\n            className=\"shadow-none\"\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <EllipsisIcon aria-hidden=\"true\" size={16} />\n          </Button>\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Edit</span>\n            <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <span>Duplicate</span>\n            <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Archive</span>\n            <DropdownMenuShortcut>⌘A</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Move to project</DropdownMenuItem>\n                <DropdownMenuItem>Move to folder</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>Advanced options</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Share</DropdownMenuItem>\n          <DropdownMenuItem>Add to favorites</DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem className=\"text-destructive focus:text-destructive\">\n          <span>Delete</span>\n          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnFacetingFeature,\n  columnFilteringFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createFacetedUniqueValues,\n  createFilteredRowModel,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  type FilterFn,\n  flexRender,\n  type Row,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CircleAlertIcon,\n  CircleXIcon,\n  Columns3Icon,\n  EllipsisIcon,\n  FilterIcon,\n  ListFilterIcon,\n  PlusIcon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst features = tableFeatures({\n  columnFilteringFeature,\n  columnFacetingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  facetedUniqueValues: createFacetedUniqueValues(),\n  filteredRowModel: createFilteredRowModel(),\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\n// Custom filter function for multi-column searching\nconst multiColumnFilterFn: FilterFn<typeof features, Item> = (\n  row,\n  _columnId,\n  filterValue,\n) => {\n  const searchableRowContent =\n    `${row.original.name} ${row.original.email}`.toLowerCase();\n  const searchTerm = (filterValue ?? \"\").toLowerCase();\n  return searchableRowContent.includes(searchTerm);\n};\n\nconst statusFilterFn: FilterFn<typeof features, Item> = (\n  row,\n  columnId,\n  filterValue: string[],\n) => {\n  if (!filterValue?.length) return true;\n  const status = row.getValue(columnId) as string;\n  return filterValue.includes(status);\n};\n\nconst columns: ColumnDef<typeof features, Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableHiding: false,\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    enableHiding: false,\n    filterFn: multiColumnFilterFn,\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 220,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    filterFn: statusFilterFn,\n    header: \"Status\",\n    size: 100,\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n  {\n    cell: ({ row }) => <RowActions row={row} />,\n    enableHiding: false,\n    header: () => <span className=\"sr-only\">Actions</span>,\n    id: \"actions\",\n    size: 60,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const handleDeleteRows = () => {\n    const selectedRows = table.getSelectedRowModel().rows;\n    const updatedData = data.filter(\n      (item) => !selectedRows.some((row) => row.original.id === item.id),\n    );\n    setData(updatedData);\n    table.resetRowSelection();\n  };\n\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        pagination: {\n          pageIndex: 0,\n          pageSize: 10,\n        },\n        sorting: [\n          {\n            desc: false,\n            id: \"name\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      columnFilters: state.columnFilters,\n      columnVisibility: state.columnVisibility,\n      pagination: state.pagination,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  // Get unique status values\n  const uniqueStatusValues = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n\n    if (!statusColumn) return [];\n\n    const values = Array.from(statusColumn.getFacetedUniqueValues().keys());\n\n    return values.sort();\n  }, [table.getColumn]);\n\n  // Get counts for each status\n  const statusCounts = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n    if (!statusColumn) return new Map();\n    return statusColumn.getFacetedUniqueValues();\n  }, [table]);\n\n  const selectedStatuses = useMemo(() => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    return filterValue ?? [];\n  }, [table]);\n\n  const handleStatusChange = (checked: boolean, value: string) => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    const newFilterValue = filterValue ? [...filterValue] : [];\n\n    if (checked) {\n      newFilterValue.push(value);\n    } else {\n      const index = newFilterValue.indexOf(value);\n      if (index > -1) {\n        newFilterValue.splice(index, 1);\n      }\n    }\n\n    table\n      .getColumn(\"status\")\n      ?.setFilterValue(newFilterValue.length ? newFilterValue : undefined);\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div className=\"flex items-center gap-3\">\n          {/* Filter by name or email */}\n          <div className=\"relative\">\n            <Input\n              aria-label=\"Filter by name or email\"\n              className={cn(\n                \"peer min-w-60 ps-9\",\n                Boolean(table.getColumn(\"name\")?.getFilterValue()) && \"pe-9\",\n              )}\n              id={`${id}-input`}\n              onChange={(e) =>\n                table.getColumn(\"name\")?.setFilterValue(e.target.value)\n              }\n              placeholder=\"Filter by name or email...\"\n              ref={inputRef}\n              type=\"text\"\n              value={\n                (table.getColumn(\"name\")?.getFilterValue() ?? \"\") as string\n              }\n            />\n            <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n              <ListFilterIcon aria-hidden=\"true\" size={16} />\n            </div>\n            {Boolean(table.getColumn(\"name\")?.getFilterValue()) && (\n              <button\n                aria-label=\"Clear filter\"\n                className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n                onClick={() => {\n                  table.getColumn(\"name\")?.setFilterValue(\"\");\n                  if (inputRef.current) {\n                    inputRef.current.focus();\n                  }\n                }}\n                type=\"button\"\n              >\n                <CircleXIcon aria-hidden=\"true\" size={16} />\n              </button>\n            )}\n          </div>\n          {/* Filter by status */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button variant=\"outline\">\n                <FilterIcon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                Status\n                {selectedStatuses.length > 0 && (\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {selectedStatuses.length}\n                  </span>\n                )}\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-auto min-w-36 p-3\">\n              <div className=\"space-y-3\">\n                <div className=\"font-medium text-muted-foreground text-xs\">\n                  Filters\n                </div>\n                <div className=\"space-y-3\">\n                  {uniqueStatusValues.map((value, i) => (\n                    <div className=\"flex items-center gap-2\" key={value}>\n                      <Checkbox\n                        checked={selectedStatuses.includes(value)}\n                        id={`${id}-${i}`}\n                        onCheckedChange={(checked: boolean) =>\n                          handleStatusChange(checked, value)\n                        }\n                      />\n                      <Label\n                        className=\"flex grow justify-between gap-2 font-normal\"\n                        htmlFor={`${id}-${i}`}\n                      >\n                        {value}{\" \"}\n                        <span className=\"ms-2 text-muted-foreground text-xs\">\n                          {statusCounts.get(value)}\n                        </span>\n                      </Label>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </PopoverContent>\n          </Popover>\n          {/* Toggle columns visibility */}\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\">\n                <Columns3Icon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                View\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n              {table\n                .getAllColumns()\n                .filter((column) => column.getCanHide())\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      checked={column.getIsVisible()}\n                      className=\"capitalize\"\n                      key={column.id}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                      onSelect={(event) => event.preventDefault()}\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  );\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          {/* Delete button */}\n          {table.getSelectedRowModel().rows.length > 0 && (\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button className=\"ml-auto\" variant=\"outline\">\n                  <TrashIcon\n                    aria-hidden=\"true\"\n                    className=\"-ms-1 opacity-60\"\n                    size={16}\n                  />\n                  Delete\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {table.getSelectedRowModel().rows.length}\n                  </span>\n                </Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <div className=\"flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4\">\n                  <div\n                    aria-hidden=\"true\"\n                    className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\n                  >\n                    <CircleAlertIcon className=\"opacity-80\" size={16} />\n                  </div>\n                  <AlertDialogHeader>\n                    <AlertDialogTitle>\n                      Are you absolutely sure?\n                    </AlertDialogTitle>\n                    <AlertDialogDescription>\n                      This action cannot be undone. This will permanently delete{\" \"}\n                      {table.getSelectedRowModel().rows.length} selected{\" \"}\n                      {table.getSelectedRowModel().rows.length === 1\n                        ? \"row\"\n                        : \"rows\"}\n                      .\n                    </AlertDialogDescription>\n                  </AlertDialogHeader>\n                </div>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction onClick={handleDeleteRows}>\n                    Delete\n                  </AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          )}\n          {/* Add user button */}\n          <Button className=\"ml-auto\" variant=\"outline\">\n            <PlusIcon\n              aria-hidden=\"true\"\n              className=\"-ms-1 opacity-60\"\n              size={16}\n            />\n            Add user\n          </Button>\n        </div>\n      </div>\n\n      {/* Table */}\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell className=\"last:py-0\" key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.state.pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.state.pagination.pageIndex *\n                table.state.pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.state.pagination.pageIndex *\n                    table.state.pagination.pageSize +\n                    table.state.pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Example of a more complex table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction RowActions({ row: _row }: { row: Row<typeof features, Item> }) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <div className=\"flex justify-end\">\n          <Button\n            aria-label=\"Edit item\"\n            className=\"shadow-none\"\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <EllipsisIcon aria-hidden=\"true\" size={16} />\n          </Button>\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Edit</span>\n            <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <span>Duplicate</span>\n            <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Archive</span>\n            <DropdownMenuShortcut>⌘A</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Move to project</DropdownMenuItem>\n                <DropdownMenuItem>Move to folder</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>Advanced options</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Share</DropdownMenuItem>\n          <DropdownMenuItem>Add to favorites</DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem className=\"text-destructive focus:text-destructive\">\n          <span>Delete</span>\n          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/origin/registry/default/components/comp-477.tsx b/apps/origin/registry/default/components/comp-477.tsx
index b0670a79d..0ac0e9865 100644
--- a/apps/origin/registry/default/components/comp-477.tsx
+++ b/apps/origin/registry/default/components/comp-477.tsx
@@ -121,11 +121,14 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useTable({
-    columns,
-    data,
-    features,
-  });
+  const table = useTable(
+    {
+      columns,
+      data,
+      features,
+    },
+    (state) => ({ rowSelection: state.rowSelection }),
+  );
 
   return (
     <div>
diff --git a/apps/origin/registry/default/components/comp-478.tsx b/apps/origin/registry/default/components/comp-478.tsx
index 4f474f79b..cb43b7192 100644
--- a/apps/origin/registry/default/components/comp-478.tsx
+++ b/apps/origin/registry/default/components/comp-478.tsx
@@ -3,7 +3,6 @@
 import {
   type Column,
   type ColumnDef,
-  type ColumnFiltersState,
   columnFacetingFeature,
   columnFilteringFeature,
   columnVisibilityFeature,
@@ -18,7 +17,6 @@ import {
   metaHelper,
   rowSelectionFeature,
   rowSortingFeature,
-  type SortingState,
   sortFn_alphanumeric,
   sortFn_text,
   tableFeatures,
@@ -30,7 +28,7 @@ import {
   ExternalLinkIcon,
   SearchIcon,
 } from "lucide-react";
-import { useId, useMemo, useState } from "react";
+import { useId, useMemo } from "react";
 import { cn } from "@/registry/default/lib/utils";
 import { Checkbox } from "@/registry/default/ui/checkbox";
 import { Input } from "@/registry/default/ui/input";
@@ -278,26 +276,27 @@ const items: Item[] = [
 ];
 
 export default function Component() {
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [sorting, setSorting] = useState<SortingState>([
+  const table = useTable(
     {
-      desc: false,
-      id: "traffic",
+      columns,
+      data: items,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        sorting: [
+          {
+            desc: false,
+            id: "traffic",
+          },
+        ],
+      },
     },
-  ]);
-
-  const table = useTable({
-    columns,
-    data: items,
-    enableSortingRemoval: false,
-    features,
-    onColumnFiltersChange: setColumnFilters,
-    onSortingChange: setSorting,
-    state: {
-      columnFilters,
-      sorting,
-    },
-  });
+    (state) => ({
+      columnFilters: state.columnFilters,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   const keywordColumn = table.getColumn("keyword");
   const intentsColumn = table.getColumn("intents");
diff --git a/apps/origin/registry/default/components/comp-479.tsx b/apps/origin/registry/default/components/comp-479.tsx
index 28eed82c4..4e06625ca 100644
--- a/apps/origin/registry/default/components/comp-479.tsx
+++ b/apps/origin/registry/default/components/comp-479.tsx
@@ -7,9 +7,7 @@ import {
   columnVisibilityFeature,
   createSortedRowModel,
   flexRender,
-  rowSelectionFeature,
   rowSortingFeature,
-  type SortingState,
   sortFn_alphanumeric,
   sortFn_text,
   tableFeatures,
@@ -46,7 +44,6 @@ const features = tableFeatures({
   columnSizingFeature,
   columnResizingFeature,
   columnVisibilityFeature,
-  rowSelectionFeature,
   rowSortingFeature,
   sortedRowModel: createSortedRowModel(),
   sortFns: {
@@ -119,12 +116,6 @@ const columns: ColumnDef<typeof features, Item>[] = [
 
 export default function Component() {
   const [data, setData] = useState<Item[]>([]);
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      desc: false,
-      id: "name",
-    },
-  ]);
 
   useEffect(() => {
     async function fetchPosts() {
@@ -137,17 +128,27 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useTable({
-    columnResizeMode: "onChange",
-    columns,
-    data,
-    enableSortingRemoval: false,
-    features,
-    onSortingChange: setSorting,
-    state: {
-      sorting,
+  const table = useTable(
+    {
+      columnResizeMode: "onChange",
+      columns,
+      data,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        sorting: [
+          {
+            desc: false,
+            id: "name",
+          },
+        ],
+      },
     },
-  });
+    (state) => ({
+      columnSizing: state.columnSizing,
+      sorting: state.sorting,
+    }),
+  );
 
   return (
     <div>
@@ -242,10 +243,7 @@ export default function Component() {
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
-              <TableRow
-                data-state={row.getIsSelected() && "selected"}
-                key={row.id}
-              >
+              <TableRow key={row.id}>
                 {row.getVisibleCells().map((cell) => (
                   <TableCell className="truncate" key={cell.id}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/apps/origin/registry/default/components/comp-480.tsx b/apps/origin/registry/default/components/comp-480.tsx
index 7f89ef0a8..9ec43d1ae 100644
--- a/apps/origin/registry/default/components/comp-480.tsx
+++ b/apps/origin/registry/default/components/comp-480.tsx
@@ -8,13 +8,7 @@ import {
   columnResizingFeature,
   columnSizingFeature,
   columnVisibilityFeature,
-  createSortedRowModel,
   flexRender,
-  rowSelectionFeature,
-  rowSortingFeature,
-  type SortingState,
-  sortFn_alphanumeric,
-  sortFn_text,
   tableFeatures,
   useTable,
 } from "@tanstack/react-table";
@@ -62,13 +56,6 @@ const features = tableFeatures({
   columnSizingFeature,
   columnResizingFeature,
   columnVisibilityFeature,
-  rowSelectionFeature,
-  rowSortingFeature,
-  sortedRowModel: createSortedRowModel(),
-  sortFns: {
-    alphanumeric: sortFn_alphanumeric,
-    text: sortFn_text,
-  },
 });
 
 // Helper function to compute pinning styles for columns
@@ -149,7 +136,6 @@ const columns: ColumnDef<typeof features, Item>[] = [
 
 export default function Component() {
   const [data, setData] = useState<Item[]>([]);
-  const [sorting, setSorting] = useState<SortingState>([]);
 
   useEffect(() => {
     async function fetchPosts() {
@@ -162,17 +148,18 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useTable({
-    columnResizeMode: "onChange",
-    columns,
-    data,
-    enableSortingRemoval: false,
-    features,
-    onSortingChange: setSorting,
-    state: {
-      sorting,
+  const table = useTable(
+    {
+      columnResizeMode: "onChange",
+      columns,
+      data,
+      features,
     },
-  });
+    (state) => ({
+      columnPinning: state.columnPinning,
+      columnSizing: state.columnSizing,
+    }),
+  );
 
   return (
     <div>
@@ -297,10 +284,7 @@ export default function Component() {
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
-              <TableRow
-                data-state={row.getIsSelected() && "selected"}
-                key={row.id}
-              >
+              <TableRow key={row.id}>
                 {row.getVisibleCells().map((cell) => {
                   const { column } = cell;
                   const isPinned = column.getIsPinned();
diff --git a/apps/origin/registry/default/components/comp-481.tsx b/apps/origin/registry/default/components/comp-481.tsx
index c24ced7cb..f7511c8cd 100644
--- a/apps/origin/registry/default/components/comp-481.tsx
+++ b/apps/origin/registry/default/components/comp-481.tsx
@@ -27,9 +27,7 @@ import {
   createSortedRowModel,
   flexRender,
   type Header,
-  rowSelectionFeature,
   rowSortingFeature,
-  type SortingState,
   sortFn_alphanumeric,
   sortFn_text,
   tableFeatures,
@@ -61,7 +59,6 @@ const features = tableFeatures({
   columnOrderingFeature,
   columnSizingFeature,
   columnVisibilityFeature,
-  rowSelectionFeature,
   rowSortingFeature,
   sortedRowModel: createSortedRowModel(),
   sortFns: {
@@ -117,12 +114,10 @@ const columns: ColumnDef<typeof features, Item>[] = [
   },
 ];
 
+const initialColumnOrder = columns.map((column) => column.id as string);
+
 export default function Component() {
   const [data, setData] = useState<Item[]>([]);
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [columnOrder, setColumnOrder] = useState<string[]>(
-    columns.map((column) => column.id as string),
-  );
 
   useEffect(() => {
     async function fetchPosts() {
@@ -135,24 +130,27 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useTable({
-    columns,
-    data,
-    enableSortingRemoval: false,
-    features,
-    onColumnOrderChange: setColumnOrder,
-    onSortingChange: setSorting,
-    state: {
-      columnOrder,
-      sorting,
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        columnOrder: initialColumnOrder,
+      },
     },
-  });
+    (state) => ({
+      columnOrder: state.columnOrder,
+      sorting: state.sorting,
+    }),
+  );
 
   // reorder columns after drag & drop
   function handleDragEnd(event: DragEndEvent) {
     const { active, over } = event;
     if (active && over && active.id !== over.id) {
-      setColumnOrder((columnOrder) => {
+      table.setColumnOrder((columnOrder) => {
         const oldIndex = columnOrder.indexOf(active.id as string);
         const newIndex = columnOrder.indexOf(over.id as string);
         return arrayMove(columnOrder, oldIndex, newIndex); //this is just a splice util
@@ -179,7 +177,7 @@ export default function Component() {
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow className="bg-muted/50" key={headerGroup.id}>
               <SortableContext
-                items={columnOrder}
+                items={table.state.columnOrder}
                 strategy={horizontalListSortingStrategy}
               >
                 {headerGroup.headers.map((header) => (
@@ -192,13 +190,10 @@ export default function Component() {
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
-              <TableRow
-                data-state={row.getIsSelected() && "selected"}
-                key={row.id}
-              >
+              <TableRow key={row.id}>
                 {row.getVisibleCells().map((cell) => (
                   <SortableContext
-                    items={columnOrder}
+                    items={table.state.columnOrder}
                     key={cell.id}
                     strategy={horizontalListSortingStrategy}
                   >
diff --git a/apps/origin/registry/default/components/comp-482.tsx b/apps/origin/registry/default/components/comp-482.tsx
index 2685438de..d12e7f000 100644
--- a/apps/origin/registry/default/components/comp-482.tsx
+++ b/apps/origin/registry/default/components/comp-482.tsx
@@ -161,12 +161,18 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useTable({
-    columns,
-    data,
-    features,
-    getRowCanExpand: (row) => Boolean(row.original.note),
-  });
+  const table = useTable(
+    {
+      columns,
+      data,
+      features,
+      getRowCanExpand: (row) => Boolean(row.original.note),
+    },
+    (state) => ({
+      expanded: state.expanded,
+      rowSelection: state.rowSelection,
+    }),
+  );
 
   return (
     <div>
diff --git a/apps/origin/registry/default/components/comp-483.tsx b/apps/origin/registry/default/components/comp-483.tsx
index ca175d228..20ce40b15 100644
--- a/apps/origin/registry/default/components/comp-483.tsx
+++ b/apps/origin/registry/default/components/comp-483.tsx
@@ -7,11 +7,9 @@ import {
   createPaginatedRowModel,
   createSortedRowModel,
   flexRender,
-  type PaginationState,
   rowPaginationFeature,
   rowSelectionFeature,
   rowSortingFeature,
-  type SortingState,
   sortFn_alphanumeric,
   sortFn_text,
   tableFeatures,
@@ -155,18 +153,6 @@ const columns: ColumnDef<typeof features, Item>[] = [
 
 export default function Component() {
   const id = useId();
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 5,
-  });
-
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      desc: false,
-      id: "name",
-    },
-  ]);
-
   const [data, setData] = useState<Item[]>([]);
   useEffect(() => {
     async function fetchPosts() {
@@ -179,18 +165,31 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useTable({
-    columns,
-    data,
-    enableSortingRemoval: false,
-    features,
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      pagination,
-      sorting,
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        pagination: {
+          pageIndex: 0,
+          pageSize: 5,
+        },
+        sorting: [
+          {
+            desc: false,
+            id: "name",
+          },
+        ],
+      },
     },
-  });
+    (state) => ({
+      pagination: state.pagination,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   return (
     <div className="space-y-4">
diff --git a/apps/origin/registry/default/components/comp-484.tsx b/apps/origin/registry/default/components/comp-484.tsx
index a4abee11d..657f4d764 100644
--- a/apps/origin/registry/default/components/comp-484.tsx
+++ b/apps/origin/registry/default/components/comp-484.tsx
@@ -7,11 +7,9 @@ import {
   createPaginatedRowModel,
   createSortedRowModel,
   flexRender,
-  type PaginationState,
   rowPaginationFeature,
   rowSelectionFeature,
   rowSortingFeature,
-  type SortingState,
   sortFn_alphanumeric,
   sortFn_text,
   tableFeatures,
@@ -155,18 +153,6 @@ const columns: ColumnDef<typeof features, Item>[] = [
 export default function Component() {
   const pageSize = 5;
 
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: pageSize,
-  });
-
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      desc: false,
-      id: "name",
-    },
-  ]);
-
   const [data, setData] = useState<Item[]>([]);
   useEffect(() => {
     async function fetchPosts() {
@@ -179,18 +165,31 @@ export default function Component() {
     fetchPosts();
   }, []);
 
-  const table = useTable({
-    columns,
-    data,
-    enableSortingRemoval: false,
-    features,
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      pagination,
-      sorting,
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        pagination: {
+          pageIndex: 0,
+          pageSize,
+        },
+        sorting: [
+          {
+            desc: false,
+            id: "name",
+          },
+        ],
+      },
     },
-  });
+    (state) => ({
+      pagination: state.pagination,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({
     currentPage: table.state.pagination.pageIndex + 1,
diff --git a/apps/origin/registry/default/components/comp-485.tsx b/apps/origin/registry/default/components/comp-485.tsx
index 8f9f4e4e0..efeb879d6 100644
--- a/apps/origin/registry/default/components/comp-485.tsx
+++ b/apps/origin/registry/default/components/comp-485.tsx
@@ -2,8 +2,6 @@
 
 import {
   type ColumnDef,
-  type ColumnFiltersState,
-  type ColumnVisibilityState,
   columnFacetingFeature,
   columnFilteringFeature,
   columnSizingFeature,
@@ -14,12 +12,10 @@ import {
   createSortedRowModel,
   type FilterFn,
   flexRender,
-  type PaginationState,
   type Row,
   rowPaginationFeature,
   rowSelectionFeature,
   rowSortingFeature,
-  type SortingState,
   sortFn_alphanumeric,
   sortFn_text,
   tableFeatures,
@@ -244,22 +240,8 @@ const columns: ColumnDef<typeof features, Item>[] = [
 
 export default function Component() {
   const id = useId();
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [columnVisibility, setColumnVisibility] =
-    useState<ColumnVisibilityState>({});
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const [sorting, setSorting] = useState<SortingState>([
-    {
-      desc: false,
-      id: "name",
-    },
-  ]);
-
   const [data, setData] = useState<Item[]>([]);
   useEffect(() => {
     async function fetchPosts() {
@@ -281,22 +263,33 @@ export default function Component() {
     table.resetRowSelection();
   };
 
-  const table = useTable({
-    columns,
-    data,
-    enableSortingRemoval: false,
-    features,
-    onColumnFiltersChange: setColumnFilters,
-    onColumnVisibilityChange: setColumnVisibility,
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      columnFilters,
-      columnVisibility,
-      pagination,
-      sorting,
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        pagination: {
+          pageIndex: 0,
+          pageSize: 10,
+        },
+        sorting: [
+          {
+            desc: false,
+            id: "name",
+          },
+        ],
+      },
     },
-  });
+    (state) => ({
+      columnFilters: state.columnFilters,
+      columnVisibility: state.columnVisibility,
+      pagination: state.pagination,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   // Get unique status values
   const uniqueStatusValues = useMemo(() => {
diff --git a/apps/ui/public/r/p-table-3.json b/apps/ui/public/r/p-table-3.json
index 248ed0b2b..d81e78c69 100644
--- a/apps/ui/public/r/p-table-3.json
+++ b/apps/ui/public/r/p-table-3.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-table-3.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnVisibilityFeature,\n  flexRender,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport type React from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame } from \"@/registry/default/ui/frame\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Project = {\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n  budget: number;\n};\n\nconst data: Project[] = [\n  {\n    budget: 12500,\n    id: \"1\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"2\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"3\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"4\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"5\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"6\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst getStatusColor = (status: Project[\"status\"]) => {\n  switch (status) {\n    case \"Paid\":\n      return \"bg-emerald-500\";\n    case \"Unpaid\":\n      return \"bg-muted-foreground/64\";\n    case \"Pending\":\n      return \"bg-amber-500\";\n    case \"Failed\":\n      return \"bg-red-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowSelectionFeature,\n});\n\nconst getColumns = (): ColumnDef<typeof features, Project>[] => [\n  {\n    cell: ({ row }) => {\n      const toggleHandler = row.getToggleSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select row\"\n          checked={row.getIsSelected()}\n          disabled={!row.getCanSelect()}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select all\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    id: \"select\",\n  },\n  {\n    accessorKey: \"project\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"project\")}</div>\n    ),\n    header: \"Project\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Project[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"team\",\n    header: \"Team\",\n  },\n  {\n    accessorKey: \"budget\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"budget\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        maximumFractionDigits: 0,\n        minimumFractionDigits: 0,\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Budget</div>,\n  },\n];\n\nexport default function Particle() {\n  const [tableData] = useState<Project[]>(data);\n  const [rowSelection, setRowSelection] = useState({});\n\n  const columns = useMemo(() => getColumns(), []);\n\n  const table = useTable({\n    columns,\n    data: tableData,\n    enableRowSelection: true,\n    features,\n    onRowSelectionChange: setRowSelection,\n    state: {\n      rowSelection,\n    },\n  });\n\n  const totalBudget = tableData.reduce(\n    (sum, project) => sum + project.budget,\n    0,\n  );\n  const formattedTotal = new Intl.NumberFormat(\"en-US\", {\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0,\n    style: \"currency\",\n  }).format(totalBudget);\n\n  return (\n    <Frame className=\"w-full\">\n      <Table variant=\"card\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={4}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">{formattedTotal}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Frame>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnVisibilityFeature,\n  flexRender,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame } from \"@/registry/default/ui/frame\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Project = {\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n  budget: number;\n};\n\nconst data: Project[] = [\n  {\n    budget: 12500,\n    id: \"1\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"2\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"3\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"4\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"5\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"6\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst getStatusColor = (status: Project[\"status\"]) => {\n  switch (status) {\n    case \"Paid\":\n      return \"bg-emerald-500\";\n    case \"Unpaid\":\n      return \"bg-muted-foreground/64\";\n    case \"Pending\":\n      return \"bg-amber-500\";\n    case \"Failed\":\n      return \"bg-red-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowSelectionFeature,\n});\n\nconst getColumns = (): ColumnDef<typeof features, Project>[] => [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        disabled={!row.getCanSelect()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n  },\n  {\n    accessorKey: \"project\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"project\")}</div>\n    ),\n    header: \"Project\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Project[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"team\",\n    header: \"Team\",\n  },\n  {\n    accessorKey: \"budget\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"budget\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        maximumFractionDigits: 0,\n        minimumFractionDigits: 0,\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Budget</div>,\n  },\n];\n\nconst columns = getColumns();\n\nexport default function Particle() {\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableRowSelection: true,\n      features,\n    },\n    (state) => ({ rowSelection: state.rowSelection }),\n  );\n\n  const totalBudget = data.reduce((sum, project) => sum + project.budget, 0);\n  const formattedTotal = new Intl.NumberFormat(\"en-US\", {\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0,\n    style: \"currency\",\n  }).format(totalBudget);\n\n  return (\n    <Frame className=\"w-full\">\n      <Table variant=\"card\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={4}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">{formattedTotal}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Frame>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-table-4.json b/apps/ui/public/r/p-table-4.json
index 3909b5a11..4d793a6c3 100644
--- a/apps/ui/public/r/p-table-4.json
+++ b/apps/ui/public/r/p-table-4.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-table-4.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  flexRender,\n  type PaginationState,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  type SortingState,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame, FrameFooter } from \"@/registry/default/ui/frame\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Flight = {\n  id: string;\n  flightCode: string;\n  destination: string;\n  departureTime: string;\n  arrivalTime: string;\n  terminal: string;\n  duration: string;\n  status: \"On Time\" | \"Delayed\" | \"Cancelled\" | \"Boarding\";\n  gate: string;\n};\n\nconst getStatusColor = (status: Flight[\"status\"]) => {\n  switch (status) {\n    case \"On Time\":\n      return \"bg-emerald-500\";\n    case \"Delayed\":\n      return \"bg-amber-500\";\n    case \"Cancelled\":\n      return \"bg-red-500\";\n    case \"Boarding\":\n      return \"bg-blue-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Flight>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all rows\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"flightCode\",\n    cell: ({ row }) => (\n      <div className=\"font-medium font-mono text-muted-foreground\">\n        {row.getValue(\"flightCode\")}\n      </div>\n    ),\n    header: \"Flight\",\n    size: 80,\n  },\n  {\n    accessorKey: \"departureTime\",\n    cell: ({ row }) => {\n      const isCancelled = row.original.status === \"Cancelled\";\n      const isDelayed = row.original.status === \"Delayed\";\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-1.5 font-normal tabular-nums\",\n            isCancelled && \"text-muted-foreground line-through opacity-50\",\n          )}\n        >\n          <div className={isDelayed ? \"text-warning-foreground\" : undefined}>\n            {row.original.departureTime}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div\n            className={cn(\n              \"text-muted-foreground\",\n              isCancelled && \"line-through\",\n            )}\n          >\n            {row.original.duration}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div>{row.original.arrivalTime}</div>\n        </div>\n      );\n    },\n    header: \"Time\",\n    size: 220,\n  },\n  {\n    accessorKey: \"destination\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"destination\")}</div>\n    ),\n    header: \"Destination\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Flight[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-1.5 rounded-full\", getStatusColor(status))}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"terminal\",\n    cell: ({ row }) => (\n      <Badge className=\"font-normal tabular-nums\" size=\"lg\" variant=\"outline\">\n        <PlaneTakeoffIcon />\n        <span>{row.getValue(\"terminal\")}</span>\n      </Badge>\n    ),\n    header: \"Terminal\",\n    size: 90,\n  },\n  {\n    accessorKey: \"gate\",\n    header: \"Gate\",\n    size: 80,\n  },\n];\n\nexport default function Particle() {\n  const pageSize = 10;\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"departureTime\",\n    },\n  ]);\n\n  const table = useTable({\n    columns,\n    data: flights,\n    enableSortingRemoval: false,\n    features,\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  return (\n    <Frame className=\"w-full\">\n      <Table variant=\"card\" className=\"table-fixed\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const columnSize = header.column.getSize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    style={\n                      columnSize ? { width: `${columnSize}px` } : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className=\"flex h-full cursor-pointer select-none items-center justify-between gap-2\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        role=\"button\"\n                        tabIndex={0}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <FrameFooter className=\"p-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          {/* Results range selector */}\n          <div className=\"flex items-center gap-2 whitespace-nowrap\">\n            <p className=\"text-muted-foreground text-sm\">Viewing</p>\n            <Select\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\n                const start = i * table.state.pagination.pageSize + 1;\n                const end = Math.min(\n                  (i + 1) * table.state.pagination.pageSize,\n                  table.getRowCount(),\n                );\n                const pageNum = i + 1;\n                return { label: `${start}-${end}`, value: pageNum };\n              })}\n              onValueChange={(value) => {\n                table.setPageIndex((value as number) - 1);\n              }}\n              value={table.state.pagination.pageIndex + 1}\n            >\n              <SelectTrigger\n                aria-label=\"Select result range\"\n                className=\"w-fit min-w-none\"\n                size=\"sm\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\n                  const start = i * table.state.pagination.pageSize + 1;\n                  const end = Math.min(\n                    (i + 1) * table.state.pagination.pageSize,\n                    table.getRowCount(),\n                  );\n                  const pageNum = i + 1;\n                  return (\n                    <SelectItem key={pageNum} value={pageNum}>\n                      {`${start}-${end}`}\n                    </SelectItem>\n                  );\n                })}\n              </SelectPopup>\n            </Select>\n            <p className=\"text-muted-foreground text-sm\">\n              of{\" \"}\n              <strong className=\"font-medium text-foreground\">\n                {table.getRowCount()}\n              </strong>{\" \"}\n              results\n            </p>\n          </div>\n\n          {/* Pagination */}\n          <Pagination className=\"justify-end\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanPreviousPage()}\n                      onClick={() => table.previousPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n              <PaginationItem>\n                <PaginationNext\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanNextPage()}\n                      onClick={() => table.nextPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </FrameFooter>\n    </Frame>\n  );\n}\n\nconst flights: Flight[] = [\n  {\n    arrivalTime: \"11:45\",\n    departureTime: \"08:30\",\n    destination: \"Los Angeles\",\n    duration: \"5h 15m\",\n    flightCode: \"AA1234\",\n    gate: \"A12\",\n    id: \"1\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"17:10\",\n    departureTime: \"14:20\",\n    destination: \"San Francisco\",\n    duration: \"4h 50m\",\n    flightCode: \"DL5678\",\n    gate: \"B24\",\n    id: \"2\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:30\",\n    departureTime: \"10:15\",\n    destination: \"Miami\",\n    duration: \"3h 15m\",\n    flightCode: \"UA9012\",\n    gate: \"C8\",\n    id: \"3\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"18:20\",\n    departureTime: \"16:45\",\n    destination: \"Seattle\",\n    duration: \"2h 35m\",\n    flightCode: \"SW3456\",\n    gate: \"D15\",\n    id: \"4\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:30\",\n    departureTime: \"09:00\",\n    destination: \"Salt Lake City\",\n    duration: \"5h 30m\",\n    flightCode: \"JB7890\",\n    gate: \"E3\",\n    id: \"5\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:30\",\n    destination: \"Phoenix\",\n    duration: \"2h 45m\",\n    flightCode: \"AS2345\",\n    gate: \"F7\",\n    id: \"6\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:30\",\n    departureTime: \"13:00\",\n    destination: \"Las Vegas\",\n    duration: \"5h 30m\",\n    flightCode: \"HA6789\",\n    gate: \"G12\",\n    id: \"7\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"09:00\",\n    departureTime: \"07:15\",\n    destination: \"Dallas\",\n    duration: \"1h 45m\",\n    flightCode: \"FX0123\",\n    gate: \"H5\",\n    id: \"8\",\n    status: \"Boarding\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"08:30\",\n    departureTime: \"06:00\",\n    destination: \"Denver\",\n    duration: \"2h 30m\",\n    flightCode: \"WN4567\",\n    gate: \"I9\",\n    id: \"9\",\n    status: \"Boarding\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:45\",\n    destination: \"Portland\",\n    duration: \"2h 35m\",\n    flightCode: \"B61234\",\n    gate: \"J14\",\n    id: \"10\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"18:45\",\n    departureTime: \"15:30\",\n    destination: \"Atlanta\",\n    duration: \"3h 15m\",\n    flightCode: \"NK8901\",\n    gate: \"K6\",\n    id: \"11\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:00\",\n    departureTime: \"09:45\",\n    destination: \"Chicago\",\n    duration: \"2h 15m\",\n    flightCode: \"F92345\",\n    gate: \"L11\",\n    id: \"12\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:00\",\n    destination: \"Boston\",\n    duration: \"3h 15m\",\n    flightCode: \"SY6789\",\n    gate: \"M3\",\n    id: \"13\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:45\",\n    departureTime: \"13:30\",\n    destination: \"New York\",\n    duration: \"3h 15m\",\n    flightCode: \"G40123\",\n    gate: \"N8\",\n    id: \"14\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"11:20\",\n    departureTime: \"08:00\",\n    destination: \"Washington\",\n    duration: \"3h 20m\",\n    flightCode: \"YX5678\",\n    gate: \"O12\",\n    id: \"15\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:50\",\n    departureTime: \"10:30\",\n    destination: \"Orlando\",\n    duration: \"3h 20m\",\n    flightCode: \"4U9012\",\n    gate: \"P5\",\n    id: \"16\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:30\",\n    departureTime: \"14:00\",\n    destination: \"Houston\",\n    duration: \"2h 30m\",\n    flightCode: \"QF3456\",\n    gate: \"Q9\",\n    id: \"17\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"10:00\",\n    departureTime: \"07:30\",\n    destination: \"Minneapolis\",\n    duration: \"2h 30m\",\n    flightCode: \"LH7890\",\n    gate: \"R7\",\n    id: \"18\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"19:30\",\n    departureTime: \"16:15\",\n    destination: \"Detroit\",\n    duration: \"3h 15m\",\n    flightCode: \"KL2345\",\n    gate: \"S4\",\n    id: \"19\",\n    status: \"Cancelled\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"15:10\",\n    departureTime: \"12:00\",\n    destination: \"Philadelphia\",\n    duration: \"3h 10m\",\n    flightCode: \"AF6789\",\n    gate: \"T16\",\n    id: \"20\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:25\",\n    departureTime: \"09:15\",\n    destination: \"Charlotte\",\n    duration: \"3h 10m\",\n    flightCode: \"BA0123\",\n    gate: \"U10\",\n    id: \"21\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"18:00\",\n    departureTime: \"15:45\",\n    destination: \"Nashville\",\n    duration: \"2h 15m\",\n    flightCode: \"IB4567\",\n    gate: \"V8\",\n    id: \"22\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"14:00\",\n    departureTime: \"11:45\",\n    destination: \"Austin\",\n    duration: \"2h 15m\",\n    flightCode: \"EK8901\",\n    gate: \"W13\",\n    id: \"23\",\n    status: \"Cancelled\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"16:40\",\n    departureTime: \"13:15\",\n    destination: \"Tampa\",\n    duration: \"3h 25m\",\n    flightCode: \"QR2345\",\n    gate: \"X6\",\n    id: \"24\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"11:30\",\n    departureTime: \"08:45\",\n    destination: \"Raleigh\",\n    duration: \"2h 45m\",\n    flightCode: \"TK6789\",\n    gate: \"Y11\",\n    id: \"25\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:45\",\n    departureTime: \"10:00\",\n    destination: \"Indianapolis\",\n    duration: \"2h 45m\",\n    flightCode: \"VS3456\",\n    gate: \"Z4\",\n    id: \"26\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"20:00\",\n    departureTime: \"17:30\",\n    destination: \"Kansas City\",\n    duration: \"2h 30m\",\n    flightCode: \"LX7890\",\n    gate: \"A8\",\n    id: \"27\",\n    status: \"Delayed\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:30\",\n    destination: \"Columbus\",\n    duration: \"2h 50m\",\n    flightCode: \"OS1234\",\n    gate: \"B19\",\n    id: \"28\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:15\",\n    departureTime: \"18:00\",\n    destination: \"Milwaukee\",\n    duration: \"2h 15m\",\n    flightCode: \"SN5678\",\n    gate: \"C22\",\n    id: \"29\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"21:30\",\n    departureTime: \"19:15\",\n    destination: \"Memphis\",\n    duration: \"2h 15m\",\n    flightCode: \"TP9012\",\n    gate: \"D6\",\n    id: \"30\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n];\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  flexRender,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \"lucide-react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame, FrameFooter } from \"@/registry/default/ui/frame\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Flight = {\n  id: string;\n  flightCode: string;\n  destination: string;\n  departureTime: string;\n  arrivalTime: string;\n  terminal: string;\n  duration: string;\n  status: \"On Time\" | \"Delayed\" | \"Cancelled\" | \"Boarding\";\n  gate: string;\n};\n\nconst getStatusColor = (status: Flight[\"status\"]) => {\n  switch (status) {\n    case \"On Time\":\n      return \"bg-emerald-500\";\n    case \"Delayed\":\n      return \"bg-amber-500\";\n    case \"Cancelled\":\n      return \"bg-red-500\";\n    case \"Boarding\":\n      return \"bg-blue-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Flight>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all rows\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"flightCode\",\n    cell: ({ row }) => (\n      <div className=\"font-medium font-mono text-muted-foreground\">\n        {row.getValue(\"flightCode\")}\n      </div>\n    ),\n    header: \"Flight\",\n    size: 80,\n  },\n  {\n    accessorKey: \"departureTime\",\n    cell: ({ row }) => {\n      const isCancelled = row.original.status === \"Cancelled\";\n      const isDelayed = row.original.status === \"Delayed\";\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-1.5 font-normal tabular-nums\",\n            isCancelled && \"text-muted-foreground line-through opacity-50\",\n          )}\n        >\n          <div className={isDelayed ? \"text-warning-foreground\" : undefined}>\n            {row.original.departureTime}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div\n            className={cn(\n              \"text-muted-foreground\",\n              isCancelled && \"line-through\",\n            )}\n          >\n            {row.original.duration}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div>{row.original.arrivalTime}</div>\n        </div>\n      );\n    },\n    header: \"Time\",\n    size: 220,\n  },\n  {\n    accessorKey: \"destination\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"destination\")}</div>\n    ),\n    header: \"Destination\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Flight[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-1.5 rounded-full\", getStatusColor(status))}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"terminal\",\n    cell: ({ row }) => (\n      <Badge className=\"font-normal tabular-nums\" size=\"lg\" variant=\"outline\">\n        <PlaneTakeoffIcon />\n        <span>{row.getValue(\"terminal\")}</span>\n      </Badge>\n    ),\n    header: \"Terminal\",\n    size: 90,\n  },\n  {\n    accessorKey: \"gate\",\n    header: \"Gate\",\n    size: 80,\n  },\n];\n\nexport default function Particle() {\n  const pageSize = 10;\n\n  const table = useTable(\n    {\n      columns,\n      data: flights,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        pagination: {\n          pageIndex: 0,\n          pageSize,\n        },\n        sorting: [\n          {\n            desc: false,\n            id: \"departureTime\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      pagination: state.pagination,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  return (\n    <Frame className=\"w-full\">\n      <Table variant=\"card\" className=\"table-fixed\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const columnSize = header.column.getSize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    style={\n                      columnSize ? { width: `${columnSize}px` } : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className=\"flex h-full cursor-pointer select-none items-center justify-between gap-2\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        role=\"button\"\n                        tabIndex={0}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <FrameFooter className=\"p-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          {/* Results range selector */}\n          <div className=\"flex items-center gap-2 whitespace-nowrap\">\n            <p className=\"text-muted-foreground text-sm\">Viewing</p>\n            <Select\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\n                const start = i * table.state.pagination.pageSize + 1;\n                const end = Math.min(\n                  (i + 1) * table.state.pagination.pageSize,\n                  table.getRowCount(),\n                );\n                const pageNum = i + 1;\n                return { label: `${start}-${end}`, value: pageNum };\n              })}\n              onValueChange={(value) => {\n                table.setPageIndex((value as number) - 1);\n              }}\n              value={table.state.pagination.pageIndex + 1}\n            >\n              <SelectTrigger\n                aria-label=\"Select result range\"\n                className=\"w-fit min-w-none\"\n                size=\"sm\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\n                  const start = i * table.state.pagination.pageSize + 1;\n                  const end = Math.min(\n                    (i + 1) * table.state.pagination.pageSize,\n                    table.getRowCount(),\n                  );\n                  const pageNum = i + 1;\n                  return (\n                    <SelectItem key={pageNum} value={pageNum}>\n                      {`${start}-${end}`}\n                    </SelectItem>\n                  );\n                })}\n              </SelectPopup>\n            </Select>\n            <p className=\"text-muted-foreground text-sm\">\n              of{\" \"}\n              <strong className=\"font-medium text-foreground\">\n                {table.getRowCount()}\n              </strong>{\" \"}\n              results\n            </p>\n          </div>\n\n          {/* Pagination */}\n          <Pagination className=\"justify-end\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanPreviousPage()}\n                      onClick={() => table.previousPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n              <PaginationItem>\n                <PaginationNext\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanNextPage()}\n                      onClick={() => table.nextPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </FrameFooter>\n    </Frame>\n  );\n}\n\nconst flights: Flight[] = [\n  {\n    arrivalTime: \"11:45\",\n    departureTime: \"08:30\",\n    destination: \"Los Angeles\",\n    duration: \"5h 15m\",\n    flightCode: \"AA1234\",\n    gate: \"A12\",\n    id: \"1\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"17:10\",\n    departureTime: \"14:20\",\n    destination: \"San Francisco\",\n    duration: \"4h 50m\",\n    flightCode: \"DL5678\",\n    gate: \"B24\",\n    id: \"2\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:30\",\n    departureTime: \"10:15\",\n    destination: \"Miami\",\n    duration: \"3h 15m\",\n    flightCode: \"UA9012\",\n    gate: \"C8\",\n    id: \"3\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"18:20\",\n    departureTime: \"16:45\",\n    destination: \"Seattle\",\n    duration: \"2h 35m\",\n    flightCode: \"SW3456\",\n    gate: \"D15\",\n    id: \"4\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:30\",\n    departureTime: \"09:00\",\n    destination: \"Salt Lake City\",\n    duration: \"5h 30m\",\n    flightCode: \"JB7890\",\n    gate: \"E3\",\n    id: \"5\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:30\",\n    destination: \"Phoenix\",\n    duration: \"2h 45m\",\n    flightCode: \"AS2345\",\n    gate: \"F7\",\n    id: \"6\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:30\",\n    departureTime: \"13:00\",\n    destination: \"Las Vegas\",\n    duration: \"5h 30m\",\n    flightCode: \"HA6789\",\n    gate: \"G12\",\n    id: \"7\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"09:00\",\n    departureTime: \"07:15\",\n    destination: \"Dallas\",\n    duration: \"1h 45m\",\n    flightCode: \"FX0123\",\n    gate: \"H5\",\n    id: \"8\",\n    status: \"Boarding\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"08:30\",\n    departureTime: \"06:00\",\n    destination: \"Denver\",\n    duration: \"2h 30m\",\n    flightCode: \"WN4567\",\n    gate: \"I9\",\n    id: \"9\",\n    status: \"Boarding\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:45\",\n    destination: \"Portland\",\n    duration: \"2h 35m\",\n    flightCode: \"B61234\",\n    gate: \"J14\",\n    id: \"10\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"18:45\",\n    departureTime: \"15:30\",\n    destination: \"Atlanta\",\n    duration: \"3h 15m\",\n    flightCode: \"NK8901\",\n    gate: \"K6\",\n    id: \"11\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:00\",\n    departureTime: \"09:45\",\n    destination: \"Chicago\",\n    duration: \"2h 15m\",\n    flightCode: \"F92345\",\n    gate: \"L11\",\n    id: \"12\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:00\",\n    destination: \"Boston\",\n    duration: \"3h 15m\",\n    flightCode: \"SY6789\",\n    gate: \"M3\",\n    id: \"13\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:45\",\n    departureTime: \"13:30\",\n    destination: \"New York\",\n    duration: \"3h 15m\",\n    flightCode: \"G40123\",\n    gate: \"N8\",\n    id: \"14\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"11:20\",\n    departureTime: \"08:00\",\n    destination: \"Washington\",\n    duration: \"3h 20m\",\n    flightCode: \"YX5678\",\n    gate: \"O12\",\n    id: \"15\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:50\",\n    departureTime: \"10:30\",\n    destination: \"Orlando\",\n    duration: \"3h 20m\",\n    flightCode: \"4U9012\",\n    gate: \"P5\",\n    id: \"16\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:30\",\n    departureTime: \"14:00\",\n    destination: \"Houston\",\n    duration: \"2h 30m\",\n    flightCode: \"QF3456\",\n    gate: \"Q9\",\n    id: \"17\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"10:00\",\n    departureTime: \"07:30\",\n    destination: \"Minneapolis\",\n    duration: \"2h 30m\",\n    flightCode: \"LH7890\",\n    gate: \"R7\",\n    id: \"18\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"19:30\",\n    departureTime: \"16:15\",\n    destination: \"Detroit\",\n    duration: \"3h 15m\",\n    flightCode: \"KL2345\",\n    gate: \"S4\",\n    id: \"19\",\n    status: \"Cancelled\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"15:10\",\n    departureTime: \"12:00\",\n    destination: \"Philadelphia\",\n    duration: \"3h 10m\",\n    flightCode: \"AF6789\",\n    gate: \"T16\",\n    id: \"20\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:25\",\n    departureTime: \"09:15\",\n    destination: \"Charlotte\",\n    duration: \"3h 10m\",\n    flightCode: \"BA0123\",\n    gate: \"U10\",\n    id: \"21\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"18:00\",\n    departureTime: \"15:45\",\n    destination: \"Nashville\",\n    duration: \"2h 15m\",\n    flightCode: \"IB4567\",\n    gate: \"V8\",\n    id: \"22\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"14:00\",\n    departureTime: \"11:45\",\n    destination: \"Austin\",\n    duration: \"2h 15m\",\n    flightCode: \"EK8901\",\n    gate: \"W13\",\n    id: \"23\",\n    status: \"Cancelled\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"16:40\",\n    departureTime: \"13:15\",\n    destination: \"Tampa\",\n    duration: \"3h 25m\",\n    flightCode: \"QR2345\",\n    gate: \"X6\",\n    id: \"24\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"11:30\",\n    departureTime: \"08:45\",\n    destination: \"Raleigh\",\n    duration: \"2h 45m\",\n    flightCode: \"TK6789\",\n    gate: \"Y11\",\n    id: \"25\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:45\",\n    departureTime: \"10:00\",\n    destination: \"Indianapolis\",\n    duration: \"2h 45m\",\n    flightCode: \"VS3456\",\n    gate: \"Z4\",\n    id: \"26\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"20:00\",\n    departureTime: \"17:30\",\n    destination: \"Kansas City\",\n    duration: \"2h 30m\",\n    flightCode: \"LX7890\",\n    gate: \"A8\",\n    id: \"27\",\n    status: \"Delayed\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:30\",\n    destination: \"Columbus\",\n    duration: \"2h 50m\",\n    flightCode: \"OS1234\",\n    gate: \"B19\",\n    id: \"28\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:15\",\n    departureTime: \"18:00\",\n    destination: \"Milwaukee\",\n    duration: \"2h 15m\",\n    flightCode: \"SN5678\",\n    gate: \"C22\",\n    id: \"29\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"21:30\",\n    departureTime: \"19:15\",\n    destination: \"Memphis\",\n    duration: \"2h 15m\",\n    flightCode: \"TP9012\",\n    gate: \"D6\",\n    id: \"30\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n];\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-table-6.json b/apps/ui/public/r/p-table-6.json
index 106de9dd9..189e1e0fb 100644
--- a/apps/ui/public/r/p-table-6.json
+++ b/apps/ui/public/r/p-table-6.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-table-6.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnVisibilityFeature,\n  flexRender,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport type React from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { CardFrame } from \"@/registry/default/ui/card\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Project = {\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n  budget: number;\n};\n\nconst data: Project[] = [\n  {\n    budget: 12500,\n    id: \"1\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"2\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"3\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"4\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"5\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"6\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst getStatusColor = (status: Project[\"status\"]) => {\n  switch (status) {\n    case \"Paid\":\n      return \"bg-emerald-500\";\n    case \"Unpaid\":\n      return \"bg-muted-foreground/64\";\n    case \"Pending\":\n      return \"bg-amber-500\";\n    case \"Failed\":\n      return \"bg-red-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowSelectionFeature,\n});\n\nconst getColumns = (): ColumnDef<typeof features, Project>[] => [\n  {\n    cell: ({ row }) => {\n      const toggleHandler = row.getToggleSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select row\"\n          checked={row.getIsSelected()}\n          disabled={!row.getCanSelect()}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select all\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    id: \"select\",\n  },\n  {\n    accessorKey: \"project\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"project\")}</div>\n    ),\n    header: \"Project\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Project[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"team\",\n    header: \"Team\",\n  },\n  {\n    accessorKey: \"budget\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"budget\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        maximumFractionDigits: 0,\n        minimumFractionDigits: 0,\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Budget</div>,\n  },\n];\n\nexport default function Particle() {\n  const [tableData] = useState<Project[]>(data);\n  const [rowSelection, setRowSelection] = useState({});\n\n  const columns = useMemo(() => getColumns(), []);\n\n  const table = useTable({\n    columns,\n    data: tableData,\n    enableRowSelection: true,\n    features,\n    onRowSelectionChange: setRowSelection,\n    state: {\n      rowSelection,\n    },\n  });\n\n  const totalBudget = tableData.reduce(\n    (sum, project) => sum + project.budget,\n    0,\n  );\n  const formattedTotal = new Intl.NumberFormat(\"en-US\", {\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0,\n    style: \"currency\",\n  }).format(totalBudget);\n\n  return (\n    <CardFrame className=\"w-full\">\n      <Table variant=\"card\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={4}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">{formattedTotal}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </CardFrame>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnVisibilityFeature,\n  flexRender,\n  rowSelectionFeature,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { CardFrame } from \"@/registry/default/ui/card\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Project = {\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n  budget: number;\n};\n\nconst data: Project[] = [\n  {\n    budget: 12500,\n    id: \"1\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"2\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"3\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"4\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"5\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"6\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst getStatusColor = (status: Project[\"status\"]) => {\n  switch (status) {\n    case \"Paid\":\n      return \"bg-emerald-500\";\n    case \"Unpaid\":\n      return \"bg-muted-foreground/64\";\n    case \"Pending\":\n      return \"bg-amber-500\";\n    case \"Failed\":\n      return \"bg-red-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnVisibilityFeature,\n  rowSelectionFeature,\n});\n\nconst getColumns = (): ColumnDef<typeof features, Project>[] => [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        disabled={!row.getCanSelect()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n  },\n  {\n    accessorKey: \"project\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"project\")}</div>\n    ),\n    header: \"Project\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Project[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"team\",\n    header: \"Team\",\n  },\n  {\n    accessorKey: \"budget\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"budget\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        maximumFractionDigits: 0,\n        minimumFractionDigits: 0,\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Budget</div>,\n  },\n];\n\nconst columns = getColumns();\n\nexport default function Particle() {\n  const table = useTable(\n    {\n      columns,\n      data,\n      enableRowSelection: true,\n      features,\n    },\n    (state) => ({ rowSelection: state.rowSelection }),\n  );\n\n  const totalBudget = data.reduce((sum, project) => sum + project.budget, 0);\n  const formattedTotal = new Intl.NumberFormat(\"en-US\", {\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0,\n    style: \"currency\",\n  }).format(totalBudget);\n\n  return (\n    <CardFrame className=\"w-full\">\n      <Table variant=\"card\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={4}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">{formattedTotal}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </CardFrame>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-table-8.json b/apps/ui/public/r/p-table-8.json
index 4f4c50180..354bb1edd 100644
--- a/apps/ui/public/r/p-table-8.json
+++ b/apps/ui/public/r/p-table-8.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-table-8.tsx",
-      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  flexRender,\n  type PaginationState,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  type SortingState,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { CardFrame, CardFrameFooter } from \"@/registry/default/ui/card\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Flight = {\n  id: string;\n  flightCode: string;\n  destination: string;\n  departureTime: string;\n  arrivalTime: string;\n  terminal: string;\n  duration: string;\n  status: \"On Time\" | \"Delayed\" | \"Cancelled\" | \"Boarding\";\n  gate: string;\n};\n\nconst getStatusColor = (status: Flight[\"status\"]) => {\n  switch (status) {\n    case \"On Time\":\n      return \"bg-emerald-500\";\n    case \"Delayed\":\n      return \"bg-amber-500\";\n    case \"Cancelled\":\n      return \"bg-red-500\";\n    case \"Boarding\":\n      return \"bg-blue-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Flight>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all rows\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"flightCode\",\n    cell: ({ row }) => (\n      <div className=\"font-medium font-mono text-muted-foreground\">\n        {row.getValue(\"flightCode\")}\n      </div>\n    ),\n    header: \"Flight\",\n    size: 80,\n  },\n  {\n    accessorKey: \"departureTime\",\n    cell: ({ row }) => {\n      const isCancelled = row.original.status === \"Cancelled\";\n      const isDelayed = row.original.status === \"Delayed\";\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-1.5 font-normal tabular-nums\",\n            isCancelled && \"text-muted-foreground line-through opacity-50\",\n          )}\n        >\n          <div className={isDelayed ? \"text-warning-foreground\" : undefined}>\n            {row.original.departureTime}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div\n            className={cn(\n              \"text-muted-foreground\",\n              isCancelled && \"line-through\",\n            )}\n          >\n            {row.original.duration}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div>{row.original.arrivalTime}</div>\n        </div>\n      );\n    },\n    header: \"Time\",\n    size: 220,\n  },\n  {\n    accessorKey: \"destination\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"destination\")}</div>\n    ),\n    header: \"Destination\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Flight[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-1.5 rounded-full\", getStatusColor(status))}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"terminal\",\n    cell: ({ row }) => (\n      <Badge className=\"font-normal tabular-nums\" size=\"lg\" variant=\"outline\">\n        <PlaneTakeoffIcon />\n        <span>{row.getValue(\"terminal\")}</span>\n      </Badge>\n    ),\n    header: \"Terminal\",\n    size: 90,\n  },\n  {\n    accessorKey: \"gate\",\n    header: \"Gate\",\n    size: 80,\n  },\n];\n\nexport default function Particle() {\n  const pageSize = 10;\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"departureTime\",\n    },\n  ]);\n\n  const table = useTable({\n    columns,\n    data: flights,\n    enableSortingRemoval: false,\n    features,\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  return (\n    <CardFrame className=\"w-full\">\n      <Table variant=\"card\" className=\"table-fixed\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const columnSize = header.column.getSize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    style={\n                      columnSize ? { width: `${columnSize}px` } : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className=\"flex h-full cursor-pointer select-none items-center justify-between gap-2\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        role=\"button\"\n                        tabIndex={0}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <CardFrameFooter className=\"p-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          {/* Results range selector */}\n          <div className=\"flex items-center gap-2 whitespace-nowrap\">\n            <p className=\"text-muted-foreground text-sm\">Viewing</p>\n            <Select\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\n                const start = i * table.state.pagination.pageSize + 1;\n                const end = Math.min(\n                  (i + 1) * table.state.pagination.pageSize,\n                  table.getRowCount(),\n                );\n                const pageNum = i + 1;\n                return { label: `${start}-${end}`, value: pageNum };\n              })}\n              onValueChange={(value) => {\n                table.setPageIndex((value as number) - 1);\n              }}\n              value={table.state.pagination.pageIndex + 1}\n            >\n              <SelectTrigger\n                aria-label=\"Select result range\"\n                className=\"w-fit min-w-none\"\n                size=\"sm\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\n                  const start = i * table.state.pagination.pageSize + 1;\n                  const end = Math.min(\n                    (i + 1) * table.state.pagination.pageSize,\n                    table.getRowCount(),\n                  );\n                  const pageNum = i + 1;\n                  return (\n                    <SelectItem key={pageNum} value={pageNum}>\n                      {`${start}-${end}`}\n                    </SelectItem>\n                  );\n                })}\n              </SelectPopup>\n            </Select>\n            <p className=\"text-muted-foreground text-sm\">\n              of{\" \"}\n              <strong className=\"font-medium text-foreground\">\n                {table.getRowCount()}\n              </strong>{\" \"}\n              results\n            </p>\n          </div>\n\n          {/* Pagination */}\n          <Pagination className=\"justify-end\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanPreviousPage()}\n                      onClick={() => table.previousPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n              <PaginationItem>\n                <PaginationNext\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanNextPage()}\n                      onClick={() => table.nextPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </CardFrameFooter>\n    </CardFrame>\n  );\n}\n\nconst flights: Flight[] = [\n  {\n    arrivalTime: \"11:45\",\n    departureTime: \"08:30\",\n    destination: \"Los Angeles\",\n    duration: \"5h 15m\",\n    flightCode: \"AA1234\",\n    gate: \"A12\",\n    id: \"1\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"17:10\",\n    departureTime: \"14:20\",\n    destination: \"San Francisco\",\n    duration: \"4h 50m\",\n    flightCode: \"DL5678\",\n    gate: \"B24\",\n    id: \"2\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:30\",\n    departureTime: \"10:15\",\n    destination: \"Miami\",\n    duration: \"3h 15m\",\n    flightCode: \"UA9012\",\n    gate: \"C8\",\n    id: \"3\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"18:20\",\n    departureTime: \"16:45\",\n    destination: \"Seattle\",\n    duration: \"2h 35m\",\n    flightCode: \"SW3456\",\n    gate: \"D15\",\n    id: \"4\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:30\",\n    departureTime: \"09:00\",\n    destination: \"Salt Lake City\",\n    duration: \"5h 30m\",\n    flightCode: \"JB7890\",\n    gate: \"E3\",\n    id: \"5\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:30\",\n    destination: \"Phoenix\",\n    duration: \"2h 45m\",\n    flightCode: \"AS2345\",\n    gate: \"F7\",\n    id: \"6\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:30\",\n    departureTime: \"13:00\",\n    destination: \"Las Vegas\",\n    duration: \"5h 30m\",\n    flightCode: \"HA6789\",\n    gate: \"G12\",\n    id: \"7\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"09:00\",\n    departureTime: \"07:15\",\n    destination: \"Dallas\",\n    duration: \"1h 45m\",\n    flightCode: \"FX0123\",\n    gate: \"H5\",\n    id: \"8\",\n    status: \"Boarding\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"08:30\",\n    departureTime: \"06:00\",\n    destination: \"Denver\",\n    duration: \"2h 30m\",\n    flightCode: \"WN4567\",\n    gate: \"I9\",\n    id: \"9\",\n    status: \"Boarding\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:45\",\n    destination: \"Portland\",\n    duration: \"2h 35m\",\n    flightCode: \"B61234\",\n    gate: \"J14\",\n    id: \"10\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"18:45\",\n    departureTime: \"15:30\",\n    destination: \"Atlanta\",\n    duration: \"3h 15m\",\n    flightCode: \"NK8901\",\n    gate: \"K6\",\n    id: \"11\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:00\",\n    departureTime: \"09:45\",\n    destination: \"Chicago\",\n    duration: \"2h 15m\",\n    flightCode: \"F92345\",\n    gate: \"L11\",\n    id: \"12\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:00\",\n    destination: \"Boston\",\n    duration: \"3h 15m\",\n    flightCode: \"SY6789\",\n    gate: \"M3\",\n    id: \"13\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:45\",\n    departureTime: \"13:30\",\n    destination: \"New York\",\n    duration: \"3h 15m\",\n    flightCode: \"G40123\",\n    gate: \"N8\",\n    id: \"14\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"11:20\",\n    departureTime: \"08:00\",\n    destination: \"Washington\",\n    duration: \"3h 20m\",\n    flightCode: \"YX5678\",\n    gate: \"O12\",\n    id: \"15\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:50\",\n    departureTime: \"10:30\",\n    destination: \"Orlando\",\n    duration: \"3h 20m\",\n    flightCode: \"4U9012\",\n    gate: \"P5\",\n    id: \"16\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:30\",\n    departureTime: \"14:00\",\n    destination: \"Houston\",\n    duration: \"2h 30m\",\n    flightCode: \"QF3456\",\n    gate: \"Q9\",\n    id: \"17\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"10:00\",\n    departureTime: \"07:30\",\n    destination: \"Minneapolis\",\n    duration: \"2h 30m\",\n    flightCode: \"LH7890\",\n    gate: \"R7\",\n    id: \"18\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"19:30\",\n    departureTime: \"16:15\",\n    destination: \"Detroit\",\n    duration: \"3h 15m\",\n    flightCode: \"KL2345\",\n    gate: \"S4\",\n    id: \"19\",\n    status: \"Cancelled\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"15:10\",\n    departureTime: \"12:00\",\n    destination: \"Philadelphia\",\n    duration: \"3h 10m\",\n    flightCode: \"AF6789\",\n    gate: \"T16\",\n    id: \"20\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:25\",\n    departureTime: \"09:15\",\n    destination: \"Charlotte\",\n    duration: \"3h 10m\",\n    flightCode: \"BA0123\",\n    gate: \"U10\",\n    id: \"21\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"18:00\",\n    departureTime: \"15:45\",\n    destination: \"Nashville\",\n    duration: \"2h 15m\",\n    flightCode: \"IB4567\",\n    gate: \"V8\",\n    id: \"22\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"14:00\",\n    departureTime: \"11:45\",\n    destination: \"Austin\",\n    duration: \"2h 15m\",\n    flightCode: \"EK8901\",\n    gate: \"W13\",\n    id: \"23\",\n    status: \"Cancelled\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"16:40\",\n    departureTime: \"13:15\",\n    destination: \"Tampa\",\n    duration: \"3h 25m\",\n    flightCode: \"QR2345\",\n    gate: \"X6\",\n    id: \"24\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"11:30\",\n    departureTime: \"08:45\",\n    destination: \"Raleigh\",\n    duration: \"2h 45m\",\n    flightCode: \"TK6789\",\n    gate: \"Y11\",\n    id: \"25\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:45\",\n    departureTime: \"10:00\",\n    destination: \"Indianapolis\",\n    duration: \"2h 45m\",\n    flightCode: \"VS3456\",\n    gate: \"Z4\",\n    id: \"26\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"20:00\",\n    departureTime: \"17:30\",\n    destination: \"Kansas City\",\n    duration: \"2h 30m\",\n    flightCode: \"LX7890\",\n    gate: \"A8\",\n    id: \"27\",\n    status: \"Delayed\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:30\",\n    destination: \"Columbus\",\n    duration: \"2h 50m\",\n    flightCode: \"OS1234\",\n    gate: \"B19\",\n    id: \"28\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:15\",\n    departureTime: \"18:00\",\n    destination: \"Milwaukee\",\n    duration: \"2h 15m\",\n    flightCode: \"SN5678\",\n    gate: \"C22\",\n    id: \"29\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"21:30\",\n    departureTime: \"19:15\",\n    destination: \"Memphis\",\n    duration: \"2h 15m\",\n    flightCode: \"TP9012\",\n    gate: \"D6\",\n    id: \"30\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n];\n",
+      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  flexRender,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  useTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \"lucide-react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { CardFrame, CardFrameFooter } from \"@/registry/default/ui/card\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Flight = {\n  id: string;\n  flightCode: string;\n  destination: string;\n  departureTime: string;\n  arrivalTime: string;\n  terminal: string;\n  duration: string;\n  status: \"On Time\" | \"Delayed\" | \"Cancelled\" | \"Boarding\";\n  gate: string;\n};\n\nconst getStatusColor = (status: Flight[\"status\"]) => {\n  switch (status) {\n    case \"On Time\":\n      return \"bg-emerald-500\";\n    case \"Delayed\":\n      return \"bg-amber-500\";\n    case \"Cancelled\":\n      return \"bg-red-500\";\n    case \"Boarding\":\n      return \"bg-blue-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst features = tableFeatures({\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  paginatedRowModel: createPaginatedRowModel(),\n  rowSelectionFeature,\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n  sortFns: {\n    alphanumeric: sortFn_alphanumeric,\n    text: sortFn_text,\n  },\n});\n\nconst columns: ColumnDef<typeof features, Flight>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all rows\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"flightCode\",\n    cell: ({ row }) => (\n      <div className=\"font-medium font-mono text-muted-foreground\">\n        {row.getValue(\"flightCode\")}\n      </div>\n    ),\n    header: \"Flight\",\n    size: 80,\n  },\n  {\n    accessorKey: \"departureTime\",\n    cell: ({ row }) => {\n      const isCancelled = row.original.status === \"Cancelled\";\n      const isDelayed = row.original.status === \"Delayed\";\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-1.5 font-normal tabular-nums\",\n            isCancelled && \"text-muted-foreground line-through opacity-50\",\n          )}\n        >\n          <div className={isDelayed ? \"text-warning-foreground\" : undefined}>\n            {row.original.departureTime}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div\n            className={cn(\n              \"text-muted-foreground\",\n              isCancelled && \"line-through\",\n            )}\n          >\n            {row.original.duration}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div>{row.original.arrivalTime}</div>\n        </div>\n      );\n    },\n    header: \"Time\",\n    size: 220,\n  },\n  {\n    accessorKey: \"destination\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"destination\")}</div>\n    ),\n    header: \"Destination\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Flight[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-1.5 rounded-full\", getStatusColor(status))}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"terminal\",\n    cell: ({ row }) => (\n      <Badge className=\"font-normal tabular-nums\" size=\"lg\" variant=\"outline\">\n        <PlaneTakeoffIcon />\n        <span>{row.getValue(\"terminal\")}</span>\n      </Badge>\n    ),\n    header: \"Terminal\",\n    size: 90,\n  },\n  {\n    accessorKey: \"gate\",\n    header: \"Gate\",\n    size: 80,\n  },\n];\n\nexport default function Particle() {\n  const pageSize = 10;\n\n  const table = useTable(\n    {\n      columns,\n      data: flights,\n      enableSortingRemoval: false,\n      features,\n      initialState: {\n        pagination: {\n          pageIndex: 0,\n          pageSize,\n        },\n        sorting: [\n          {\n            desc: false,\n            id: \"departureTime\",\n          },\n        ],\n      },\n    },\n    (state) => ({\n      pagination: state.pagination,\n      rowSelection: state.rowSelection,\n      sorting: state.sorting,\n    }),\n  );\n\n  return (\n    <CardFrame className=\"w-full\">\n      <Table variant=\"card\" className=\"table-fixed\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const columnSize = header.column.getSize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    style={\n                      columnSize ? { width: `${columnSize}px` } : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className=\"flex h-full cursor-pointer select-none items-center justify-between gap-2\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        role=\"button\"\n                        tabIndex={0}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <CardFrameFooter className=\"p-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          {/* Results range selector */}\n          <div className=\"flex items-center gap-2 whitespace-nowrap\">\n            <p className=\"text-muted-foreground text-sm\">Viewing</p>\n            <Select\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\n                const start = i * table.state.pagination.pageSize + 1;\n                const end = Math.min(\n                  (i + 1) * table.state.pagination.pageSize,\n                  table.getRowCount(),\n                );\n                const pageNum = i + 1;\n                return { label: `${start}-${end}`, value: pageNum };\n              })}\n              onValueChange={(value) => {\n                table.setPageIndex((value as number) - 1);\n              }}\n              value={table.state.pagination.pageIndex + 1}\n            >\n              <SelectTrigger\n                aria-label=\"Select result range\"\n                className=\"w-fit min-w-none\"\n                size=\"sm\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\n                  const start = i * table.state.pagination.pageSize + 1;\n                  const end = Math.min(\n                    (i + 1) * table.state.pagination.pageSize,\n                    table.getRowCount(),\n                  );\n                  const pageNum = i + 1;\n                  return (\n                    <SelectItem key={pageNum} value={pageNum}>\n                      {`${start}-${end}`}\n                    </SelectItem>\n                  );\n                })}\n              </SelectPopup>\n            </Select>\n            <p className=\"text-muted-foreground text-sm\">\n              of{\" \"}\n              <strong className=\"font-medium text-foreground\">\n                {table.getRowCount()}\n              </strong>{\" \"}\n              results\n            </p>\n          </div>\n\n          {/* Pagination */}\n          <Pagination className=\"justify-end\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanPreviousPage()}\n                      onClick={() => table.previousPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n              <PaginationItem>\n                <PaginationNext\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanNextPage()}\n                      onClick={() => table.nextPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </CardFrameFooter>\n    </CardFrame>\n  );\n}\n\nconst flights: Flight[] = [\n  {\n    arrivalTime: \"11:45\",\n    departureTime: \"08:30\",\n    destination: \"Los Angeles\",\n    duration: \"5h 15m\",\n    flightCode: \"AA1234\",\n    gate: \"A12\",\n    id: \"1\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"17:10\",\n    departureTime: \"14:20\",\n    destination: \"San Francisco\",\n    duration: \"4h 50m\",\n    flightCode: \"DL5678\",\n    gate: \"B24\",\n    id: \"2\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:30\",\n    departureTime: \"10:15\",\n    destination: \"Miami\",\n    duration: \"3h 15m\",\n    flightCode: \"UA9012\",\n    gate: \"C8\",\n    id: \"3\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"18:20\",\n    departureTime: \"16:45\",\n    destination: \"Seattle\",\n    duration: \"2h 35m\",\n    flightCode: \"SW3456\",\n    gate: \"D15\",\n    id: \"4\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:30\",\n    departureTime: \"09:00\",\n    destination: \"Salt Lake City\",\n    duration: \"5h 30m\",\n    flightCode: \"JB7890\",\n    gate: \"E3\",\n    id: \"5\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:30\",\n    destination: \"Phoenix\",\n    duration: \"2h 45m\",\n    flightCode: \"AS2345\",\n    gate: \"F7\",\n    id: \"6\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:30\",\n    departureTime: \"13:00\",\n    destination: \"Las Vegas\",\n    duration: \"5h 30m\",\n    flightCode: \"HA6789\",\n    gate: \"G12\",\n    id: \"7\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"09:00\",\n    departureTime: \"07:15\",\n    destination: \"Dallas\",\n    duration: \"1h 45m\",\n    flightCode: \"FX0123\",\n    gate: \"H5\",\n    id: \"8\",\n    status: \"Boarding\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"08:30\",\n    departureTime: \"06:00\",\n    destination: \"Denver\",\n    duration: \"2h 30m\",\n    flightCode: \"WN4567\",\n    gate: \"I9\",\n    id: \"9\",\n    status: \"Boarding\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:45\",\n    destination: \"Portland\",\n    duration: \"2h 35m\",\n    flightCode: \"B61234\",\n    gate: \"J14\",\n    id: \"10\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"18:45\",\n    departureTime: \"15:30\",\n    destination: \"Atlanta\",\n    duration: \"3h 15m\",\n    flightCode: \"NK8901\",\n    gate: \"K6\",\n    id: \"11\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:00\",\n    departureTime: \"09:45\",\n    destination: \"Chicago\",\n    duration: \"2h 15m\",\n    flightCode: \"F92345\",\n    gate: \"L11\",\n    id: \"12\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:00\",\n    destination: \"Boston\",\n    duration: \"3h 15m\",\n    flightCode: \"SY6789\",\n    gate: \"M3\",\n    id: \"13\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:45\",\n    departureTime: \"13:30\",\n    destination: \"New York\",\n    duration: \"3h 15m\",\n    flightCode: \"G40123\",\n    gate: \"N8\",\n    id: \"14\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"11:20\",\n    departureTime: \"08:00\",\n    destination: \"Washington\",\n    duration: \"3h 20m\",\n    flightCode: \"YX5678\",\n    gate: \"O12\",\n    id: \"15\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:50\",\n    departureTime: \"10:30\",\n    destination: \"Orlando\",\n    duration: \"3h 20m\",\n    flightCode: \"4U9012\",\n    gate: \"P5\",\n    id: \"16\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:30\",\n    departureTime: \"14:00\",\n    destination: \"Houston\",\n    duration: \"2h 30m\",\n    flightCode: \"QF3456\",\n    gate: \"Q9\",\n    id: \"17\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"10:00\",\n    departureTime: \"07:30\",\n    destination: \"Minneapolis\",\n    duration: \"2h 30m\",\n    flightCode: \"LH7890\",\n    gate: \"R7\",\n    id: \"18\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"19:30\",\n    departureTime: \"16:15\",\n    destination: \"Detroit\",\n    duration: \"3h 15m\",\n    flightCode: \"KL2345\",\n    gate: \"S4\",\n    id: \"19\",\n    status: \"Cancelled\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"15:10\",\n    departureTime: \"12:00\",\n    destination: \"Philadelphia\",\n    duration: \"3h 10m\",\n    flightCode: \"AF6789\",\n    gate: \"T16\",\n    id: \"20\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:25\",\n    departureTime: \"09:15\",\n    destination: \"Charlotte\",\n    duration: \"3h 10m\",\n    flightCode: \"BA0123\",\n    gate: \"U10\",\n    id: \"21\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"18:00\",\n    departureTime: \"15:45\",\n    destination: \"Nashville\",\n    duration: \"2h 15m\",\n    flightCode: \"IB4567\",\n    gate: \"V8\",\n    id: \"22\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"14:00\",\n    departureTime: \"11:45\",\n    destination: \"Austin\",\n    duration: \"2h 15m\",\n    flightCode: \"EK8901\",\n    gate: \"W13\",\n    id: \"23\",\n    status: \"Cancelled\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"16:40\",\n    departureTime: \"13:15\",\n    destination: \"Tampa\",\n    duration: \"3h 25m\",\n    flightCode: \"QR2345\",\n    gate: \"X6\",\n    id: \"24\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"11:30\",\n    departureTime: \"08:45\",\n    destination: \"Raleigh\",\n    duration: \"2h 45m\",\n    flightCode: \"TK6789\",\n    gate: \"Y11\",\n    id: \"25\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:45\",\n    departureTime: \"10:00\",\n    destination: \"Indianapolis\",\n    duration: \"2h 45m\",\n    flightCode: \"VS3456\",\n    gate: \"Z4\",\n    id: \"26\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"20:00\",\n    departureTime: \"17:30\",\n    destination: \"Kansas City\",\n    duration: \"2h 30m\",\n    flightCode: \"LX7890\",\n    gate: \"A8\",\n    id: \"27\",\n    status: \"Delayed\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:30\",\n    destination: \"Columbus\",\n    duration: \"2h 50m\",\n    flightCode: \"OS1234\",\n    gate: \"B19\",\n    id: \"28\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:15\",\n    departureTime: \"18:00\",\n    destination: \"Milwaukee\",\n    duration: \"2h 15m\",\n    flightCode: \"SN5678\",\n    gate: \"C22\",\n    id: \"29\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"21:30\",\n    departureTime: \"19:15\",\n    destination: \"Memphis\",\n    duration: \"2h 15m\",\n    flightCode: \"TP9012\",\n    gate: \"D6\",\n    id: \"30\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n];\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/registry/default/particles/p-table-3.tsx b/apps/ui/registry/default/particles/p-table-3.tsx
index 9ab526ef6..9dc86f5a1 100644
--- a/apps/ui/registry/default/particles/p-table-3.tsx
+++ b/apps/ui/registry/default/particles/p-table-3.tsx
@@ -8,8 +8,6 @@ import {
   tableFeatures,
   useTable,
 } from "@tanstack/react-table";
-import type React from "react";
-import { useMemo, useState } from "react";
 import { Badge } from "@/registry/default/ui/badge";
 import { Checkbox } from "@/registry/default/ui/checkbox";
 import { Frame } from "@/registry/default/ui/frame";
@@ -98,39 +96,23 @@ const features = tableFeatures({
 
 const getColumns = (): ColumnDef<typeof features, Project>[] => [
   {
-    cell: ({ row }) => {
-      const toggleHandler = row.getToggleSelectedHandler();
-      return (
-        <Checkbox
-          aria-label="Select row"
-          checked={row.getIsSelected()}
-          disabled={!row.getCanSelect()}
-          onCheckedChange={(value) => {
-            // Create a synthetic event for the handler
-            const syntheticEvent = {
-              target: { checked: !!value },
-            } as unknown as React.ChangeEvent<HTMLInputElement>;
-            toggleHandler(syntheticEvent);
-          }}
-        />
-      );
-    },
+    cell: ({ row }) => (
+      <Checkbox
+        aria-label="Select row"
+        checked={row.getIsSelected()}
+        disabled={!row.getCanSelect()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+      />
+    ),
     header: ({ table }) => {
       const isAllSelected = table.getIsAllPageRowsSelected();
       const isSomeSelected = table.getIsSomePageRowsSelected();
-      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();
       return (
         <Checkbox
           aria-label="Select all"
           checked={isAllSelected}
           indeterminate={isSomeSelected && !isAllSelected}
-          onCheckedChange={(value) => {
-            // Create a synthetic event for the handler
-            const syntheticEvent = {
-              target: { checked: !!value },
-            } as unknown as React.ChangeEvent<HTMLInputElement>;
-            toggleHandler(syntheticEvent);
-          }}
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         />
       );
     },
@@ -179,27 +161,20 @@ const getColumns = (): ColumnDef<typeof features, Project>[] => [
   },
 ];
 
-export default function Particle() {
-  const [tableData] = useState<Project[]>(data);
-  const [rowSelection, setRowSelection] = useState({});
-
-  const columns = useMemo(() => getColumns(), []);
+const columns = getColumns();
 
-  const table = useTable({
-    columns,
-    data: tableData,
-    enableRowSelection: true,
-    features,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      rowSelection,
+export default function Particle() {
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableRowSelection: true,
+      features,
     },
-  });
-
-  const totalBudget = tableData.reduce(
-    (sum, project) => sum + project.budget,
-    0,
+    (state) => ({ rowSelection: state.rowSelection }),
   );
+
+  const totalBudget = data.reduce((sum, project) => sum + project.budget, 0);
   const formattedTotal = new Intl.NumberFormat("en-US", {
     currency: "USD",
     maximumFractionDigits: 0,
diff --git a/apps/ui/registry/default/particles/p-table-4.tsx b/apps/ui/registry/default/particles/p-table-4.tsx
index d05cdccf2..74a486e62 100644
--- a/apps/ui/registry/default/particles/p-table-4.tsx
+++ b/apps/ui/registry/default/particles/p-table-4.tsx
@@ -7,18 +7,15 @@ import {
   createPaginatedRowModel,
   createSortedRowModel,
   flexRender,
-  type PaginationState,
   rowPaginationFeature,
   rowSelectionFeature,
   rowSortingFeature,
-  type SortingState,
   sortFn_alphanumeric,
   sortFn_text,
   tableFeatures,
   useTable,
 } from "@tanstack/react-table";
 import { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from "lucide-react";
-import { useState } from "react";
 import { cn } from "@/registry/default/lib/utils";
 import { Badge } from "@/registry/default/ui/badge";
 import { Button } from "@/registry/default/ui/button";
@@ -207,30 +204,31 @@ const columns: ColumnDef<typeof features, Flight>[] = [
 export default function Particle() {
   const pageSize = 10;
 
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: pageSize,
-  });
-
-  const [sorting, setSorting] = useState<SortingState>([
+  const table = useTable(
     {
-      desc: false,
-      id: "departureTime",
-    },
-  ]);
-
-  const table = useTable({
-    columns,
-    data: flights,
-    enableSortingRemoval: false,
-    features,
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      pagination,
-      sorting,
+      columns,
+      data: flights,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        pagination: {
+          pageIndex: 0,
+          pageSize,
+        },
+        sorting: [
+          {
+            desc: false,
+            id: "departureTime",
+          },
+        ],
+      },
     },
-  });
+    (state) => ({
+      pagination: state.pagination,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   return (
     <Frame className="w-full">
diff --git a/apps/ui/registry/default/particles/p-table-6.tsx b/apps/ui/registry/default/particles/p-table-6.tsx
index b3b8bbb01..366f7642a 100644
--- a/apps/ui/registry/default/particles/p-table-6.tsx
+++ b/apps/ui/registry/default/particles/p-table-6.tsx
@@ -8,8 +8,6 @@ import {
   tableFeatures,
   useTable,
 } from "@tanstack/react-table";
-import type React from "react";
-import { useMemo, useState } from "react";
 import { Badge } from "@/registry/default/ui/badge";
 import { CardFrame } from "@/registry/default/ui/card";
 import { Checkbox } from "@/registry/default/ui/checkbox";
@@ -98,39 +96,23 @@ const features = tableFeatures({
 
 const getColumns = (): ColumnDef<typeof features, Project>[] => [
   {
-    cell: ({ row }) => {
-      const toggleHandler = row.getToggleSelectedHandler();
-      return (
-        <Checkbox
-          aria-label="Select row"
-          checked={row.getIsSelected()}
-          disabled={!row.getCanSelect()}
-          onCheckedChange={(value) => {
-            // Create a synthetic event for the handler
-            const syntheticEvent = {
-              target: { checked: !!value },
-            } as unknown as React.ChangeEvent<HTMLInputElement>;
-            toggleHandler(syntheticEvent);
-          }}
-        />
-      );
-    },
+    cell: ({ row }) => (
+      <Checkbox
+        aria-label="Select row"
+        checked={row.getIsSelected()}
+        disabled={!row.getCanSelect()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+      />
+    ),
     header: ({ table }) => {
       const isAllSelected = table.getIsAllPageRowsSelected();
       const isSomeSelected = table.getIsSomePageRowsSelected();
-      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();
       return (
         <Checkbox
           aria-label="Select all"
           checked={isAllSelected}
           indeterminate={isSomeSelected && !isAllSelected}
-          onCheckedChange={(value) => {
-            // Create a synthetic event for the handler
-            const syntheticEvent = {
-              target: { checked: !!value },
-            } as unknown as React.ChangeEvent<HTMLInputElement>;
-            toggleHandler(syntheticEvent);
-          }}
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         />
       );
     },
@@ -179,27 +161,20 @@ const getColumns = (): ColumnDef<typeof features, Project>[] => [
   },
 ];
 
-export default function Particle() {
-  const [tableData] = useState<Project[]>(data);
-  const [rowSelection, setRowSelection] = useState({});
-
-  const columns = useMemo(() => getColumns(), []);
+const columns = getColumns();
 
-  const table = useTable({
-    columns,
-    data: tableData,
-    enableRowSelection: true,
-    features,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      rowSelection,
+export default function Particle() {
+  const table = useTable(
+    {
+      columns,
+      data,
+      enableRowSelection: true,
+      features,
     },
-  });
-
-  const totalBudget = tableData.reduce(
-    (sum, project) => sum + project.budget,
-    0,
+    (state) => ({ rowSelection: state.rowSelection }),
   );
+
+  const totalBudget = data.reduce((sum, project) => sum + project.budget, 0);
   const formattedTotal = new Intl.NumberFormat("en-US", {
     currency: "USD",
     maximumFractionDigits: 0,
diff --git a/apps/ui/registry/default/particles/p-table-8.tsx b/apps/ui/registry/default/particles/p-table-8.tsx
index 629b7d43a..3f48a78db 100644
--- a/apps/ui/registry/default/particles/p-table-8.tsx
+++ b/apps/ui/registry/default/particles/p-table-8.tsx
@@ -7,18 +7,15 @@ import {
   createPaginatedRowModel,
   createSortedRowModel,
   flexRender,
-  type PaginationState,
   rowPaginationFeature,
   rowSelectionFeature,
   rowSortingFeature,
-  type SortingState,
   sortFn_alphanumeric,
   sortFn_text,
   tableFeatures,
   useTable,
 } from "@tanstack/react-table";
 import { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from "lucide-react";
-import { useState } from "react";
 import { cn } from "@/registry/default/lib/utils";
 import { Badge } from "@/registry/default/ui/badge";
 import { Button } from "@/registry/default/ui/button";
@@ -207,30 +204,31 @@ const columns: ColumnDef<typeof features, Flight>[] = [
 export default function Particle() {
   const pageSize = 10;
 
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: pageSize,
-  });
-
-  const [sorting, setSorting] = useState<SortingState>([
+  const table = useTable(
     {
-      desc: false,
-      id: "departureTime",
-    },
-  ]);
-
-  const table = useTable({
-    columns,
-    data: flights,
-    enableSortingRemoval: false,
-    features,
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      pagination,
-      sorting,
+      columns,
+      data: flights,
+      enableSortingRemoval: false,
+      features,
+      initialState: {
+        pagination: {
+          pageIndex: 0,
+          pageSize,
+        },
+        sorting: [
+          {
+            desc: false,
+            id: "departureTime",
+          },
+        ],
+      },
     },
-  });
+    (state) => ({
+      pagination: state.pagination,
+      rowSelection: state.rowSelection,
+      sorting: state.sorting,
+    }),
+  );
 
   return (
     <CardFrame className="w-full">

From 15472fb4c0e35658410baf6ad26db50e3ba8d0c9 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Sun, 6 Sep 2026 13:37:59 +0200
Subject: [PATCH 3/3] fix: restore team members table selection updates

Subscribe only re-renders when its child is a function, so static JSX left checkboxes stale until a sort. Match the members table: subscribe with a render function and toggle rows on click.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../[id]/members/team-members-page-client.tsx | 218 ++++++++++--------
 1 file changed, 118 insertions(+), 100 deletions(-)

diff --git a/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx b/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx
index 7d2cca51f..9bee2d2b5 100644
--- a/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx
+++ b/apps/examples/calcom/app/(settings)/settings/teams/[id]/members/team-members-page-client.tsx
@@ -165,6 +165,15 @@ const members: TeamMember[] = [
   },
 ];
 
+function shouldIgnoreRowSelectionClick(target: EventTarget | null): boolean {
+  return (
+    target instanceof Element &&
+    target.closest(
+      'a, button, input, select, textarea, [role="button"], [role="checkbox"], [data-slot="checkbox"], [data-slot="label"]',
+    ) !== null
+  );
+}
+
 function getInitials(name: string): string {
   const parts = name.trim().split(/\s+/);
   if (parts.length === 0) return "";
@@ -252,13 +261,12 @@ function getColumns({
   const cols: ColumnDef<typeof features, TeamMember>[] = [
     {
       cell: ({ row }) => (
-        <Label className="before:absolute before:inset-0">
+        <Label>
           <Checkbox
             aria-label={`Select ${row.original.name}`}
             checked={row.getIsSelected()}
             onCheckedChange={(value) => row.toggleSelected(!!value)}
           />
-          <span className="sr-only">{`Select ${row.original.name}`}</span>
         </Label>
       ),
       enableSorting: false,
@@ -544,107 +552,117 @@ export function TeamMembersPageClient() {
             sorting: state.sorting,
           })}
         >
-          <CardFrame className="w-full">
-            <Table variant="card" className="table-fixed">
-              <TableHeader>
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => {
-                      const columnSize = header.column.getSize();
-
-                      return (
-                        <TableHead
-                          className={
-                            header.column.id === "name"
-                              ? "sm:w-auto!"
-                              : undefined
-                          }
-                          key={header.id}
-                          style={
-                            columnSize
-                              ? { width: `${columnSize}px` }
-                              : undefined
-                          }
-                        >
-                          {header.isPlaceholder ? null : header.column.getCanSort() ? (
-                            <div
-                              className="flex h-full cursor-pointer select-none items-center justify-between gap-2"
-                              onClick={header.column.getToggleSortingHandler()}
-                              onKeyDown={(event) => {
-                                if (
-                                  event.key === "Enter" ||
-                                  event.key === " "
-                                ) {
-                                  event.preventDefault();
-                                  header.column.getToggleSortingHandler()?.(
-                                    event,
-                                  );
-                                }
-                              }}
-                              role="button"
-                              tabIndex={0}
-                            >
-                              {flexRender(
+          {() => (
+            <CardFrame className="w-full">
+              <Table variant="card" className="table-fixed">
+                <TableHeader>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => {
+                        const columnSize = header.column.getSize();
+
+                        return (
+                          <TableHead
+                            className={
+                              header.column.id === "name"
+                                ? "sm:w-auto!"
+                                : undefined
+                            }
+                            key={header.id}
+                            style={
+                              columnSize
+                                ? { width: `${columnSize}px` }
+                                : undefined
+                            }
+                          >
+                            {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                              <div
+                                className="flex h-full cursor-pointer select-none items-center justify-between gap-2"
+                                onClick={header.column.getToggleSortingHandler()}
+                                onKeyDown={(event) => {
+                                  if (
+                                    event.key === "Enter" ||
+                                    event.key === " "
+                                  ) {
+                                    event.preventDefault();
+                                    header.column.getToggleSortingHandler()?.(
+                                      event,
+                                    );
+                                  }
+                                }}
+                                role="button"
+                                tabIndex={0}
+                              >
+                                {flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext(),
+                                )}
+                                {{
+                                  asc: (
+                                    <ChevronUpIcon
+                                      aria-hidden="true"
+                                      className="size-4 shrink-0 opacity-80"
+                                    />
+                                  ),
+                                  desc: (
+                                    <ChevronDownIcon
+                                      aria-hidden="true"
+                                      className="size-4 shrink-0 opacity-80"
+                                    />
+                                  ),
+                                }[header.column.getIsSorted() as string] ??
+                                  null}
+                              </div>
+                            ) : (
+                              flexRender(
                                 header.column.columnDef.header,
                                 header.getContext(),
-                              )}
-                              {{
-                                asc: (
-                                  <ChevronUpIcon
-                                    aria-hidden="true"
-                                    className="size-4 shrink-0 opacity-80"
-                                  />
-                                ),
-                                desc: (
-                                  <ChevronDownIcon
-                                    aria-hidden="true"
-                                    className="size-4 shrink-0 opacity-80"
-                                  />
-                                ),
-                              }[header.column.getIsSorted() as string] ?? null}
-                            </div>
-                          ) : (
-                            flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
-                            )
-                          )}
-                        </TableHead>
-                      );
-                    })}
-                  </TableRow>
-                ))}
-              </TableHeader>
-              <TableBody>
-                {table.getRowModel().rows.length ? (
-                  table.getRowModel().rows.map((row) => (
-                    <TableRow
-                      data-state={row.getIsSelected() ? "selected" : undefined}
-                      key={row.id}
-                    >
-                      {row.getVisibleCells().map((cell) => (
-                        <TableCell key={cell.id}>
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext(),
-                          )}
-                        </TableCell>
-                      ))}
+                              )
+                            )}
+                          </TableHead>
+                        );
+                      })}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {table.getRowModel().rows.length ? (
+                    table.getRowModel().rows.map((row) => (
+                      <TableRow
+                        data-state={
+                          row.getIsSelected() ? "selected" : undefined
+                        }
+                        key={row.id}
+                        onClick={(event) => {
+                          if (shouldIgnoreRowSelectionClick(event.target))
+                            return;
+                          row.toggleSelected();
+                        }}
+                      >
+                        {row.getVisibleCells().map((cell) => (
+                          <TableCell key={cell.id}>
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext(),
+                            )}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell
+                        className="h-24 text-center"
+                        colSpan={columns.length}
+                      >
+                        No members found.
+                      </TableCell>
                     </TableRow>
-                  ))
-                ) : (
-                  <TableRow>
-                    <TableCell
-                      className="h-24 text-center"
-                      colSpan={columns.length}
-                    >
-                      No members found.
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
-          </CardFrame>
+                  )}
+                </TableBody>
+              </Table>
+            </CardFrame>
+          )}
         </table.Subscribe>
       </div>
     </>