4e: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 4f: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50:T7127,"use client" import * as React from "react" import { sortFn_datetime, type ColumnDef, type ColumnFiltersState, type SortingState, flexRender, tableFeatures, useTable, createSortedRowModel, rowSortingFeature, columnFilteringFeature, createFilteredRowModel, createPaginatedRowModel, rowPaginationFeature, rowSelectionFeature, columnVisibilityFeature, type ColumnVisibilityState, } from "@tanstack/react-table" const TABLE_FEATURES = tableFeatures({ rowSortingFeature, columnFilteringFeature, rowPaginationFeature, rowSelectionFeature, columnVisibilityFeature, sortedRowModel: createSortedRowModel(), filteredRowModel: createFilteredRowModel(), paginatedRowModel: createPaginatedRowModel(), sortFns: { datetime: sortFn_datetime, }, }) import { toast } from "sonner" import { cn } from "@/lib/utils" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { Toaster } from "@/components/ui/sonner" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" import { IconPlaceholder } from "@/components/icons/icon-placeholder" type Status = "Active" | "Invited" | "Inactive" type Role = "Admin" | "Editor" | "Viewer" type Member = { id: string name: string initials: string avatar: string email: string status: Status role: Role joined: string } const statusVariant: Record = { Active: "default", Invited: "secondary", Inactive: "outline", } const roleClass: Record = { Admin: "text-foreground font-medium", Editor: "text-muted-foreground", Viewer: "text-muted-foreground", } const COLUMN_LABELS: Record = { name: "Member", status: "Status", role: "Role", joined: "Joined", } const members: Member[] = [ { id: "m-01", name: "Ada Lovelace", initials: "AL", avatar: "https://i.pravatar.cc/80?img=47", email: "ada@acme.io", status: "Active", role: "Admin", joined: "2026-06-12", }, { id: "m-02", name: "Alan Turing", initials: "AT", avatar: "https://i.pravatar.cc/80?img=11", email: "alan@acme.io", status: "Active", role: "Editor", joined: "2026-06-10", }, { id: "m-03", name: "Grace Hopper", initials: "GH", avatar: "https://i.pravatar.cc/80?img=45", email: "grace@acme.io", status: "Invited", role: "Editor", joined: "2026-06-08", }, { id: "m-04", name: "Linus Pauling", initials: "LP", avatar: "https://i.pravatar.cc/80?img=12", email: "linus@acme.io", status: "Inactive", role: "Viewer", joined: "2026-05-29", }, { id: "m-05", name: "Katherine Johnson", initials: "KJ", avatar: "https://i.pravatar.cc/80?img=49", email: "katherine@acme.io", status: "Active", role: "Viewer", joined: "2026-05-21", }, { id: "m-06", name: "Edsger Dijkstra", initials: "ED", avatar: "https://i.pravatar.cc/80?img=13", email: "edsger@acme.io", status: "Active", role: "Admin", joined: "2026-05-18", }, { id: "m-07", name: "Barbara Liskov", initials: "BL", avatar: "https://i.pravatar.cc/80?img=44", email: "barbara@acme.io", status: "Active", role: "Editor", joined: "2026-05-14", }, { id: "m-08", name: "Tim Berners-Lee", initials: "TB", avatar: "https://i.pravatar.cc/80?img=14", email: "tim@acme.io", status: "Invited", role: "Viewer", joined: "2026-05-09", }, { id: "m-09", name: "Margaret Hamilton", initials: "MH", avatar: "https://i.pravatar.cc/80?img=48", email: "margaret@acme.io", status: "Active", role: "Editor", joined: "2026-05-04", }, { id: "m-10", name: "Donald Knuth", initials: "DK", avatar: "https://i.pravatar.cc/80?img=15", email: "donald@acme.io", status: "Inactive", role: "Viewer", joined: "2026-04-28", }, { id: "m-11", name: "Radia Perlman", initials: "RP", avatar: "https://i.pravatar.cc/80?img=43", email: "radia@acme.io", status: "Active", role: "Admin", joined: "2026-04-22", }, { id: "m-12", name: "Ken Thompson", initials: "KT", avatar: "https://i.pravatar.cc/80?img=16", email: "ken@acme.io", status: "Active", role: "Editor", joined: "2026-04-19", }, { id: "m-13", name: "Hedy Lamarr", initials: "HL", avatar: "https://i.pravatar.cc/80?img=41", email: "hedy@acme.io", status: "Invited", role: "Viewer", joined: "2026-04-15", }, { id: "m-14", name: "Dennis Ritchie", initials: "DR", avatar: "https://i.pravatar.cc/80?img=17", email: "dennis@acme.io", status: "Active", role: "Editor", joined: "2026-04-11", }, { id: "m-15", name: "Shafi Goldwasser", initials: "SG", avatar: "https://i.pravatar.cc/80?img=40", email: "shafi@acme.io", status: "Active", role: "Viewer", joined: "2026-04-07", }, { id: "m-16", name: "John McCarthy", initials: "JM", avatar: "https://i.pravatar.cc/80?img=18", email: "john@acme.io", status: "Inactive", role: "Viewer", joined: "2026-04-02", }, { id: "m-17", name: "Frances Allen", initials: "FA", avatar: "https://i.pravatar.cc/80?img=39", email: "frances@acme.io", status: "Active", role: "Admin", joined: "2026-03-29", }, { id: "m-18", name: "Vint Cerf", initials: "VC", avatar: "https://i.pravatar.cc/80?img=19", email: "vint@acme.io", status: "Active", role: "Editor", joined: "2026-03-24", }, { id: "m-19", name: "Adele Goldberg", initials: "AG", avatar: "https://i.pravatar.cc/80?img=38", email: "adele@acme.io", status: "Invited", role: "Viewer", joined: "2026-03-20", }, { id: "m-20", name: "Bjarne Stroustrup", initials: "BS", avatar: "https://i.pravatar.cc/80?img=20", email: "bjarne@acme.io", status: "Active", role: "Editor", joined: "2026-03-16", }, { id: "m-21", name: "Karen Spärck Jones", initials: "KS", avatar: "https://i.pravatar.cc/80?img=36", email: "karen@acme.io", status: "Active", role: "Viewer", joined: "2026-03-11", }, { id: "m-22", name: "Brian Kernighan", initials: "BK", avatar: "https://i.pravatar.cc/80?img=51", email: "brian@acme.io", status: "Inactive", role: "Viewer", joined: "2026-03-06", }, { id: "m-23", name: "Sophie Wilson", initials: "SW", avatar: "https://i.pravatar.cc/80?img=35", email: "sophie@acme.io", status: "Active", role: "Editor", joined: "2026-03-01", }, { id: "m-24", name: "Guido van Rossum", initials: "GR", avatar: "https://i.pravatar.cc/80?img=52", email: "guido@acme.io", status: "Active", role: "Admin", joined: "2026-02-24", }, { id: "m-25", name: "Lynn Conway", initials: "LC", avatar: "https://i.pravatar.cc/80?img=34", email: "lynn@acme.io", status: "Invited", role: "Viewer", joined: "2026-02-19", }, { id: "m-26", name: "Ralph Merkle", initials: "RM", avatar: "https://i.pravatar.cc/80?img=53", email: "ralph@acme.io", status: "Active", role: "Editor", joined: "2026-02-13", }, { id: "m-27", name: "Carol Shaw", initials: "CS", avatar: "https://i.pravatar.cc/80?img=32", email: "carol@acme.io", status: "Active", role: "Viewer", joined: "2026-02-08", }, { id: "m-28", name: "Niklaus Wirth", initials: "NW", avatar: "https://i.pravatar.cc/80?img=54", email: "niklaus@acme.io", status: "Inactive", role: "Viewer", joined: "2026-02-02", }, { id: "m-29", name: "Mary Allen Wilkes", initials: "MW", avatar: "https://i.pravatar.cc/80?img=31", email: "mary@acme.io", status: "Active", role: "Admin", joined: "2026-01-27", }, { id: "m-30", name: "Leslie Lamport", initials: "LL", avatar: "https://i.pravatar.cc/80?img=55", email: "leslie@acme.io", status: "Active", role: "Editor", joined: "2026-01-21", }, ] const dateFmt = new Intl.DateTimeFormat("en-US", { month: "short", day: "2-digit", year: "numeric", }) function formatDate(value: string) { const parsed = new Date(value) return Number.isNaN(parsed.getTime()) ? value : dateFmt.format(parsed) } function SortIcon({ sorted }: { sorted: false | "asc" | "desc" }) { if (sorted === "asc") return ( ) if (sorted === "desc") return ( ) return ( ) } const columns: ColumnDef[] = [ { id: "select", enableSorting: false, enableHiding: false, header: ({ table }) => ( table.toggleAllPageRowsSelected(checked === true) } aria-label="Select all members on this page" /> ), cell: ({ row }) => ( row.toggleSelected(checked === true)} aria-label={`Select ${row.original.name}`} /> ), }, { accessorKey: "name", header: ({ column }) => ( ), filterFn: (row, _id, value: string) => { const q = value.toLowerCase() return ( row.original.name.toLowerCase().includes(q) || row.original.email.toLowerCase().includes(q) ) }, cell: ({ row }) => { const member = row.original return (

