diff --git a/src/components/table.jsx b/src/components/table.jsx
index 4ad98be..8cdc101 100644
--- a/src/components/table.jsx
+++ b/src/components/table.jsx
@@ -39,6 +39,7 @@ import {
   SettingsContext,
   TabContext,
   TableContext,
+  TypeContext,
   UndoRedoContext,
 } from "../pages/editor";
 import { getSize, hasCheck, hasPrecision, isSized } from "../utils";
@@ -52,6 +53,7 @@ export default function Table(props) {
     useContext(TableContext);
   const { tab, setTab } = useContext(TabContext);
   const { settings } = useContext(SettingsContext);
+  const { types } = useContext(TypeContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
   const { selectedElement, setSelectedElement } = useContext(SelectContext);
 
@@ -347,12 +349,16 @@ export default function Table(props) {
               <Col span={8}>
                 <Select
                   className="w-full"
-                  optionList={sqlDataTypes.map((value) => {
-                    return {
+                  optionList={[
+                    ...sqlDataTypes.map((value) => ({
                       label: value,
                       value: value,
-                    };
-                  })}
+                    })),
+                    ...types.map((type) => ({
+                      label: type.name.toUpperCase(),
+                      value: type.name.toUpperCase(),
+                    })),
+                  ]}
                   filter
                   value={f.type}
                   validateStatus={f.type === "" ? "error" : "default"}
diff --git a/src/components/table_overview.jsx b/src/components/table_overview.jsx
index 194270d..226f082 100644
--- a/src/components/table_overview.jsx
+++ b/src/components/table_overview.jsx
@@ -35,7 +35,12 @@ import {
   IllustrationNoContent,
   IllustrationNoContentDark,
 } from "@douyinfe/semi-illustrations";
-import { SelectContext, TableContext, UndoRedoContext } from "../pages/editor";
+import {
+  SelectContext,
+  TableContext,
+  TypeContext,
+  UndoRedoContext,
+} from "../pages/editor";
 import { getSize, hasCheck, hasPrecision, isSized } from "../utils";
 
 export default function TableOverview(props) {
@@ -49,6 +54,7 @@ export default function TableOverview(props) {
     updateTable,
     setRelationships,
   } = useContext(TableContext);
+  const { types } = useContext(TypeContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
   const { selectedElement, setSelectedElement } = useContext(SelectContext);
   const [editField, setEditField] = useState({});
@@ -193,12 +199,16 @@ export default function TableOverview(props) {
                     <Col span={8}>
                       <Select
                         className="w-full"
-                        optionList={sqlDataTypes.map((value) => {
-                          return {
+                        optionList={[
+                          ...sqlDataTypes.map((value) => ({
                             label: value,
                             value: value,
-                          };
-                        })}
+                          })),
+                          ...types.map((type) => ({
+                            label: type.name.toUpperCase(),
+                            value: type.name.toUpperCase(),
+                          })),
+                        ]}
                         filter
                         value={f.type}
                         validateStatus={f.type === "" ? "error" : "default"}
diff --git a/src/components/types_overview.jsx b/src/components/types_overview.jsx
index 7e1d934..ebdae6e 100644
--- a/src/components/types_overview.jsx
+++ b/src/components/types_overview.jsx
@@ -180,12 +180,18 @@ export default function TableOverview(props) {
                     <Col span={11}>
                       <Select
                         className="w-full"
-                        optionList={sqlDataTypes.map((value) => {
-                          return {
+                        optionList={[
+                          ...sqlDataTypes.map((value) => ({
                             label: value,
                             value: value,
-                          };
-                        })}
+                          })),
+                          ...types
+                            .filter((type) => type.name !== t.name)
+                            .map((type) => ({
+                              label: type.name.toUpperCase(),
+                              value: type.name.toUpperCase(),
+                            })),
+                        ]}
                         filter
                         value={f.type}
                         validateStatus={f.type === "" ? "error" : "default"}