Removed ID getter from TableComponent and fixed Shortcuts

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

@@ -13,6 +13,7 @@ import ForwardedIconComponent from "../genericIconComponent";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
 import ResetColumns from "./components/ResetColumns";
 import resetGrid from "./utils/reset-grid-columns";
+import { useParams } from "react-router-dom";
 
 interface TableComponentProps extends AgGridReactProps {
   columnDefs: NonNullable<AgGridReactProps["columnDefs"]>;
@@ -32,7 +33,7 @@ const TableComponent = forwardRef<
       alertDescription = DEFAULT_TABLE_ALERT_MSG,
       ...props
     },
-    ref
+    ref,
   ) => {
     let colDef = props.columnDefs.map((col, index) => {
       let newCol = {
@@ -82,16 +83,16 @@ const TableComponent = forwardRef<
       // @ts-ignore
       realRef.current = params;
       const updatedColumnDefs = makeLastColumnNonResizable([...colDef]);
-      params.api.setColumnDefs(updatedColumnDefs);
+      params.api.setGridOption("columnDefs", updatedColumnDefs);
       initialColumnDefs.current = params.api.getColumnDefs();
       if (props.onGridReady) props.onGridReady(params);
     };
 
     const onColumnMoved = (params) => {
       const updatedColumnDefs = makeLastColumnNonResizable(
-        params.columnApi.getAllGridColumns().map((col) => col.getColDef())
+        params.columnApi.getAllGridColumns().map((col) => col.getColDef()),
       );
-      params.api.setColumnDefs(updatedColumnDefs);
+      params.api.setGridOption("columnDefs", updatedColumnDefs);
       if (props.onColumnMoved) props.onColumnMoved(params);
     };
 
@@ -114,7 +115,7 @@ const TableComponent = forwardRef<
         className={cn(
           dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
           "ag-theme-shadcn flex h-full flex-col",
-          "relative"
+          "relative",
         )} // applying the grid theme
       >
         <AgGridReact
@@ -125,9 +126,6 @@ const TableComponent = forwardRef<
           }}
           columnDefs={colDef}
           ref={realRef}
-          getRowId={(params) => {
-            return params.data.id;
-          }}
           pagination={true}
           onGridReady={onGridReady}
           onColumnMoved={onColumnMoved}
@@ -135,7 +133,7 @@ const TableComponent = forwardRef<
         <ResetColumns resetGrid={() => resetGrid(realRef, initialColumnDefs)} />
       </div>
     );
-  }
+  },
 );
 
 export default TableComponent;

src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx

@@ -20,7 +20,7 @@ export default function ShortcutsPage() {
   const redoShortcut = `${isMac ? "Cmd" : "Ctrl"} + Y`;
 
   // Column Definitions: Defines the columns to be displayed.
-  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
+  const colDefs = [
     {
       headerName: "Functionality",
       field: "name",
@@ -33,9 +33,9 @@ export default function ShortcutsPage() {
       editable: false,
       resizable: false,
     },
-  ]);
+  ];
 
-  const [nodesRowData, setNodesRowData] = useState([
+  const nodesRowData = [
     {
       name: "Advanced Settings Component",
       shortcut: advancedShortcut,
@@ -96,7 +96,7 @@ export default function ShortcutsPage() {
       shortcut: redoShortcut,
       resizable: false,
     },
-  ]);
+  ];
 
   return (
     <div className="flex h-full w-full flex-col gap-6">
@@ -114,11 +114,10 @@ export default function ShortcutsPage() {
           </p>
         </div>
       </div>
-      <div className="grid gap-6">
+      <div className="flex h-full w-full flex-col justify-between">
         <Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">
           <CardContent className="h-full">
             <TableComponent
-              domLayout="autoHeight"
               pagination={false}
               columnDefs={colDefs}
               rowData={nodesRowData}