{
  "name": "data-grid-demo",
  "type": "registry:example",
  "dependencies": [
    "@tanstack/react-table",
    "@tanstack/react-virtual",
    "sonner"
  ],
  "devDependencies": [
    "@faker-js/faker"
  ],
  "registryDependencies": [
    "data-grid"
  ],
  "files": [
    {
      "path": "examples/data-grid-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport type { ColumnDef } from \"@tanstack/react-table\";\n\nimport { faker } from \"@faker-js/faker\";\nimport * as React from \"react\";\n\nimport type { DataGridFeatures } from \"@/lib/data-grid-features\";\n\nimport { DataGrid } from \"@/components/data-grid/data-grid\";\nimport { DataGridKeyboardShortcuts } from \"@/components/data-grid/data-grid-keyboard-shortcuts\";\nimport { useDataGrid } from \"@/hooks/use-data-grid\";\n\ninterface SkateTrick {\n  id: string;\n  trickName?: string;\n  skaterName?: string;\n  difficulty?: \"beginner\" | \"intermediate\" | \"advanced\" | \"expert\";\n  variant?: \"flip\" | \"grind\" | \"grab\" | \"transition\" | \"manual\" | \"slide\";\n  landed?: boolean;\n  attempts?: number;\n  bestScore?: number;\n  location?: string;\n  dateAttempted?: string;\n}\n\nconst skateSpots = [\n  \"Venice Beach Skate Park\",\n  \"Burnside Skate Park\",\n  \"Love Park (Philadelphia)\",\n  \"MACBA (Barcelona)\",\n  \"Southbank (London)\",\n  \"FDR Skate Park\",\n  \"Brooklyn Banks\",\n  \"El Toro High School\",\n  \"Hubba Hideout\",\n  \"Wallenberg High School\",\n  \"EMB (Embarcadero)\",\n  \"Pier 7 (San Francisco)\",\n] as const;\n\nconst skateTricks = {\n  flip: [\n    \"Kickflip\",\n    \"Heelflip\",\n    \"Tre Flip\",\n    \"Hardflip\",\n    \"Inward Heelflip\",\n    \"Frontside Flip\",\n    \"Backside Flip\",\n    \"Varial Flip\",\n    \"Varial Heelflip\",\n    \"Double Flip\",\n    \"Laser Flip\",\n    \"Anti-Casper Flip\",\n    \"Casper Flip\",\n    \"Impossible\",\n    \"360 Flip\",\n    \"Big Spin\",\n    \"Bigspin Flip\",\n  ],\n  grind: [\n    \"50-50 Grind\",\n    \"5-0 Grind\",\n    \"Nosegrind\",\n    \"Crooked Grind\",\n    \"Feeble Grind\",\n    \"Smith Grind\",\n    \"Lipslide\",\n    \"Boardslide\",\n    \"Tailslide\",\n    \"Noseslide\",\n    \"Bluntslide\",\n    \"Nollie Backside Lipslide\",\n    \"Switch Frontside Boardslide\",\n  ],\n  grab: [\n    \"Indy Grab\",\n    \"Melon Grab\",\n    \"Stalefish\",\n    \"Tail Grab\",\n    \"Nose Grab\",\n    \"Method\",\n    \"Mute Grab\",\n    \"Crail Grab\",\n    \"Seatbelt Grab\",\n    \"Roast Beef\",\n    \"Chicken Wing\",\n    \"Tweaked Indy\",\n    \"Japan Air\",\n  ],\n  transition: [\n    \"Frontside Air\",\n    \"Backside Air\",\n    \"McTwist\",\n    \"540\",\n    \"720\",\n    \"900\",\n    \"Frontside 180\",\n    \"Backside 180\",\n    \"Frontside 360\",\n    \"Backside 360\",\n    \"Alley-Oop\",\n    \"Fakie\",\n    \"Revert\",\n    \"Carve\",\n    \"Pump\",\n    \"Drop In\",\n  ],\n  manual: [\n    \"Manual\",\n    \"Nose Manual\",\n    \"Casper\",\n    \"Rail Stand\",\n    \"Pogo\",\n    \"Handstand\",\n    \"One Foot Manual\",\n    \"Spacewalk\",\n    \"Truckstand\",\n    \"Primo\",\n  ],\n  slide: [\n    \"Powerslide\",\n    \"Bert Slide\",\n    \"Coleman Slide\",\n    \"Pendulum Slide\",\n    \"Stand-up Slide\",\n    \"Toeside Slide\",\n    \"Heelside Slide\",\n  ],\n} as const;\n\nfunction generateTrickData(): SkateTrick[] {\n  return Array.from({ length: 30 }, () => {\n    const variant = faker.helpers.arrayElement(\n      Object.keys(skateTricks) as Array<keyof typeof skateTricks>,\n    );\n    const trickName = faker.helpers.arrayElement(skateTricks[variant]);\n    const skaterName = faker.person.fullName();\n    const attempts = faker.number.int({ min: 1, max: 50 });\n    const landed = faker.datatype.boolean(0.6);\n\n    const getDifficulty = (trick: string): SkateTrick[\"difficulty\"] => {\n      const expertTricks = [\n        \"Tre Flip\",\n        \"900\",\n        \"McTwist\",\n        \"Laser Flip\",\n        \"Impossible\",\n      ];\n      const advancedTricks = [\n        \"Hardflip\",\n        \"720\",\n        \"540\",\n        \"Crooked Grind\",\n        \"Switch Frontside Boardslide\",\n      ];\n      const intermediateTricks = [\n        \"Kickflip\",\n        \"Heelflip\",\n        \"Frontside 180\",\n        \"50-50 Grind\",\n        \"Boardslide\",\n      ];\n\n      if (expertTricks.some((t) => trick.includes(t))) return \"expert\";\n      if (advancedTricks.some((t) => trick.includes(t))) return \"advanced\";\n      if (intermediateTricks.some((t) => trick.includes(t)))\n        return \"intermediate\";\n      return \"beginner\";\n    };\n\n    const difficulty = getDifficulty(trickName);\n\n    return {\n      id: faker.string.nanoid(),\n      trickName,\n      skaterName,\n      difficulty,\n      variant,\n      landed,\n      attempts,\n      bestScore: landed\n        ? faker.number.int({ min: 6, max: 10 })\n        : faker.number.int({ min: 1, max: 5 }),\n      location: faker.helpers.arrayElement(skateSpots),\n      dateAttempted:\n        faker.date\n          .between({\n            from: new Date(2023, 0, 1),\n            to: new Date(),\n          })\n          .toISOString()\n          .split(\"T\")[0] ?? \"\",\n    };\n  });\n}\n\nexport default function DataGridDemo() {\n  const [data, setData] = React.useState<SkateTrick[]>(generateTrickData());\n\n  const columns = React.useMemo<ColumnDef<DataGridFeatures, SkateTrick>[]>(\n    () => [\n      {\n        id: \"trickName\",\n        accessorKey: \"trickName\",\n        header: \"Trick name\",\n        meta: {\n          cell: {\n            variant: \"short-text\",\n          },\n        },\n        minSize: 180,\n      },\n      {\n        id: \"skaterName\",\n        accessorKey: \"skaterName\",\n        header: \"Skater\",\n        meta: {\n          cell: {\n            variant: \"short-text\",\n          },\n        },\n        minSize: 150,\n      },\n      {\n        id: \"difficulty\",\n        accessorKey: \"difficulty\",\n        header: \"Difficulty\",\n        meta: {\n          cell: {\n            variant: \"select\",\n            options: [\n              { label: \"Beginner\", value: \"beginner\" },\n              { label: \"Intermediate\", value: \"intermediate\" },\n              { label: \"Advanced\", value: \"advanced\" },\n              { label: \"Expert\", value: \"expert\" },\n            ],\n          },\n        },\n        minSize: 120,\n      },\n      {\n        id: \"variant\",\n        accessorKey: \"variant\",\n        header: \"Category\",\n        meta: {\n          cell: {\n            variant: \"select\",\n            options: [\n              { label: \"Flip\", value: \"flip\" },\n              { label: \"Grind\", value: \"grind\" },\n              { label: \"Grab\", value: \"grab\" },\n              { label: \"Transition\", value: \"transition\" },\n              { label: \"Manual\", value: \"manual\" },\n              { label: \"Slide\", value: \"slide\" },\n            ],\n          },\n        },\n        minSize: 120,\n      },\n      {\n        id: \"landed\",\n        accessorKey: \"landed\",\n        header: \"Landed\",\n        meta: {\n          cell: {\n            variant: \"checkbox\",\n          },\n        },\n        minSize: 100,\n      },\n      {\n        id: \"attempts\",\n        accessorKey: \"attempts\",\n        header: \"Attempts\",\n        meta: {\n          cell: {\n            variant: \"number\",\n            min: 1,\n            max: 100,\n          },\n        },\n        minSize: 100,\n      },\n      {\n        id: \"bestScore\",\n        accessorKey: \"bestScore\",\n        header: \"Score\",\n        meta: {\n          cell: {\n            variant: \"number\",\n            min: 1,\n            max: 10,\n          },\n        },\n        minSize: 110,\n      },\n      {\n        id: \"location\",\n        accessorKey: \"location\",\n        header: \"Location\",\n        meta: {\n          cell: {\n            variant: \"select\",\n            options: skateSpots.map((spot) => ({ label: spot, value: spot })),\n          },\n        },\n        minSize: 180,\n      },\n      {\n        id: \"dateAttempted\",\n        accessorKey: \"dateAttempted\",\n        header: \"Attempted at\",\n        meta: {\n          cell: {\n            variant: \"date\",\n          },\n        },\n        minSize: 130,\n      },\n    ],\n    [],\n  );\n\n  const onRowAdd = React.useCallback(() => {\n    setData((prev) => [...prev, { id: faker.string.nanoid() }]);\n\n    return {\n      rowIndex: data.length,\n      columnId: \"trickName\",\n    };\n  }, [data.length]);\n\n  const { table, ...dataGridProps } = useDataGrid({\n    columns,\n    data,\n    onDataChange: setData,\n    onRowAdd,\n    getRowId: (row) => row.id,\n    initialState: {\n      columnPinning: {\n        start: [\"select\"],\n        end: [],\n      },\n    },\n    enablePaste: true,\n  });\n\n  return (\n    <>\n      <DataGridKeyboardShortcuts enableSearch={!!dataGridProps.searchState} />\n      <DataGrid {...dataGridProps} table={table} height={340} />\n    </>\n  );\n}\n",
      "target": ""
    }
  ]
}