diff --git a/src/modules/02_organizational/router.ts b/src/modules/02_organizational/router.ts
index cec042ef6..add08831a 100644
--- a/src/modules/02_organizational/router.ts
+++ b/src/modules/02_organizational/router.ts
@@ -21,6 +21,9 @@ const ManageReport2Add = () =>
 const ManageReport2History = () =>
   import("@/modules/02_organizational/views/ManageReport2History.vue");
 
+const TreeTestPage = () =>
+  import("@/modules/02_organizational/views/TreeTest.vue");
+
 export default [
   {
     path: "/organizational/mapping",
@@ -122,4 +125,14 @@ export default [
       Role: "organization",
     },
   },
+  {
+    path: "/tree-test",
+    name: "treeTest",
+    component: TreeTestPage,
+    meta: {
+      Auth: true,
+      Key: [14],
+      Role: "organization",
+    },
+  },
 ];
diff --git a/src/modules/02_organizational/views/TreeTest.vue b/src/modules/02_organizational/views/TreeTest.vue
new file mode 100644
index 000000000..58e446b5f
--- /dev/null
+++ b/src/modules/02_organizational/views/TreeTest.vue
@@ -0,0 +1,370 @@
+<template>
+  <div class="row">
+    <div class="col-12 col-sm-4 q-gutter-sm">
+      <q-input ref="filterRef" filled v-model="filter" label="Filter">
+        <template v-slot:append>
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
+        </template>
+      </q-input>
+
+      <!-- <div class="row col-12">expanded = {{ expanded }}</div> -->
+      <!-- 
+      @after-show="afterShow"
+      @after-hide="afterHide" -->
+      <q-tree
+        dense
+        default-expand-all
+        selected-color="blue-6"
+        :nodes="lazy"
+        node-key="organizationId"
+        label-key="organizationName"
+        :filter="filter"
+        :no-results-label="notFound"
+        :no-nodes-label="noData"
+        :filter-method="filterData"
+        v-model:expanded="expanded"
+        v-model:selected="selected"
+        @update:selected="updateSelected"
+        @lazy-load="onLazyLoad"
+      >
+        <template v-slot:default-header="prop">
+          {{ prop.node.organizationName }}
+
+          <q-btn flat icon="mdi-dots-vertical" class="q-pa-none q-ml-xs">
+            <q-menu anchor="top right">
+              <q-list style="min-width: 80px">
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="edit(prop.node.organizationId)"
+                >
+                  <q-item-section> แก้ไข </q-item-section>
+                </q-item>
+                <q-separator />
+                <q-item clickable v-close-popup>
+                  <q-item-section>ลบ</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </template>
+      </q-tree>
+    </div>
+
+    <div class="col-12 col-sm-8 q-pt-none q-pl-sm">
+      <q-card>
+        <q-card-section>
+          <q-table
+            flat
+            bordered
+            :rows="rows"
+            :columns="columns"
+            row-key="name"
+            class="custom-header-table"
+            no-data-label="ไม่มีข้อมูล"
+          />
+        </q-card-section>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { QTableColumn } from "quasar";
+import { onMounted, ref } from "vue";
+
+const expanded = ref<Array<any>>([]);
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่มีข้อมูล");
+
+const nodes = ref<Array<any>>([]);
+const lazy = ref(nodes);
+
+const onLazyLoad = (details: { node: any; key: any; done: any; fail: any }) => {
+  // call fail() if any error occurs
+
+  // setTimeout(() => {
+  // simulate loading and setting an empty node
+  // if (details.key.indexOf("data empty") > -1) {
+  //   details.done([]);
+  //   return;
+  // }
+
+  if (details.node.organizationId == "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01") {
+    details.done([
+      {
+        organizationName: "กองบริหารทั่วไป",
+        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx11",
+        organizationLevel: 1,
+      },
+      {
+        organizationName: "กองสรรหาบุคคล",
+        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx12",
+        organizationLevel: 1,
+      },
+      {
+        organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
+        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx13",
+        organizationLevel: 1,
+        children: [
+          {
+            organizationName: "ฝ่ายบริหารงานทั่วไป",
+            organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx131",
+            organizationLevel: 2,
+            children: [
+              {
+                organizationName: "กลุ่มงานวิเคราะห์การพัฒนาทรัพยากรบุคคล",
+                organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx1311",
+                organizationLevel: 3,
+              },
+            ],
+          },
+          {
+            organizationName: "ส่วนส่งเสริมการพัฒนาทรัพยากรบุคคล",
+            organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx14",
+            organizationLevel: 2,
+          },
+        ],
+      },
+    ]);
+  } else if (
+    details.node.organizationId == "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02"
+  ) {
+    details.done([
+      {
+        organizationName: "สำนักงานการเจ้าหน้าที่",
+        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx21",
+        organizationLevel: 1,
+      },
+    ]);
+  }
+  // }, 500);
+};
+
+const selected = ref("");
+const updateSelected = (target: any) => {
+  console.log("updateSelected===>", target);
+};
+
+// const afterShow = () => {
+//   console.log("afterShow");
+// };
+
+// const afterHide = () => {
+//   console.log("@after-hide");
+// };
+
+/** filter */
+const filter = ref<string>("");
+const filterRef = ref();
+const filterData = (node: any, filter: string) => {
+  // ให้ทาง API ค้นหาให้
+  nodes.value = [
+    {
+      organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+      organizationId: "3b86d275-8259-427c-8da7-12813fe482eb",
+      organizationLevel: 0,
+      lazy: true,
+      children: [
+        {
+          organizationName: "กองบริหารทั่วไป",
+          organizationId: "3486d275-8159-427c-8da7-12813fe482eb",
+          organizationLevel: 1,
+        },
+        {
+          organizationName: "กองสรรหาบุคคล",
+          organizationId: "3486d275-8259-427c-8da7-12813fe400eb",
+          organizationLevel: 1,
+        },
+        {
+          organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
+          organizationId: "3486d275-8259-437c-8da7-12813fe482eb",
+          organizationLevel: 1,
+          children: [
+            {
+              organizationName: "ฝ่ายบริหารงานทั่วไป",
+              organizationId: "3486d275-8259-427c-8da7-12813ff482eb",
+              organizationLevel: 2,
+            },
+            {
+              organizationName: "ส่วนส่งเสริมการพัฒนาทรัพยากรบุคคล",
+              organizationId: "3486d275-8259-427c-8da7-12833fe482eb",
+              organizationLevel: 2,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      organizationName: "สำนักปลัดกรุงเทพมหานคร",
+      organizationId: "3b86d275-8259-427c-8da7-12813fe482ec",
+      organizationLevel: 0,
+    },
+  ];
+
+  // expanded จาก id ได้
+  expanded.value = [
+    "3b86d275-8259-427c-8da7-12813fe482eb",
+    "3486d275-8259-437c-8da7-12813fe482eb",
+  ];
+
+  return node.organizationName && node.organizationName.indexOf(filter) > -1;
+};
+
+function resetFilter() {
+  filter.value = "";
+  filterRef.value.focus();
+}
+
+const breakLoop = ref<boolean>(false);
+async function edit(selected: string) {
+  console.log("edit node tree id: " + selected);
+  breakLoop.value = false;
+
+  // Usage
+  const targetNodeId = selected;
+  const replacementNode = {
+    organizationName: `ชื่อใหม่ ${selected}`,
+    organizationId: selected,
+  };
+
+  for (let index = 0; index < nodes.value.length; index++) {
+    const element = nodes.value[index];
+    searchAndReplace(element, targetNodeId, replacementNode);
+    console.log("index===>", index);
+    console.log("breakLoop===>", breakLoop.value);
+    if (breakLoop.value) break;
+  }
+}
+
+function searchAndReplace(
+  treeNode: any,
+  organizationId: any,
+  replacementObject: any
+) {
+  if (treeNode.organizationId === organizationId) {
+    Object.assign(treeNode, replacementObject);
+    breakLoop.value = true;
+  } else if (treeNode.children) {
+    for (const child of treeNode.children) {
+      searchAndReplace(child, organizationId, replacementObject);
+    }
+  }
+}
+
+const columns = ref<QTableColumn[]>([
+  {
+    name: "no",
+    required: true,
+    label: "ลำดับ",
+    align: "left",
+    field: "no",
+    // field: (row) => row.no,
+    sortable: false,
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+  },
+  {
+    name: "positionNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    field: "positionNo",
+    sortable: true,
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    field: "positionLine",
+    sortable: true,
+  },
+]);
+
+const rows = [
+  {
+    no: 1,
+    position: "ผู้อำนวยการ",
+    positionNo: "กบห01",
+    positionLine: "ประเภทอำนวยการ",
+  },
+  {
+    no: 2,
+    position: "นักจัดการงานทั่วไป",
+    positionNo: "กบห01",
+    positionLine: "ประเภทวิชาการ",
+  },
+  {
+    no: 3,
+    position: "นักวิชาการเงินและบัญชี",
+    positionNo: "กบห02",
+    positionLine: "ประเภทวิชาการ",
+  },
+];
+
+onMounted(async () => {
+  nodes.value = [
+    {
+      organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+      organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01",
+      organizationLevel: 0,
+      lazy: true,
+    },
+    {
+      organizationName: "สำนักปลัดกรุงเทพมหานคร",
+      organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02",
+      organizationLevel: 0,
+      lazy: true,
+    },
+    // {
+    //   organizationName: "data empty",
+    //   lazy: true,
+    // },
+    // {
+    //   organizationName: "Node is not expandable",
+    //   expandable: false,
+    //   children: [{ organizationName: "Some node" }],
+    // },
+  ];
+});
+</script>
+
+<style lang="scss" scope>
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  .q-table thead tr:last-child th {
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
\ No newline at end of file