4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:Tac21,'use client' 'use no memo' import { IconChevronUp, IconChevronDown } from '@tabler/icons-react' import { useMemo, useState } from 'react' import { Badge } from '@/components/ui/badge' import { DataGrid, DataGridContainer } from '@/components/spaceui/data-grid' import { DataGridColumnHeader } from '@/components/spaceui/data-grid-column-header' import { DataGridPagination } from '@/components/spaceui/data-grid-pagination' import { DataGridScrollArea } from '@/components/spaceui/data-grid-scroll-area' import { DataGridTable } from '@/components/spaceui/data-grid-table' import { ColumnDef, ExpandedState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, PaginationState, SortingState, useReactTable, } from '@tanstack/react-table' import type { VariantProps } from 'class-variance-authority' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Button } from '@/components/ui/button' import { Card } from '@/components/ui/card' interface OrderItemData { id: string productName: string category: string price: string quantity: number } interface Data { id: string orderNumber: string customer: string customerEmail: string customerAvatar: string total: string status: { label: string variant: VariantProps['variant'] } items: OrderItemData[] } const demoData: Data[] = [ { id: '1', orderNumber: 'SO-001', customer: 'Alex Johnson', customerEmail: 'alex@example.com', customerAvatar: 'https://avatars.spaceui.one/v1?name=gemini&variant=kendo', total: '$459.97', status: { label: 'Shipped', variant: 'primary-light', }, items: [ { id: '1-1', productName: 'Wireless Headphones', category: 'Electronics', price: '$199.99', quantity: 1, }, { id: '1-2', productName: 'Phone Case', category: 'Accessories', price: '$99.99', quantity: 1, }, { id: '1-3', productName: 'Screen Protector', category: 'Accessories', price: '$29.99', quantity: 2, }, { id: '1-4', productName: 'Charging Cable', category: 'Electronics', price: '$19.99', quantity: 1, }, { id: '1-5', productName: 'Bluetooth Speaker', category: 'Electronics', price: '$89.99', quantity: 1, }, { id: '1-6', productName: 'Phone Stand', category: 'Accessories', price: '$39.99', quantity: 1, }, { id: '1-7', productName: 'Cable Management', category: 'Accessories', price: '$19.99', quantity: 2, }, { id: '1-8', productName: 'Wireless Charger', category: 'Electronics', price: '$49.99', quantity: 1, }, { id: '1-9', productName: 'Gaming Mouse', category: 'Electronics', price: '$79.99', quantity: 1, }, { id: '1-10', productName: 'Gaming Keyboard', category: 'Electronics', price: '$59.99', quantity: 1, }, { id: '1-11', productName: 'Mouse Pad', category: 'Accessories', price: '$19.99', quantity: 1, }, { id: '1-12', productName: 'Desk Lamp', category: 'Home', price: '$79.99', quantity: 1, }, ], }, { id: '2', orderNumber: 'SO-002', customer: 'Sarah Chen', customerEmail: 'sarah@example.com', customerAvatar: 'https://avatars.spaceui.one/v1?name=luna&variant=lumina', total: '$249.48', status: { label: 'Processing', variant: 'info-light', }, items: [ { id: '2-1', productName: 'Running Shoes', category: 'Sports', price: '$89.99', quantity: 1, }, { id: '2-2', productName: 'Sports Socks', category: 'Sports', price: '$59.51', quantity: 1, }, { id: '2-3', productName: 'Water Bottle', category: 'Sports', price: '$24.99', quantity: 1, }, { id: '2-4', productName: 'Fitness Tracker', category: 'Electronics', price: '$74.99', quantity: 1, }, ], }, { id: '3', orderNumber: 'SO-003', customer: 'Michael Rodriguez', customerEmail: 'michael@example.com', customerAvatar: 'https://avatars.spaceui.one/v1?name=mars&variant=shaula', total: '$189.97', status: { label: 'Delivered', variant: 'success-light', }, items: [ { id: '3-1', productName: 'Coffee Mug', category: 'Home', price: '$89.99', quantity: 1, }, { id: '3-2', productName: 'Coffee Beans', category: 'Food', price: '$24.99', quantity: 1, }, { id: '3-3', productName: 'Coffee Grinder', category: 'Home', price: '$49.99', quantity: 1, }, { id: '3-4', productName: 'Milk Frother', category: 'Home', price: '$24.99', quantity: 1, }, { id: '3-5', productName: 'Coffee Filter', category: 'Home', price: '$9.99', quantity: 1, }, { id: '3-6', productName: 'Sugar Bowl', category: 'Home', price: '$19.99', quantity: 1, }, { id: '3-7', productName: 'Tea Set', category: 'Home', price: '$39.99', quantity: 1, }, { id: '3-8', productName: 'Creamer', category: 'Food', price: '$14.99', quantity: 1, }, { id: '3-9', productName: 'Coffee Table', category: 'Furniture', price: '$199.99', quantity: 1, }, { id: '3-10', productName: 'Placemats', category: 'Home', price: '$12.99', quantity: 1, }, { id: '3-11', productName: 'Napkins', category: 'Home', price: '$7.99', quantity: 1, }, { id: '3-12', productName: 'Candles', category: 'Home', price: '$16.99', quantity: 1, }, { id: '3-13', productName: 'Vase', category: 'Home', price: '$29.99', quantity: 1, }, { id: '3-14', productName: 'Flowers', category: 'Home', price: '$24.99', quantity: 1, }, { id: '3-15', productName: 'Table Runner', category: 'Home', price: '$18.99', quantity: 1, }, ], }, { id: '4', orderNumber: 'SO-004', customer: 'Emma Wilson', customerEmail: 'emma@example.com', customerAvatar: 'https://avatars.spaceui.one/v1?name=jupiter&variant=singularity', total: '$299.97', status: { label: 'Cancelled', variant: 'destructive-light', }, items: [ { id: '4-1', productName: 'Laptop Stand', category: 'Electronics', price: '$99.99', quantity: 1, }, { id: '4-2', productName: 'Wireless Mouse', category: 'Electronics', price: '$49.99', quantity: 1, }, { id: '4-3', productName: 'Keyboard', category: 'Electronics', price: '$79.99', quantity: 1, }, { id: '4-4', productName: 'Monitor', category: 'Electronics', price: '$69.99', quantity: 1, }, { id: '4-5', productName: 'Webcam', category: 'Electronics', price: '$89.99', quantity: 1, }, { id: '4-6', productName: 'Microphone', category: 'Electronics', price: '$59.99', quantity: 1, }, { id: '4-7', productName: 'Headphones', category: 'Electronics', price: '$129.99', quantity: 1, }, { id: '4-8', productName: 'USB Hub', category: 'Electronics', price: '$29.99', quantity: 1, }, { id: '4-9', productName: 'Cable Organizer', category: 'Accessories', price: '$19.99', quantity: 1, }, { id: '4-10', productName: 'Desk Mat', category: 'Office', price: '$24.99', quantity: 1, }, ], }, { id: '5', orderNumber: 'SO-005', customer: 'David Kim', customerEmail: 'david@example.com', customerAvatar: 'https://avatars.spaceui.one/v1?name=saturn&variant=triton', total: '$179.97', status: { label: 'Pending', variant: 'warning-light', }, items: [ { id: '5-1', productName: 'Desk Lamp', category: 'Home', price: '$79.99', quantity: 1, }, { id: '5-2', productName: 'Desk Organizer', category: 'Home', price: '$39.99', quantity: 1, }, { id: '5-3', productName: 'Notebook Set', category: 'Office', price: '$29.99', quantity: 1, }, { id: '5-4', productName: 'Pen Set', category: 'Office', price: '$29.99', quantity: 1, }, { id: '5-5', productName: 'Stapler', category: 'Office', price: '$12.99', quantity: 1, }, { id: '5-6', productName: 'Paper Clips', category: 'Office', price: '$4.99', quantity: 1, }, { id: '5-7', productName: 'Binder', category: 'Office', price: '$8.99', quantity: 1, }, { id: '5-8', productName: 'Highlighter', category: 'Office', price: '$6.99', quantity: 1, }, { id: '5-9', productName: 'Eraser', category: 'Office', price: '$2.99', quantity: 1, }, { id: '5-10', productName: 'Ruler', category: 'Office', price: '$3.99', quantity: 1, }, { id: '5-11', productName: 'Calculator', category: 'Office', price: '$19.99', quantity: 1, }, { id: '5-12', productName: 'Calendar', category: 'Office', price: '$14.99', quantity: 1, }, { id: '5-13', productName: 'Whiteboard', category: 'Office', price: '$24.99', quantity: 1, }, { id: '5-14', productName: 'Markers', category: 'Office', price: '$9.99', quantity: 1, }, { id: '5-15', productName: 'Push Pins', category: 'Office', price: '$5.99', quantity: 1, }, ], }, { id: '6', orderNumber: 'SO-006', customer: 'Aron Thompson', customerEmail: 'lisa@example.com', customerAvatar: 'https://avatars.spaceui.one/v1?name=venus&variant=solar-flare', total: '$329.95', status: { label: 'Shipped', variant: 'primary-light', }, items: [ { id: '6-1', productName: 'Bluetooth Speaker', category: 'Electronics', price: '$129.99', quantity: 1, }, { id: '6-2', productName: 'Phone Stand', category: 'Accessories', price: '$39.99', quantity: 1, }, { id: '6-3', productName: 'Cable Management', category: 'Accessories', price: '$19.99', quantity: 2, }, { id: '6-4', productName: 'Wireless Charger', category: 'Electronics', price: '$49.99', quantity: 1, }, { id: '6-5', productName: 'Smart Watch', category: 'Electronics', price: '$199.99', quantity: 1, }, { id: '6-6', productName: 'Fitness Band', category: 'Electronics', price: '$79.99', quantity: 1, }, { id: '6-7', productName: 'Phone Case', category: 'Accessories', price: '$24.99', quantity: 1, }, { id: '6-8', productName: 'Screen Protector', category: 'Accessories', price: '$14.99', quantity: 1, }, { id: '6-9', productName: 'Car Mount', category: 'Accessories', price: '$29.99', quantity: 1, }, { id: '6-10', productName: 'Power Bank', category: 'Electronics', price: '$39.99', quantity: 1, }, { id: '6-11', productName: 'USB Cable', category: 'Electronics', price: '$9.99', quantity: 1, }, { id: '6-12', productName: 'Adapter', category: 'Electronics', price: '$19.99', quantity: 1, }, { id: '6-13', productName: 'Headphones', category: 'Electronics', price: '$89.99', quantity: 1, }, { id: '6-14', productName: 'Earbuds', category: 'Electronics', price: '$59.99', quantity: 1, }, { id: '6-15', productName: 'Microphone', category: 'Electronics', price: '$49.99', quantity: 1, }, ], }, { id: '7', orderNumber: 'SO-007', customer: 'James Brown', customerEmail: 'james@example.com', customerAvatar: 'https://avatars.spaceui.one/v1?name=mercury&variant=titan', total: '$159.96', status: { label: 'Processing', variant: 'info-light', }, items: [ { id: '7-1', productName: 'Gaming Mouse', category: 'Electronics', price: '$79.99', quantity: 1, }, { id: '7-2', productName: 'Gaming Keyboard', category: 'Electronics', price: '$59.99', quantity: 1, }, { id: '7-3', productName: 'Mouse Pad', category: 'Accessories', price: '$19.99', quantity: 1, }, { id: '7-4', productName: 'Gaming Headset', category: 'Electronics', price: '$99.99', quantity: 1, }, { id: '7-5', productName: 'Gaming Chair', category: 'Furniture', price: '$299.99', quantity: 1, }, { id: '7-6', productName: 'Gaming Desk', category: 'Furniture', price: '$199.99', quantity: 1, }, { id: '7-7', productName: 'RGB Strip', category: 'Electronics', price: '$29.99', quantity: 1, }, { id: '7-8', productName: 'Controller', category: 'Electronics', price: '$49.99', quantity: 1, }, { id: '7-9', productName: 'Gaming Monitor', category: 'Electronics', price: '$399.99', quantity: 1, }, { id: '7-10', productName: 'Graphics Card', category: 'Electronics', price: '$599.99', quantity: 1, }, { id: '7-11', productName: 'RAM', category: 'Electronics', price: '$89.99', quantity: 1, }, { id: '7-12', productName: 'SSD', category: 'Electronics', price: '$129.99', quantity: 1, }, { id: '7-13', productName: 'CPU', category: 'Electronics', price: '$299.99', quantity: 1, }, { id: '7-14', productName: 'Motherboard', category: 'Electronics', price: '$199.99', quantity: 1, }, { id: '7-15', productName: 'Power Supply', category: 'Electronics', price: '$149.99', quantity: 1, }, ], }, { id: '8', orderNumber: 'SO-008', customer: 'Maria Garcia', customerEmail: 'maria@example.com', customerAvatar: 'https://avatars.spaceui.one/v1?name=pluto&variant=glass', total: '$89.97', status: { label: 'Delivered', variant: 'success-light', }, items: [ { id: '8-1', productName: 'Yoga Mat', category: 'Sports', price: '$29.99', quantity: 1, }, { id: '8-2', productName: 'Water Bottle', category: 'Sports', price: '$19.99', quantity: 1, }, { id: '8-3', productName: 'Resistance Bands', category: 'Sports', price: '$39.99', quantity: 1, }, { id: '8-4', productName: 'Dumbbells', category: 'Sports', price: '$49.99', quantity: 1, }, { id: '8-5', productName: 'Kettlebell', category: 'Sports', price: '$59.99', quantity: 1, }, { id: '8-6', productName: 'Jump Rope', category: 'Sports', price: '$14.99', quantity: 1, }, { id: '8-7', productName: 'Foam Roller', category: 'Sports', price: '$24.99', quantity: 1, }, { id: '8-8', productName: 'Exercise Ball', category: 'Sports', price: '$34.99', quantity: 1, }, { id: '8-9', productName: 'Yoga Block', category: 'Sports', price: '$12.99', quantity: 1, }, { id: '8-10', productName: 'Stretching Strap', category: 'Sports', price: '$9.99', quantity: 1, }, { id: '8-11', productName: 'Gym Towel', category: 'Sports', price: '$7.99', quantity: 1, }, { id: '8-12', productName: 'Sports Bra', category: 'Clothing', price: '$29.99', quantity: 1, }, { id: '8-13', productName: 'Workout Shorts', category: 'Clothing', price: '$24.99', quantity: 1, }, { id: '8-14', productName: 'Running Shoes', category: 'Sports', price: '$89.99', quantity: 1, }, { id: '8-15', productName: 'Protein Shaker', category: 'Sports', price: '$12.99', quantity: 1, }, ], }, { id: '9', orderNumber: 'SO-009', customer: 'Nick Johnson', customerEmail: 'nick@example.com', customerAvatar: 'https://avatars.spaceui.one/v1?name=neptune&variant=pebble', total: '$199.98', status: { label: 'Cancelled', variant: 'destructive-light', }, items: [ { id: '9-1', productName: 'Smart Watch', category: 'Electronics', price: '$199.99', quantity: 1, }, { id: '9-2', productName: 'Watch Band', category: 'Accessories', price: '$29.99', quantity: 1, }, { id: '9-3', productName: 'Charging Dock', category: 'Electronics', price: '$39.99', quantity: 1, }, { id: '9-4', productName: 'Screen Protector', category: 'Accessories', price: '$14.99', quantity: 1, }, { id: '9-5', productName: 'Case', category: 'Accessories', price: '$19.99', quantity: 1, }, { id: '9-6', productName: 'Strap', category: 'Accessories', price: '$24.99', quantity: 1, }, { id: '9-7', productName: 'Cable', category: 'Electronics', price: '$9.99', quantity: 1, }, { id: '9-8', productName: 'Adapter', category: 'Electronics', price: '$12.99', quantity: 1, }, { id: '9-9', productName: 'Mount', category: 'Accessories', price: '$16.99', quantity: 1, }, { id: '9-10', productName: 'Stand', category: 'Accessories', price: '$22.99', quantity: 1, }, { id: '9-11', productName: 'Cover', category: 'Accessories', price: '$8.99', quantity: 1, }, { id: '9-12', productName: 'Grip', category: 'Accessories', price: '$11.99', quantity: 1, }, { id: '9-13', productName: 'Lens', category: 'Accessories', price: '$6.99', quantity: 1, }, { id: '9-14', productName: 'Filter', category: 'Accessories', price: '$4.99', quantity: 1, }, { id: '9-15', productName: 'Cleaning Kit', category: 'Accessories', price: '$7.99', quantity: 1, }, ], }, { id: '10', orderNumber: 'SO-010', customer: 'Liam Thompson', customerEmail: 'liam@example.com', customerAvatar: 'https://avatars.spaceui.one/v1?name=uranus&variant=invader', total: '$149.97', status: { label: 'Pending', variant: 'warning-light', }, items: [ { id: '10-1', productName: 'Kitchen Knife Set', category: 'Home', price: '$79.99', quantity: 1, }, { id: '10-2', productName: 'Cutting Board', category: 'Home', price: '$29.99', quantity: 1, }, { id: '10-3', productName: 'Utensil Set', category: 'Home', price: '$39.99', quantity: 1, }, { id: '10-4', productName: 'Dish Towels', category: 'Home', price: '$12.99', quantity: 1, }, { id: '10-5', productName: 'Pot Holders', category: 'Home', price: '$8.99', quantity: 1, }, { id: '10-6', productName: 'Trivet', category: 'Home', price: '$14.99', quantity: 1, }, { id: '10-7', productName: 'Measuring Cups', category: 'Home', price: '$16.99', quantity: 1, }, { id: '10-8', productName: 'Measuring Spoons', category: 'Home', price: '$9.99', quantity: 1, }, { id: '10-9', productName: 'Mixing Bowls', category: 'Home', price: '$24.99', quantity: 1, }, { id: '10-10', productName: 'Spatula', category: 'Home', price: '$6.99', quantity: 1, }, { id: '10-11', productName: 'Whisk', category: 'Home', price: '$4.99', quantity: 1, }, { id: '10-12', productName: 'Ladle', category: 'Home', price: '$7.99', quantity: 1, }, { id: '10-13', productName: 'Tongs', category: 'Home', price: '$11.99', quantity: 1, }, { id: '10-14', productName: 'Can Opener', category: 'Home', price: '$13.99', quantity: 1, }, { id: '10-15', productName: 'Bottle Opener', category: 'Home', price: '$5.99', quantity: 1, }, ], }, { id: '11', orderNumber: 'SO-011', customer: 'Alex Johnson', customerEmail: 'alex@example.com', customerAvatar: 'https://avatars.spaceui.one/v1?name=earth&variant=kendo', total: '$279.96', status: { label: 'Shipped', variant: 'primary-outline', }, items: [ { id: '11-1', productName: 'Office Chair', category: 'Furniture', price: '$199.99', quantity: 1, }, { id: '11-2', productName: 'Desk Mat', category: 'Office', price: '$19.99', quantity: 1, }, { id: '11-3', productName: 'Monitor Stand', category: 'Electronics', price: '$59.99', quantity: 1, }, { id: '11-4', productName: 'Desk Lamp', category: 'Office', price: '$39.99', quantity: 1, }, { id: '11-5', productName: 'Pen Holder', category: 'Office', price: '$12.99', quantity: 1, }, { id: '11-6', productName: 'File Organizer', category: 'Office', price: '$24.99', quantity: 1, }, { id: '11-7', productName: 'Stapler', category: 'Office', price: '$16.99', quantity: 1, }, { id: '11-8', productName: 'Paper Clips', category: 'Office', price: '$4.99', quantity: 1, }, { id: '11-9', productName: 'Binder', category: 'Office', price: '$8.99', quantity: 1, }, { id: '11-10', productName: 'Highlighter', category: 'Office', price: '$6.99', quantity: 1, }, { id: '11-11', productName: 'Eraser', category: 'Office', price: '$2.99', quantity: 1, }, { id: '11-12', productName: 'Ruler', category: 'Office', price: '$3.99', quantity: 1, }, { id: '11-13', productName: 'Calculator', category: 'Office', price: '$19.99', quantity: 1, }, { id: '11-14', productName: 'Calendar', category: 'Office', price: '$14.99', quantity: 1, }, { id: '11-15', productName: 'Whiteboard', category: 'Office', price: '$24.99', quantity: 1, }, ], }, { id: '12', orderNumber: 'SO-012', customer: 'Sarah Chen', customerEmail: 'sarah@example.com', customerAvatar: 'https://avatars.spaceui.one/v1?name=orion&variant=lumina', total: '$119.97', status: { label: 'Processing', variant: 'info-light', }, items: [ { id: '12-1', productName: 'Skincare Set', category: 'Beauty', price: '$59.99', quantity: 1, }, { id: '12-2', productName: 'Face Mask', category: 'Beauty', price: '$29.99', quantity: 1, }, { id: '12-3', productName: 'Moisturizer', category: 'Beauty', price: '$29.99', quantity: 1, }, { id: '12-4', productName: 'Cleanser', category: 'Beauty', price: '$19.99', quantity: 1, }, { id: '12-5', productName: 'Toner', category: 'Beauty', price: '$24.99', quantity: 1, }, { id: '12-6', productName: 'Serum', category: 'Beauty', price: '$39.99', quantity: 1, }, { id: '12-7', productName: 'Eye Cream', category: 'Beauty', price: '$34.99', quantity: 1, }, { id: '12-8', productName: 'Sunscreen', category: 'Beauty', price: '$16.99', quantity: 1, }, { id: '12-9', productName: 'Exfoliant', category: 'Beauty', price: '$22.99', quantity: 1, }, { id: '12-10', productName: 'Lip Balm', category: 'Beauty', price: '$7.99', quantity: 1, }, { id: '12-11', productName: 'Hand Cream', category: 'Beauty', price: '$12.99', quantity: 1, }, { id: '12-12', productName: 'Body Lotion', category: 'Beauty', price: '$18.99', quantity: 1, }, { id: '12-13', productName: 'Shampoo', category: 'Beauty', price: '$14.99', quantity: 1, }, { id: '12-14', productName: 'Conditioner', category: 'Beauty', price: '$14.99', quantity: 1, }, { id: '12-15', productName: 'Hair Mask', category: 'Beauty', price: '$19.99', quantity: 1, }, ], }, { id: '13', orderNumber: 'SO-013', customer: 'Michael Rodriguez', customerEmail: 'michael@example.com', customerAvatar: 'https://avatars.spaceui.one/v1?name=lyra&variant=shaula', total: '$89.98', status: { label: 'Delivered', variant: 'success-light', }, items: [ { id: '13-1', productName: 'T-Shirt', category: 'Clothing', price: '$19.99', quantity: 2, }, { id: '13-2', productName: 'Jeans', category: 'Clothing', price: '$49.99', quantity: 1, }, { id: '13-3', productName: 'Hoodie', category: 'Clothing', price: '$39.99', quantity: 1, }, { id: '13-4', productName: 'Sweater', category: 'Clothing', price: '$34.99', quantity: 1, }, { id: '13-5', productName: 'Jacket', category: 'Clothing', price: '$79.99', quantity: 1, }, { id: '13-6', productName: 'Shorts', category: 'Clothing', price: '$24.99', quantity: 1, }, { id: '13-7', productName: 'Pants', category: 'Clothing', price: '$44.99', quantity: 1, }, { id: '13-8', productName: 'Dress', category: 'Clothing', price: '$59.99', quantity: 1, }, { id: '13-9', productName: 'Skirt', category: 'Clothing', price: '$29.99', quantity: 1, }, { id: '13-10', productName: 'Blouse', category: 'Clothing', price: '$34.99', quantity: 1, }, { id: '13-11', productName: 'Socks', category: 'Clothing', price: '$9.99', quantity: 1, }, { id: '13-12', productName: 'Underwear', category: 'Clothing', price: '$14.99', quantity: 1, }, { id: '13-13', productName: 'Hat', category: 'Clothing', price: '$19.99', quantity: 1, }, { id: '13-14', productName: 'Scarf', category: 'Clothing', price: '$16.99', quantity: 1, }, { id: '13-15', productName: 'Gloves', category: 'Clothing', price: '$12.99', quantity: 1, }, ], }, { id: '14', orderNumber: 'SO-014', customer: 'Emma Wilson', customerEmail: 'emma@example.com', customerAvatar: 'https://avatars.spaceui.one/v1?name=vega&variant=singularity', total: '$199.97', status: { label: 'Shipped', variant: 'primary-light', }, items: [ { id: '14-1', productName: 'Tablet', category: 'Electronics', price: '$199.99', quantity: 1, }, { id: '14-2', productName: 'Tablet Case', category: 'Accessories', price: '$29.99', quantity: 1, }, { id: '14-3', productName: 'Screen Protector', category: 'Accessories', price: '$14.99', quantity: 1, }, { id: '14-4', productName: 'Stylus', category: 'Accessories', price: '$39.99', quantity: 1, }, { id: '14-5', productName: 'Keyboard', category: 'Electronics', price: '$79.99', quantity: 1, }, { id: '14-6', productName: 'Mouse', category: 'Electronics', price: '$49.99', quantity: 1, }, { id: '14-7', productName: 'Charging Cable', category: 'Electronics', price: '$19.99', quantity: 1, }, { id: '14-8', productName: 'Power Adapter', category: 'Electronics', price: '$24.99', quantity: 1, }, { id: '14-9', productName: 'Stand', category: 'Accessories', price: '$34.99', quantity: 1, }, { id: '14-10', productName: 'Mount', category: 'Accessories', price: '$19.99', quantity: 1, }, { id: '14-11', productName: 'Cover', category: 'Accessories', price: '$16.99', quantity: 1, }, { id: '14-12', productName: 'Grip', category: 'Accessories', price: '$11.99', quantity: 1, }, { id: '14-13', productName: 'Lens', category: 'Accessories', price: '$6.99', quantity: 1, }, { id: '14-14', productName: 'Filter', category: 'Accessories', price: '$4.99', quantity: 1, }, { id: '14-15', productName: 'Cleaning Kit', category: 'Accessories', price: '$7.99', quantity: 1, }, ], }, { id: '15', orderNumber: 'SO-015', customer: 'David Kim', customerEmail: 'david@example.com', customerAvatar: 'https://avatars.spaceui.one/v1?name=sirius&variant=triton', total: '$159.96', status: { label: 'Pending', variant: 'warning-light', }, items: [ { id: '15-1', productName: 'Gaming Headset', category: 'Electronics', price: '$99.99', quantity: 1, }, { id: '15-2', productName: 'Gaming Controller', category: 'Electronics', price: '$59.99', quantity: 1, }, { id: '15-3', productName: 'Gaming Mouse', category: 'Electronics', price: '$79.99', quantity: 1, }, { id: '15-4', productName: 'Gaming Keyboard', category: 'Electronics', price: '$129.99', quantity: 1, }, { id: '15-5', productName: 'Gaming Chair', category: 'Furniture', price: '$299.99', quantity: 1, }, { id: '15-6', productName: 'Gaming Desk', category: 'Furniture', price: '$199.99', quantity: 1, }, { id: '15-7', productName: 'RGB Strip', category: 'Electronics', price: '$29.99', quantity: 1, }, { id: '15-8', productName: 'Mouse Pad', category: 'Accessories', price: '$19.99', quantity: 1, }, { id: '15-9', productName: 'Gaming Monitor', category: 'Electronics', price: '$399.99', quantity: 1, }, { id: '15-10', productName: 'Graphics Card', category: 'Electronics', price: '$599.99', quantity: 1, }, { id: '15-11', productName: 'RAM', category: 'Electronics', price: '$89.99', quantity: 1, }, { id: '15-12', productName: 'SSD', category: 'Electronics', price: '$129.99', quantity: 1, }, { id: '15-13', productName: 'CPU', category: 'Electronics', price: '$299.99', quantity: 1, }, { id: '15-14', productName: 'Motherboard', category: 'Electronics', price: '$199.99', quantity: 1, }, { id: '15-15', productName: 'Power Supply', category: 'Electronics', price: '$149.99', quantity: 1, }, ], }, ] // Sub-table component for order items function OrderItemsSubTable({ items }: { items: OrderItemData[] }) { const [sorting, setSorting] = useState([]) const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5, // Show 3 items per page for sub-tables }) const columns = useMemo[]>( () => [ { accessorKey: 'productName', header: ({ column }) => , cell: (info) => info.getValue() as string, enableSorting: true, size: 200, }, { accessorKey: 'category', header: ({ column }) => , cell: (info) => info.getValue() as string, enableSorting: true, size: 120, }, { accessorKey: 'price', header: ({ column }) => , cell: (info) => info.getValue() as string, enableSorting: true, size: 100, }, { accessorKey: 'quantity', header: ({ column }) => , cell: (info) => info.getValue() as number, enableSorting: true, size: 80, }, ], [], ) const table = useReactTable({ data: items, columns, pageCount: Math.ceil(items.length / pagination.pageSize), state: { sorting, pagination, }, onSortingChange: setSorting, onPaginationChange: setPagination, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), getPaginationRowModel: getPaginationRowModel(), getRowId: (row: OrderItemData) => row.id, }) return (

) } export default function Demo() { const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5, }) const [sorting, setSorting] = useState([]) const [expandedRows, setExpandedRows] = useState({}) const [columnOrder, setColumnOrder] = useState(['expand', 'customer', 'items', 'total', 'status']) const columns = useMemo[]>( () => [ { id: 'expand', header: () => null, cell: ({ row }) => { return row.getCanExpand() ? ( ) : null }, size: 25, enableResizing: false, meta: { expandedContent: (row) => , }, }, { accessorKey: 'customer', id: 'customer', header: ({ column }) => , cell: ({ row }) => { return (

{row.original.customer .split(' ') .map((n) => n[0]) .join('')}

{row.original.customer}

{row.original.customerEmail}

) }, enableSorting: true, enableHiding: true, enableResizing: true, size: 200, }, { accessorKey: 'items', id: 'items', header: ({ column }) => , cell: (info) => { const items = info.getValue() as OrderItemData[] const itemCount = items.length return (

info.row.getToggleExpandedHandler()()} > {itemCount} {itemCount === 1 ? 'item' : 'items'}

) }, enableSorting: true, enableHiding: true, enableResizing: true, size: 120, }, { accessorKey: 'total', id: 'total', header: ({ column }) => , cell: (info) => info.getValue() as string, enableSorting: true, enableHiding: true, enableResizing: true, size: 100, }, { accessorKey: 'status', id: 'status', header: ({ column }) => , cell: ({ row }) => { const status = row.original.status return {status.label} }, enableSorting: true, enableHiding: true, enableResizing: true, size: 120, }, ], [], ) const table = useReactTable({ columns, data: demoData, pageCount: Math.ceil((demoData?.length || 0) / pagination.pageSize), getRowId: (row: Data) => row.id, getRowCanExpand: (row) => Boolean(row.original.items && row.original.items.length > 0), state: { pagination, sorting, expanded: expandedRows, columnOrder, }, onPaginationChange: setPagination, onSortingChange: setSorting, onExpandedChange: setExpandedRows, onColumnOrderChange: setColumnOrder, getCoreRowModel: getCoreRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), }) return (

) } 4b:["$","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","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","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":"@tabler/icons-react"}]]}]}],["$","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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}]]}],["$","$L4c",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/components-spaceui-data-grid.json","https://www.spaceui.one/r/components-spaceui-data-grid-column-header.json","https://www.spaceui.one/r/components-spaceui-data-grid-pagination.json","https://www.spaceui.one/r/components-spaceui-data-grid-scroll-area.json","https://www.spaceui.one/r/components-spaceui-data-grid-table.json","https://www.spaceui.one/r/primitives-avatar.json","https://www.spaceui.one/r/primitives-badge.json","https://www.spaceui.one/r/primitives-button.json","https://www.spaceui.one/r/primitives-card.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/registry/demo/components/spaceui/data-grid/c-data-grid-09/index.tsx","content":"$4e","type":"registry:component","target":"components/spaceui/data-grid.tsx"}],"className":"h-[70svh] min-h-80"}]]}]