diff --git a/comps/filter/FilterField.tsx b/comps/filter/FilterField.tsx
index ea41c28..335c06a 100755
--- a/comps/filter/FilterField.tsx
+++ b/comps/filter/FilterField.tsx
@@ -13,7 +13,8 @@ export const FilterField: FC<{
   name?: string;
   label?: string;
   type: FilterFieldType;
-}> = ({ filter, name, label, type }) => {
+  modifiers?: any[]
+}> = ({ filter, name, label, type,modifiers }) => {
   const internal = useLocal({ render_timeout: null as any });
   if (!name) return <>No Name</>;
   if (!filter.form) return <div>Loading...</div>;
@@ -88,6 +89,11 @@ export const FilterField: FC<{
                   onBlur(e) {
                     filter.form?.submit();
                   },
+                  onChange(val) {
+                    if (!val) {
+                      filter.form?.submit();
+                    }
+                  },
                 }}
               />
             </div>
diff --git a/comps/form/field/table-edit/TableEdit.tsx b/comps/form/field/table-edit/TableEdit.tsx
index 45aa33a..651743a 100755
--- a/comps/form/field/table-edit/TableEdit.tsx
+++ b/comps/form/field/table-edit/TableEdit.tsx
@@ -83,7 +83,6 @@ export const TableEdit: FC<{
           <TableList
             row_height={(row) => {
               const rh = local.rowHeight.get(row);
-              console.log(rh);
               if (rh) {
                 for (const div of Object.values(rh)) {
                   if (div.offsetHeight > 50) return div.offsetHeight + 6;
diff --git a/comps/form/field/type/TypeInput.tsx b/comps/form/field/type/TypeInput.tsx
index 3340d2d..99f57cc 100755
--- a/comps/form/field/type/TypeInput.tsx
+++ b/comps/form/field/type/TypeInput.tsx
@@ -29,6 +29,7 @@ export type PropTypeInput = {
   placeholder?: string;
   onFocus?: (e: FocusEvent<HTMLDivElement>) => void;
   onBlur?: (e: FocusEvent<HTMLDivElement>) => void;
+  onChange?: (val: string) => void;
 };
 
 const parse = parser.exportAsFunctionAny("en-US");
@@ -153,6 +154,10 @@ export const FieldTypeInput: FC<{
             fm.data[field.name] = ev.currentTarget.value;
           }
           renderOnChange();
+
+          if (prop.onChange) {
+            prop.onChange(fm.data[field.name]);
+          }
         }}
         placeholder={prop.placeholder || arg.placeholder || ""}
         value={value}
diff --git a/comps/form/gen/gen-field.ts b/comps/form/gen/gen-field.ts
index 6ee77eb..8b1e3d7 100755
--- a/comps/form/gen/gen-field.ts
+++ b/comps/form/gen/gen-field.ts
@@ -15,7 +15,7 @@ export const generateField = async (
     | string
     | { value: string; checked: string[] }
   )[];
-  if (["checkbox", "button"].includes(fieldType)) {
+  if (["checkbox", "button", "typeahead"].includes(fieldType)) {
     const fields = parseGenField(raw_fields);
     const res = generateSelect(fields);
     const master = fields.find(
@@ -102,15 +102,15 @@ export const generateField = async (
               let parent = {} as any;
               const fields = parseGenField(fm.props.gen_fields);
               const res = generateSelect(fields);
-              try {
-                parent = {
-                  [fm.props.gen_table]: {
-                    connect: {
-                      [res.pk]: fm.data.id || null,
-                    },
-                  },
-                };
-              } catch (e) {}
+              // try {
+              //   parent = {
+              //     [fm.props.gen_table]: {
+              //       connect: {
+              //         [res.pk]: fm.data.id || null,
+              //       },
+              //     },
+              //   };
+              // } catch (e) {}
               fm.data[name] = selected.map((e) => {
                 return {
                   ${master.name}: {
diff --git a/comps/list/TableList.tsx b/comps/list/TableList.tsx
index ada4c8e..8eeb3cc 100755
--- a/comps/list/TableList.tsx
+++ b/comps/list/TableList.tsx
@@ -49,7 +49,7 @@ type TableListProp = {
   on_init: (arg?: any) => any;
   mode: "table" | "list" | "grid" | "auto";
   _item: PrasiItem;
-  __props: any;
+  __props?: any;
   gen_fields: string[];
   row_click: OnRowClick;
   selected: SelectedRow;
@@ -416,6 +416,7 @@ export const TableList: FC<TableListProp> = ({
       },
     });
   }
+
   if (mode === "list") {
     if (columns.length > 1) columns = columns.slice(0, 0 + 1);
   }
@@ -457,6 +458,7 @@ export const TableList: FC<TableListProp> = ({
       }
     }
   }
+
   if (typeof value !== "undefined") {
     local.data = value;
     local.status = "ready" as any;
@@ -484,6 +486,7 @@ export const TableList: FC<TableListProp> = ({
   if (id_parent && local.pk && local.sort.columns.length === 0) {
     data = sortTree(local.data, id_parent, local.pk.name);
   }
+
   if (mode === "table") {
     return (
       <div
diff --git a/comps/md/gen/gen-table-list.ts b/comps/md/gen/gen-table-list.ts
index 7e3d31b..0731d4d 100755
--- a/comps/md/gen/gen-table-list.ts
+++ b/comps/md/gen/gen-table-list.ts
@@ -53,7 +53,7 @@ export const generateTableList = async (
     if (data["opt__on_load"]) {
       result.opt__on_load = {
         mode: "raw",
-        value: on_load({ pk, table, select, pks,fields }),
+        value: on_load({ pk, table, select, pks, fields }),
       };
     }
     let first = true;
@@ -64,7 +64,7 @@ export const generateTableList = async (
           if (idx >= 1 && arg.mode === "list") {
             return;
           }
-          if (e.is_pk && arg.mode === "table") return;
+          if (e.is_pk && (arg.mode === "table" || arg.mode === "auto")) return;
           let tree_depth = "";
           let tree_depth_built = "";
           if (first) {
@@ -91,7 +91,11 @@ export const generateTableList = async (
                       adv: {
                         js: `\
 <div {...props} className={cx(props.className, "")}>
-${arg.mode === "list" ? "{JSON.stringify(row)}" : `<FormatValue value={col.value} name={col.name} gen_fields={gen__fields} ${tree_depth} />`}
+${
+  arg.mode === "list"
+    ? "{JSON.stringify(row)}"
+    : `<FormatValue value={col.value} name={col.name} gen_fields={gen__fields} ${tree_depth} />`
+}
 </div>`,
                         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, ${tree_depth_built} })));
diff --git a/comps/md/gen/md-list.ts b/comps/md/gen/md-list.ts
index f140744..464f3cd 100755
--- a/comps/md/gen/md-list.ts
+++ b/comps/md/gen/md-list.ts
@@ -29,6 +29,10 @@ export const generateList = async (
       mode: "string",
       value: "",
     },
+    mode: {
+      mode: "string",
+      value: "auto",
+    },
     opt__row_click: {
       mode: "raw",
       value: `\
@@ -101,7 +105,7 @@ idx: any;
     async (props: any) => {},
     props,
     tablelist,
-    { mode: "table" },
+    { mode: "auto" },
     false
   );
   tab_master?.edit.setProp("breadcrumb", {
@@ -119,7 +123,7 @@ idx: any;
     }
     `,
   });
-
+  
   tab_master?.edit.setChilds([
     {
       type: "item",
diff --git a/comps/md/gen/mode-table-list.ts b/comps/md/gen/mode-table-list.ts
index f434a00..7e1dd7e 100755
--- a/comps/md/gen/mode-table-list.ts
+++ b/comps/md/gen/mode-table-list.ts
@@ -1,5 +1,5 @@
 export const modeTableList = (mode: string) => {
-  let sub_name = "fields";
+  let sub_name = "tbl-col";
   switch (mode) {
     case "table":
       sub_name = "tbl-col";
diff --git a/gen/gen_table_list/gen_table_list.tsx b/gen/gen_table_list/gen_table_list.tsx
index 927115d..8376f3d 100755
--- a/gen/gen_table_list/gen_table_list.tsx
+++ b/gen/gen_table_list/gen_table_list.tsx
@@ -4,9 +4,9 @@ import { on_load } from "./on_load";
 import { codeBuild } from "../master_detail/utils";
 
 export const gen_table_list = async (
-  modify: (data: any)            => void,
+  modify: (data: any) => void,
   data: any,
-  arg: { mode: "table" | "list" | "grid" | "auto"; id_parent?: string}
+  arg: { mode: "table" | "list" | "grid" | "auto"; id_parent?: string }
 ) => {
   const table = JSON.parse(data.gen_table.value) as string;
   const raw_fields = JSON.parse(data.gen_fields.value) as (
@@ -16,7 +16,7 @@ export const gen_table_list = async (
   const select = {} as any;
   let pk = "";
   let pks: Record<string, string> = {};
-  
+
   const fields = parseGenField(raw_fields);
   const result = {} as any;
   for (const f of fields) {
@@ -56,6 +56,7 @@ export const gen_table_list = async (
       let sub_name = "fields";
       switch (arg.mode) {
         case "table":
+        case "auto":
           sub_name = "tbl-col";
           break;
         case "list":
@@ -77,7 +78,8 @@ export const gen_table_list = async (
             if (idx >= 1 && arg.mode === "list") {
               return;
             }
-            if (e.is_pk && arg.mode === "table") return;
+            if (e.is_pk && (arg.mode === "table" || arg.mode === "auto"))
+              return;
             let tree_depth = "";
             let tree_depth_built = "";
             if (first) {
diff --git a/gen/master_detail/gen-list.ts b/gen/master_detail/gen-list.ts
index dc7df5e..ac26b64 100755
--- a/gen/master_detail/gen-list.ts
+++ b/gen/master_detail/gen-list.ts
@@ -5,7 +5,6 @@ import { gen_table_list } from "../gen_table_list/gen_table_list";
 export const genList = async (arg: GenMasterDetailArg, data: any) => {
   for (const c of get(data, "child.content.childs") || []) {
     if (c.component?.id === "c68415ca-dac5-44fe-aeb6-936caf8cc491") {
-      
       const res = await codeBuild({
         row_click: `\
 ({ row, rows, idx, event }: OnRowClick) => {
@@ -113,9 +112,10 @@ type ActionItem =
           },
         })
       );
+
       const data = childs[0].component.props;
       const modify = async (props: any) => {};
-      gen_table_list(modify, data, { mode: "table" });
+      gen_table_list(modify, data, { mode: "auto" });
     }
   }
 };
diff --git a/gen/prop/gen_prop_fields.ts b/gen/prop/gen_prop_fields.ts
index c257033..7201d02 100755
--- a/gen/prop/gen_prop_fields.ts
+++ b/gen/prop/gen_prop_fields.ts
@@ -39,7 +39,7 @@ const load_single = async (table: string) => {
   }
   return single[table];
 };
-export const gen_prop_fields = async (gen_table: string) => {
+export const gen_prop_fields = async (gen_table: string, depth?: number) => {
   if (typeof db === "undefined") return ["- No Database -"];
 
   const path = window.location.pathname;
@@ -51,98 +51,103 @@ export const gen_prop_fields = async (gen_table: string) => {
   }
   const schema = getSchemaOnStorage(id_site, gen_table);
   if (!schema) {
-    const result: {
-      label: string;
-      value: string;
-      options?: any[];
-      checked?: boolean;
-    }[] = [];
-    const { cols, rels } = await load_single(gen_table);
-    if (cols) {
-      for (const [k, v] of Object.entries(cols) as any) {
-        result.push({
-          value: JSON.stringify({
-            name: k,
-            is_pk: v.is_pk,
-            type: v.db_type || v.type,
-            optional: v.optional,
-          }),
-          label: k,
-          checked: v.is_pk,
-        });
-      }
-    }
-    if (rels) {
-      for (const [k, v] of Object.entries(rels)) {
-        let options = [];
-        const to = v.to;
-        const from = v.from;
-        const parent_name = k;
-        const parent_rel = v;
-        if (to) {
-          const { cols, rels } = await load_single(to.table);
-          if (cols) {
-            for (const [k, v] of Object.entries(cols)) {
-              options.push({
-                value: JSON.stringify({
-                  name: k,
-                  is_pk: v.is_pk,
-                  type: v.db_type || v.type,
-                  optional: v.optional,
-                }),
-                label: k,
-                checked: v.is_pk,
-              });
-            }
-          }
-          if (rels) {
-            for (const [k, v] of Object.entries(rels)) {
-              let sub_opt = [];
-              const to = v.to;
-              const from = v.from;
-              const { cols } = await load_single(v.to.table);
-              for (const [k, v] of Object.entries(cols)) {
-                sub_opt.push({
-                  value: JSON.stringify({
-                    name: k,
-                    is_pk: v.is_pk,
-                    type: v.db_type || v.type,
-                    optional: v.optional,
-                  }),
-                  label: k,
-                  checked: v.is_pk,
-                });
-              }
-              options.push({
-                value: JSON.stringify({
-                  name: k,
-                  is_pk: false,
-                  type: v.type,
-                  optional: true,
-                  relation: { from, to },
-                }),
-                label: k,
-                options: sub_opt,
-                checked:
-                  parent_rel.type === "has-many" &&
-                  parent_rel.from.table === v.to.table,
-              });
-            }
-          }
-        }
-        result.push({
-          value: JSON.stringify({
-            name: k,
-            is_pk: false,
-            type: v.type,
-            optional: true,
-            relation: { from, to },
-          }),
-          label: k,
-          options,
-        });
-      }
-    }
+    // const result: {
+    //   label: string;
+    //   value: string;
+    //   options?: any[];
+    //   checked?: boolean;
+    // }[] = [];
+    const result = await load_layer_schema(
+      typeof depth === "undefined" ? 3 : depth,
+      {},
+      gen_table
+    );
+    // const { cols, rels } = await load_single(gen_table);
+    // if (cols) {
+    //   for (const [k, v] of Object.entries(cols) as any) {
+    //     result.push({
+    //       value: JSON.stringify({
+    //         name: k,
+    //         is_pk: v.is_pk,
+    //         type: v.db_type || v.type,
+    //         optional: v.optional,
+    //       }),
+    //       label: k,
+    //       checked: v.is_pk,
+    //     });
+    //   }
+    // }
+    // if (rels) {
+    //   for (const [k, v] of Object.entries(rels)) {
+    //     let options = [] as any;
+    //     const to = v.to;
+    //     const from = v.from;
+    //     const parent_name = k;
+    //     const parent_rel = v;
+    //     if (to) {
+    //       const { cols, rels } = await load_single(to.table);
+    //       // if (cols) {
+    //       //   for (const [k, v] of Object.entries(cols)) {
+    //       //     options.push({
+    //       //       value: JSON.stringify({
+    //       //         name: k,
+    //       //         is_pk: v.is_pk,
+    //       //         type: v.db_type || v.type,
+    //       //         optional: v.optional,
+    //       //       }),
+    //       //       label: k,
+    //       //       checked: v.is_pk,
+    //       //     });
+    //       //   }
+    //       // }
+    //       // if (rels) {
+    //       //   for (const [k, v] of Object.entries(rels)) {
+    //       //     let sub_opt = [];
+    //       //     const to = v.to;
+    //       //     const from = v.from;
+    //       //     const { cols } = await load_single(v.to.table);
+    //       //     for (const [k, v] of Object.entries(cols)) {
+    //       //       sub_opt.push({
+    //       //         value: JSON.stringify({
+    //       //           name: k,
+    //       //           is_pk: v.is_pk,
+    //       //           type: v.db_type || v.type,
+    //       //           optional: v.optional,
+    //       //         }),
+    //       //         label: k,
+    //       //         checked: v.is_pk,
+    //       //       });
+    //       //     }
+    //       //     options.push({
+    //       //       value: JSON.stringify({
+    //       //         name: k,
+    //       //         is_pk: false,
+    //       //         type: v.type,
+    //       //         optional: true,
+    //       //         relation: { from, to },
+    //       //       }),
+    //       //       label: k,
+    //       //       options: sub_opt,
+    //       //       checked:
+    //       //         parent_rel.type === "has-many" &&
+    //       //         parent_rel.from.table === v.to.table,
+    //       //     });
+    //       //   }
+    //       // }
+    //     }
+    //     result.push({
+    //       value: JSON.stringify({
+    //         name: k,
+    //         is_pk: false,
+    //         type: v.type,
+    //         optional: true,
+    //         relation: { from, to },
+    //       }),
+    //       label: k,
+    //       options,
+    //     });
+    //   }
+    // }
     try {
       saveSchemaOnStorage(result, id_site, gen_table);
     } catch (e: any) {
@@ -153,7 +158,64 @@ export const gen_prop_fields = async (gen_table: string) => {
     return schema;
   }
 };
+const load_layer_schema = async (depth: number, arg: any, table: string) => {
+  let current_depth = 1;
+  console.log({ depth, current_depth, arg, table });
+  const result = await get_layer(depth, current_depth, arg, table);
+  console.log({ result });
+  return result;
+};
+const get_layer = async (
+  depth: number,
+  current: number,
+  arg: any,
+  table: string
+) => {
+  const { cols, rels } = await load_single(table);
+  const options = [];
+  if (cols) {
+    for (const [k, v] of Object.entries(cols)) {
+      options.push({
+        value: JSON.stringify({
+          name: k,
+          is_pk: v.is_pk,
+          type: v.db_type || v.type,
+          optional: v.optional,
+        }),
+        label: k,
+        checked: v.is_pk,
+      });
+    }
+  }
 
+  if (current < depth) {
+    if (rels) {
+      for (const [k, v] of Object.entries(rels)) {
+        const to = v.to;
+        const from = v.from;
+        const r_rels = (await get_layer(
+          depth,
+          current + 1,
+          arg,
+          v.to.table
+        )) as any;
+        options.push({
+          value: JSON.stringify({
+            name: k,
+            is_pk: false,
+            type: v.type,
+            optional: true,
+            relation: { from, to },
+          }),
+          label: k,
+          options: r_rels,
+          checked: false,
+        });
+      }
+    }
+  }
+  return options;
+};
 const saveSchemaOnStorage = (res: any, id_site: string, table: string) => {
   let schemaSite = null;
   let schema_master_detail: Record<string, any> = {};