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:Td95,// title: Orders with column visibility menu "use client"; import { columnVisibilityFeature, createColumnHelper, createSortedRowModel, rowSortingFeature, sortFn_alphanumeric, tableFeatures, useTable, } from "@tanstack/react-table"; import { Badge } from "@/registry/default/ui/badge"; import { DataTable, DataTableColumnHeader, DataTableViewOptions, } from "@/registry/default/ui/data-table"; type Order = { channel: "Web" | "Mobile" | "Retail"; customer: string; id: string; items: number; region: string; status: "Fulfilled" | "Processing" | "Refunded"; total: number; }; const ORDERS: Order[] = [ { channel: "Web", customer: "Alice Park", id: "#3210", items: 3, region: "US East", status: "Fulfilled", total: 182, }, { channel: "Mobile", customer: "Ben Torres", id: "#3211", items: 1, region: "EU West", status: "Processing", total: 49, }, { channel: "Retail", customer: "Celia Kim", id: "#3212", items: 5, region: "APAC", status: "Fulfilled", total: 410, }, { channel: "Web", customer: "Dan Moss", id: "#3213", items: 2, region: "US West", status: "Refunded", total: 96, }, { channel: "Mobile", customer: "Sofia Reyes", id: "#3214", items: 4, region: "EU West", status: "Processing", total: 238, }, ]; const STATUS_VARIANT = { Fulfilled: "success", Processing: "warning", Refunded: "outline", } as const; const features = tableFeatures({ columnVisibilityFeature, rowSortingFeature, sortedRowModel: createSortedRowModel(), sortFns: { alphanumeric: sortFn_alphanumeric }, }); const column = createColumnHelper(); const columns = column.columns([ column.accessor("id", { cell: (info) => {info.getValue()}, enableHiding: false, header: "Order", }), column.accessor("customer", { header: ({ column }) => ( ), }), column.accessor("channel", { header: "Channel" }), column.accessor("region", { header: "Region" }), column.accessor("items", { cell: (info) => (

{info.getValue()}

), header: () =>

Items

, }), column.accessor("status", { cell: (info) => ( {info.getValue()} ), header: "Status", }), column.accessor("total", { cell: (info) => (

${info.getValue()}

), header: ({ column }) => (

), }), ]); export default function Particle() { const table = useTable({ columns, data: ORDERS, features, // Secondary columns start hidden; the View menu brings them back. initialState: { columnVisibility: { channel: false, region: false } }, }); return (

Recent orders

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