diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 6a9790d55..ea18e9fe8 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -239,6 +239,7 @@
 
     .b3-menu {
       max-height: 70vh;
+      min-width: 200px;
 
       &__item .b3-chip {
         max-width: 196px;
diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts
index 257881b25..c06882f3a 100644
--- a/app/src/protyle/render/av/action.ts
+++ b/app/src/protyle/render/av/action.ts
@@ -70,7 +70,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
 
     const headerMoreElement = hasClosestByAttribute(event.target, "data-type", "av-header-more");
     if (headerMoreElement) {
-        openMenuPanel(protyle, blockElement, "properties");
+        openMenuPanel({protyle, blockElement, type: "properties"});
         event.preventDefault();
         event.stopPropagation();
         return true;
@@ -78,7 +78,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
 
     const moreElement = hasClosestByAttribute(event.target, "data-type", "av-more");
     if (moreElement) {
-        openMenuPanel(protyle, blockElement, "config");
+        openMenuPanel({protyle, blockElement, type: "config"});
         event.preventDefault();
         event.stopPropagation();
         return true;
@@ -86,7 +86,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
 
     const sortsElement = hasClosestByAttribute(event.target, "data-type", "av-sort");
     if (sortsElement) {
-        openMenuPanel(protyle, blockElement, "sorts");
+        openMenuPanel({protyle, blockElement, type: "sorts"});
         event.preventDefault();
         event.stopPropagation();
         return true;
@@ -94,7 +94,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
 
     const filtersElement = hasClosestByAttribute(event.target, "data-type", "av-filter");
     if (filtersElement) {
-        openMenuPanel(protyle, blockElement, "filters");
+        openMenuPanel({protyle, blockElement, type: "filters"});
         event.preventDefault();
         event.stopPropagation();
         return true;
diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts
index f168f7093..702b65932 100644
--- a/app/src/protyle/render/av/cell.ts
+++ b/app/src/protyle/render/av/cell.ts
@@ -292,7 +292,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[]) => {
     } else if (type === "number") {
         html = `<input type="number" value="${cellElements[0].textContent}" ${style} class="b3-text-field">`;
     } else if (["select", "mSelect"].includes(type) && blockElement) {
-        openMenuPanel(protyle, blockElement, "select", {cellElements});
+        openMenuPanel({protyle, blockElement, type: "select", cellElements});
         return;
     }
     window.siyuan.menus.menu.remove();
diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts
index 3fdcede97..8d4bc6dc8 100644
--- a/app/src/protyle/render/av/col.ts
+++ b/app/src/protyle/render/av/col.ts
@@ -8,11 +8,60 @@ import {openMenuPanel} from "./openMenuPanel";
 
 export const getEditHTML = (options: {
     protyle: IProtyle,
-    blockElement: HTMLElement,
-    cellElement: HTMLElement,
+    colId: string,
     data: IAV
 }) => {
-    // TODO
+    let colData: IAVColumn
+    options.data.view.columns.find((item) => {
+        if (item.id === options.colId) {
+            colData = item;
+            return true;
+        }
+    })
+    let html = `<button class="b3-menu__item" data-type="nobg" data-col-id="${options.colId}">
+    <span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goProperties">
+        <svg><use xlink:href="#iconLeft"></use></svg>
+    </span>
+    <span class="b3-menu__label ft__center">${window.siyuan.languages.edit}</span>
+    <svg class="b3-menu__action" data-type="close" style="opacity: 1"><use xlink:href="#iconCloseRound"></use></svg>
+</button>
+<button class="b3-menu__separator"></button>
+<button class="b3-menu__item">
+    <svg class="b3-menu__icon" style=""><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>
+    <span class="b3-menu__label"><input style="margin: 4px 0" class="b3-text-field" type="text" value="${colData.name}"></span>
+</button>`;
+    if (colData.options && colData.options.length > 0) {
+        html += `<button class="b3-menu__separator"></button>
+<button class="b3-menu__item">
+    <svg class="b3-menu__icon" style=""><use xlink:href="#iconAdd"></use></svg>
+    <span class="b3-menu__label"><input style="margin: 4px 0" class="b3-text-field" type="text" placeholder="Enter ${window.siyuan.languages.addAttr}"></span>
+</button>`
+        colData.options.forEach(item => {
+            html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}">
+    <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
+    <div class="fn__flex-1">
+        <span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
+            <span class="fn__ellipsis">${item.name}</span>
+        </span>
+    </div>
+    <svg class="b3-menu__action" data-type="setColOption"><use xlink:href="#iconEdit"></use></svg>
+</button>`;
+        });
+    }
+    return `${html}
+<button class="b3-menu__separator"></button>
+<button class="b3-menu__item">
+    <svg class="b3-menu__icon" style=""><use xlink:href="#icon${colData.hidden ? "Eye" : "Eyeoff"}"></use></svg>
+    <span class="b3-menu__label">${colData.hidden ? window.siyuan.languages.showCol : window.siyuan.languages.hideCol}</span>
+</button>
+<button class="b3-menu__item">
+    <svg class="b3-menu__icon" style=""><use xlink:href="#iconCopy"></use></svg>
+    <span class="b3-menu__label">${window.siyuan.languages.duplicate}</span>
+</button>
+<button class="b3-menu__item">
+    <svg class="b3-menu__icon" style=""><use xlink:href="#iconTrashcan"></use></svg>
+    <span class="b3-menu__label">${window.siyuan.languages.delete}</span>
+</button>`;
 };
 
 export const getColIconByType = (type: TAVCol) => {
@@ -105,7 +154,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: HTMLElement, cellEl
             icon: "iconEdit",
             label: window.siyuan.languages.edit,
             click() {
-                openMenuPanel(protyle, blockElement, "edit", {cellElement});
+                openMenuPanel({protyle, blockElement, type: "edit", colId});
             }
         });
     }
diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts
index 82821574d..4c44ca3b6 100644
--- a/app/src/protyle/render/av/openMenuPanel.ts
+++ b/app/src/protyle/render/av/openMenuPanel.ts
@@ -4,36 +4,39 @@ import {addCol} from "./addCol";
 import {getColIconByType, getEditHTML} from "./col";
 import {setPosition} from "../../../util/setPosition";
 import {hasClosestByAttribute} from "../../util/hasClosest";
-import {bindSelectEvent, getSelectHTML, addSelectColAndCell, setSelectCol, removeSelectCell} from "./select";
+import {bindSelectEvent, getSelectHTML, addColOptionOrCell, setColOption, removeCellOption} from "./select";
 import {addFilter, getFiltersHTML, setFilter} from "./filter";
 import {addSort, bindSortsEvent, getSortsHTML} from "./sort";
 
-export const openMenuPanel = (protyle: IProtyle,
-                              blockElement: HTMLElement,
-                              type: "select" | "properties" | "config" | "sorts" | "filters" | "edit" = "config",
-                              options?: any) => {
+export const openMenuPanel = (options: {
+    protyle: IProtyle,
+    blockElement: HTMLElement,
+    type: "select" | "properties" | "config" | "sorts" | "filters" | "edit",
+    colId?: string, // for edit
+    cellElements?: HTMLElement[]    // for select
+}) => {
     let avPanelElement = document.querySelector(".av__panel");
     if (avPanelElement) {
         avPanelElement.remove();
         return;
     }
     window.siyuan.menus.menu.remove();
-    const avId = blockElement.getAttribute("data-av-id");
+    const avId = options.blockElement.getAttribute("data-av-id");
     fetchPost("/api/av/renderAttributeView", {id: avId}, (response) => {
         const data = response.data as IAV;
         let html;
-        if (type === "config") {
+        if (options.type === "config") {
             html = getConfigHTML(data.view);
-        } else if (type === "properties") {
+        } else if (options.type === "properties") {
             html = getPropertiesHTML(data.view);
-        } else if (type === "sorts") {
+        } else if (options.type === "sorts") {
             html = getSortsHTML(data.view.columns, data.view.sorts);
-        } else if (type === "filters") {
+        } else if (options.type === "filters") {
             html = getFiltersHTML(data.view);
-        } else if (type === "select") {
-            html = getSelectHTML(data.view, options);
-        } else if (type === "edit") {
-            html = getEditHTML({protyle, data, blockElement, cellElement: options.cellElement});
+        } else if (options.type === "select") {
+            html = getSelectHTML(data.view, options.cellElements);
+        } else if (options.type === "edit") {
+            html = getEditHTML({protyle: options.protyle, data, colId: options.colId});
         }
 
         document.body.insertAdjacentHTML("beforeend", `<div class="av__panel">
@@ -42,17 +45,17 @@ export const openMenuPanel = (protyle: IProtyle,
 </div>`);
         avPanelElement = document.querySelector(".av__panel");
         const menuElement = avPanelElement.lastElementChild as HTMLElement;
-        const tabRect = blockElement.querySelector(".layout-tab-bar").getBoundingClientRect();
-        if (type === "select") {
+        const tabRect = options.blockElement.querySelector(".layout-tab-bar").getBoundingClientRect();
+        if (options.type === "select") {
             const cellRect = options.cellElements[options.cellElements.length - 1].getBoundingClientRect();
             setPosition(menuElement, cellRect.left, cellRect.bottom, cellRect.height);
-            bindSelectEvent(protyle, data, menuElement, options);
+            bindSelectEvent(options.protyle, data, menuElement, options.cellElements);
             menuElement.querySelector("input").select();
             menuElement.querySelector("input").focus();
         } else {
             setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
-            if (type === "sorts") {
-                bindSortsEvent(protyle, menuElement, data);
+            if (options.type === "sorts") {
+                bindSortsEvent(options.protyle, menuElement, data);
             }
         }
         avPanelElement.addEventListener("dragstart", (event) => {
@@ -64,7 +67,7 @@ export const openMenuPanel = (protyle: IProtyle,
             window.siyuan.dragElement.style.opacity = "";
             const sourceElement = window.siyuan.dragElement;
             window.siyuan.dragElement = undefined;
-            if (protyle.disabled) {
+            if (options.protyle.disabled) {
                 event.preventDefault();
                 event.stopPropagation();
                 return;
@@ -81,8 +84,8 @@ export const openMenuPanel = (protyle: IProtyle,
                 type = "sorts";
             } else if (targetElement.querySelector('[data-type="removeFilter"]')) {
                 type = "filters";
-            } else if (targetElement.querySelector('[data-type="setSelectCol"]')) {
-                const colId = options.cellElements[0].dataset.colId;
+            } else if (targetElement.querySelector('[data-type="setColOption"]')) {
+                const colId = options.cellElements ? options.cellElements[0].dataset.colId : menuElement.firstElementChild.getAttribute("data-col-id");
                 const changeData = data.view.columns.find((column) => column.id === colId).options;
                 const oldData = Object.assign([], changeData);
                 let targetOption: { name: string, color: string };
@@ -102,7 +105,7 @@ export const openMenuPanel = (protyle: IProtyle,
                         return true;
                     }
                 });
-                transaction(protyle, [{
+                transaction(options.protyle, [{
                     action: "updateAttrViewColOptions",
                     id: colId,
                     avID: data.id,
@@ -113,8 +116,16 @@ export const openMenuPanel = (protyle: IProtyle,
                     avID: data.id,
                     data: oldData,
                 }]);
-                menuElement.innerHTML = getSelectHTML(data.view, options);
-                bindSelectEvent(protyle, data, menuElement, options);
+                if (options.cellElements) {
+                    menuElement.innerHTML = getSelectHTML(data.view, options.cellElements);
+                    bindSelectEvent(options.protyle, data, menuElement, options.cellElements);
+                } else {
+                    menuElement.innerHTML = getEditHTML({
+                        protyle: options.protyle,
+                        data,
+                        colId
+                    });
+                }
                 return;
             }
             const sourceId = sourceElement.dataset.id;
@@ -140,7 +151,7 @@ export const openMenuPanel = (protyle: IProtyle,
                     }
                 });
 
-                transaction(protyle, [{
+                transaction(options.protyle, [{
                     action: "setAttrViewSorts",
                     avID: avId,
                     data: changeData
@@ -150,7 +161,7 @@ export const openMenuPanel = (protyle: IProtyle,
                     data: oldData
                 }]);
                 menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
-                bindSortsEvent(protyle, menuElement, data);
+                bindSortsEvent(options.protyle, menuElement, data);
                 return;
             }
             if (type === "filters") {
@@ -174,7 +185,7 @@ export const openMenuPanel = (protyle: IProtyle,
                     }
                 });
 
-                transaction(protyle, [{
+                transaction(options.protyle, [{
                     action: "setAttrViewFilters",
                     avID: avId,
                     data: changeData
@@ -186,7 +197,7 @@ export const openMenuPanel = (protyle: IProtyle,
                 menuElement.innerHTML = getFiltersHTML(data.view);
                 return;
             }
-            transaction(protyle, [{
+            transaction(options.protyle, [{
                 action: "sortAttrViewCol",
                 avID: avId,
                 previousID: (targetElement.classList.contains("dragover__top") ? targetElement.previousElementSibling?.getAttribute("data-id") : targetElement.getAttribute("data-id")) || "",
@@ -270,12 +281,12 @@ export const openMenuPanel = (protyle: IProtyle,
                     break;
                 } else if (type === "goSorts") {
                     menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
-                    bindSortsEvent(protyle, menuElement, data);
+                    bindSortsEvent(options.protyle, menuElement, data);
                     setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
                     event.stopPropagation();
                     break;
                 } else if (type === "removeSorts") {
-                    transaction(protyle, [{
+                    transaction(options.protyle, [{
                         action: "setAttrViewSorts",
                         avID: avId,
                         data: []
@@ -286,12 +297,19 @@ export const openMenuPanel = (protyle: IProtyle,
                     }]);
                     data.view.sorts = [];
                     menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
-                    bindSortsEvent(protyle, menuElement, data);
+                    bindSortsEvent(options.protyle, menuElement, data);
                     setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
                     event.stopPropagation();
                     break;
                 } else if (type === "addSort") {
-                    addSort({data, rect: target.getBoundingClientRect(), menuElement, tabRect, avId, protyle});
+                    addSort({
+                        data,
+                        rect: target.getBoundingClientRect(),
+                        menuElement,
+                        tabRect,
+                        avId,
+                        protyle: options.protyle
+                    });
                     event.stopPropagation();
                     break;
                 } else if (type === "removeSort") {
@@ -302,7 +320,7 @@ export const openMenuPanel = (protyle: IProtyle,
                             return true;
                         }
                     });
-                    transaction(protyle, [{
+                    transaction(options.protyle, [{
                         action: "setAttrViewSorts",
                         avID: avId,
                         data: data.view.sorts
@@ -312,7 +330,7 @@ export const openMenuPanel = (protyle: IProtyle,
                         data: oldSorts
                     }]);
                     menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts);
-                    bindSortsEvent(protyle, menuElement, data);
+                    bindSortsEvent(options.protyle, menuElement, data);
                     setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
                     event.stopPropagation();
                     break;
@@ -322,7 +340,7 @@ export const openMenuPanel = (protyle: IProtyle,
                     event.stopPropagation();
                     break;
                 } else if (type === "removeFilters") {
-                    transaction(protyle, [{
+                    transaction(options.protyle, [{
                         action: "setAttrViewFilters",
                         avID: avId,
                         data: []
@@ -337,7 +355,14 @@ export const openMenuPanel = (protyle: IProtyle,
                     event.stopPropagation();
                     break;
                 } else if (type === "addFilter") {
-                    addFilter({data, rect: target.getBoundingClientRect(), menuElement, tabRect, avId, protyle});
+                    addFilter({
+                        data,
+                        rect: target.getBoundingClientRect(),
+                        menuElement,
+                        tabRect,
+                        avId,
+                        protyle: options.protyle
+                    });
                     event.stopPropagation();
                     break;
                 } else if (type === "removeFilter") {
@@ -349,7 +374,7 @@ export const openMenuPanel = (protyle: IProtyle,
                             return true;
                         }
                     });
-                    transaction(protyle, [{
+                    transaction(options.protyle, [{
                         action: "setAttrViewFilters",
                         avID: avId,
                         data: data.view.filters
@@ -367,7 +392,7 @@ export const openMenuPanel = (protyle: IProtyle,
                         if (item.column === target.parentElement.parentElement.dataset.id) {
                             setFilter({
                                 filter: item,
-                                protyle,
+                                protyle: options.protyle,
                                 data,
                                 target
                             });
@@ -378,7 +403,7 @@ export const openMenuPanel = (protyle: IProtyle,
                     break;
                 } else if (type === "newCol") {
                     avPanelElement.remove();
-                    const addMenu = addCol(protyle, blockElement);
+                    const addMenu = addCol(options.protyle, options.blockElement);
                     addMenu.open({
                         x: tabRect.right,
                         y: tabRect.bottom,
@@ -408,7 +433,7 @@ export const openMenuPanel = (protyle: IProtyle,
                         }
                     });
                     if (doOperations.length > 0) {
-                        transaction(protyle, doOperations, undoOperations);
+                        transaction(options.protyle, doOperations, undoOperations);
                         menuElement.innerHTML = getPropertiesHTML(data.view);
                         setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
                     }
@@ -435,15 +460,23 @@ export const openMenuPanel = (protyle: IProtyle,
                         }
                     });
                     if (doOperations.length > 0) {
-                        transaction(protyle, doOperations, undoOperations);
+                        transaction(options.protyle, doOperations, undoOperations);
                         menuElement.innerHTML = getPropertiesHTML(data.view);
                         setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
                     }
                     event.stopPropagation();
                     break;
+                } else if (type === "editCol") {
+                    menuElement.innerHTML = getEditHTML({
+                        protyle: options.protyle,
+                        data,
+                        colId: target.parentElement.dataset.id
+                    });
+                    event.stopPropagation();
+                    break;
                 } else if (type === "hideCol") {
                     const colId = target.parentElement.getAttribute("data-id");
-                    transaction(protyle, [{
+                    transaction(options.protyle, [{
                         action: "setAttrViewColHidden",
                         id: colId,
                         avID: avId,
@@ -461,7 +494,7 @@ export const openMenuPanel = (protyle: IProtyle,
                     break;
                 } else if (type === "showCol") {
                     const colId = target.parentElement.getAttribute("data-id");
-                    transaction(protyle, [{
+                    transaction(options.protyle, [{
                         action: "setAttrViewColHidden",
                         id: colId,
                         avID: avId,
@@ -477,17 +510,17 @@ export const openMenuPanel = (protyle: IProtyle,
                     setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
                     event.stopPropagation();
                     break;
-                } else if (type === "setSelectCol") {
-                    setSelectCol(protyle, data, options, target);
+                } else if (type === "setColOption") {
+                    setColOption(options.protyle, data, target, options.cellElements);
                     event.stopPropagation();
                     break;
-                } else if (type === "addSelectColAndCell") {
-                    addSelectColAndCell(protyle, data, options, target, menuElement);
+                } else if (type === "addColOptionOrCell") {
+                    addColOptionOrCell(options.protyle, data, options.cellElements, target, menuElement);
                     window.siyuan.menus.menu.remove();
                     event.stopPropagation();
                     break;
-                } else if (type === "removeSelectCell") {
-                    removeSelectCell(protyle, data, options, target.parentElement);
+                } else if (type === "removeCellOption") {
+                    removeCellOption(options.protyle, data, options.cellElements, target.parentElement);
                     event.stopPropagation();
                     break;
                 }
@@ -511,7 +544,7 @@ const getPropertiesHTML = (data: IAVTable) => {
         </span>
     </div>
     <svg class="b3-menu__action" data-type="showCol"><use xlink:href="#iconEyeoff"></use></svg>
-    <svg class="b3-menu__action"><use xlink:href="#iconEdit"></use></svg>
+    <svg class="b3-menu__action" data-type="editCol"><use xlink:href="#iconEdit"></use></svg>
 </button>`;
         } else {
             showHTML += `<button class="b3-menu__item" draggable="true" data-id="${item.id}">
@@ -523,7 +556,7 @@ const getPropertiesHTML = (data: IAVTable) => {
         </span>
     </div>
     <svg class="b3-menu__action${item.type === "block" ? " fn__none" : ""}" data-type="hideCol"><use xlink:href="#iconEye"></use></svg>
-    <svg class="b3-menu__action${item.type === "block" ? " fn__none" : ""}"><use xlink:href="#iconEdit"></use></svg>
+    <svg class="b3-menu__action" data-type="editCol"><use xlink:href="#iconEdit"></use></svg>
 </button>`;
         }
     });
diff --git a/app/src/protyle/render/av/select.ts b/app/src/protyle/render/av/select.ts
index 68be6bfcd..f7cec0779 100644
--- a/app/src/protyle/render/av/select.ts
+++ b/app/src/protyle/render/av/select.ts
@@ -3,6 +3,7 @@ import {transaction} from "../../wysiwyg/transaction";
 import {hasClosestByClassName} from "../../util/hasClosest";
 import {confirmDialog} from "../../../dialog/confirmDialog";
 import {upDownHint} from "../../../util/upDownHint";
+import {getEditHTML} from "./col";
 
 const filterSelectHTML = (key: string, options: { name: string, color: string }[]) => {
     let html = "";
@@ -12,14 +13,14 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
             if (!key ||
                 (key.toLowerCase().indexOf(item.name.toLowerCase()) > -1 ||
                     item.name.toLowerCase().indexOf(key.toLowerCase()) > -1)) {
-                html += `<button data-type="addSelectColAndCell" class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}">
+                html += `<button data-type="addColOptionOrCell" class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}">
     <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
     <div class="fn__flex-1">
         <span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
             <span class="fn__ellipsis">${item.name}</span>
         </span>
     </div>
-    <svg class="b3-menu__action" data-type="setSelectCol"><use xlink:href="#iconEdit"></use></svg>
+    <svg class="b3-menu__action" data-type="setColOption"><use xlink:href="#iconEdit"></use></svg>
 </button>`;
             }
             if (key === item.name) {
@@ -29,7 +30,7 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
     }
     if (!hasMatch && key) {
         const colorIndex = (options?.length || 0) % 13 + 1;
-        html = `<button data-type="addSelectColAndCell" class="b3-menu__item${html ? "" : " b3-menu__item--current"}" data-name="${key}" data-color="${colorIndex}">
+        html = `<button data-type="addColOptionOrCell" class="b3-menu__item${html ? "" : " b3-menu__item--current"}" data-name="${key}" data-color="${colorIndex}">
 <svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg>
 <div class="fn__flex-1">
     <span class="b3-chip" style="background-color:var(--b3-font-background${colorIndex});color:var(--b3-font-color${colorIndex})">
@@ -42,16 +43,14 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
     return html;
 };
 
-export const removeSelectCell = (protyle: IProtyle, data: IAV, options: {
-    cellElements: HTMLElement[]
-}, target: HTMLElement) => {
+export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement) => {
     if (!target) {
         return;
     }
-    const colId = options.cellElements[0].dataset.colId;
+    const colId = cellElements[0].dataset.colId;
     const doOperations: IOperation[] = [];
     const undoOperations: IOperation[] = [];
-    options.cellElements.forEach(item => {
+    cellElements.forEach(item => {
         const rowID = item.parentElement.dataset.id;
         const cellId = item.dataset.id;
         let cellData: IAVCell;
@@ -97,16 +96,15 @@ export const removeSelectCell = (protyle: IProtyle, data: IAV, options: {
     target.remove();
 };
 
-export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
-    cellElements: HTMLElement[];
-}, target: HTMLElement,) => {
+export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement, cellElements?: HTMLElement[]) => {
     const menuElement = hasClosestByClassName(target, "b3-menu");
     if (!menuElement) {
         return;
     }
+    const colId = cellElements ? cellElements[0].dataset.colId : menuElement.firstElementChild.getAttribute("data-col-id");
     let name = target.parentElement.dataset.name;
     let color = target.parentElement.dataset.color;
-    const menu = new Menu("av-select-option", () => {
+    const menu = new Menu("av-col-option", () => {
         if (name === inputElement.value) {
             return;
         }
@@ -140,29 +138,34 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
                 return true;
             }
         });
-        data.view.rows.find(row => {
-            if (row.id === options.cellElements[0].parentElement.dataset.id) {
-                row.cells.find(cell => {
-                    if (cell.id === options.cellElements[0].dataset.id) {
-                        cell.value.mSelect.find((item) => {
-                            if (item.content === name) {
-                                item.content = inputElement.value;
+        if (!cellElements) {
+            menuElement.innerHTML = getEditHTML({protyle, data, colId});
+        } else {
+            cellElements.forEach((cellElement: HTMLMediaElement) => {
+                data.view.rows.find(row => {
+                    if (row.id === cellElement.parentElement.dataset.id) {
+                        row.cells.find(cell => {
+                            if (cell.id === cellElement.dataset.id) {
+                                cell.value.mSelect.find((item) => {
+                                    if (item.content === name) {
+                                        item.content = inputElement.value;
+                                        return true;
+                                    }
+                                });
                                 return true;
                             }
                         });
                         return true;
                     }
                 });
-                return true;
-            }
-        });
-        menuElement.innerHTML = getSelectHTML(data.view, options);
-        bindSelectEvent(protyle, data, menuElement, options);
+            })
+            menuElement.innerHTML = getSelectHTML(data.view, cellElements);
+            bindSelectEvent(protyle, data, menuElement, cellElements);
+        }
     });
     if (menu.isOpen) {
         return;
     }
-    const colId = options.cellElements[0].dataset.colId;
     menu.addItem({
         iconHTML: "",
         label: `<input class="b3-text-field" style="margin: 4px 0" value="${name}">`
@@ -197,24 +200,30 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
                         return true;
                     }
                 });
-                data.view.rows.find(row => {
-                    if (row.id === options.cellElements[0].parentElement.dataset.id) {
-                        row.cells.find(cell => {
-                            if (cell.id === options.cellElements[0].dataset.id) {
-                                cell.value.mSelect.find((item, index) => {
-                                    if (item.content === newName) {
-                                        cell.value.mSelect.splice(index, 1);
+                if (!cellElements) {
+                    menuElement.innerHTML = getEditHTML({protyle, data, colId});
+                } else {
+                    cellElements.forEach((cellElement: HTMLElement) => {
+                        data.view.rows.find(row => {
+                            if (row.id === cellElement.parentElement.dataset.id) {
+                                row.cells.find(cell => {
+                                    if (cell.id === cellElement.dataset.id) {
+                                        cell.value.mSelect.find((item, index) => {
+                                            if (item.content === newName) {
+                                                cell.value.mSelect.splice(index, 1);
+                                                return true;
+                                            }
+                                        });
                                         return true;
                                     }
                                 });
                                 return true;
                             }
                         });
-                        return true;
-                    }
-                });
-                menuElement.innerHTML = getSelectHTML(data.view, options);
-                bindSelectEvent(protyle, data, menuElement, options);
+                    })
+                    menuElement.innerHTML = getSelectHTML(data.view, cellElements);
+                    bindSelectEvent(protyle, data, menuElement, cellElements);
+                }
             });
         }
     });
@@ -264,27 +273,33 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
                         return true;
                     }
                 });
-                data.view.rows.find(row => {
-                    if (row.id === options.cellElements[0].parentElement.dataset.id) {
-                        row.cells.find(cell => {
-                            if (cell.id === options.cellElements[0].dataset.id) {
-                                cell.value.mSelect.find((item) => {
-                                    if (item.content === name) {
-                                        item.content = inputElement.value;
-                                        item.color = (index + 1).toString();
+                if (!cellElements) {
+                    menuElement.innerHTML = getEditHTML({protyle, data, colId});
+                } else {
+                    cellElements.forEach((cellElement: HTMLElement) => {
+                        data.view.rows.find(row => {
+                            if (row.id === cellElement.parentElement.dataset.id) {
+                                row.cells.find(cell => {
+                                    if (cell.id === cellElement.dataset.id) {
+                                        cell.value.mSelect.find((item) => {
+                                            if (item.content === name) {
+                                                item.content = inputElement.value;
+                                                item.color = (index + 1).toString();
+                                                return true;
+                                            }
+                                        });
                                         return true;
                                     }
                                 });
                                 return true;
                             }
                         });
-                        return true;
-                    }
-                });
+                    })
+                    menuElement.innerHTML = getSelectHTML(data.view, cellElements);
+                    bindSelectEvent(protyle, data, menuElement, cellElements);
+                }
                 name = inputElement.value;
                 color = (index + 1).toString();
-                menuElement.innerHTML = getSelectHTML(data.view, options);
-                bindSelectEvent(protyle, data, menuElement, options);
                 return true;
             }
         });
@@ -300,11 +315,9 @@ export const setSelectCol = (protyle: IProtyle, data: IAV, options: {
     inputElement.select();
 };
 
-export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLElement, options: {
-    cellElements: HTMLElement[]
-}) => {
+export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLElement,  cellElements: HTMLElement[]) => {
     const inputElement = menuElement.querySelector("input");
-    const colId = options.cellElements[0].dataset.colId;
+    const colId = cellElements[0].dataset.colId;
     let colData: IAVColumn;
     data.view.columns.find((item: IAVColumn) => {
         if (item.id === colId) {
@@ -336,18 +349,16 @@ export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLE
             if (!currentElement) {
                 currentElement = menuElement.querySelector(".b3-menu__item--current");
             }
-            addSelectColAndCell(protyle, data, options, currentElement, menuElement);
+            addColOptionOrCell(protyle, data, cellElements, currentElement, menuElement);
         } else if (event.key === "Backspace" && inputElement.value === "") {
-            removeSelectCell(protyle, data, options, inputElement.previousElementSibling as HTMLElement);
+            removeCellOption(protyle, data, cellElements, inputElement.previousElementSibling as HTMLElement);
         } else if (event.key === "Escape") {
             menuElement.parentElement.remove();
         }
     });
 };
 
-export const addSelectColAndCell = (protyle: IProtyle, data: IAV, options: {
-    cellElements: HTMLElement[]
-}, currentElement: HTMLElement, menuElement: HTMLElement) => {
+export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], currentElement: HTMLElement, menuElement: HTMLElement) => {
     let hasSelected = false;
     Array.from(menuElement.querySelectorAll(".b3-chips .b3-chip")).find((item: HTMLElement) => {
         if (item.dataset.content === currentElement.dataset.name) {
@@ -360,10 +371,10 @@ export const addSelectColAndCell = (protyle: IProtyle, data: IAV, options: {
         return;
     }
 
-    const colId = options.cellElements[0].dataset.colId;
+    const colId = cellElements[0].dataset.colId;
     let cellIndex = 0;
-    Array.from(options.cellElements[0].parentElement.querySelectorAll(".av__cell")).find((item: HTMLElement, index) => {
-        if (item.dataset.id === options.cellElements[0].dataset.id) {
+    Array.from(cellElements[0].parentElement.querySelectorAll(".av__cell")).find((item: HTMLElement, index) => {
+        if (item.dataset.id === cellElements[0].dataset.id) {
             cellIndex = index;
             return true;
         }
@@ -381,7 +392,7 @@ export const addSelectColAndCell = (protyle: IProtyle, data: IAV, options: {
 
     const cellDoOperations: IOperation[] = [];
     const cellUndoOperations: IOperation[] = [];
-    options.cellElements.forEach(item => {
+    cellElements.forEach(item => {
         let cellData: IAVCell;
         const rowID = item.parentElement.dataset.id;
         data.view.rows.find(row => {
@@ -460,14 +471,14 @@ export const addSelectColAndCell = (protyle: IProtyle, data: IAV, options: {
     if (colData.type === "select") {
         menuElement.parentElement.remove();
     } else {
-        menuElement.innerHTML = getSelectHTML(data.view, options);
-        bindSelectEvent(protyle, data, menuElement, options);
+        menuElement.innerHTML = getSelectHTML(data.view, cellElements);
+        bindSelectEvent(protyle, data, menuElement, cellElements);
         menuElement.querySelector("input").focus();
     }
 };
 
-export const getSelectHTML = (data: IAVTable, options: { cellElements: HTMLElement[] }) => {
-    const colId = options.cellElements[0].dataset["colId"];
+export const getSelectHTML = (data: IAVTable, cellElements: HTMLElement[]) => {
+    const colId = cellElements[0].dataset["colId"];
     const colData = data.columns.find(item => {
         if (item.id === colId) {
             return item;
@@ -476,7 +487,7 @@ export const getSelectHTML = (data: IAVTable, options: { cellElements: HTMLEleme
 
     const commonOptions: { content: string, color: string }[][] = [];
     const allUniqueOptions: { content: string, color: string }[] = [];
-    options.cellElements.forEach((cellElement) => {
+    cellElements.forEach((cellElement) => {
         data.rows.find(row => {
             if (cellElement.parentElement.dataset.id === row.id) {
                 const commonOption: { content: string, color: string }[] = [];
@@ -514,7 +525,7 @@ export const getSelectHTML = (data: IAVTable, options: { cellElements: HTMLEleme
             }
         });
         if (everyRowHas && selectedHTML.indexOf(`data-content="${unique.content}"`) === -1) {
-            selectedHTML += `<div class="b3-chip b3-chip--middle" data-content="${unique.content}" style="background-color:var(--b3-font-background${unique.color});color:var(--b3-font-color${unique.color})">${unique.content}<svg class="b3-chip__close" data-type="removeSelectCell"><use xlink:href="#iconCloseRound"></use></svg></div>`;
+            selectedHTML += `<div class="b3-chip b3-chip--middle" data-content="${unique.content}" style="background-color:var(--b3-font-background${unique.color});color:var(--b3-font-color${unique.color})">${unique.content}<svg class="b3-chip__close" data-type="removeCellOption"><use xlink:href="#iconCloseRound"></use></svg></div>`;
         }
     });