diff --git a/comps/form/field/raw/Dropdown.tsx b/comps/form/field/raw/Dropdown.tsx
index a375c95..6724fbb 100755
--- a/comps/form/field/raw/Dropdown.tsx
+++ b/comps/form/field/raw/Dropdown.tsx
@@ -12,7 +12,8 @@ export const RawDropdown: FC<{
   onFocus?: () => void;
   onBlur?: () => void;
   onChange?: (value: string) => void;
-}> = ({ value, options, className, onFocus, onBlur, onChange }) => {
+  disabled?: boolean;
+}> = ({ value, options, className, onFocus, onBlur, onChange, disabled }) => {
   const local = useLocal({
     open: false,
     input: {
@@ -36,7 +37,7 @@ export const RawDropdown: FC<{
 
   return (
     <Popover
-      open={local.open}
+      open={disabled ? false : local.open}
       onOpenChange={() => {
         local.open = false;
         local.render();
@@ -113,9 +114,11 @@ export const RawDropdown: FC<{
             value={local.open ? local.input.value : "Halo"}
             className={cx(
               "c-absolute c-inset-0 c-w-full c-h-full c-outline-none c-p-0",
-              local.open
-                ? "c-cursor-pointer"
-                : "c-pointer-events-none c-invisible"
+              disabled
+                ? "c-invisible"
+                : local.open
+                  ? "c-cursor-pointer"
+                  : "c-pointer-events-none c-invisible"
             )}
             onChange={(e) => {
               local.input.value = e.currentTarget.value;
@@ -139,7 +142,8 @@ export const RawDropdown: FC<{
         <div
           className={cx(
             "c-absolute c-pointer-events-none c-z-10 c-inset-0 c-left-auto c-flex c-items-center ",
-            "c-bg-white c-justify-center c-w-6 c-mr-1 c-my-2"
+            "c-bg-white c-justify-center c-w-6 c-mr-1 c-my-2",
+            disabled && "c-hidden"
           )}
         >
           <ChevronDown size={14} />
diff --git a/comps/form/field/type/TypeRelation.tsx b/comps/form/field/type/TypeRelation.tsx
index 743d583..a998139 100755
--- a/comps/form/field/type/TypeRelation.tsx
+++ b/comps/form/field/type/TypeRelation.tsx
@@ -1,36 +1,54 @@
 import { useLocal } from "@/utils/use-local";
-import { FC } from "react";
+import { FC, useEffect } from "react";
 import { FMLocal, FieldLocal } from "../../typings";
 import { RawDropdown } from "../raw/Dropdown";
+import { Loader2 } from "lucide-react";
 
 export type PropTypeRelation = {
   type: "has-one" | "has-many";
+  on_load: () => Promise<any[]>;
 };
 export const FieldTypeRelation: FC<{
   field: FieldLocal;
   fm: FMLocal;
   prop: PropTypeRelation;
 }> = ({ field, fm, prop }) => {
-  const input = useLocal({});
+  const input = useLocal({
+    list: null as null | any[],
+  });
   const value = fm.data[field.name];
   field.input = input;
   field.prop = prop;
 
+  useEffect(() => {
+    if (input.list === null) {
+      field.status = "loading";
+      field.render();
+    }
+  }, []);
+
   return (
     <>
-      <RawDropdown
-        options={[{ label: "Halo", value: "halo" }]}
-        value={"halo"}
-        className="c-flex-1 c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full c-h-full"
-        onFocus={() => {
-          field.focused = true;
-          field.render();
-        }}
-        onBlur={() => {
-          field.focused = false;
-          field.render();
-        }}
-      />
+      {field.status === "loading" ? (
+        <div className="c-w-full c-h-full c-items-center c-flex c-px-2">
+          <Loader2 className="c-h-4 c-w-4 c-animate-spin" />
+        </div>
+      ) : (
+        <RawDropdown
+          options={[{ label: "Halo", value: "halo" }]}
+          value={"halo"}
+          className="c-flex-1 c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full c-h-full"
+          disabled={field.disabled}
+          onFocus={() => {
+            field.focused = true;
+            field.render();
+          }}
+          onBlur={() => {
+            field.focused = false;
+            field.render();
+          }}
+        />
+      )}
     </>
   );
 };
diff --git a/comps/form/typings.ts b/comps/form/typings.ts
index d22c0ba..9695043 100755
--- a/comps/form/typings.ts
+++ b/comps/form/typings.ts
@@ -156,5 +156,10 @@ export const formType = (active: { item_id: string }, meta: any) => {
       };
     };
     props: any;
+  size: {
+      width: number;
+      height: number;
+      field: "full" | "half";
+    };
   }`;
 };
diff --git a/gen/gen_table_list/gen_table_list.tsx b/gen/gen_table_list/gen_table_list.tsx
index 9a5d79f..ae206d3 100755
--- a/gen/gen_table_list/gen_table_list.tsx
+++ b/gen/gen_table_list/gen_table_list.tsx
@@ -51,15 +51,15 @@ export const gen_table_list = async (
     if (data["child"]) {
       result["child"] = data["child"];
 
-      result["child"].content.childs = result["child"].content.childs.filter(
-        (e: any) => {
-          return e.name !== arg.mode;
-        }
-      );
-
       let sub_name = "fields";
       if (arg.mode === "table") sub_name = "columns";
 
+      result["child"].content.childs = result["child"].content.childs.filter(
+        (e: any) => {
+          return e.name !== sub_name;
+        }
+      );
+
       const child = createItem({
         name: sub_name,
         childs: fields
@@ -71,24 +71,28 @@ export const gen_table_list = async (
                 props: {
                   name: e.name,
                   title: formatName(e.name),
-                  child: {
-                    name: "cell",
-                    padding: {
-                      l: 8,
-                      b: 0,
-                      t: 0,
-                      r: 8,
-                    },
-                    adv: {
-                      js: `\
+                  child: createItem({
+                    childs: [
+                      createItem({
+                        name: "cell",
+                        padding: {
+                          l: 8,
+                          b: 0,
+                          t: 0,
+                          r: 8,
+                        },
+                        adv: {
+                          js: `\
 <div {...props} className={cx(props.className, "")}>
   <FormatValue value={col.value} name={col.name} gen_fields={gen_fields} />
 </div>`,
-                      jsBuilt: `\
+                          jsBuilt: `\
 render(React.createElement("div", Object.assign({}, props, { className: cx(props.className, "") }),React.createElement(FormatValue, { value: col.value, name: col.name, gen_fields: gen_fields })));
                   `,
-                    },
-                  },
+                        },
+                      }),
+                    ],
+                  }),
                 },
               },
             };
diff --git a/gen/utils.ts b/gen/utils.ts
index 1c4a9b1..c53dcb9 100755
--- a/gen/utils.ts
+++ b/gen/utils.ts
@@ -128,9 +128,7 @@ export const createItem = (arg: SimplifiedItem): any => {
     name: arg.name || "item",
     type: "item",
     component,
-    script: {
-      ...arg.adv,
-    },
+    adv: arg.adv,
     childs: arg.childs?.map(createItem),
   };
 };