{member.initials}

{member.name}

{member.email}

) }, }, { accessorKey: "status", enableSorting: false, header: () => ( Status ), cell: ({ row }) => ( {row.original.status} ), }, { accessorKey: "role", header: ({ column }) => ( ), cell: ({ row }) => ( {row.original.role} ), }, { accessorKey: "joined", sortFn: "datetime", header: ({ column }) => ( ), cell: ({ row }) => ( {formatDate(row.original.joined)} ), }, { id: "actions", enableSorting: false, enableHiding: false, header: () => Actions, cell: ({ row }) => (

), }, ] export default function TableBlock() { const [sorting, setSorting] = React.useState([ { id: "joined", desc: true }, ]) const [columnFilters, setColumnFilters] = React.useState( [] ) const [columnVisibility, setColumnVisibility] = React.useState({}) const [rowSelection, setRowSelection] = React.useState({}) const [data, setData] = React.useState(members) const table = useTable({ features: TABLE_FEATURES, data, columns, getRowId: (row) => row.id, state: { sorting, columnFilters, columnVisibility, rowSelection }, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, onColumnVisibilityChange: setColumnVisibility, onRowSelectionChange: setRowSelection, initialState: { pagination: { pageIndex: 0, pageSize: 6 } }, }) const nameFilter = (table.getColumn("name")?.getFilterValue() as string) ?? "" const selectedCount = table.getFilteredSelectedRowModel().rows.length const totalCount = table.getFilteredRowModel().rows.length const pageCount = table.getPageCount() function handleRemove() { const selectedIds = new Set( table.getFilteredSelectedRowModel().rows.map((row) => row.id) ) setData((prev) => prev.filter((row) => !selectedIds.has(row.id))) table.resetRowSelection() toast("Members removed", { description: `${selectedIds.size} ${ selectedIds.size === 1 ? "member" : "members" } removed from the workspace.`, }) } return (

Team Members

{data.length} members across 3 workspaces

View } /> Toggle Columns {table .getAllColumns() .filter((column) => column.getCanHide()) .map((column) => ( column.toggleVisibility(checked === true) } closeOnClick={false} > {COLUMN_LABELS[column.id] ?? column.id} ))}

{selectedCount > 0 && (

{selectedCount} Selected

)}

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext() )} ))} ))} {table.getRowModel().rows.length ? ( table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( {flexRender( cell.column.columnDef.cell, cell.getContext() )} ))} )) ) : ( No members match your search. )}

{totalCount}{" "} {totalCount === 1 ? "Result" : "Results"}

Page {table.state.pagination.pageIndex + 1} of{" "} {Math.max(pageCount, 1)}

) } 4d:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tanstack/react-table",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-table","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-table"}]]}]}],["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@7ovr","registryDependencies":["avatar","badge","button","checkbox","dropdown-menu","input","sonner","table"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blocks/table/1/table-block.tsx","content":"$50","type":"registry:component","target":"components/blocks/table-1.tsx"}],"className":"h-[70svh] min-h-80"}]]}]