https://web.callyzer.co/assets/data-grid/data.js

1// src/main/resources/static/data.js
2
3export const gridConfig = {
4  data: {
5    columns: [
6      { field: "id", headerName: "ID", pinned: "left", filterType: "number" },
7      {
8        field: "employeeCode", headerName: "Emp. Code", pinned: "left", filterType: "text", validation: {
9          minLength: 6,
10          maxLength: 6,
11          pattern: "^EMP\\d{3}$",
12          errorMessage: "Must be in EMP### format."
13        }
14      },
15      { field: "firstName", headerName: "First Name", filterType: "text" },
16      { field: "lastName", headerName: "Last Name", filterType: "text" },
17      { field: "email", headerName: "Email", filterType: "text", filterInputType: "email" },
18      { field: "gender", headerName: "Gender", filterType: "select", filterOptions: ["Male", "Female", "Other"] },
19      { field: "dateOfBirth", headerName: "Birth Date", filterType: "date" },
20    ],
21    // NOTE: This 'rows' array is now only used if you set mode to 'client'.
22    // The keys inside this data MUST also be camelCase.
23    rows: [
24
25      {
26        "id": 1,
27        "employeeCode": "EMP001",
28        "firstName": "Daniel",
29        "lastName": "Kelly",
30        "email": ["[email protected]", "[email protected]"],
31        "gender": "Male",
32        "dateOfBirth": "1993-05-17",
33      },
34
35      {
36        "id": 2,
37        "employeeCode": "EMP002",
38        "firstName": "James",
39        "lastName": "Martin",
40        "email": ["[email protected]"],
41        "gender": "Female",
42        "dateOfBirth": "1978-09-15",
43      }
44    ]
45  },
46  settings: {
47    mode: 'client', // 'server' or 'client'
48    useRequiredFields: false, // ← turn off if not needed
49    // REQUIRED (initializer checks this!)
50    dataSourceUrl: 'http://localhost:8080/api/employees',
51
52    // OPTIONAL — if you want headers (Auth etc.)
53    dataSource: {
54      headers: {
55        'Content-Type': 'application/json'
56        // 'Authorization': 'Bearer token'
57      }
58    },
59    rowIdField: "id",
60    dateFormat: "YYYY-MM-DD",
61    allowCustomization: {
62      theme: true,
63      dateFormat: true,
64      loadingMode: true,
65      filter: true
66    },
67    filter: {
68      mode: "advanced"
69    },
70    pagination: {
71      mode: "scroll",
72      pageSize: 20,
73      pageSizeOptions: [10, 20, 50, 100]
74    },
75    actionColumn: {
76      visible: true,
77      headerName: "Actions",
78      width: 60,
79      actions: [
80        {
81          id: "edit",
82          label: "Edit Record",
83          icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 256 256\"><path d=\"M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z\"></path></svg>",
84          callback: (rowData) => {
85            alert(`Editing user: ${rowData.firstName} ${rowData.lastName} (ID: ${rowData.id})`);
86            console.log("Editing row data:", rowData);
87          }
88        }
89      ]
90    },
91    themes: [
92      {
93        "name": "Default Light",
94        "variables": {
95          "color-background": "rgba(252, 252, 249, 1)",
96          "color-surface": "rgba(255, 255, 253, 1)",
97          "color-text": "rgba(19, 52, 59, 1)",
98          "color-text-secondary": "rgba(98, 108, 113, 1)",
99          "color-primary": "rgba(33, 128, 141, 1)",
100          "color-primary-hover": "rgba(29, 116, 128, 1)",
101          "color-primary-active": "rgba(26, 104, 115, 1)",
102          "color-secondary": "rgba(94, 82, 64, 0.12)",
103          "color-secondary-hover": "rgba(94, 82, 64, 0.2)",
104          "color-secondary-active": "rgba(94, 82, 64, 0.25)",
105          "color-border": "rgba(94, 82, 64, 0.2)",
106          "color-btn-primary-text": "rgba(252, 252, 249, 1)",
107          "color-card-border": "rgba(94, 82, 64, 0.12)",
108          "color-card-border-inner": "rgba(94, 82, 64, 0.12)",
109          "color-error": "rgba(192, 21, 47, 1)",
110          "color-success": "rgba(33, 128, 141, 1)",
111          "color-warning": "rgba(168, 75, 47, 1)",
112          "color-info": "rgba(98, 108, 113, 1)",
113          "color-focus-ring": "rgba(33, 128, 141, 0.4)",
114          "color-select-caret": "rgba(19, 52, 59, 0.8)",
115          "color-row-odd": "rgba(255, 255, 253, 1)",
116          "color-row-even": "rgba(252, 252, 249, 1)",
117          "color-row-hover": "#e4e4e4",
118          "color-row-selected": "#d9e7ffff"
119        }
120      }
121    ]
122  }
123};