diff --git a/comps/form/base/BaseForm.tsx b/comps/form/base/BaseForm.tsx
index 2daa64c..f09c3d2 100755
--- a/comps/form/base/BaseForm.tsx
+++ b/comps/form/base/BaseForm.tsx
@@ -1,7 +1,8 @@
 import { ReactNode, useCallback, useEffect, useState } from "react";
 import { BaseFormLocal, default_base_form_local } from "./types";
 import { useLocal } from "lib/utils/use-local";
-import { FieldLocal, FieldProp, fieldType } from "../typings";
+import { FieldLocal, FieldProp, fieldType, FMLocal } from "../typings";
+import { FieldLoading } from "lib/exports";
 
 export type BaseFormProps<T> = {
   data: T;
@@ -9,13 +10,16 @@ export type BaseFormProps<T> = {
   on_submit?: (form: BaseFormLocal<T>) => Promise<any> | any;
   children: ReactNode | ((form: BaseFormLocal<T>) => ReactNode);
   render?: () => void;
+  on_change?: (fm: FMLocal, name: string, new_value: any) => any;
   is_form?: boolean;
 };
 export const BaseForm = <T extends Record<string, any>>(
   props: BaseFormProps<T>
 ) => {
-  const { data, children, className, on_submit, render } = props;
-  const form = useLocal({ ...default_base_form_local }) as BaseFormLocal<T>;
+  const { data, children, className, on_submit, render, on_change } = props;
+  const form = useLocal({
+    ...default_base_form_local,
+  }) as BaseFormLocal<T>;
 
   if (render) {
     form.render = render;
@@ -73,12 +77,21 @@ export const BaseForm = <T extends Record<string, any>>(
     }
     form.fm = {
       data: data,
+      status: "ready",
+      deps: {},
       props: { label_mode: "vertical" },
       error: {
         get: () => {
           return [];
         },
       },
+      events: {
+        on_change: (n: any, v: any) => {
+          if (on_change && form.fm) {
+            on_change(form.fm, n, v);
+          }
+        },
+      },
       submit: () => on_submit?.(form),
       size: { field: size },
       render: form.render,
@@ -109,27 +122,14 @@ export const BaseForm = <T extends Record<string, any>>(
     form.status = "ready";
   }
 
+  if (!form.fm) {
+    form.fm = form.createFm();
+  }
+
   if (typeof props.is_form === "boolean") {
     if (!props.is_form) {
-      return (
-        <div
-          className={cx(
-            "form c-flex-1 c-flex-col c-w-full c-h-full c-relative c-overflow-auto c-contents",
-            className
-          )}
-        >
-          <div
-            className={cx(
-              "form-inner c-flex-1 c-flex-wrap c-items-start c-content-start c-absolute c-inset-0 c-contents",
-              css`
-                padding-right: 10px;
-              `
-            )}
-          >
-            {typeof children === "function" ? children(form) : children}
-          </div>
-        </div>
-      );
+      if (!form.fm.data) return <FieldLoading />;
+      return <>{typeof children === "function" ? children(form) : children}</>;
     }
   }
 
@@ -142,9 +142,6 @@ export const BaseForm = <T extends Record<string, any>>(
       form.render();
     }, 50);
   }
-  if (!form.fm) {
-    form.fm = form.createFm();
-  }
   return (
     <form
       onSubmit={(e) => {
diff --git a/comps/form/field/Field.tsx b/comps/form/field/Field.tsx
index 529d97b..3f5ff67 100755
--- a/comps/form/field/Field.tsx
+++ b/comps/form/field/Field.tsx
@@ -54,6 +54,14 @@ export const Field: FC<FieldProp> = (arg) => {
       } else {
         local.prev_val = fm.data[name];
       }
+
+      if (!fm.events) {
+        fm.events = {
+          on_change(name, new_value) {},
+        };
+      }
+
+      fm.events.on_change(name, fm.data[name]);
       return;
     }
 
@@ -169,7 +177,12 @@ export const Field: FC<FieldProp> = (arg) => {
           arg={arg}
         />
         {field.desc && (
-          <div className={cx("c-p-2 c-pl-0 c-text-xs", errors.length > 0 && "c-pb-1")}>
+          <div
+            className={cx(
+              "c-p-2 c-pl-0 c-text-xs",
+              errors.length > 0 && "c-pb-1"
+            )}
+          >
             {field.desc}
           </div>
         )}
diff --git a/comps/form/field/table-edit/TableEdit.tsx b/comps/form/field/table-edit/TableEdit.tsx
index 416e403..532fd81 100755
--- a/comps/form/field/table-edit/TableEdit.tsx
+++ b/comps/form/field/table-edit/TableEdit.tsx
@@ -3,6 +3,7 @@ import { useLocal } from "lib/utils/use-local";
 import { FC, useEffect, useRef } from "react";
 import { FMLocal } from "../../typings";
 import get from "lodash.get";
+import { BaseForm } from "../../base/BaseForm";
 
 export const TableEdit: FC<{
   on_init: () => FMLocal;
@@ -43,7 +44,17 @@ export const TableEdit: FC<{
     "props.meta.item.component.props.child.content.childs"
   );
 
-  let columns: any[] = [];
+  let columns: {
+    key: string;
+    name?: string;
+    label?: string;
+    width?: number;
+    minWidth?: number;
+    resizable?: boolean;
+    sortable?: boolean;
+    frozen?: boolean;
+    renderCell: (arg: any) => any;
+  }[] = [];
   let childs: any[] = [];
   const mode_child = raw_childs.find((e: any) =>
     ["tbl-col", "table: columns"].includes(e.name)
@@ -73,7 +84,6 @@ export const TableEdit: FC<{
         renderCell(arg: any) {
           // return <></>;
           const { props, tbl } = arg;
-          const fm_row = { ...fm, render: local.render };
           return (
             <PassProp
               idx={props.rowIdx}
@@ -84,7 +94,7 @@ export const TableEdit: FC<{
                 value: get(props.row, props.column.key),
                 depth: 0,
               }}
-              fm={fm_row}
+              fm={arg.fm}
               ext_fm={{
                 idx: props.rowIdx,
                 change: () => {},
@@ -114,8 +124,6 @@ export const TableEdit: FC<{
         sortable: true,
         renderCell(arg: any) {
           const { props, tbl } = arg;
-          const fm_row = { ...fm, render: local.render };
-          fm_row.data = props.row;
           local.tbl = tbl;
           const key = props.column.key;
           return (
@@ -128,7 +136,7 @@ export const TableEdit: FC<{
                 depth: props.row.__depth || 0,
               }}
               rows={tbl.data}
-              fm={fm_row}
+              fm={props.fm}
               fm_parent={parent}
               ext_fm={{
                 idx: props.rowIdx,
@@ -186,8 +194,8 @@ export const TableEdit: FC<{
             css`
               height: 1px;
               border-collapse: collapse;
-              table-layout: auto; 
-              
+              table-layout: auto;
+
               .field {
                 padding: 0px 0px 0px 10px;
               }
@@ -205,7 +213,7 @@ export const TableEdit: FC<{
                         css`
                           background-color: #f9f9f9;
                         `,
-                        header.width > 0
+                        header.width || 0 > 0
                           ? css`
                               width: ${header.width}px;
                             `
@@ -216,7 +224,7 @@ export const TableEdit: FC<{
                         className={cx(
                           "rdg-cell c-py-2 c-px-4 c-flex c-flex-row c-items-center c-h-full",
 
-                          header.width > 0
+                          header.width || 0 > 0
                             ? css`
                                 width: ${header.width}px;
                               `
@@ -245,39 +253,53 @@ export const TableEdit: FC<{
               <>
                 {value.map((row: any, idx: number) => {
                   return (
-                    <tr>
-                      {columns.map((header) => {
+                    <BaseForm
+                      is_form={false}
+                      data={row}
+                      on_change={(_fm) => {
+                        fm.data[name][idx] = _fm.data;
+                        fm.render();
+                      }}
+                    >
+                      {(form) => {
                         return (
-                          <td
-                            className={cx(
-                              header.width > 0
-                                ? css`
-                                    width: ${header.width}px;
-                                  `
-                                : ""
-                            )}
-                          >
-                            <div
-                              className={cx(
-                                "c-flex c-flex-row c-pb-1 c-w-full c-h-full",
-                                idx === 0 && "c-pt-1"
-                              )}
-                            >
-                              {header.renderCell({
-                                props: {
-                                  row: row,
-                                  rowIdx: idx,
-                                  column: header,
-                                },
-                                tbl: {
-                                  data: value,
-                                },
-                              })}
-                            </div>
-                          </td>
+                          <tr>
+                            {columns.map((header) => {
+                              return (
+                                <td
+                                  className={cx(
+                                    header.width || 0 > 0
+                                      ? css`
+                                          width: ${header.width || 0}px;
+                                        `
+                                      : ""
+                                  )}
+                                >
+                                  <div
+                                    className={cx(
+                                      "c-flex c-flex-row c-pb-1 c-w-full c-h-full",
+                                      idx === 0 && "c-pt-1"
+                                    )}
+                                  >
+                                    {header.renderCell({
+                                      props: {
+                                        row: row,
+                                        rowIdx: idx,
+                                        column: header,
+                                        fm: form.fm,
+                                      },
+                                      tbl: {
+                                        data: value,
+                                      },
+                                    })}
+                                  </div>
+                                </td>
+                              );
+                            })}
+                          </tr>
                         );
-                      })}
-                    </tr>
+                      }}
+                    </BaseForm>
                   );
                 })}
               </>
diff --git a/comps/list/TableList.tsx b/comps/list/TableList.tsx
index d46c468..f9b3143 100755
--- a/comps/list/TableList.tsx
+++ b/comps/list/TableList.tsx
@@ -909,7 +909,7 @@ export const TableList: FC<TableListProp> = ({
                               </div>
                             </div>
                           </div>
-                        ),
+                        ), 
                       }
                 }
               />