{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-data-grid-9","type":"registry:block","title":"Data grid with sub table","description":"Data grid with sub table","dependencies":["@tanstack/react-table","class-variance-authority"],"registryDependencies":["avatar","@reui/badge","button","card","@reui/data-grid","@reui/data-grid-column-header","@reui/data-grid-pagination","@reui/data-grid-scroll-area","@reui/data-grid-table"],"files":[{"path":"c-data-grid-9.tsx","type":"registry:block","content":"\"use client\"\n\n// This file keeps \"use no memo\": its own cell/header templates read state\n// through builder calls on a stable row/column, which React Compiler cannot\n// see. The primitive wraps its own such reads in TanStack's Subscribe; a\n// consumer template has to opt out or subscribe itself.\n\"use no memo\"\n\nimport { useMemo, useState } from \"react\"\nimport { Badge } from \"@/components/reui/badge\"\nimport {\n  DataGrid,\n  DataGridContainer,\n  dataGridFeatures,\n  type DataGridFeatures,\n} from \"@/components/reui/data-grid/data-grid\"\nimport { DataGridColumnHeader } from \"@/components/reui/data-grid/data-grid-column-header\"\nimport { DataGridPagination } from \"@/components/reui/data-grid/data-grid-pagination\"\nimport { DataGridScrollArea } from \"@/components/reui/data-grid/data-grid-scroll-area\"\nimport { DataGridTable } from \"@/components/reui/data-grid/data-grid-table\"\nimport {\n  ColumnDef,\n  ExpandedState,\n  PaginationState,\n  SortingState,\n  useTable,\n} from \"@tanstack/react-table\"\nimport type { VariantProps } from \"class-variance-authority\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ninterface OrderItemData {\n  id: string\n  productName: string\n  category: string\n  price: string\n  quantity: number\n}\n\ninterface Data {\n  id: string\n  orderNumber: string\n  customer: string\n  customerEmail: string\n  customerAvatar: string\n  total: string\n  status: {\n    label: string\n    variant: VariantProps<typeof Badge>[\"variant\"]\n  }\n  items: OrderItemData[]\n}\n\nconst demoData: Data[] = [\n  {\n    id: \"1\",\n    orderNumber: \"SO-001\",\n    customer: \"Alex Johnson\",\n    customerEmail: \"alex@example.com\",\n    customerAvatar:\n      \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80\",\n    total: \"$459.97\",\n    status: {\n      label: \"Shipped\",\n      variant: \"primary-light\",\n    },\n    items: [\n      {\n        id: \"1-1\",\n        productName: \"Wireless Headphones\",\n        category: \"Electronics\",\n        price: \"$199.99\",\n        quantity: 1,\n      },\n      {\n        id: \"1-2\",\n        productName: \"Phone Case\",\n        category: \"Accessories\",\n        price: \"$99.99\",\n        quantity: 1,\n      },\n      {\n        id: \"1-3\",\n        productName: \"Screen Protector\",\n        category: \"Accessories\",\n        price: \"$29.99\",\n        quantity: 2,\n      },\n      {\n        id: \"1-4\",\n        productName: \"Charging Cable\",\n        category: \"Electronics\",\n        price: \"$19.99\",\n        quantity: 1,\n      },\n      {\n        id: \"1-5\",\n        productName: \"Bluetooth Speaker\",\n        category: \"Electronics\",\n        price: \"$89.99\",\n        quantity: 1,\n      },\n      {\n        id: \"1-6\",\n        productName: \"Phone Stand\",\n        category: \"Accessories\",\n        price: \"$39.99\",\n        quantity: 1,\n      },\n      {\n        id: \"1-7\",\n        productName: \"Cable Management\",\n        category: \"Accessories\",\n        price: \"$19.99\",\n        quantity: 2,\n      },\n      {\n        id: \"1-8\",\n        productName: \"Wireless Charger\",\n        category: \"Electronics\",\n        price: \"$49.99\",\n        quantity: 1,\n      },\n      {\n        id: \"1-9\",\n        productName: \"Gaming Mouse\",\n        category: \"Electronics\",\n        price: \"$79.99\",\n        quantity: 1,\n      },\n      {\n        id: \"1-10\",\n        productName: \"Gaming Keyboard\",\n        category: \"Electronics\",\n        price: \"$59.99\",\n        quantity: 1,\n      },\n      {\n        id: \"1-11\",\n        productName: \"Mouse Pad\",\n        category: \"Accessories\",\n        price: \"$19.99\",\n        quantity: 1,\n      },\n      {\n        id: \"1-12\",\n        productName: \"Desk Lamp\",\n        category: \"Home\",\n        price: \"$79.99\",\n        quantity: 1,\n      },\n    ],\n  },\n  {\n    id: \"2\",\n    orderNumber: \"SO-002\",\n    customer: \"Sarah Chen\",\n    customerEmail: \"sarah@example.com\",\n    customerAvatar:\n      \"https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80\",\n    total: \"$249.48\",\n    status: {\n      label: \"Processing\",\n      variant: \"info-light\",\n    },\n    items: [\n      {\n        id: \"2-1\",\n        productName: \"Running Shoes\",\n        category: \"Sports\",\n        price: \"$89.99\",\n        quantity: 1,\n      },\n      {\n        id: \"2-2\",\n        productName: \"Sports Socks\",\n        category: \"Sports\",\n        price: \"$59.51\",\n        quantity: 1,\n      },\n      {\n        id: \"2-3\",\n        productName: \"Water Bottle\",\n        category: \"Sports\",\n        price: \"$24.99\",\n        quantity: 1,\n      },\n      {\n        id: \"2-4\",\n        productName: \"Fitness Tracker\",\n        category: \"Electronics\",\n        price: \"$74.99\",\n        quantity: 1,\n      },\n    ],\n  },\n  {\n    id: \"3\",\n    orderNumber: \"SO-003\",\n    customer: \"Michael Rodriguez\",\n    customerEmail: \"michael@example.com\",\n    customerAvatar:\n      \"https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?w=96&h=96&dpr=2&q=80\",\n    total: \"$189.97\",\n    status: {\n      label: \"Delivered\",\n      variant: \"success-light\",\n    },\n    items: [\n      {\n        id: \"3-1\",\n        productName: \"Coffee Mug\",\n        category: \"Home\",\n        price: \"$89.99\",\n        quantity: 1,\n      },\n      {\n        id: \"3-2\",\n        productName: \"Coffee Beans\",\n        category: \"Food\",\n        price: \"$24.99\",\n        quantity: 1,\n      },\n      {\n        id: \"3-3\",\n        productName: \"Coffee Grinder\",\n        category: \"Home\",\n        price: \"$49.99\",\n        quantity: 1,\n      },\n      {\n        id: \"3-4\",\n        productName: \"Milk Frother\",\n        category: \"Home\",\n        price: \"$24.99\",\n        quantity: 1,\n      },\n      {\n        id: \"3-5\",\n        productName: \"Coffee Filter\",\n        category: \"Home\",\n        price: \"$9.99\",\n        quantity: 1,\n      },\n      {\n        id: \"3-6\",\n        productName: \"Sugar Bowl\",\n        category: \"Home\",\n        price: \"$19.99\",\n        quantity: 1,\n      },\n      {\n        id: \"3-7\",\n        productName: \"Tea Set\",\n        category: \"Home\",\n        price: \"$39.99\",\n        quantity: 1,\n      },\n      {\n        id: \"3-8\",\n        productName: \"Creamer\",\n        category: \"Food\",\n        price: \"$14.99\",\n        quantity: 1,\n      },\n      {\n        id: \"3-9\",\n        productName: \"Coffee Table\",\n        category: \"Furniture\",\n        price: \"$199.99\",\n        quantity: 1,\n      },\n      {\n        id: \"3-10\",\n        productName: \"Placemats\",\n        category: \"Home\",\n        price: \"$12.99\",\n        quantity: 1,\n      },\n      {\n        id: \"3-11\",\n        productName: \"Napkins\",\n        category: \"Home\",\n        price: \"$7.99\",\n        quantity: 1,\n      },\n      {\n        id: \"3-12\",\n        productName: \"Candles\",\n        category: \"Home\",\n        price: \"$16.99\",\n        quantity: 1,\n      },\n      {\n        id: \"3-13\",\n        productName: \"Vase\",\n        category: \"Home\",\n        price: \"$29.99\",\n        quantity: 1,\n      },\n      {\n        id: \"3-14\",\n        productName: \"Flowers\",\n        category: \"Home\",\n        price: \"$24.99\",\n        quantity: 1,\n      },\n      {\n        id: \"3-15\",\n        productName: \"Table Runner\",\n        category: \"Home\",\n        price: \"$18.99\",\n        quantity: 1,\n      },\n    ],\n  },\n  {\n    id: \"4\",\n    orderNumber: \"SO-004\",\n    customer: \"Emma Wilson\",\n    customerEmail: \"emma@example.com\",\n    customerAvatar:\n      \"https://images.unsplash.com/photo-1485893086445-ed75865251e0?w=96&h=96&dpr=2&q=80\",\n    total: \"$299.97\",\n    status: {\n      label: \"Cancelled\",\n      variant: \"destructive-light\",\n    },\n    items: [\n      {\n        id: \"4-1\",\n        productName: \"Laptop Stand\",\n        category: \"Electronics\",\n        price: \"$99.99\",\n        quantity: 1,\n      },\n      {\n        id: \"4-2\",\n        productName: \"Wireless Mouse\",\n        category: \"Electronics\",\n        price: \"$49.99\",\n        quantity: 1,\n      },\n      {\n        id: \"4-3\",\n        productName: \"Keyboard\",\n        category: \"Electronics\",\n        price: \"$79.99\",\n        quantity: 1,\n      },\n      {\n        id: \"4-4\",\n        productName: \"Monitor\",\n        category: \"Electronics\",\n        price: \"$69.99\",\n        quantity: 1,\n      },\n      {\n        id: \"4-5\",\n        productName: \"Webcam\",\n        category: \"Electronics\",\n        price: \"$89.99\",\n        quantity: 1,\n      },\n      {\n        id: \"4-6\",\n        productName: \"Microphone\",\n        category: \"Electronics\",\n        price: \"$59.99\",\n        quantity: 1,\n      },\n      {\n        id: \"4-7\",\n        productName: \"Headphones\",\n        category: \"Electronics\",\n        price: \"$129.99\",\n        quantity: 1,\n      },\n      {\n        id: \"4-8\",\n        productName: \"USB Hub\",\n        category: \"Electronics\",\n        price: \"$29.99\",\n        quantity: 1,\n      },\n      {\n        id: \"4-9\",\n        productName: \"Cable Organizer\",\n        category: \"Accessories\",\n        price: \"$19.99\",\n        quantity: 1,\n      },\n      {\n        id: \"4-10\",\n        productName: \"Desk Mat\",\n        category: \"Office\",\n        price: \"$24.99\",\n        quantity: 1,\n      },\n    ],\n  },\n  {\n    id: \"5\",\n    orderNumber: \"SO-005\",\n    customer: \"David Kim\",\n    customerEmail: \"david@example.com\",\n    customerAvatar:\n      \"https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?w=96&h=96&dpr=2&q=80\",\n    total: \"$179.97\",\n    status: {\n      label: \"Pending\",\n      variant: \"warning-light\",\n    },\n    items: [\n      {\n        id: \"5-1\",\n        productName: \"Desk Lamp\",\n        category: \"Home\",\n        price: \"$79.99\",\n        quantity: 1,\n      },\n      {\n        id: \"5-2\",\n        productName: \"Desk Organizer\",\n        category: \"Home\",\n        price: \"$39.99\",\n        quantity: 1,\n      },\n      {\n        id: \"5-3\",\n        productName: \"Notebook Set\",\n        category: \"Office\",\n        price: \"$29.99\",\n        quantity: 1,\n      },\n      {\n        id: \"5-4\",\n        productName: \"Pen Set\",\n        category: \"Office\",\n        price: \"$29.99\",\n        quantity: 1,\n      },\n      {\n        id: \"5-5\",\n        productName: \"Stapler\",\n        category: \"Office\",\n        price: \"$12.99\",\n        quantity: 1,\n      },\n      {\n        id: \"5-6\",\n        productName: \"Paper Clips\",\n        category: \"Office\",\n        price: \"$4.99\",\n        quantity: 1,\n      },\n      {\n        id: \"5-7\",\n        productName: \"Binder\",\n        category: \"Office\",\n        price: \"$8.99\",\n        quantity: 1,\n      },\n      {\n        id: \"5-8\",\n        productName: \"Highlighter\",\n        category: \"Office\",\n        price: \"$6.99\",\n        quantity: 1,\n      },\n      {\n        id: \"5-9\",\n        productName: \"Eraser\",\n        category: \"Office\",\n        price: \"$2.99\",\n        quantity: 1,\n      },\n      {\n        id: \"5-10\",\n        productName: \"Ruler\",\n        category: \"Office\",\n        price: \"$3.99\",\n        quantity: 1,\n      },\n      {\n        id: \"5-11\",\n        productName: \"Calculator\",\n        category: \"Office\",\n        price: \"$19.99\",\n        quantity: 1,\n      },\n      {\n        id: \"5-12\",\n        productName: \"Calendar\",\n        category: \"Office\",\n        price: \"$14.99\",\n        quantity: 1,\n      },\n      {\n        id: \"5-13\",\n        productName: \"Whiteboard\",\n        category: \"Office\",\n        price: \"$24.99\",\n        quantity: 1,\n      },\n      {\n        id: \"5-14\",\n        productName: \"Markers\",\n        category: \"Office\",\n        price: \"$9.99\",\n        quantity: 1,\n      },\n      {\n        id: \"5-15\",\n        productName: \"Push Pins\",\n        category: \"Office\",\n        price: \"$5.99\",\n        quantity: 1,\n      },\n    ],\n  },\n  {\n    id: \"6\",\n    orderNumber: \"SO-006\",\n    customer: \"Aron Thompson\",\n    customerEmail: \"lisa@example.com\",\n    customerAvatar:\n      \"https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=96&h=96&dpr=2&q=80\",\n    total: \"$329.95\",\n    status: {\n      label: \"Shipped\",\n      variant: \"primary-light\",\n    },\n    items: [\n      {\n        id: \"6-1\",\n        productName: \"Bluetooth Speaker\",\n        category: \"Electronics\",\n        price: \"$129.99\",\n        quantity: 1,\n      },\n      {\n        id: \"6-2\",\n        productName: \"Phone Stand\",\n        category: \"Accessories\",\n        price: \"$39.99\",\n        quantity: 1,\n      },\n      {\n        id: \"6-3\",\n        productName: \"Cable Management\",\n        category: \"Accessories\",\n        price: \"$19.99\",\n        quantity: 2,\n      },\n      {\n        id: \"6-4\",\n        productName: \"Wireless Charger\",\n        category: \"Electronics\",\n        price: \"$49.99\",\n        quantity: 1,\n      },\n      {\n        id: \"6-5\",\n        productName: \"Smart Watch\",\n        category: \"Electronics\",\n        price: \"$199.99\",\n        quantity: 1,\n      },\n      {\n        id: \"6-6\",\n        productName: \"Fitness Band\",\n        category: \"Electronics\",\n        price: \"$79.99\",\n        quantity: 1,\n      },\n      {\n        id: \"6-7\",\n        productName: \"Phone Case\",\n        category: \"Accessories\",\n        price: \"$24.99\",\n        quantity: 1,\n      },\n      {\n        id: \"6-8\",\n        productName: \"Screen Protector\",\n        category: \"Accessories\",\n        price: \"$14.99\",\n        quantity: 1,\n      },\n      {\n        id: \"6-9\",\n        productName: \"Car Mount\",\n        category: \"Accessories\",\n        price: \"$29.99\",\n        quantity: 1,\n      },\n      {\n        id: \"6-10\",\n        productName: \"Power Bank\",\n        category: \"Electronics\",\n        price: \"$39.99\",\n        quantity: 1,\n      },\n      {\n        id: \"6-11\",\n        productName: \"USB Cable\",\n        category: \"Electronics\",\n        price: \"$9.99\",\n        quantity: 1,\n      },\n      {\n        id: \"6-12\",\n        productName: \"Adapter\",\n        category: \"Electronics\",\n        price: \"$19.99\",\n        quantity: 1,\n      },\n      {\n        id: \"6-13\",\n        productName: \"Headphones\",\n        category: \"Electronics\",\n        price: \"$89.99\",\n        quantity: 1,\n      },\n      {\n        id: \"6-14\",\n        productName: \"Earbuds\",\n        category: \"Electronics\",\n        price: \"$59.99\",\n        quantity: 1,\n      },\n      {\n        id: \"6-15\",\n        productName: \"Microphone\",\n        category: \"Electronics\",\n        price: \"$49.99\",\n        quantity: 1,\n      },\n    ],\n  },\n  {\n    id: \"7\",\n    orderNumber: \"SO-007\",\n    customer: \"James Brown\",\n    customerEmail: \"james@example.com\",\n    customerAvatar:\n      \"https://images.unsplash.com/photo-1543299750-19d1d6297053?w=96&h=96&dpr=2&q=80\",\n    total: \"$159.96\",\n    status: {\n      label: \"Processing\",\n      variant: \"info-light\",\n    },\n    items: [\n      {\n        id: \"7-1\",\n        productName: \"Gaming Mouse\",\n        category: \"Electronics\",\n        price: \"$79.99\",\n        quantity: 1,\n      },\n      {\n        id: \"7-2\",\n        productName: \"Gaming Keyboard\",\n        category: \"Electronics\",\n        price: \"$59.99\",\n        quantity: 1,\n      },\n      {\n        id: \"7-3\",\n        productName: \"Mouse Pad\",\n        category: \"Accessories\",\n        price: \"$19.99\",\n        quantity: 1,\n      },\n      {\n        id: \"7-4\",\n        productName: \"Gaming Headset\",\n        category: \"Electronics\",\n        price: \"$99.99\",\n        quantity: 1,\n      },\n      {\n        id: \"7-5\",\n        productName: \"Gaming Chair\",\n        category: \"Furniture\",\n        price: \"$299.99\",\n        quantity: 1,\n      },\n      {\n        id: \"7-6\",\n        productName: \"Gaming Desk\",\n        category: \"Furniture\",\n        price: \"$199.99\",\n        quantity: 1,\n      },\n      {\n        id: \"7-7\",\n        productName: \"RGB Strip\",\n        category: \"Electronics\",\n        price: \"$29.99\",\n        quantity: 1,\n      },\n      {\n        id: \"7-8\",\n        productName: \"Controller\",\n        category: \"Electronics\",\n        price: \"$49.99\",\n        quantity: 1,\n      },\n      {\n        id: \"7-9\",\n        productName: \"Gaming Monitor\",\n        category: \"Electronics\",\n        price: \"$399.99\",\n        quantity: 1,\n      },\n      {\n        id: \"7-10\",\n        productName: \"Graphics Card\",\n        category: \"Electronics\",\n        price: \"$599.99\",\n        quantity: 1,\n      },\n      {\n        id: \"7-11\",\n        productName: \"RAM\",\n        category: \"Electronics\",\n        price: \"$89.99\",\n        quantity: 1,\n      },\n      {\n        id: \"7-12\",\n        productName: \"SSD\",\n        category: \"Electronics\",\n        price: \"$129.99\",\n        quantity: 1,\n      },\n      {\n        id: \"7-13\",\n        productName: \"CPU\",\n        category: \"Electronics\",\n        price: \"$299.99\",\n        quantity: 1,\n      },\n      {\n        id: \"7-14\",\n        productName: \"Motherboard\",\n        category: \"Electronics\",\n        price: \"$199.99\",\n        quantity: 1,\n      },\n      {\n        id: \"7-15\",\n        productName: \"Power Supply\",\n        category: \"Electronics\",\n        price: \"$149.99\",\n        quantity: 1,\n      },\n    ],\n  },\n  {\n    id: \"8\",\n    orderNumber: \"SO-008\",\n    customer: \"Maria Garcia\",\n    customerEmail: \"maria@example.com\",\n    customerAvatar:\n      \"https://images.unsplash.com/photo-1620075225255-8c2051b6c015?w=96&h=96&dpr=2&q=80\",\n    total: \"$89.97\",\n    status: {\n      label: \"Delivered\",\n      variant: \"success-light\",\n    },\n    items: [\n      {\n        id: \"8-1\",\n        productName: \"Yoga Mat\",\n        category: \"Sports\",\n        price: \"$29.99\",\n        quantity: 1,\n      },\n      {\n        id: \"8-2\",\n        productName: \"Water Bottle\",\n        category: \"Sports\",\n        price: \"$19.99\",\n        quantity: 1,\n      },\n      {\n        id: \"8-3\",\n        productName: \"Resistance Bands\",\n        category: \"Sports\",\n        price: \"$39.99\",\n        quantity: 1,\n      },\n      {\n        id: \"8-4\",\n        productName: \"Dumbbells\",\n        category: \"Sports\",\n        price: \"$49.99\",\n        quantity: 1,\n      },\n      {\n        id: \"8-5\",\n        productName: \"Kettlebell\",\n        category: \"Sports\",\n        price: \"$59.99\",\n        quantity: 1,\n      },\n      {\n        id: \"8-6\",\n        productName: \"Jump Rope\",\n        category: \"Sports\",\n        price: \"$14.99\",\n        quantity: 1,\n      },\n      {\n        id: \"8-7\",\n        productName: \"Foam Roller\",\n        category: \"Sports\",\n        price: \"$24.99\",\n        quantity: 1,\n      },\n      {\n        id: \"8-8\",\n        productName: \"Exercise Ball\",\n        category: \"Sports\",\n        price: \"$34.99\",\n        quantity: 1,\n      },\n      {\n        id: \"8-9\",\n        productName: \"Yoga Block\",\n        category: \"Sports\",\n        price: \"$12.99\",\n        quantity: 1,\n      },\n      {\n        id: \"8-10\",\n        productName: \"Stretching Strap\",\n        category: \"Sports\",\n        price: \"$9.99\",\n        quantity: 1,\n      },\n      {\n        id: \"8-11\",\n        productName: \"Gym Towel\",\n        category: \"Sports\",\n        price: \"$7.99\",\n        quantity: 1,\n      },\n      {\n        id: \"8-12\",\n        productName: \"Sports Bra\",\n        category: \"Clothing\",\n        price: \"$29.99\",\n        quantity: 1,\n      },\n      {\n        id: \"8-13\",\n        productName: \"Workout Shorts\",\n        category: \"Clothing\",\n        price: \"$24.99\",\n        quantity: 1,\n      },\n      {\n        id: \"8-14\",\n        productName: \"Running Shoes\",\n        category: \"Sports\",\n        price: \"$89.99\",\n        quantity: 1,\n      },\n      {\n        id: \"8-15\",\n        productName: \"Protein Shaker\",\n        category: \"Sports\",\n        price: \"$12.99\",\n        quantity: 1,\n      },\n    ],\n  },\n  {\n    id: \"9\",\n    orderNumber: \"SO-009\",\n    customer: \"Nick Johnson\",\n    customerEmail: \"nick@example.com\",\n    customerAvatar:\n      \"https://images.unsplash.com/photo-1485206412256-701ccc5b93ca?w=96&h=96&dpr=2&q=80\",\n    total: \"$199.98\",\n    status: {\n      label: \"Cancelled\",\n      variant: \"destructive-light\",\n    },\n    items: [\n      {\n        id: \"9-1\",\n        productName: \"Smart Watch\",\n        category: \"Electronics\",\n        price: \"$199.99\",\n        quantity: 1,\n      },\n      {\n        id: \"9-2\",\n        productName: \"Watch Band\",\n        category: \"Accessories\",\n        price: \"$29.99\",\n        quantity: 1,\n      },\n      {\n        id: \"9-3\",\n        productName: \"Charging Dock\",\n        category: \"Electronics\",\n        price: \"$39.99\",\n        quantity: 1,\n      },\n      {\n        id: \"9-4\",\n        productName: \"Screen Protector\",\n        category: \"Accessories\",\n        price: \"$14.99\",\n        quantity: 1,\n      },\n      {\n        id: \"9-5\",\n        productName: \"Case\",\n        category: \"Accessories\",\n        price: \"$19.99\",\n        quantity: 1,\n      },\n      {\n        id: \"9-6\",\n        productName: \"Strap\",\n        category: \"Accessories\",\n        price: \"$24.99\",\n        quantity: 1,\n      },\n      {\n        id: \"9-7\",\n        productName: \"Cable\",\n        category: \"Electronics\",\n        price: \"$9.99\",\n        quantity: 1,\n      },\n      {\n        id: \"9-8\",\n        productName: \"Adapter\",\n        category: \"Electronics\",\n        price: \"$12.99\",\n        quantity: 1,\n      },\n      {\n        id: \"9-9\",\n        productName: \"Mount\",\n        category: \"Accessories\",\n        price: \"$16.99\",\n        quantity: 1,\n      },\n      {\n        id: \"9-10\",\n        productName: \"Stand\",\n        category: \"Accessories\",\n        price: \"$22.99\",\n        quantity: 1,\n      },\n      {\n        id: \"9-11\",\n        productName: \"Cover\",\n        category: \"Accessories\",\n        price: \"$8.99\",\n        quantity: 1,\n      },\n      {\n        id: \"9-12\",\n        productName: \"Grip\",\n        category: \"Accessories\",\n        price: \"$11.99\",\n        quantity: 1,\n      },\n      {\n        id: \"9-13\",\n        productName: \"Lens\",\n        category: \"Accessories\",\n        price: \"$6.99\",\n        quantity: 1,\n      },\n      {\n        id: \"9-14\",\n        productName: \"Filter\",\n        category: \"Accessories\",\n        price: \"$4.99\",\n        quantity: 1,\n      },\n      {\n        id: \"9-15\",\n        productName: \"Cleaning Kit\",\n        category: \"Accessories\",\n        price: \"$7.99\",\n        quantity: 1,\n      },\n    ],\n  },\n  {\n    id: \"10\",\n    orderNumber: \"SO-010\",\n    customer: \"Liam Thompson\",\n    customerEmail: \"liam@example.com\",\n    customerAvatar:\n      \"https://images.unsplash.com/photo-1542595913-85d69b0edbaf?w=96&h=96&dpr=2&q=80\",\n    total: \"$149.97\",\n    status: {\n      label: \"Pending\",\n      variant: \"warning-light\",\n    },\n    items: [\n      {\n        id: \"10-1\",\n        productName: \"Kitchen Knife Set\",\n        category: \"Home\",\n        price: \"$79.99\",\n        quantity: 1,\n      },\n      {\n        id: \"10-2\",\n        productName: \"Cutting Board\",\n        category: \"Home\",\n        price: \"$29.99\",\n        quantity: 1,\n      },\n      {\n        id: \"10-3\",\n        productName: \"Utensil Set\",\n        category: \"Home\",\n        price: \"$39.99\",\n        quantity: 1,\n      },\n      {\n        id: \"10-4\",\n        productName: \"Dish Towels\",\n        category: \"Home\",\n        price: \"$12.99\",\n        quantity: 1,\n      },\n      {\n        id: \"10-5\",\n        productName: \"Pot Holders\",\n        category: \"Home\",\n        price: \"$8.99\",\n        quantity: 1,\n      },\n      {\n        id: \"10-6\",\n        productName: \"Trivet\",\n        category: \"Home\",\n        price: \"$14.99\",\n        quantity: 1,\n      },\n      {\n        id: \"10-7\",\n        productName: \"Measuring Cups\",\n        category: \"Home\",\n        price: \"$16.99\",\n        quantity: 1,\n      },\n      {\n        id: \"10-8\",\n        productName: \"Measuring Spoons\",\n        category: \"Home\",\n        price: \"$9.99\",\n        quantity: 1,\n      },\n      {\n        id: \"10-9\",\n        productName: \"Mixing Bowls\",\n        category: \"Home\",\n        price: \"$24.99\",\n        quantity: 1,\n      },\n      {\n        id: \"10-10\",\n        productName: \"Spatula\",\n        category: \"Home\",\n        price: \"$6.99\",\n        quantity: 1,\n      },\n      {\n        id: \"10-11\",\n        productName: \"Whisk\",\n        category: \"Home\",\n        price: \"$4.99\",\n        quantity: 1,\n      },\n      {\n        id: \"10-12\",\n        productName: \"Ladle\",\n        category: \"Home\",\n        price: \"$7.99\",\n        quantity: 1,\n      },\n      {\n        id: \"10-13\",\n        productName: \"Tongs\",\n        category: \"Home\",\n        price: \"$11.99\",\n        quantity: 1,\n      },\n      {\n        id: \"10-14\",\n        productName: \"Can Opener\",\n        category: \"Home\",\n        price: \"$13.99\",\n        quantity: 1,\n      },\n      {\n        id: \"10-15\",\n        productName: \"Bottle Opener\",\n        category: \"Home\",\n        price: \"$5.99\",\n        quantity: 1,\n      },\n    ],\n  },\n  {\n    id: \"11\",\n    orderNumber: \"SO-011\",\n    customer: \"Alex Johnson\",\n    customerEmail: \"alex@example.com\",\n    customerAvatar:\n      \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80\",\n    total: \"$279.96\",\n    status: {\n      label: \"Shipped\",\n      variant: \"primary-outline\",\n    },\n    items: [\n      {\n        id: \"11-1\",\n        productName: \"Office Chair\",\n        category: \"Furniture\",\n        price: \"$199.99\",\n        quantity: 1,\n      },\n      {\n        id: \"11-2\",\n        productName: \"Desk Mat\",\n        category: \"Office\",\n        price: \"$19.99\",\n        quantity: 1,\n      },\n      {\n        id: \"11-3\",\n        productName: \"Monitor Stand\",\n        category: \"Electronics\",\n        price: \"$59.99\",\n        quantity: 1,\n      },\n      {\n        id: \"11-4\",\n        productName: \"Desk Lamp\",\n        category: \"Office\",\n        price: \"$39.99\",\n        quantity: 1,\n      },\n      {\n        id: \"11-5\",\n        productName: \"Pen Holder\",\n        category: \"Office\",\n        price: \"$12.99\",\n        quantity: 1,\n      },\n      {\n        id: \"11-6\",\n        productName: \"File Organizer\",\n        category: \"Office\",\n        price: \"$24.99\",\n        quantity: 1,\n      },\n      {\n        id: \"11-7\",\n        productName: \"Stapler\",\n        category: \"Office\",\n        price: \"$16.99\",\n        quantity: 1,\n      },\n      {\n        id: \"11-8\",\n        productName: \"Paper Clips\",\n        category: \"Office\",\n        price: \"$4.99\",\n        quantity: 1,\n      },\n      {\n        id: \"11-9\",\n        productName: \"Binder\",\n        category: \"Office\",\n        price: \"$8.99\",\n        quantity: 1,\n      },\n      {\n        id: \"11-10\",\n        productName: \"Highlighter\",\n        category: \"Office\",\n        price: \"$6.99\",\n        quantity: 1,\n      },\n      {\n        id: \"11-11\",\n        productName: \"Eraser\",\n        category: \"Office\",\n        price: \"$2.99\",\n        quantity: 1,\n      },\n      {\n        id: \"11-12\",\n        productName: \"Ruler\",\n        category: \"Office\",\n        price: \"$3.99\",\n        quantity: 1,\n      },\n      {\n        id: \"11-13\",\n        productName: \"Calculator\",\n        category: \"Office\",\n        price: \"$19.99\",\n        quantity: 1,\n      },\n      {\n        id: \"11-14\",\n        productName: \"Calendar\",\n        category: \"Office\",\n        price: \"$14.99\",\n        quantity: 1,\n      },\n      {\n        id: \"11-15\",\n        productName: \"Whiteboard\",\n        category: \"Office\",\n        price: \"$24.99\",\n        quantity: 1,\n      },\n    ],\n  },\n  {\n    id: \"12\",\n    orderNumber: \"SO-012\",\n    customer: \"Sarah Chen\",\n    customerEmail: \"sarah@example.com\",\n    customerAvatar:\n      \"https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80\",\n    total: \"$119.97\",\n    status: {\n      label: \"Processing\",\n      variant: \"info-light\",\n    },\n    items: [\n      {\n        id: \"12-1\",\n        productName: \"Skincare Set\",\n        category: \"Beauty\",\n        price: \"$59.99\",\n        quantity: 1,\n      },\n      {\n        id: \"12-2\",\n        productName: \"Face Mask\",\n        category: \"Beauty\",\n        price: \"$29.99\",\n        quantity: 1,\n      },\n      {\n        id: \"12-3\",\n        productName: \"Moisturizer\",\n        category: \"Beauty\",\n        price: \"$29.99\",\n        quantity: 1,\n      },\n      {\n        id: \"12-4\",\n        productName: \"Cleanser\",\n        category: \"Beauty\",\n        price: \"$19.99\",\n        quantity: 1,\n      },\n      {\n        id: \"12-5\",\n        productName: \"Toner\",\n        category: \"Beauty\",\n        price: \"$24.99\",\n        quantity: 1,\n      },\n      {\n        id: \"12-6\",\n        productName: \"Serum\",\n        category: \"Beauty\",\n        price: \"$39.99\",\n        quantity: 1,\n      },\n      {\n        id: \"12-7\",\n        productName: \"Eye Cream\",\n        category: \"Beauty\",\n        price: \"$34.99\",\n        quantity: 1,\n      },\n      {\n        id: \"12-8\",\n        productName: \"Sunscreen\",\n        category: \"Beauty\",\n        price: \"$16.99\",\n        quantity: 1,\n      },\n      {\n        id: \"12-9\",\n        productName: \"Exfoliant\",\n        category: \"Beauty\",\n        price: \"$22.99\",\n        quantity: 1,\n      },\n      {\n        id: \"12-10\",\n        productName: \"Lip Balm\",\n        category: \"Beauty\",\n        price: \"$7.99\",\n        quantity: 1,\n      },\n      {\n        id: \"12-11\",\n        productName: \"Hand Cream\",\n        category: \"Beauty\",\n        price: \"$12.99\",\n        quantity: 1,\n      },\n      {\n        id: \"12-12\",\n        productName: \"Body Lotion\",\n        category: \"Beauty\",\n        price: \"$18.99\",\n        quantity: 1,\n      },\n      {\n        id: \"12-13\",\n        productName: \"Shampoo\",\n        category: \"Beauty\",\n        price: \"$14.99\",\n        quantity: 1,\n      },\n      {\n        id: \"12-14\",\n        productName: \"Conditioner\",\n        category: \"Beauty\",\n        price: \"$14.99\",\n        quantity: 1,\n      },\n      {\n        id: \"12-15\",\n        productName: \"Hair Mask\",\n        category: \"Beauty\",\n        price: \"$19.99\",\n        quantity: 1,\n      },\n    ],\n  },\n  {\n    id: \"13\",\n    orderNumber: \"SO-013\",\n    customer: \"Michael Rodriguez\",\n    customerEmail: \"michael@example.com\",\n    customerAvatar:\n      \"https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?w=96&h=96&dpr=2&q=80\",\n    total: \"$89.98\",\n    status: {\n      label: \"Delivered\",\n      variant: \"success-light\",\n    },\n    items: [\n      {\n        id: \"13-1\",\n        productName: \"T-Shirt\",\n        category: \"Clothing\",\n        price: \"$19.99\",\n        quantity: 2,\n      },\n      {\n        id: \"13-2\",\n        productName: \"Jeans\",\n        category: \"Clothing\",\n        price: \"$49.99\",\n        quantity: 1,\n      },\n      {\n        id: \"13-3\",\n        productName: \"Hoodie\",\n        category: \"Clothing\",\n        price: \"$39.99\",\n        quantity: 1,\n      },\n      {\n        id: \"13-4\",\n        productName: \"Sweater\",\n        category: \"Clothing\",\n        price: \"$34.99\",\n        quantity: 1,\n      },\n      {\n        id: \"13-5\",\n        productName: \"Jacket\",\n        category: \"Clothing\",\n        price: \"$79.99\",\n        quantity: 1,\n      },\n      {\n        id: \"13-6\",\n        productName: \"Shorts\",\n        category: \"Clothing\",\n        price: \"$24.99\",\n        quantity: 1,\n      },\n      {\n        id: \"13-7\",\n        productName: \"Pants\",\n        category: \"Clothing\",\n        price: \"$44.99\",\n        quantity: 1,\n      },\n      {\n        id: \"13-8\",\n        productName: \"Dress\",\n        category: \"Clothing\",\n        price: \"$59.99\",\n        quantity: 1,\n      },\n      {\n        id: \"13-9\",\n        productName: \"Skirt\",\n        category: \"Clothing\",\n        price: \"$29.99\",\n        quantity: 1,\n      },\n      {\n        id: \"13-10\",\n        productName: \"Blouse\",\n        category: \"Clothing\",\n        price: \"$34.99\",\n        quantity: 1,\n      },\n      {\n        id: \"13-11\",\n        productName: \"Socks\",\n        category: \"Clothing\",\n        price: \"$9.99\",\n        quantity: 1,\n      },\n      {\n        id: \"13-12\",\n        productName: \"Underwear\",\n        category: \"Clothing\",\n        price: \"$14.99\",\n        quantity: 1,\n      },\n      {\n        id: \"13-13\",\n        productName: \"Hat\",\n        category: \"Clothing\",\n        price: \"$19.99\",\n        quantity: 1,\n      },\n      {\n        id: \"13-14\",\n        productName: \"Scarf\",\n        category: \"Clothing\",\n        price: \"$16.99\",\n        quantity: 1,\n      },\n      {\n        id: \"13-15\",\n        productName: \"Gloves\",\n        category: \"Clothing\",\n        price: \"$12.99\",\n        quantity: 1,\n      },\n    ],\n  },\n  {\n    id: \"14\",\n    orderNumber: \"SO-014\",\n    customer: \"Emma Wilson\",\n    customerEmail: \"emma@example.com\",\n    customerAvatar:\n      \"https://images.unsplash.com/photo-1485893086445-ed75865251e0?w=96&h=96&dpr=2&q=80\",\n    total: \"$199.97\",\n    status: {\n      label: \"Shipped\",\n      variant: \"primary-light\",\n    },\n    items: [\n      {\n        id: \"14-1\",\n        productName: \"Tablet\",\n        category: \"Electronics\",\n        price: \"$199.99\",\n        quantity: 1,\n      },\n      {\n        id: \"14-2\",\n        productName: \"Tablet Case\",\n        category: \"Accessories\",\n        price: \"$29.99\",\n        quantity: 1,\n      },\n      {\n        id: \"14-3\",\n        productName: \"Screen Protector\",\n        category: \"Accessories\",\n        price: \"$14.99\",\n        quantity: 1,\n      },\n      {\n        id: \"14-4\",\n        productName: \"Stylus\",\n        category: \"Accessories\",\n        price: \"$39.99\",\n        quantity: 1,\n      },\n      {\n        id: \"14-5\",\n        productName: \"Keyboard\",\n        category: \"Electronics\",\n        price: \"$79.99\",\n        quantity: 1,\n      },\n      {\n        id: \"14-6\",\n        productName: \"Mouse\",\n        category: \"Electronics\",\n        price: \"$49.99\",\n        quantity: 1,\n      },\n      {\n        id: \"14-7\",\n        productName: \"Charging Cable\",\n        category: \"Electronics\",\n        price: \"$19.99\",\n        quantity: 1,\n      },\n      {\n        id: \"14-8\",\n        productName: \"Power Adapter\",\n        category: \"Electronics\",\n        price: \"$24.99\",\n        quantity: 1,\n      },\n      {\n        id: \"14-9\",\n        productName: \"Stand\",\n        category: \"Accessories\",\n        price: \"$34.99\",\n        quantity: 1,\n      },\n      {\n        id: \"14-10\",\n        productName: \"Mount\",\n        category: \"Accessories\",\n        price: \"$19.99\",\n        quantity: 1,\n      },\n      {\n        id: \"14-11\",\n        productName: \"Cover\",\n        category: \"Accessories\",\n        price: \"$16.99\",\n        quantity: 1,\n      },\n      {\n        id: \"14-12\",\n        productName: \"Grip\",\n        category: \"Accessories\",\n        price: \"$11.99\",\n        quantity: 1,\n      },\n      {\n        id: \"14-13\",\n        productName: \"Lens\",\n        category: \"Accessories\",\n        price: \"$6.99\",\n        quantity: 1,\n      },\n      {\n        id: \"14-14\",\n        productName: \"Filter\",\n        category: \"Accessories\",\n        price: \"$4.99\",\n        quantity: 1,\n      },\n      {\n        id: \"14-15\",\n        productName: \"Cleaning Kit\",\n        category: \"Accessories\",\n        price: \"$7.99\",\n        quantity: 1,\n      },\n    ],\n  },\n  {\n    id: \"15\",\n    orderNumber: \"SO-015\",\n    customer: \"David Kim\",\n    customerEmail: \"david@example.com\",\n    customerAvatar:\n      \"https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?w=96&h=96&dpr=2&q=80\",\n    total: \"$159.96\",\n    status: {\n      label: \"Pending\",\n      variant: \"warning-light\",\n    },\n    items: [\n      {\n        id: \"15-1\",\n        productName: \"Gaming Headset\",\n        category: \"Electronics\",\n        price: \"$99.99\",\n        quantity: 1,\n      },\n      {\n        id: \"15-2\",\n        productName: \"Gaming Controller\",\n        category: \"Electronics\",\n        price: \"$59.99\",\n        quantity: 1,\n      },\n      {\n        id: \"15-3\",\n        productName: \"Gaming Mouse\",\n        category: \"Electronics\",\n        price: \"$79.99\",\n        quantity: 1,\n      },\n      {\n        id: \"15-4\",\n        productName: \"Gaming Keyboard\",\n        category: \"Electronics\",\n        price: \"$129.99\",\n        quantity: 1,\n      },\n      {\n        id: \"15-5\",\n        productName: \"Gaming Chair\",\n        category: \"Furniture\",\n        price: \"$299.99\",\n        quantity: 1,\n      },\n      {\n        id: \"15-6\",\n        productName: \"Gaming Desk\",\n        category: \"Furniture\",\n        price: \"$199.99\",\n        quantity: 1,\n      },\n      {\n        id: \"15-7\",\n        productName: \"RGB Strip\",\n        category: \"Electronics\",\n        price: \"$29.99\",\n        quantity: 1,\n      },\n      {\n        id: \"15-8\",\n        productName: \"Mouse Pad\",\n        category: \"Accessories\",\n        price: \"$19.99\",\n        quantity: 1,\n      },\n      {\n        id: \"15-9\",\n        productName: \"Gaming Monitor\",\n        category: \"Electronics\",\n        price: \"$399.99\",\n        quantity: 1,\n      },\n      {\n        id: \"15-10\",\n        productName: \"Graphics Card\",\n        category: \"Electronics\",\n        price: \"$599.99\",\n        quantity: 1,\n      },\n      {\n        id: \"15-11\",\n        productName: \"RAM\",\n        category: \"Electronics\",\n        price: \"$89.99\",\n        quantity: 1,\n      },\n      {\n        id: \"15-12\",\n        productName: \"SSD\",\n        category: \"Electronics\",\n        price: \"$129.99\",\n        quantity: 1,\n      },\n      {\n        id: \"15-13\",\n        productName: \"CPU\",\n        category: \"Electronics\",\n        price: \"$299.99\",\n        quantity: 1,\n      },\n      {\n        id: \"15-14\",\n        productName: \"Motherboard\",\n        category: \"Electronics\",\n        price: \"$199.99\",\n        quantity: 1,\n      },\n      {\n        id: \"15-15\",\n        productName: \"Power Supply\",\n        category: \"Electronics\",\n        price: \"$149.99\",\n        quantity: 1,\n      },\n    ],\n  },\n]\n\n// Sub-table component for order items\nfunction OrderItemsSubTable({ items }: { items: OrderItemData[] }) {\n  const [sorting, setSorting] = useState<SortingState>([])\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 5, // Show 3 items per page for sub-tables\n  })\n\n  const columns = useMemo<ColumnDef<DataGridFeatures, OrderItemData>[]>(\n    () => [\n      {\n        accessorKey: \"productName\",\n        header: ({ column }) => (\n          <DataGridColumnHeader title=\"Product\" column={column} />\n        ),\n        cell: (info) => info.getValue() as string,\n        enableSorting: true,\n        size: 200,\n      },\n      {\n        accessorKey: \"category\",\n        header: ({ column }) => (\n          <DataGridColumnHeader title=\"Category\" column={column} />\n        ),\n        cell: (info) => info.getValue() as string,\n        enableSorting: true,\n        size: 120,\n      },\n      {\n        accessorKey: \"price\",\n        header: ({ column }) => (\n          <DataGridColumnHeader title=\"Price\" column={column} />\n        ),\n        cell: (info) => info.getValue() as string,\n        enableSorting: true,\n        size: 100,\n      },\n      {\n        accessorKey: \"quantity\",\n        header: ({ column }) => (\n          <DataGridColumnHeader title=\"Qty\" column={column} />\n        ),\n        cell: (info) => info.getValue() as number,\n        enableSorting: true,\n        size: 80,\n      },\n    ],\n    []\n  )\n\n  const table = useTable({\n    features: dataGridFeatures,\n    data: items,\n    columns,\n    pageCount: Math.ceil(items.length / pagination.pageSize),\n    state: {\n      sorting,\n      pagination,\n    },\n    onSortingChange: setSorting,\n    onPaginationChange: setPagination,\n    getRowId: (row: OrderItemData) => row.id,\n  })\n\n  return (\n    <div className=\"bg-background min-w-0\">\n      <DataGrid\n        table={table}\n        recordCount={items.length}\n        tableLayout={{\n          rowBorder: true,\n        }}\n      >\n        <div className=\"w-full min-w-0 space-y-2.5 p-3 pl-12\">\n          <Card className=\"p-0\">\n            <DataGridContainer className=\"min-w-0\">\n              <DataGridScrollArea className=\"min-w-0\">\n                <DataGridTable />\n              </DataGridScrollArea>\n            </DataGridContainer>\n          </Card>\n          <DataGridPagination className=\"pb-1.5\" />\n        </div>\n      </DataGrid>\n    </div>\n  )\n}\n\nexport function Pattern() {\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 5,\n  })\n  const [sorting, setSorting] = useState<SortingState>([])\n  const [expandedRows, setExpandedRows] = useState<ExpandedState>({})\n  const [columnOrder, setColumnOrder] = useState<string[]>([\n    \"expand\",\n    \"customer\",\n    \"items\",\n    \"total\",\n    \"status\",\n  ])\n\n  const columns = useMemo<ColumnDef<DataGridFeatures, Data>[]>(\n    () => [\n      {\n        id: \"expand\",\n        header: () => null,\n        cell: ({ row }) => {\n          return row.getCanExpand() ? (\n            <Button\n              onClick={row.getToggleExpandedHandler()}\n              size=\"icon-sm\"\n              variant=\"ghost\"\n              className=\"opacity-70 hover:bg-transparent hover:opacity-100\"\n              aria-label={\n                row.getIsExpanded()\n                  ? \"Collapse order items\"\n                  : \"Expand order items\"\n              }\n            >\n              {row.getIsExpanded() ? (\n                <IconPlaceholder\n                  lucide=\"ChevronUpIcon\"\n                  tabler=\"IconChevronUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"CaretUpIcon\"\n                  remixicon=\"RiArrowUpSLine\"\n                  aria-hidden=\"true\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                  aria-hidden=\"true\"\n                />\n              )}\n            </Button>\n          ) : null\n        },\n        size: 25,\n        enableResizing: false,\n        meta: {\n          expandedContent: (row) => <OrderItemsSubTable items={row.items} />,\n        },\n      },\n      {\n        accessorKey: \"customer\",\n        id: \"customer\",\n        header: ({ column }) => (\n          <DataGridColumnHeader\n            title=\"Customer\"\n            visibility={true}\n            column={column}\n          />\n        ),\n        cell: ({ row }) => {\n          return (\n            <div className=\"flex items-center gap-3\">\n              <Avatar className=\"size-8\">\n                <AvatarImage\n                  src={row.original.customerAvatar}\n                  alt={row.original.customer}\n                />\n                <AvatarFallback>\n                  {row.original.customer\n                    .split(\" \")\n                    .map((n) => n[0])\n                    .join(\"\")}\n                </AvatarFallback>\n              </Avatar>\n              <div className=\"space-y-px\">\n                <div className=\"text-foreground font-medium\">\n                  {row.original.customer}\n                </div>\n                <div className=\"text-muted-foreground\">\n                  {row.original.customerEmail}\n                </div>\n              </div>\n            </div>\n          )\n        },\n        enableSorting: true,\n        enableHiding: true,\n        enableResizing: true,\n        size: 200,\n      },\n      {\n        accessorKey: \"items\",\n        id: \"items\",\n        header: ({ column }) => (\n          <DataGridColumnHeader\n            title=\"Items\"\n            visibility={true}\n            column={column}\n          />\n        ),\n        cell: (info) => {\n          const items = info.getValue() as OrderItemData[]\n          const itemCount = items.length\n          return (\n            <div\n              className=\"text-foreground hover:text-primary cursor-pointer text-sm font-medium\"\n              onClick={() => info.row.getToggleExpandedHandler()()}\n            >\n              {itemCount} {itemCount === 1 ? \"item\" : \"items\"}\n            </div>\n          )\n        },\n        enableSorting: true,\n        enableHiding: true,\n        enableResizing: true,\n        size: 120,\n      },\n      {\n        accessorKey: \"total\",\n        id: \"total\",\n        header: ({ column }) => (\n          <DataGridColumnHeader\n            title=\"Total\"\n            visibility={true}\n            column={column}\n          />\n        ),\n        cell: (info) => info.getValue() as string,\n        enableSorting: true,\n        enableHiding: true,\n        enableResizing: true,\n        size: 100,\n      },\n      {\n        accessorKey: \"status\",\n        id: \"status\",\n        header: ({ column }) => (\n          <DataGridColumnHeader\n            title=\"Status\"\n            visibility={true}\n            column={column}\n          />\n        ),\n        cell: ({ row }) => {\n          const status = row.original.status\n          return <Badge variant={status.variant}>{status.label}</Badge>\n        },\n        enableSorting: true,\n        enableHiding: true,\n        enableResizing: true,\n        size: 120,\n      },\n    ],\n    []\n  )\n\n  const table = useTable({\n    features: dataGridFeatures,\n    columns,\n    data: demoData,\n    pageCount: Math.ceil((demoData?.length || 0) / pagination.pageSize),\n    getRowId: (row: Data) => row.id,\n    getRowCanExpand: (row) =>\n      Boolean(row.original.items && row.original.items.length > 0),\n    state: {\n      pagination,\n      sorting,\n      expanded: expandedRows,\n      columnOrder,\n    },\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    onExpandedChange: setExpandedRows,\n    onColumnOrderChange: setColumnOrder,\n  })\n\n  return (\n    <DataGrid\n      table={table}\n      recordCount={demoData?.length || 0}\n      tableLayout={{\n        columnsPinnable: true,\n        columnsMovable: true,\n        columnsVisibility: true,\n      }}\n    >\n      <div className=\"w-full space-y-2.5\">\n        <Card className=\"p-0\">\n          <DataGridContainer>\n            <DataGridScrollArea>\n              <DataGridTable />\n            </DataGridScrollArea>\n          </DataGridContainer>\n        </Card>\n        <DataGridPagination />\n      </div>\n    </DataGrid>\n  )\n}","target":"components/examples/c-data-grid-9.tsx"}],"meta":{"order":9,"gridSize":1,"previewHeight":"504","label":"Sub Table"}}