Data Grid

1"use client"
2 
3import * as React from "react"
4 
5import { Badge } from "@/components/ui/badge"
6import { toast } from "sonner"
7import { DynamicColumnDef } from "@/components/data-table/data-table-dynamic/types/column.types"
8import { DynamicDataTable } from "@/components/data-table/data-table-dynamic/core/dynamic-data-table"
9 
10// 1. Define Data Type matching your provided data
11type User = {
12  id: string
13  email: string
14  name: string
15  image: string
16  role_id: string
17  password?: string
18  role: { name: string; description: string }
19  email_verified: boolean
20  created_at: string
21}
22 
23// 2. Initial Data
24const usersData: User[] = [
25  {
26    id: "1",
27    email: "alice@example.com",
28    name: "Alice Johnson",
29    image: "https://i.pravatar.cc/150?img=32",
30    role_id: "role_admin",
31    password: "hashedpassword1",
32    role: { name: "Admin", description: "Administrator role" },
33    email_verified: true,
34    created_at: "2023-07-01T00:00:00.000Z",
35  },
36  {
37    id: "2",
38    email: "bob@example.com",
39    name: "Bob Martin",
40    image: "https://i.pravatar.cc/150?img=12",
41    role_id: "role_user",
42    password: "hashedpassword2",
43    role: { name: "User", description: "Regular user role" },
44    email_verified: true,
45    created_at: "2023-07-02T00:00:00.000Z",
46  },
47  {
48    id: "3",
49    email: "carla@example.com",
50    name: "Carla Gomez",
51    image: "https://i.pravatar.cc/150?img=45",
52    role_id: "role_manager",
53    password: "hashedpassword3",
54    role: { name: "Manager", description: "Manager role" },
55    email_verified: false,
56    created_at: "2023-07-03T00:00:00.000Z",
57  },
58  {
59    id: "4",
60    email: "daniel@example.com",
61    name: "Daniel Lee",
62    image: "https://i.pravatar.cc/150?img=7",
63    role_id: "role_user",
64    password: "hashedpassword4",
65    role: { name: "User", description: "Regular user role" },
66    email_verified: true,
67    created_at: "2023-07-04T00:00:00.000Z",
68  },
69  {
70    id: "5",
71    email: "eva@example.com",
72    name: "Eva Schultz",
73    image: "https://i.pravatar.cc/150?img=18",
74    role_id: "role_support",
75    password: "hashedpassword5",
76    role: { name: "Support", description: "Support role" },
77    email_verified: false,
78    created_at: "2023-07-05T00:00:00.000Z",
79  },
80]
81 
82// 3. Columns Configuration
83const columns: DynamicColumnDef<User>[] = [
84  {
85    accessorKey: "image",
86    header: "",
87    displayMode: "avatar",
88    imageSize: "md",
89    imageAltKey: "name",
90    enableSorting: false,
91    size: 50,
92  },
93  {
94    accessorKey: "name",
95// … truncated