{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "table-20", "title": "Complete data table", "description": "Filters, column toggles, row actions, bulk delete and pagination together.", "dependencies": [ "@tanstack/react-table", "motion" ], "registryDependencies": [ "https://ui.ndekocode.dev/r/alert-dialog.json", "https://ui.ndekocode.dev/r/badge.json", "https://ui.ndekocode.dev/r/button.json", "https://ui.ndekocode.dev/r/checkbox.json", "https://ui.ndekocode.dev/r/dropdown-menu.json", "https://ui.ndekocode.dev/r/icons.json", "https://ui.ndekocode.dev/r/input.json", "https://ui.ndekocode.dev/r/kbd.json", "https://ui.ndekocode.dev/r/label.json", "https://ui.ndekocode.dev/r/motion-number.json", "https://ui.ndekocode.dev/r/pagination.json", "https://ui.ndekocode.dev/r/popover.json", "https://ui.ndekocode.dev/r/select.json", "https://ui.ndekocode.dev/r/table.json", "https://ui.ndekocode.dev/r/theme.json", "https://ui.ndekocode.dev/r/use-prefers-reduced-motion.json", "https://ui.ndekocode.dev/r/utils.json" ], "files": [ { "path": "registry/ndeko/components/table/table-20.tsx", "content": "'use client';\n\nimport {\n type Column,\n type ColumnDef,\n type ColumnFiltersState,\n type FilterFn,\n flexRender,\n getCoreRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n type Header,\n type PaginationState,\n type Row,\n type SortDirection,\n type SortingState,\n useReactTable,\n type VisibilityState,\n} from '@tanstack/react-table';\nimport {\n AnimatePresence,\n motion,\n type Transition,\n type Variants,\n} from 'motion/react';\nimport { createContext, useContext, useId, useRef, useState } from 'react';\n\nimport { MotionNumber } from '@/components/core/motion-number';\nimport { usePrefersReducedMotion } from '@/registry/ndeko/hooks/use-prefers-reduced-motion';\nimport {\n ChevronDownIcon,\n ChevronFirstIcon,\n ChevronLastIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronsUpDownIcon,\n ChevronUpIcon,\n CircleAlertIcon,\n CircleXIcon,\n Columns3Icon,\n EllipsisIcon,\n FilterIcon,\n ListFilterIcon,\n PlusIcon,\n TrashIcon,\n} from '@/registry/ndeko/lib/icons';\nimport { cn } from '@/registry/ndeko/lib/utils';\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from '@/registry/ndeko/ui/alert-dialog';\nimport { Badge } from '@/registry/ndeko/ui/badge';\nimport { Button } from '@/registry/ndeko/ui/button';\nimport { Checkbox } from '@/registry/ndeko/ui/checkbox';\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from '@/registry/ndeko/ui/dropdown-menu';\nimport { Input } from '@/registry/ndeko/ui/input';\nimport { Kbd, KbdGroup } from '@/registry/ndeko/ui/kbd';\nimport { Label } from '@/registry/ndeko/ui/label';\nimport {\n Pagination,\n PaginationContent,\n PaginationItem,\n} from '@/registry/ndeko/ui/pagination';\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from '@/registry/ndeko/ui/popover';\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from '@/registry/ndeko/ui/select';\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '@/registry/ndeko/ui/table';\n\ntype Status = 'Active' | 'Inactive' | 'Pending';\n\ntype Account = {\n id: string;\n name: string;\n email: string;\n location: string;\n status: Status;\n balance: number;\n};\n\nconst STATUS_VARIANTS = {\n Active: 'success',\n Inactive: 'secondary',\n Pending: 'warning',\n} as const;\n\nconst ACCOUNTS: Account[] = [\n {\n id: '1',\n name: 'Jordan Hayes',\n email: 'jordan.hayes@example.com',\n location: 'Toronto, Canada',\n status: 'Active',\n balance: 1250,\n },\n {\n id: '2',\n name: 'Anna Novak',\n email: 'anna.novak@example.com',\n location: 'Prague, Czechia',\n status: 'Active',\n balance: 600,\n },\n {\n id: '3',\n name: 'Kenji Watanabe',\n email: 'kenji.watanabe@example.com',\n location: 'Osaka, Japan',\n status: 'Inactive',\n balance: 650,\n },\n {\n id: '4',\n name: 'Lina Haddad',\n email: 'lina.haddad@example.com',\n location: 'Lyon, France',\n status: 'Active',\n balance: 0,\n },\n {\n id: '5',\n name: 'Ama Mensah',\n email: 'ama.mensah@example.com',\n location: 'Accra, Ghana',\n status: 'Pending',\n balance: -1000,\n },\n {\n id: '6',\n name: 'Mateo Rossi',\n email: 'mateo.rossi@example.com',\n location: 'Turin, Italy',\n status: 'Active',\n balance: 1500,\n },\n {\n id: '7',\n name: 'Priya Raman',\n email: 'priya.raman@example.com',\n location: 'Bengaluru, India',\n status: 'Inactive',\n balance: 200,\n },\n {\n id: '8',\n name: 'Lucas Meyer',\n email: 'lucas.meyer@example.com',\n location: 'Hamburg, Germany',\n status: 'Active',\n balance: 1000,\n },\n {\n id: '9',\n name: 'Sofia Lindqvist',\n email: 'sofia.lindqvist@example.com',\n location: 'Malmö, Sweden',\n status: 'Active',\n balance: 500,\n },\n {\n id: '10',\n name: 'Daniel Okafor',\n email: 'daniel.okafor@example.com',\n location: 'Lagos, Nigeria',\n status: 'Inactive',\n balance: 300,\n },\n {\n id: '11',\n name: 'Mei Lin',\n email: 'mei.lin@example.com',\n location: 'Taipei, Taiwan',\n status: 'Active',\n balance: 800,\n },\n {\n id: '12',\n name: 'Omar Farouk',\n email: 'omar.farouk@example.com',\n location: 'Cairo, Egypt',\n status: 'Active',\n balance: 1200,\n },\n {\n id: '13',\n name: 'Clara Duarte',\n email: 'clara.duarte@example.com',\n location: 'Porto, Portugal',\n status: 'Pending',\n balance: 400,\n },\n {\n id: '14',\n name: 'Noah Becker',\n email: 'noah.becker@example.com',\n location: 'Zurich, Switzerland',\n status: 'Inactive',\n balance: 600,\n },\n {\n id: '15',\n name: 'Hana Kim',\n email: 'hana.kim@example.com',\n location: 'Busan, South Korea',\n status: 'Active',\n balance: 1800,\n },\n {\n id: '16',\n name: 'Ethan Brooks',\n email: 'ethan.brooks@example.com',\n location: 'Denver, United States',\n status: 'Active',\n balance: 950,\n },\n {\n id: '17',\n name: 'Yara Nasser',\n email: 'yara.nasser@example.com',\n location: 'Amman, Jordan',\n status: 'Pending',\n balance: 150,\n },\n {\n id: '18',\n name: 'Felix Wagner',\n email: 'felix.wagner@example.com',\n location: 'Vienna, Austria',\n status: 'Active',\n balance: 2100,\n },\n {\n id: '19',\n name: 'Aiko Tanaka',\n email: 'aiko.tanaka@example.com',\n location: 'Kyoto, Japan',\n status: 'Inactive',\n balance: 0,\n },\n {\n id: '20',\n name: 'Samuel Mukendi',\n email: 'samuel.mukendi@example.com',\n location: 'Kinshasa, DR Congo',\n status: 'Active',\n balance: 700,\n },\n];\n\nconst CURRENCY = new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n});\n\nconst FIGURE_COLUMNS = new Set(['balance']);\n\nconst PAGE_SIZES = [\n { value: 5, label: '5' },\n { value: 10, label: '10' },\n { value: 25, label: '25' },\n { value: 50, label: '50' },\n];\n\nconst INITIAL_PAGINATION: PaginationState = { pageIndex: 0, pageSize: 10 };\n\nconst SWAP_TRANSITION: Transition = { duration: 0.15, ease: [0.2, 0, 0, 1] };\n\nconst GLYPH_VARIANTS: Variants = {\n enter: { opacity: 0, scale: 0.6, filter: 'blur(2px)' },\n visible: { opacity: 1, scale: 1, filter: 'blur(0px)' },\n exit: { opacity: 0, scale: 0.6, filter: 'blur(2px)' },\n};\n\nconst FADE_VARIANTS: Variants = {\n enter: { opacity: 0 },\n visible: { opacity: 1 },\n exit: { opacity: 0 },\n};\n\nconst STATUSES: Status[] = ['Active', 'Inactive', 'Pending'];\n\nconst COUNT_BADGE =\n 'keycap-3d text-muted-foreground -me-1 inline-flex h-5 min-w-5 items-center justify-center overflow-hidden rounded-[5px] px-1 text-[11px] font-medium tabular-nums';\n\nconst PRESENCE_VARIANTS: Variants = {\n hidden: {\n opacity: 0,\n scale: 0.9,\n filter: 'blur(2px)',\n transition: { duration: 0.12, ease: [0.23, 1, 0.32, 1] },\n },\n shown: {\n opacity: 1,\n scale: 1,\n filter: 'blur(0px)',\n transition: { duration: 0.18, ease: [0.23, 1, 0.32, 1] },\n },\n};\n\nconst PRESENCE_FADE_VARIANTS: Variants = {\n hidden: { opacity: 0, transition: { duration: 0.12 } },\n shown: { opacity: 1, transition: { duration: 0.18 } },\n};\n\nconst DeleteAccountContext = createContext<(id: string) => void>(() => {});\n\nconst matchesNameOrEmail: FilterFn = (row, _columnId, filterValue) => {\n const content = `${row.original.name} ${row.original.email}`;\n const searchableContent = content.toLowerCase();\n const searchTerm = String(filterValue ?? '').toLowerCase();\n return searchableContent.includes(searchTerm);\n};\n\nconst matchesStatuses: FilterFn = (row, columnId, filterValue) => {\n const statuses: string[] = filterValue ?? [];\n if (statuses.length === 0) {\n return true;\n }\n const status = row.getValue(columnId);\n return statuses.includes(status);\n};\n\nfunction Shortcut({ keys }: { keys: string[] }) {\n return (\n \n \n {keys.map((key) => (\n {key}\n ))}\n \n \n );\n}\n\nfunction RowActions({ row }: { row: Row }) {\n const deleteAccount = useContext(DeleteAccountContext);\n\n return (\n
\n \n \n }\n >\n \n \n \n \n \n Edit\n \n \n \n Duplicate\n \n \n \n \n \n \n Archive\n \n \n \n More\n \n Move to project\n Move to folder\n \n Advanced options\n \n \n \n \n \n Share\n Add to favorites\n \n \n {\n deleteAccount(row.original.id);\n }}\n >\n Delete\n \n \n \n \n
\n );\n}\n\nconst COLUMNS: ColumnDef[] = [\n {\n id: 'select',\n header: ({ table }) => (\n {\n table.toggleAllPageRowsSelected(checked);\n }}\n aria-label='Select all rows on this page'\n />\n ),\n cell: ({ row }) => (\n {\n row.toggleSelected(checked);\n }}\n aria-label={`Select ${row.original.name}`}\n />\n ),\n size: 28,\n enableSorting: false,\n enableHiding: false,\n },\n {\n header: 'Name',\n accessorKey: 'name',\n cell: ({ row }) => {row.original.name},\n size: 180,\n filterFn: matchesNameOrEmail,\n enableHiding: false,\n },\n {\n header: 'Email',\n accessorKey: 'email',\n cell: ({ row }) => (\n {row.original.email}\n ),\n size: 220,\n },\n {\n header: 'Location',\n accessorKey: 'location',\n size: 180,\n },\n {\n header: 'Status',\n accessorKey: 'status',\n cell: ({ row }) => (\n \n {row.original.status}\n \n ),\n size: 110,\n filterFn: matchesStatuses,\n },\n {\n header: 'Balance',\n accessorKey: 'balance',\n cell: ({ row }) => CURRENCY.format(row.original.balance),\n size: 120,\n },\n {\n id: 'actions',\n header: () => Actions,\n cell: ({ row }) => ,\n size: 56,\n enableSorting: false,\n enableHiding: false,\n },\n];\n\nfunction isFigureColumn(columnId: string) {\n return FIGURE_COLUMNS.has(columnId);\n}\n\nfunction alignClassOf(columnId: string) {\n if (isFigureColumn(columnId)) {\n return 'text-right tabular-nums';\n }\n return 'truncate';\n}\n\nfunction sortButtonOrderOf(columnId: string) {\n if (isFigureColumn(columnId)) {\n return 'flex-row-reverse';\n }\n return undefined;\n}\n\nfunction rowStateOf(isSelected: boolean) {\n if (isSelected) {\n return 'selected';\n }\n return undefined;\n}\n\nfunction ariaSortOf(column: Column) {\n if (!column.getCanSort()) {\n return undefined;\n }\n const direction = column.getIsSorted();\n if (direction === 'asc') {\n return 'ascending';\n }\n if (direction === 'desc') {\n return 'descending';\n }\n return 'none';\n}\n\nfunction glyphVariantsOf(shouldReduceMotion: boolean | null) {\n if (shouldReduceMotion) {\n return FADE_VARIANTS;\n }\n return GLYPH_VARIANTS;\n}\n\nfunction sortGlyphOf(direction: false | SortDirection) {\n if (direction === 'asc') {\n return {\n key: 'asc',\n icon: ,\n };\n }\n if (direction === 'desc') {\n return {\n key: 'desc',\n icon: ,\n };\n }\n return {\n key: 'none',\n icon: ,\n };\n}\n\nfunction rangeOf(pagination: PaginationState, rowCount: number) {\n const rowsBefore = pagination.pageIndex * pagination.pageSize;\n const firstOfPage = rowsBefore + 1;\n const firstRow = Math.min(firstOfPage, rowCount);\n const lastOfPage = rowsBefore + pagination.pageSize;\n const lastRow = Math.min(lastOfPage, rowCount);\n return { firstRow, lastRow };\n}\n\nfunction SortGlyph({ direction }: { direction: false | SortDirection }) {\n const shouldReduceMotion = usePrefersReducedMotion();\n const variants = glyphVariantsOf(shouldReduceMotion);\n const glyph = sortGlyphOf(direction);\n\n return (\n \n );\n}\n\nfunction HeadContent({ header }: { header: Header }) {\n if (header.isPlaceholder) {\n return null;\n }\n const label = flexRender(header.column.columnDef.header, header.getContext());\n if (!header.column.getCanSort()) {\n return label;\n }\n return (\n \n {label}\n \n \n );\n}\n\nfunction labelOf(column: Column) {\n const header = column.columnDef.header;\n if (typeof header === 'string') {\n return header;\n }\n return column.id;\n}\n\nfunction statusesOf(value: unknown): string[] {\n if (Array.isArray(value)) {\n return value;\n }\n return [];\n}\n\nfunction accountCountLabel(count: number) {\n if (count === 1) {\n return '1 account';\n }\n return `${count} accounts`;\n}\n\nfunction presenceVariantsOf(shouldReduceMotion: boolean | null) {\n if (shouldReduceMotion) {\n return PRESENCE_FADE_VARIANTS;\n }\n return PRESENCE_VARIANTS;\n}\n\nfunction NameFilter({ column }: { column: Column | undefined }) {\n const id = useId();\n const inputRef = useRef(null);\n const shouldReduceMotion = usePrefersReducedMotion();\n const variants = presenceVariantsOf(shouldReduceMotion);\n if (!column) {\n return null;\n }\n const value = String(column.getFilterValue() ?? '');\n const hasValue = value !== '';\n\n function clearFilter() {\n column?.setFilterValue('');\n inputRef.current?.focus();\n }\n\n return (\n
\n {\n column.setFilterValue(event.currentTarget.value);\n }}\n placeholder='Filter by name or email'\n aria-label='Filter by name or email'\n />\n \n \n \n {hasValue && (\n \n \n \n \n \n )}\n \n
\n );\n}\n\nfunction StatusFilter({ column }: { column: Column | undefined }) {\n const id = useId();\n if (!column) {\n return null;\n }\n const selectedStatuses = statusesOf(column.getFilterValue());\n const statusCounts = column.getFacetedUniqueValues();\n const selectedCount = selectedStatuses.length;\n const hasSelection = selectedCount > 0;\n\n function changeStatus(status: string, checked: boolean) {\n const others = selectedStatuses.filter((value) => value !== status);\n const next = [...others];\n if (checked) {\n next.push(status);\n }\n const hasNext = next.length > 0;\n if (!hasNext) {\n column?.setFilterValue(undefined);\n return;\n }\n column?.setFilterValue(next);\n }\n\n return (\n \n }>\n \n Status\n {hasSelection && (\n \n \n \n )}\n \n \n
\n \n Filter by status\n \n {STATUSES.map((status) => {\n const checkboxId = `${id}-${status}`;\n const count = statusCounts.get(status) ?? 0;\n return (\n
\n {\n changeStatus(status, checked);\n }}\n />\n \n {status}\n \n {count}\n \n \n
\n );\n })}\n
\n \n \n );\n}\n\nfunction ColumnToggles({ columns }: { columns: Column[] }) {\n return (\n \n }>\n \n View\n \n \n Columns\n {columns.map((column) => (\n {\n column.toggleVisibility(checked);\n }}\n >\n {labelOf(column)}\n \n ))}\n \n \n );\n}\n\nfunction DeleteSelected({\n count,\n onConfirm,\n}: {\n count: number;\n onConfirm: () => void;\n}) {\n const accounts = accountCountLabel(count);\n\n return (\n \n }>\n \n Delete\n \n \n \n \n \n
\n
\n \n Cancel\n \n Delete {accounts}\n \n \n \n \n );\n}\n\nexport default function Table20() {\n const pageSizeId = useId();\n const [accounts, setAccounts] = useState(ACCOUNTS);\n const [sorting, setSorting] = useState([\n { id: 'name', desc: false },\n ]);\n const [columnFilters, setColumnFilters] = useState([]);\n const [columnVisibility, setColumnVisibility] = useState({});\n const [pagination, setPagination] =\n useState(INITIAL_PAGINATION);\n const shouldReduceMotion = usePrefersReducedMotion();\n const presenceVariants = presenceVariantsOf(shouldReduceMotion);\n\n function deleteAccount(id: string) {\n setAccounts((current) => current.filter((account) => account.id !== id));\n }\n\n // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Table v8 is required and cannot be memoized by the React Compiler.\n const table = useReactTable({\n data: accounts,\n columns: COLUMNS,\n getRowId: (account) => account.id,\n state: { sorting, pagination, columnFilters, columnVisibility },\n onSortingChange: setSorting,\n onPaginationChange: setPagination,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n getPaginationRowModel: getPaginationRowModel(),\n enableSortingRemoval: false,\n });\n const rows = table.getRowModel().rows;\n const hasRows = rows.length > 0;\n const rowCount = table.getRowCount();\n const { firstRow, lastRow } = rangeOf(pagination, rowCount);\n const canGoBack = table.getCanPreviousPage();\n const canGoForward = table.getCanNextPage();\n const selectedRows = table.getSelectedRowModel().rows;\n const selectedCount = selectedRows.length;\n const hasSelection = selectedCount > 0;\n const hideableColumns = table\n .getAllColumns()\n .filter((column) => column.getCanHide());\n const visibleColumnCount = table.getVisibleLeafColumns().length;\n\n function deleteSelected() {\n const selectedIds = selectedRows.map((row) => row.original.id);\n setAccounts((current) =>\n current.filter((account) => !selectedIds.includes(account.id))\n );\n table.resetRowSelection();\n }\n\n function clearFilters() {\n table.resetColumnFilters();\n }\n\n function changePageSize(size: number | null) {\n if (size === null) {\n return;\n }\n table.setPageSize(size);\n }\n\n return (\n \n
\n
\n
\n \n \n \n
\n
\n \n {hasSelection && (\n \n \n \n )}\n \n \n
\n
\n
\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => (\n \n \n \n ))}\n \n ))}\n \n \n {rows.map((row) => (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n \n ))}\n \n ))}\n {!hasRows && (\n \n \n
\n \n No accounts match these filters.\n \n \n
\n \n \n )}\n \n
\n
\n
\n
\n \n \n \n \n \n \n {PAGE_SIZES.map((size) => (\n \n {size.label}\n \n ))}\n \n \n
\n \n \n Showing rows {firstRow} to {lastRow} of {rowCount}\n \n \n

\n \n \n \n {\n table.firstPage();\n }}\n disabled={!canGoBack}\n aria-label='Go to first page'\n >\n \n \n \n \n {\n table.previousPage();\n }}\n disabled={!canGoBack}\n aria-label='Go to previous page'\n >\n \n \n \n \n {\n table.nextPage();\n }}\n disabled={!canGoForward}\n aria-label='Go to next page'\n >\n \n \n \n \n {\n table.lastPage();\n }}\n disabled={!canGoForward}\n aria-label='Go to last page'\n >\n \n \n \n \n \n
\n
\n \n );\n}\n", "type": "registry:component" } ], "categories": [ "components", "table" ], "type": "registry:component" }