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:T1cd8,// title: Showcase: search, filters, selection, sorting and pagination "use client"; import { columnFacetingFeature, columnFilteringFeature, columnVisibilityFeature, createColumnHelper, createFacetedRowModel, createFacetedUniqueValues, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_arrHas, filterFn_includesString, globalFilteringFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, tableFeatures, useTable, } from "@tanstack/react-table"; import { ArrowDownIcon, ArrowRightIcon, ArrowUpIcon, CircleCheckIcon, CircleDashedIcon, CircleXIcon, TimerIcon, TriangleAlertIcon, XIcon, } from "lucide-react"; import { Badge } from "@/registry/default/ui/badge"; import { Button } from "@/registry/default/ui/button"; import { DataTable, DataTableColumnHeader, DataTableFacetedFilter, type DataTableFilterOption, DataTablePagination, DataTableRowCheckbox, DataTableSearch, DataTableSelectAll, DataTableViewOptions, } from "@/registry/default/ui/data-table"; type Task = { assignee: string; id: string; label: "Bug" | "Feature" | "Docs"; priority: "low" | "medium" | "high" | "urgent"; status: "todo" | "in-progress" | "done" | "canceled"; title: string; }; const STATUSES: DataTableFilterOption[] = [ { icon: CircleDashedIcon, label: "Todo", value: "todo" }, { icon: TimerIcon, label: "In progress", value: "in-progress" }, { icon: CircleCheckIcon, label: "Done", value: "done" }, { icon: CircleXIcon, label: "Canceled", value: "canceled" }, ]; const PRIORITIES: DataTableFilterOption[] = [ { icon: ArrowDownIcon, label: "Low", value: "low" }, { icon: ArrowRightIcon, label: "Medium", value: "medium" }, { icon: ArrowUpIcon, label: "High", value: "high" }, { icon: TriangleAlertIcon, label: "Urgent", value: "urgent" }, ]; const TITLES = [ "Checkout fails for saved cards", "Add CSV export to reports", "Dashboard charts load slowly", "Document the webhooks API", "Rate limit webhook retries", "Dark mode for email templates", "Fix focus ring on dialogs", "Bulk invite from a CSV file", "Typo in onboarding email", "Audit log filters by actor", "Retry failed payouts", "Write the migration guide", ]; const LABELS: Task["label"][] = ["Bug", "Feature", "Docs"]; const ASSIGNEES = ["Alice Park", "Ben Torres", "Celia Kim", "Dan Moss"]; // A deterministic backlog so server and client render the same rows. const TASKS: Task[] = Array.from({ length: 36 }, (_, i) => ({ assignee: ASSIGNEES[(i * 3) % ASSIGNEES.length] ?? "Unassigned", id: `ACM-${400 + i}`, label: LABELS[i % LABELS.length] ?? "Bug", priority: (PRIORITIES[(i + Math.floor(i / 4)) % PRIORITIES.length]?.value ?? "low") as Task["priority"], status: (STATUSES[(i * 3 + Math.floor(i / 5)) % STATUSES.length]?.value ?? "todo") as Task["status"], title: TITLES[(i * 5) % TITLES.length] ?? "Untitled", })); const features = tableFeatures({ columnFacetingFeature, columnFilteringFeature, columnVisibilityFeature, facetedRowModel: createFacetedRowModel(), facetedUniqueValues: createFacetedUniqueValues(), filteredRowModel: createFilteredRowModel(), filterFns: { arrHas: filterFn_arrHas, includesString: filterFn_includesString, }, globalFilteringFeature, paginatedRowModel: createPaginatedRowModel(), rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortedRowModel: createSortedRowModel(), sortFns: { alphanumeric: sortFn_alphanumeric }, }); const column = createColumnHelper(); function OptionCell({ options, value, }: { options: DataTableFilterOption[]; value: string; }) { const option = options.find((o) => o.value === value); if (!option) return null; return ( {option.icon && } {option.label} ); } const columns = column.columns([ column.display({ cell: ({ row }) => ( ), enableHiding: false, header: ({ table }) => , id: "select", }), column.accessor("id", { cell: (info) => ( {info.getValue()} ), enableHiding: false, header: ({ column }) => ( ), }), column.accessor("title", { cell: ({ row }) => (

{row.original.label} {row.original.title}

), enableHiding: false, header: ({ column }) => ( ), }), column.accessor("status", { cell: (info) => , enableGlobalFilter: false, filterFn: "arrHas", header: ({ column }) => ( ), }), column.accessor("priority", { cell: (info) => , enableGlobalFilter: false, filterFn: "arrHas", header: ({ column }) => ( ), }), column.accessor("assignee", { cell: (info) => ( {info.getValue()} ), header: "Assignee", }), ]); export default function Particle() { const table = useTable({ columns, data: TASKS, features, getRowId: (row) => row.id, globalFilterFn: "includesString", initialState: { columnVisibility: { assignee: false }, pagination: { pageIndex: 0, pageSize: 8 }, }, }); const statusColumn = table.getColumn("status"); const priorityColumn = table.getColumn("priority"); const isFiltered = table.state.columnFilters.length > 0 || Boolean(table.state.globalFilter); return (

{statusColumn && ( )} {priorityColumn && ( )} {isFiltered && ( )}

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