Passed Table props to page

src/frontend/package-lock.json

@@ -48,10 +48,10 @@
         "million": "^3.0.6",
         "moment": "^2.29.4",
         "playwright": "^1.42.0",
-        "react": "^18.2.0",
+        "react": "^18.2.21",
         "react-ace": "^10.1.0",
         "react-cookie": "^4.1.1",
-        "react-dom": "^18.2.0",
+        "react-dom": "^18.2.21",
         "react-error-boundary": "^4.0.11",
         "react-icons": "^5.0.1",
         "react-laag": "^2.0.5",

src/frontend/package.json

@@ -43,10 +43,10 @@
     "million": "^3.0.6",
     "moment": "^2.29.4",
     "playwright": "^1.42.0",
-    "react": "^18.2.0",
+    "react": "^18.2.21",
     "react-ace": "^10.1.0",
     "react-cookie": "^4.1.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.2.21",
     "react-error-boundary": "^4.0.11",
     "react-icons": "^5.0.1",
     "react-laag": "^2.0.5",

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

@@ -1,89 +1,29 @@
-import { ColDef, ColGroupDef } from "ag-grid-community";
 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 { ColDef,ColGroupDef } from 'ag-grid-community';
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
-import { useState } from "react";
 import { useDarkStore } from "../../stores/darkStore";
 import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid
 import { cn } from "../../utils/utils";
-import { Button } from "../ui/button";
-
-export default function TableComponent() {
-  // Column Definitions: Defines the columns to be displayed.
-  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
-    { headerName: "Variable Name", field: "name", flex: 1 }, //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: "Apply To 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"],
-    },
-  ]);
 
+const TableComponent = forwardRef<
+  ElementRef<typeof AgGridReact>,
+  ComponentPropsWithoutRef<typeof AgGridReact>
+>(({ ...props }, ref) => {
   const dark = useDarkStore((state) => state.dark);
 
   return (
     <div className="flex h-full flex-col">
-        <div
+      <div
-          className={cn(
+        className={cn(
-            dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
+          dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
-            "ag-theme-shadcn flex h-full flex-col pb-8"
+          "ag-theme-shadcn flex h-full flex-col pb-8"
-          )} // applying the grid theme
+        )} // applying the grid theme
-        >
+      >
-          <AgGridReact pagination={true} columnDefs={colDefs} rowData={rowData} />
+        <AgGridReact ref={ref} pagination={true} {...props} />
-        </div>
+      </div>
     </div>
   );
-}
+});
+
+export default TableComponent;

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

@@ -4,8 +4,71 @@ import { Button } from "../../components/ui/button";
 import AddNewVariableButton from "../../components/addNewVariableButtonComponent/addNewVariableButton";
 import ForwardedIconComponent from "../../components/genericIconComponent";
 import TableComponent from "../../components/tableComponent";
+import { useState } from "react";
+import { ColDef, ColGroupDef } from "ag-grid-community";
 
 export default function GlobalVariablesPage() {
+  // Column Definitions: Defines the columns to be displayed.
+  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
+    { headerName: "Variable Name", field: "name", flex: 1 }, //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: "Apply To 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 (
     <div className="flex h-full w-full flex-col justify-between gap-6">
       <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
@@ -33,7 +96,7 @@ export default function GlobalVariablesPage() {
       </div>
 
       <div className="flex h-full w-full flex-col justify-between">
-        <TableComponent />
+        <TableComponent columnDefs={colDefs} rowData={rowData} />
       </div>
     </div>
   );