50: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"] 51:T50b7,"use client"; import * as React from "react"; import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, type ColumnDef, type ColumnFiltersState, type ExpandedState, type RowSelectionState, type SortingState, type VisibilityState } from "@tanstack/react-table"; import { ArrowUpDown, ChevronDown, ChevronRight, ColumnsIcon, MoreHorizontal, SearchIcon, Trash2, Download, Copy, FileText } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { InputGroup, InputGroupInput, InputGroupAddon } from "@/components/ui/input-group"; function formatCurrency(amount: number, currency = "USD") { return new Intl.NumberFormat("en-US", { style: "currency", currency }).format(amount); } const data = [ { id: "ord_m5gr84i9", orderNumber: "SO-1001", status: "processing", createdAt: "2024-01-15", customer: { name: "Ken Adams", email: "ken99@example.com" }, payment: { method: "Card", last4: "4242", status: "paid" }, shipping: { method: "Standard", address: "123 Main St, New York, NY" }, totals: { currency: "USD", subtotal: 316, shipping: 12, tax: 24, total: 352 }, items: [ { sku: "SKU-001", name: "Starter Kit", quantity: 1, unitPrice: 199 }, { sku: "SKU-014", name: "Pro Components Pack", quantity: 1, unitPrice: 117 } ] }, { id: "ord_3u1reuv4", orderNumber: "SO-1002", status: "fulfilled", createdAt: "2024-01-16", customer: { name: "Abe Stone", email: "abe45@example.com" }, payment: { method: "PayPal", last4: null, status: "paid" }, shipping: { method: "Express", address: "456 Oak Ave, Los Angeles, CA" }, totals: { currency: "USD", subtotal: 242, shipping: 18, tax: 19, total: 279 }, items: [{ sku: "SKU-008", name: "Marketing Blocks Bundle", quantity: 1, unitPrice: 242 }] }, { id: "ord_derv1ws0", orderNumber: "SO-1003", status: "pending", createdAt: "2024-01-17", customer: { name: "Monserrat Lee", email: "monserrat44@example.com" }, payment: { method: "Card", last4: "0101", status: "unpaid" }, shipping: { method: "Standard", address: "789 Pine Rd, Chicago, IL" }, totals: { currency: "USD", subtotal: 837, shipping: 0, tax: 67, total: 904 }, items: [ { sku: "SKU-021", name: "Ecommerce Blocks", quantity: 1, unitPrice: 399 }, { sku: "SKU-033", name: "Dashboard Template", quantity: 1, unitPrice: 438 } ] }, { id: "ord_5kma53ae", orderNumber: "SO-1004", status: "fulfilled", createdAt: "2024-01-18", customer: { name: "Silas Chen", email: "silas22@example.com" }, payment: { method: "Card", last4: "7284", status: "paid" }, shipping: { method: "Standard", address: "321 Elm St, Houston, TX" }, totals: { currency: "USD", subtotal: 874, shipping: 14, tax: 71, total: 959 }, items: [ { sku: "SKU-055", name: "Full UI Kit", quantity: 1, unitPrice: 599 }, { sku: "SKU-089", name: "Premium Support (1 month)", quantity: 1, unitPrice: 275 } ] }, { id: "ord_bhqecj4p", orderNumber: "SO-1005", status: "cancelled", createdAt: "2024-01-19", customer: { name: "Carmella Diaz", email: "carmella@example.com" }, payment: { method: "Card", last4: "1193", status: "refunded" }, shipping: { method: "Standard", address: "654 Maple Dr, Phoenix, AZ" }, totals: { currency: "USD", subtotal: 721, shipping: 0, tax: 0, total: 721 }, items: [{ sku: "SKU-034", name: "Templates Pack", quantity: 1, unitPrice: 721 }] } ]; export type Order = (typeof data)[number]; export const columns: ColumnDef[] = [ { id: "expand", header: () => null, cell: ({ row }) => ( ), enableSorting: false, enableHiding: false }, { id: "select", header: ({ table }) => (

event.stopPropagation()}> table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" />

), cell: ({ row }) => (

event.stopPropagation()}> row.toggleSelected(!!value)} aria-label="Select row" />

), enableSorting: false, enableHiding: false }, { accessorKey: "orderNumber", header: ({ column }) => ( ), cell: ({ row }) =>

{row.getValue("orderNumber")}

}, { id: "customer", header: ({ column }) => { return ( ); }, accessorFn: (row) => row.customer.email, cell: ({ row }) => (

{row.original.customer.name}

{row.original.customer.email}

) }, { accessorKey: "status", header: "Status", cell: ({ row }) =>

{row.getValue("status")}

}, { id: "date", header: "Date", accessorFn: (row) => row.createdAt, cell: ({ row }) =>

{row.original.createdAt}

}, { id: "total", header: () =>

Total

, accessorFn: (row) => row.totals.total, cell: ({ row }) => { const order = row.original; return (

{formatCurrency(order.totals.total, order.totals.currency)}

); } }, { id: "actions", enableHiding: false, cell: ({ row }) => { const order = row.original; return (

event.stopPropagation()}> Actions navigator.clipboard.writeText(order.id)}> Copy order ID View order View customer

); } } ]; export default function DataTableDemo() { const [sorting, setSorting] = React.useState([]); const [columnFilters, setColumnFilters] = React.useState([]); const [columnVisibility, setColumnVisibility] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); const [expanded, setExpanded] = React.useState({}); const table = useReactTable({ data, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), onColumnVisibilityChange: setColumnVisibility, onRowSelectionChange: setRowSelection, onExpandedChange: setExpanded, getRowCanExpand: () => true, state: { sorting, columnFilters, columnVisibility, rowSelection, expanded } }); return (

table.getColumn("orderNumber")?.setFilterValue(event.target.value)} />

{table.getFilteredSelectedRowModel().rows.length > 0 && ( {table.getFilteredSelectedRowModel().rows.length} selected Copy selected order IDs Copy as JSON Export as CSV Cancel selected )} {table .getAllColumns() .filter((column) => column.getCanHide()) .map((column) => { return ( column.toggleVisibility(!!value)}> {column.id} ); })}

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { return ( {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} ); })} ))} {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => ( row.toggleExpanded()} className="cursor-pointer"> {row.getVisibleCells().map((cell) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} {row.getIsExpanded() && (

Order details

Order ID {row.original.id}

Created {row.original.createdAt}

Payment {row.original.payment.method} {row.original.payment.last4 ? ` •••• ${row.original.payment.last4}` : ""} {" · "} {row.original.payment.status}

Shipping {row.original.shipping.method} {" · "} {row.original.shipping.address}

Items

{row.original.items.map((item) => (

{item.name}

{item.sku}

Qty {item.quantity}

{formatCurrency( item.unitPrice * item.quantity, row.original.totals.currency )}

))}

Totals

Subtotal {formatCurrency( row.original.totals.subtotal, row.original.totals.currency )}

Shipping {formatCurrency( row.original.totals.shipping, row.original.totals.currency )}

Tax {formatCurrency( row.original.totals.tax, row.original.totals.currency )}

Total {formatCurrency( row.original.totals.total, row.original.totals.currency )}

)} )) ) : ( No results. )}

{table.getFilteredSelectedRowModel().rows.length} of{" "} {table.getFilteredRowModel().rows.length} row(s) selected.

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"contents/components/data-table/2/index.tsx","content":"$51","type":"registry:component","target":"components/data-table2.tsx"}],"className":"h-[70svh] min-h-80"}]]}]