{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-data-grid-3","type":"registry:block","title":"Data grid with dense layout","description":"Data grid with dense layout","dependencies":["@tanstack/react-table"],"registryDependencies":["avatar","@reui/data-grid","@reui/data-grid-pagination","@reui/data-grid-scroll-area","@reui/data-grid-table"],"files":[{"path":"c-data-grid-3.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useMemo, useState } from \"react\"\nimport {\n  DataGrid,\n  DataGridContainer,\n  dataGridFeatures,\n  type DataGridFeatures,\n} from \"@/components/reui/data-grid/data-grid\"\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  PaginationState,\n  SortingState,\n  useTable,\n} from \"@tanstack/react-table\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\n\ninterface IData {\n  id: string\n  name: string\n  availability: \"online\" | \"away\" | \"busy\" | \"offline\"\n  avatar: string\n  status: \"active\" | \"inactive\"\n  flag: string // Emoji flags\n  email: string\n  company: string\n  role: string\n  joined: string\n  location: string\n  balance: number\n}\n\nconst users = [\n  {\n    id: \"1\",\n    name: \"Alex Johnson\",\n    email: \"alex@example.com\",\n    avatar:\n      \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80\",\n    initials: \"AJ\",\n  },\n  {\n    id: \"2\",\n    name: \"Sarah Chen\",\n    email: \"sarah@example.com\",\n    avatar:\n      \"https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80\",\n    initials: \"SC\",\n  },\n  {\n    id: \"3\",\n    name: \"Michael Rodriguez\",\n    email: \"michael@example.com\",\n    avatar:\n      \"https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?w=96&h=96&dpr=2&q=80\",\n    initials: \"MR\",\n  },\n  {\n    id: \"4\",\n    name: \"Emma Wilson\",\n    email: \"emma@example.com\",\n    avatar:\n      \"https://images.unsplash.com/photo-1485893086445-ed75865251e0?w=96&h=96&dpr=2&q=80\",\n    initials: \"EW\",\n  },\n  {\n    id: \"5\",\n    name: \"David Kim\",\n    email: \"david@example.com\",\n    avatar:\n      \"https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?w=96&h=96&dpr=2&q=80\",\n    initials: \"DK\",\n  },\n  {\n    id: \"6\",\n    name: \"Aron Thompson\",\n    email: \"lisa@example.com\",\n    avatar:\n      \"https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=96&h=96&dpr=2&q=80\",\n    initials: \"LT\",\n  },\n  {\n    id: \"7\",\n    name: \"James Brown\",\n    email: \"james@example.com\",\n    avatar:\n      \"https://images.unsplash.com/photo-1543299750-19d1d6297053?w=96&h=96&dpr=2&q=80\",\n    initials: \"JB\",\n  },\n  {\n    id: \"8\",\n    name: \"Maria Garcia\",\n    email: \"maria@example.com\",\n    avatar:\n      \"https://images.unsplash.com/photo-1620075225255-8c2051b6c015?w=96&h=96&dpr=2&q=80\",\n    initials: \"MG\",\n  },\n  {\n    id: \"9\",\n    name: \"Nick Johnson\",\n    email: \"nick@example.com\",\n    avatar:\n      \"https://images.unsplash.com/photo-1485206412256-701ccc5b93ca?w=96&h=96&dpr=2&q=80\",\n    initials: \"NJ\",\n  },\n  {\n    id: \"10\",\n    name: \"Liam Thompson\",\n    email: \"liam@example.com\",\n    avatar:\n      \"https://images.unsplash.com/photo-1542595913-85d69b0edbaf?w=96&h=96&dpr=2&q=80\",\n    initials: \"LT\",\n  },\n]\n\nconst demoData: IData[] = users.map((user, index) => ({\n  ...user,\n  availability: ([\"online\", \"away\", \"busy\", \"offline\"] as const)[index % 4],\n  status: (index % 2 === 0 ? \"active\" : \"inactive\") as \"active\" | \"inactive\",\n  flag: ([\"us\", \"gb\", \"ca\", \"au\", \"de\", \"my\", \"es\", \"jp\", \"fr\", \"it\"] as const)[\n    index % 10\n  ],\n  company: (\n    [\n      \"Apple\",\n      \"OpenAI\",\n      \"Meta\",\n      \"Tesla\",\n      \"SAP\",\n      \"Keenthemes\",\n      \"BBVA\",\n      \"Sony\",\n      \"LVMH\",\n      \"ENI\",\n    ] as const\n  )[index % 10],\n  role: (\n    [\n      \"CEO\",\n      \"CTO\",\n      \"Designer\",\n      \"Developer\",\n      \"Lawyer\",\n      \"Director\",\n      \"Product Manager\",\n      \"Marketing Lead\",\n      \"Data Scientist\",\n      \"Engineer\",\n    ] as const\n  )[index % 10],\n  joined: \"Jan, 2024\",\n  location: (\n    [\n      \"United States\",\n      \"United Kingdom\",\n      \"Canada\",\n      \"Australia\",\n      \"Germany\",\n      \"Malaysia\",\n      \"Spain\",\n      \"Japan\",\n      \"France\",\n      \"Italy\",\n    ] as const\n  )[index % 10],\n  balance: 5143.03 + index * 100,\n}))\n\nexport function Pattern() {\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 5,\n  })\n\n  const [sorting, setSorting] = useState<SortingState>([\n    { id: \"name\", desc: true },\n  ])\n\n  const columns = useMemo<ColumnDef<DataGridFeatures, IData>[]>(\n    () => [\n      {\n        accessorKey: \"name\",\n        id: \"name\",\n        header: \"Name\",\n        cell: ({ row }) => {\n          return (\n            <div className=\"flex items-center gap-2\">\n              <Avatar className=\"size-6\">\n                <AvatarImage\n                  src={row.original.avatar}\n                  alt={row.original.name}\n                />\n                <AvatarFallback>\n                  {row.original.name\n                    .split(\" \")\n                    .map((n) => n[0])\n                    .join(\"\")}\n                </AvatarFallback>\n              </Avatar>\n              <a\n                href=\"#\"\n                className=\"text-foreground hover:text-primary font-medium\"\n              >\n                {row.original.name}\n              </a>\n            </div>\n          )\n        },\n        size: 200,\n        enableSorting: true,\n        enableHiding: false,\n      },\n      {\n        accessorKey: \"email\",\n        header: \"Email\",\n        cell: (info) => (\n          <a\n            href={`mailto:${info.getValue()}`}\n            className=\"hover:text-primary hover:underline\"\n          >\n            {info.getValue() as string}\n          </a>\n        ),\n        size: 175,\n        meta: {\n          headerClassName: \"\",\n        },\n      },\n      {\n        accessorKey: \"location\",\n        header: \"Location\",\n        cell: ({ row }) => {\n          return (\n            <div className=\"flex items-center gap-1.5\">\n              <img\n                src={`https://flagcdn.com/${row.original.flag.toLowerCase()}.svg`}\n                alt={row.original.flag}\n                className=\"size-4 rounded-full object-cover\"\n              />\n              <div className=\"text-foreground font-medium\">\n                {row.original.location}\n              </div>\n            </div>\n          )\n        },\n        size: 175,\n        meta: {\n          headerClassName: \"\",\n          cellClassName: \"text-start\",\n        },\n      },\n      {\n        accessorKey: \"balance\",\n        header: \"Balance ($)\",\n        cell: (info) => (\n          <span className=\"font-semibold\">\n            ${(info.getValue() as number).toFixed(2)}\n          </span>\n        ),\n        size: 125,\n        meta: {\n          headerClassName: \"text-right rtl:text-left\",\n          cellClassName: \"text-right rtl:text-left\",\n        },\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: IData) => row.id,\n    state: {\n      pagination,\n      sorting,\n    },\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n  })\n\n  return (\n    <DataGrid\n      table={table}\n      recordCount={demoData?.length || 0}\n      tableLayout={{ dense: true }}\n    >\n      <div className=\"w-full space-y-2.5\">\n        <DataGridContainer>\n          <DataGridScrollArea>\n            <DataGridTable />\n          </DataGridScrollArea>\n        </DataGridContainer>\n        <DataGridPagination />\n      </div>\n    </DataGrid>\n  )\n}","target":"components/examples/c-data-grid-3.tsx"}],"meta":{"order":3,"gridSize":1,"previewHeight":"392","label":"Dense Layout"}}