diff --git a/gen/gen_table/gen_table.ts b/gen/gen_table/gen_table.ts
index 46a0563..9947064 100755
--- a/gen/gen_table/gen_table.ts
+++ b/gen/gen_table/gen_table.ts
@@ -4,7 +4,7 @@ import { gen_columns } from "./columns";
 import { newField } from "./new_field";
 import { on_load } from "./on_load";
 
-export const gen_table = (modify: (data: any) => void, data: any) => {
+export const generate_table = (modify: (data: any) => void, data: any) => {
   const table = JSON.parse(data.gen_table.value) as string;
   const fields = JSON.parse(data.gen_fields.value) as (
     | string
diff --git a/gen/gen_table_list/gen_table_list.tsx b/gen/gen_table_list/gen_table_list.tsx
new file mode 100755
index 0000000..bb36db5
--- /dev/null
+++ b/gen/gen_table_list/gen_table_list.tsx
@@ -0,0 +1,98 @@
+import capitalize from "lodash.capitalize";
+import { GFCol, createItem } from "../utils";
+import { on_load } from "./on_load";
+
+export const gen_table_list = (
+  modify: (data: any) => void,
+  data: any,
+  arg: { mode: "table" | "list" | "grid" }
+) => {
+  const table = JSON.parse(data.gen_table.value) as string;
+  const fields = JSON.parse(data.gen_fields.value) as (
+    | string
+    | { value: string; checked: string[] }
+  )[];
+  const select = {} as any;
+  const columns = [] as GFCol[];
+  let pk = "";
+  let pks: Record<string, string> = {};
+
+  for (const f of fields) {
+    if (typeof f === "string") {
+      const col = JSON.parse(f) as GFCol;
+      columns.push(col);
+      select[col.name] = true;
+      if (col.is_pk) pk = col.name;
+    } else {
+      const col = JSON.parse(f.value) as GFCol;
+      const subsel: any = {};
+      for (const s of f.checked) {
+        const sel = JSON.parse(s) as GFCol;
+        if (sel.is_pk) {
+          pks[col.name] = sel.name;
+          col.relation = { table: col.name, pk: sel.name };
+        }
+        subsel[sel.name] = true;
+      }
+      select[col.name] = { select: subsel };
+      columns.push(col);
+    }
+  }
+
+  const result = {} as any;
+
+  if (!pk) {
+    alert("Failed to generate! Primary Key not found. ");
+    return;
+  }
+  if (pk) {
+    if (data["on_load"]) {
+      result["on_load"] = data["on_load"];
+      result["on_load"].value = on_load({ pk, table, select, pks });
+    }
+
+    if (data["child"]) {
+      result["child"] = data["child"];
+      result["child"].content.childs = [
+        createItem({
+          name: arg.mode,
+          childs: [
+            {
+              component: {
+                id: "297023a4-d552-464a-971d-f40dcd940b77",
+                props: {
+                  name: "muku",
+                },
+              },
+            },
+          ],
+        }),
+      ];
+    }
+    console.log(result["child"]);
+
+    if (data["selected"]) {
+      result["selected"] = data["selected"];
+      result["selected"].value = `\
+({ row, rows, idx }: SelectedRow) => {
+};
+
+type SelectedRow = {
+  row: any;
+  rows: any[];
+  idx: any;
+}`;
+    }
+  }
+  modify(result);
+
+  alert("Prop Generated!");
+};
+
+const formatName = (name: string) => {
+  return name
+    .split("_")
+    .filter((e) => e.length > 1)
+    .map((e) => capitalize(e))
+    .join(" ");
+};
diff --git a/gen/gen_table_list/on_load.ts b/gen/gen_table_list/on_load.ts
new file mode 100755
index 0000000..5fb8b6a
--- /dev/null
+++ b/gen/gen_table_list/on_load.ts
@@ -0,0 +1,48 @@
+import { GFCol } from "../utils";
+
+export const on_load = ({
+  pk,
+  table,
+  select,
+  pks,
+}: {
+  pk: string;
+  table: string;
+  select: any;
+  pks: Record<string, string>;
+}) => {
+  const sample = {} as any;
+
+  for (const [k, v] of Object.entries(select) as any) {
+    if (typeof v === "object") {
+      sample[k] = {};
+
+      Object.keys(v.select)
+        .filter((e) => e !== pks[k])
+        .map((e) => {
+          sample[k][e] = "sample";
+        });
+    } else {
+      sample[k] = "sample";
+    }
+  }
+
+  return `\
+async (arg: TableOnLoad) => {
+  if (isEditor) return [${JSON.stringify(sample)}];
+
+  const items = await db.${table}.findMany({
+    select: ${JSON.stringify(select, null, 2).split("\n").join("\n    ")},
+    orderBy: {
+      ${pk}: "desc"
+    }
+  });
+
+  return items;
+}
+
+type TableOnLoad = {
+  reload: () => Promise<void>;
+}
+`;
+};
diff --git a/gen/utils.ts b/gen/utils.ts
index c9ea64b..4570637 100755
--- a/gen/utils.ts
+++ b/gen/utils.ts
@@ -1,3 +1,4 @@
+import { createId } from "@paralleldrive/cuid2";
 import capitalize from "lodash.capitalize";
 
 export type GFCol = {
@@ -18,3 +19,40 @@ export const formatName = (name: string) => {
     .map((e) => capitalize(e))
     .join(" ");
 };
+
+type SimplifiedItem = {
+  name?: string;
+  component?: { id: string; props: Record<string, any> };
+  childs?: SimplifiedItem[];
+};
+
+export const createItem = (arg: SimplifiedItem): any => {
+  let component = undefined;
+
+  if (arg.component && arg.component.id) {
+    component = { id: arg.component.id, props: {} as any };
+
+    if (arg.component.props) {
+      for (const [k, v] of Object.entries(arg.component.props)) {
+        component.props[k] = {
+          type: "string",
+          value: JSON.stringify(v),
+          valueBuilt: JSON.stringify(v),
+        };
+      }
+    }
+  }
+
+  return {
+    id: createId(),
+    dim: {
+      h: "full",
+      w: "full",
+    },
+    name: arg.name || "item",
+    type: "item",
+    component,
+    script: {},
+    childs: arg.childs?.map(createItem),
+  };
+};