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:T1266,// title: Team members with row selection and bulk actions "use client"; import { createColumnHelper, rowSelectionFeature, tableFeatures, useTable, } from "@tanstack/react-table"; import { MailIcon, UserMinusIcon, XIcon } from "lucide-react"; import { useState } from "react"; import { Avatar, AvatarFallback } from "@/registry/default/ui/avatar"; import { Badge } from "@/registry/default/ui/badge"; import { Button } from "@/registry/default/ui/button"; import { DataTable, DataTableRowCheckbox, DataTableSelectAll, } from "@/registry/default/ui/data-table"; type Member = { email: string; id: string; initials: string; name: string; role: "Owner" | "Admin" | "Member"; }; const MEMBERS: Member[] = [ { email: "alice@acme.dev", id: "u1", initials: "AP", name: "Alice Park", role: "Owner", }, { email: "ben@acme.dev", id: "u2", initials: "BT", name: "Ben Torres", role: "Admin", }, { email: "celia@acme.dev", id: "u3", initials: "CK", name: "Celia Kim", role: "Member", }, { email: "dan@acme.dev", id: "u4", initials: "DM", name: "Dan Moss", role: "Member", }, { email: "sofia@acme.dev", id: "u5", initials: "SR", name: "Sofia Reyes", role: "Member", }, { email: "priya@acme.dev", id: "u6", initials: "PS", name: "Priya Shah", role: "Admin", }, ]; const features = tableFeatures({ rowSelectionFeature }); const column = createColumnHelper(); const columns = column.columns([ column.display({ cell: ({ row }) => ( ), header: ({ table }) => , id: "select", }), column.accessor("name", { cell: ({ row }) => (

{row.original.initials}

{row.original.name} {row.original.email}

), header: "Member", }), column.accessor("role", { cell: (info) => ( {info.getValue()} ), header: "Role", }), ]); export default function Particle() { const [members, setMembers] = useState(MEMBERS); const table = useTable({ columns, data: members, // The owner can't be removed, so their row isn't selectable. enableRowSelection: (row) => row.original.role !== "Owner", features, getRowId: (row) => row.id, }); const selectedIds = Object.keys(table.state.rowSelection); const removeSelected = () => { setMembers((prev) => prev.filter((m) => !selectedIds.includes(m.id))); // Selection is separate state; clear it along with the rows. table.resetRowSelection(true); }; return (

{selectedIds.length > 0 ? ( <> {selectedIds.length} selected

) : ( {members.length} members · Shift-click to select a range )}

setMembers(MEMBERS)} size="sm" variant="outline" > Restore members } table={table} />

); } 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-3.tsx","content":"$61","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]