Added grid on table component as a mock

src/frontend/package-lock.json

@@ -31,6 +31,7 @@
         "@tailwindcss/line-clamp": "^0.4.4",
         "@types/axios": "^0.14.0",
         "ace-builds": "^1.24.1",
+        "ag-grid-react": "^31.2.1",
         "ansi-to-html": "^0.7.2",
         "axios": "^1.5.0",
         "base64-js": "^1.5.1",
@@ -4325,6 +4326,24 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/ag-grid-community": {
+      "version": "31.2.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.2.1.tgz",
+      "integrity": "sha512-D+gnUQ4dHZ/EQJmupQnDqcEKiCEeuK5ZxlsIpdPKgHg/23dmW+aEdivtB9nLpSc2IEK0RUpchcSxeUT37Boo5A=="
+    },
+    "node_modules/ag-grid-react": {
+      "version": "31.2.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.2.1.tgz",
+      "integrity": "sha512-9UH3xxXRwZfW97oz58KboyCJl4t+zdetopieeHVcttsXX1DvGFDUIEz7A1sQaG8e1DAXLMf3IxoIPrfWheH4XA==",
+      "dependencies": {
+        "ag-grid-community": "31.2.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",

src/frontend/package.json

@@ -26,6 +26,7 @@
     "@tailwindcss/line-clamp": "^0.4.4",
     "@types/axios": "^0.14.0",
     "ace-builds": "^1.24.1",
+    "ag-grid-react": "^31.2.1",
     "ansi-to-html": "^0.7.2",
     "axios": "^1.5.0",
     "base64-js": "^1.5.1",

src/frontend/src/components/tableComponent/index.tsx

@@ -0,0 +1,85 @@
+import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
+import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
+import { AgGridReact } from "ag-grid-react";
+import { useState } from "react";
+import { Card, CardContent, CardFooter } from "../ui/card";
+
+export default function TableComponent() {
+  // Column Definitions: Defines the columns to be displayed.
+  const [colDefs, setColDefs] = useState([
+    { headerName: "Variable Name", field: "name", flex: 1, editable: true }, //This column will be twice as wide as the others
+    {
+      field: "type",
+      cellEditor: "agSelectCellEditor",
+      cellEditorParams: {
+        values: ["Prompt", "Credential"],
+        valueListGap: 10,
+      },
+      flex: 1,
+      editable: true,
+    },
+    {
+      field: "value",
+      cellEditor: "agLargeTextCellEditor",
+      cellEditorPopup: true,
+      flex: 2,
+      editable: true,
+    },
+    {
+      headerName: "Default Fields",
+      field: "defaultFields",
+      flex: 1,
+      editable: true,
+    },
+  ]);
+
+  const [rowData, setRowData] = useState([
+    {
+      name: "OpenAI Key",
+      type: "Credential",
+      value: "apijpioj09u302j0982ejf",
+      defaultFields: "Open AI API Key",
+    },
+    {
+      name: "Prompt",
+      type: "Prompt",
+      value: `Answer user's questions based on the document below:
+
+    ---
+    
+    {Document}
+    
+    ---
+    
+    Question:
+    {Question}
+    
+    Answer:
+    `,
+      defaultFields: ["Prompt"],
+    },
+    {
+      name: "Azure Key",
+      type: "Credential",
+      value: "awowkdenvoaimojndofunoweoij0293u0n2e08n23",
+      defaultFields: ["Azure API Key"],
+    },
+  ]);
+
+  return (
+    <Card className="mb-12 h-full">
+      <CardContent className="flex h-full flex-col pt-4">
+        <div
+          className="ag-theme-quartz h-full" // applying the grid theme
+        >
+          <AgGridReact columnDefs={colDefs} rowData={rowData} />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <div className="text-xs text-muted-foreground">
+          Showing <strong>1-3</strong> of <strong>3</strong> products
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}

src/frontend/src/pages/GlobalVariablesPage/index.tsx

@@ -2,6 +2,7 @@ import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 
 import PageLayout from "../../components/pageLayout";
+import TableComponent from "../../components/tableComponent";
 
 export default function GlobalVariablesPage() {
   return (
@@ -17,7 +18,9 @@ export default function GlobalVariablesPage() {
         </>
       }
     >
-      <div className="flex h-full w-full flex-col justify-between">Page</div>
+      <div className="flex h-full w-full flex-col justify-between">
+        <TableComponent />
+      </div>
     </PageLayout>
   );
 }