Pasquale/cui 63 create some table particles

[pasqualevitiello]

• Add full width particle display for larger components like tables
• Improve table and frame components
• Add 2 new table particles

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
coss-com	Ready	Preview	Comment	Dec 3, 2025 11:07am
coss-com-ui	Ready	Preview	Comment	Dec 3, 2025 11:07am

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
coss-com-origin	Skipped			Dec 3, 2025 11:07am

[cubic-dev-ai]

1 issue found across 20 files

Prompt for AI agents (all 1 issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/ui/registry/default/particles/p-table-4.tsx">

<violation number="1" location="apps/ui/registry/default/particles/p-table-4.tsx:112">
P2: Interactive `div` with `onKeyDown` handler cannot receive keyboard focus. Add `tabIndex={0}` and `role=&quot;button&quot;` to make the sorting functionality keyboard-accessible.</violation>
</file>

_{Reply to cubic to teach it or ask questions. Re-run a review with @cubic-dev-ai review this PR}

[cubic-dev-ai]

P2: Interactive div with onKeyDown handler cannot receive keyboard focus. Add tabIndex={0} and role="button" to make the sorting functionality keyboard-accessible.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/ui/registry/default/particles/p-table-4.tsx, line 112:

<comment>Interactive `div` with `onKeyDown` handler cannot receive keyboard focus. Add `tabIndex={0}` and `role=&quot;button&quot;` to make the sorting functionality keyboard-accessible.</comment>

<file context>
@@ -0,0 +1,717 @@
+      const isCancelled = row.original.status === &quot;Cancelled&quot;;
+      const isDelayed = row.original.status === &quot;Delayed&quot;;
+      return (
+        &lt;div
+          className={cn(
+            &quot;flex items-center gap-1.5 font-normal tabular-nums&quot;,
</file context>

Suggested change

	<div
	className={cn(
	"flex items-center gap-1.5 font-normal tabular-nums",
	isCancelled && "text-muted-foreground line-through opacity-50",
	)}
	>
	<div className={isDelayed ? "text-warning-foreground" : undefined}>
	{row.original.departureTime}
	</div>
	<div
	className="flex h-full cursor-pointer select-none items-center justify-between gap-2"
	onClick={header.column.getToggleSortingHandler()}
	onKeyDown={(e) => {
	if (e.key === "Enter" || e.key === " ") {
	e.preventDefault();
	header.column.getToggleSortingHandler()?.(e);
	}
	}}
	role="button"
	tabIndex={0}

✅ Addressed in 00b2581