5f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 60:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 61:T113e,// title: API keys card table with row actions "use client"; import { createColumnHelper, tableFeatures, useTable, } from "@tanstack/react-table"; import { CopyIcon, EllipsisIcon, RefreshCwIcon, TrashIcon } from "lucide-react"; import { useState } from "react"; import { Badge } from "@/registry/default/ui/badge"; import { Button } from "@/registry/default/ui/button"; import { DataTable } from "@/registry/default/ui/data-table"; import { Menu, MenuGroup, MenuItem, MenuPopup, MenuSeparator, MenuTrigger, } from "@/registry/default/ui/menu"; type ApiKey = { created: string; id: string; lastUsed: string; name: string; prefix: string; status: "active" | "revoked"; }; const KEYS: ApiKey[] = [ { created: "Aug 4, 2026", id: "k1", lastUsed: "2 min ago", name: "Production", prefix: "sk_live_4f2a", status: "active", }, { created: "Sep 12, 2026", id: "k2", lastUsed: "1 hr ago", name: "Staging", prefix: "sk_test_9c1d", status: "active", }, { created: "Oct 1, 2026", id: "k3", lastUsed: "Never", name: "CI pipeline", prefix: "sk_test_77be", status: "active", }, { created: "Mar 18, 2026", id: "k4", lastUsed: "Jun 2, 2026", name: "Old mobile app", prefix: "sk_live_0a93", status: "revoked", }, ]; // Row actions need to update data owned by the component, so they're passed // to the table through `meta` rather than captured by module-level columns. type Actions = { revoke: (id: string) => void }; const features = tableFeatures({}); const column = createColumnHelper(); const columns = column.columns([ column.accessor("name", { cell: ({ row }) => (

{row.original.name} {row.original.prefix}••••••••

), header: "Key", }), column.accessor("status", { cell: (info) => info.getValue() === "active" ? ( Active ) : ( Revoked ), header: "Status", }), column.accessor("created", { header: "Created" }), column.accessor("lastUsed", { cell: (info) => ( {info.getValue()} ), header: "Last used", }), column.display({ cell: ({ row, table }) => { const actions = table.options.meta as Actions | undefined; const revoked = row.original.status === "revoked"; return (

} > actions?.revoke(row.original.id)} variant="destructive" >

); }, header: () => Actions, id: "actions", }), ]); export default function Particle() { const [keys, setKeys] = useState(KEYS); const actions: Actions = { revoke: (id) => setKeys((prev) => prev.map((k) => (k.id === id ? { ...k, status: "revoked" } : k)), ), }; const table = useTable({ columns, data: keys, features, getRowId: (row) => row.id, meta: actions, }); return (

); } 5e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L5f",null,{"namespace":"@cnippet","registryDependencies":["@cnippet/data-table","@cnippet/badge","@cnippet/button","@cnippet/menu","@cnippet/avatar","@cnippet/progress"]}]]}],null]}],["$","$L60",null,{"files":[{"path":"registry/default/variants/v-data-table-7.tsx","content":"$61","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]