{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-data-grid-4","type":"registry:block","title":"Data grid without table borders","description":"Data grid without table borders","dependencies":["@tanstack/react-table","cn"],"registryDependencies":["avatar","@reui/badge","@reui/data-grid","@reui/data-grid-pagination","@reui/data-grid-scroll-area","@reui/data-grid-table"],"files":[{"path":"c-data-grid-4.tsx","type":"registry:block","content":"\"use client\"\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 { 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 { cn } from \"cn\"\nimport {\n  Avatar,\n  AvatarBadge,\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 demoData: IData[] = [\n  {\n    id: \"1\",\n    name: \"Alex Johnson\",\n    availability: \"online\",\n    avatar:\n      \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80\",\n    status: \"active\",\n    flag: \"us\",\n    email: \"alex@apple.com\",\n    company: \"Apple\",\n    role: \"CEO\",\n    joined: \"Jan, 2024\",\n    location: \"United States\",\n    balance: 5143.03,\n  },\n  {\n    id: \"2\",\n    name: \"Sarah Chen\",\n    availability: \"away\",\n    avatar:\n      \"https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80\",\n    status: \"inactive\",\n    flag: \"gb\",\n    email: \"sarah@openai.com\",\n    company: \"OpenAI\",\n    role: \"CTO\",\n    joined: \"Mar, 2023\",\n    location: \"United Kingdom\",\n    balance: 4321.87,\n  },\n  {\n    id: \"3\",\n    name: \"Michael Rodriguez\",\n    availability: \"busy\",\n    avatar:\n      \"https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?w=96&h=96&dpr=2&q=80\",\n    status: \"active\",\n    flag: \"ca\",\n    email: \"michael@meta.com\",\n    company: \"Meta\",\n    role: \"Designer\",\n    joined: \"Jun, 2022\",\n    location: \"Canada\",\n    balance: 7654.98,\n  },\n  {\n    id: \"4\",\n    name: \"Emma Wilson\",\n    availability: \"offline\",\n    avatar:\n      \"https://images.unsplash.com/photo-1485893086445-ed75865251e0?w=96&h=96&dpr=2&q=80\",\n    status: \"inactive\",\n    flag: \"au\",\n    email: \"emma@tesla.com\",\n    company: \"Tesla\",\n    role: \"Developer\",\n    joined: \"Sep, 2024\",\n    location: \"Australia\",\n    balance: 3456.45,\n  },\n  {\n    id: \"5\",\n    name: \"David Kim\",\n    availability: \"online\",\n    avatar:\n      \"https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?w=96&h=96&dpr=2&q=80\",\n    status: \"active\",\n    flag: \"de\",\n    email: \"david@sap.com\",\n    company: \"SAP\",\n    role: \"Lawyer\",\n    joined: \"Nov, 2023\",\n    location: \"Germany\",\n    balance: 9876.54,\n  },\n  {\n    id: \"6\",\n    name: \"Aron Thompson\",\n    availability: \"away\",\n    avatar:\n      \"https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=96&h=96&dpr=2&q=80\",\n    status: \"active\",\n    flag: \"my\",\n    email: \"aron@keenthemes.com\",\n    company: \"Keenthemes\",\n    role: \"Director\",\n    joined: \"Feb, 2022\",\n    location: \"Malaysia\",\n    balance: 6214.22,\n  },\n  {\n    id: \"7\",\n    name: \"James Brown\",\n    availability: \"busy\",\n    avatar:\n      \"https://images.unsplash.com/photo-1543299750-19d1d6297053?w=96&h=96&dpr=2&q=80\",\n    status: \"inactive\",\n    flag: \"es\",\n    email: \"james@bbva.es\",\n    company: \"BBVA\",\n    role: \"Product Manager\",\n    joined: \"Aug, 2024\",\n    location: \"Spain\",\n    balance: 5321.77,\n  },\n  {\n    id: \"8\",\n    name: \"Maria Garcia\",\n    availability: \"offline\",\n    avatar:\n      \"https://images.unsplash.com/photo-1620075225255-8c2051b6c015?w=96&h=96&dpr=2&q=80\",\n    status: \"active\",\n    flag: \"jp\",\n    email: \"maria@sony.jp\",\n    company: \"Sony\",\n    role: \"Marketing Lead\",\n    joined: \"Dec, 2023\",\n    location: \"Japan\",\n    balance: 8452.39,\n  },\n  {\n    id: \"9\",\n    name: \"Nick Johnson\",\n    availability: \"online\",\n    avatar:\n      \"https://images.unsplash.com/photo-1485206412256-701ccc5b93ca?w=96&h=96&dpr=2&q=80\",\n    status: \"active\",\n    flag: \"fr\",\n    email: \"nick@lvmh.fr\",\n    company: \"LVMH\",\n    role: \"Data Scientist\",\n    joined: \"Apr, 2022\",\n    location: \"France\",\n    balance: 7345.1,\n  },\n  {\n    id: \"10\",\n    name: \"Liam Thompson\",\n    availability: \"away\",\n    avatar:\n      \"https://images.unsplash.com/photo-1542595913-85d69b0edbaf?w=96&h=96&dpr=2&q=80\",\n    status: \"inactive\",\n    flag: \"it\",\n    email: \"liam@eni.it\",\n    company: \"ENI\",\n    role: \"Engineer\",\n    joined: \"Jul, 2024\",\n    location: \"Italy\",\n    balance: 5214.88,\n  },\n  {\n    id: \"11\",\n    name: \"Alex Johnson\",\n    availability: \"busy\",\n    avatar:\n      \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80\",\n    status: \"active\",\n    flag: \"br\",\n    email: \"alex@vale.br\",\n    company: \"Vale\",\n    role: \"Software Engineer\",\n    joined: \"May, 2023\",\n    location: \"Brazil\",\n    balance: 9421.5,\n  },\n  {\n    id: \"12\",\n    name: \"Sarah Chen\",\n    availability: \"offline\",\n    avatar:\n      \"https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80\",\n    status: \"active\",\n    flag: \"in\",\n    email: \"sarah@tata.in\",\n    company: \"Tata\",\n    role: \"Sales Manager\",\n    joined: \"Oct, 2024\",\n    location: \"India\",\n    balance: 4521.67,\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    { 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          const availability = row.original.availability\n          const statusColors = {\n            online: \"bg-green-500\",\n            away: \"bg-yellow-500\",\n            busy: \"bg-orange-500\",\n            offline: \"bg-gray-400\",\n          }\n\n          return (\n            <div className=\"flex items-center gap-3\">\n              <Avatar className=\"size-8\">\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                <AvatarBadge\n                  className={cn(\n                    \"size-1.5! p-0\",\n                    statusColors[availability] || statusColors.offline\n                  )}\n                />\n              </Avatar>\n              <div className=\"space-y-px\">\n                <div className=\"text-foreground font-medium\">\n                  {row.original.name}\n                </div>\n                <div className=\"text-muted-foreground\">\n                  {row.original.email}\n                </div>\n              </div>\n            </div>\n          )\n        },\n        size: 225,\n        enableSorting: true,\n        enableHiding: false,\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: 160,\n        meta: {\n          headerClassName: \"\",\n          cellClassName: \"text-start\",\n        },\n      },\n      {\n        accessorKey: \"status\",\n        id: \"status\",\n        header: \"Status\",\n        cell: ({ row }) => {\n          const status = row.original.status\n\n          if (status == \"active\") {\n            return <Badge variant=\"success-outline\">Approved</Badge>\n          } else {\n            return <Badge variant=\"warning-outline\">Pending</Badge>\n          }\n        },\n        size: 100,\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={{\n        headerBackground: false,\n        rowBorder: false,\n        rowRounded: true,\n      }}\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-4.tsx"}],"meta":{"order":4,"gridSize":1,"previewHeight":"508","label":"Borderless"}}