columnkey update to parentlabel for subtable

src/components/fields/SubTable/Settings.tsx

@@ -1,14 +1,14 @@
 import { useAtom } from "jotai";
 import { ISettingsProps } from "@src/components/fields/types";
-
+import { useState } from "react";
 import MultiSelect from "@rowy/multiselect";
 import { FieldType } from "@src/constants/fields";
-
+import { TextField } from "@mui/material";
 import { tableScope, tableColumnsOrderedAtom } from "@src/atoms/tableScope";
 
 const Settings = ({ config, onChange }: ISettingsProps) => {
   const [tableOrderedColumns] = useAtom(tableColumnsOrderedAtom, tableScope);
-
+  const [inputValue, setInputValue] = useState("");
   const columnOptions = tableOrderedColumns
     .filter((column) =>
       [
@@ -21,12 +21,26 @@ const Settings = ({ config, onChange }: ISettingsProps) => {
     .map((c) => ({ label: c.name, value: c.key }));
 
   return (
-    <MultiSelect
-      label="Parent label"
-      options={columnOptions}
-      value={config.parentLabel ?? []}
-      onChange={onChange("parentLabel")}
-    />
+    <>
+      <MultiSelect
+        label="Parent label"
+        options={columnOptions}
+        value={config.parentLabel ?? []}
+        onChange={onChange("parentLabel")}
+      />
+
+      <TextField
+        id="subcollectionid"
+        value={inputValue}
+        onChange={(e) =>
+         { onChange("subcollectionid")(e.target.value)
+          setInputValue(e.target.value)}
+        }
+        label="Subcollection ID"
+        className="labelVertical"
+        inputProps={{ style: { width: "23ch" } }}
+      />
+    </>
   );
 };
 export default Settings;

src/components/fields/SubTable/utils.ts

@@ -26,7 +26,7 @@ export const useSubTableData = (
     rootTablePath,
     ROUTES.subTable,
     encodeURIComponent(_rowy_ref.path),
-    column.key,
+    column.key
   ].join("/");
 
   subTablePath += "?parentLabel=" + encodeURIComponent(label ?? "");