{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/column-menu/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The column menu appears when you click on the menu icon in the column header. For AG Grid Community, only the filter is shown. For AG Grid Enterprise, a tabbed component containing a 1) Menu, 2) Filter and 3) Column Management panel is shown."}]},{"type":"element","tagName":"h2","properties":{"id":"showing-the-column-menu","style":"position:relative;"},"children":[{"type":"text","value":"Showing the Column Menu"},{"type":"element","tagName":"a","properties":{"href":"#showing-the-column-menu","ariaLabel":"showing the column menu permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The menu will be displayed by default and will be made up of three panels. If you want to change the order or what panels are shown, or hide them, you can specify the property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"menuTabs"}]},{"type":"text","value":" in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"menuTabs"}]},{"type":"text","value":" is an array of strings. The valid values are: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'filterMenuTab'"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'generalMenuTab'"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'columnsMenuTab'"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"generalMenuTab"}]},{"type":"text","value":": Include to show the main panel."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filterMenuTab"}]},{"type":"text","value":": Include to show the filter panel."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnsMenuTab"}]},{"type":"text","value":": Include to show the column selection panel."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To not show the menu at all, set this property to an empty array"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[]"}]},{"type":"text","value":". In addition, you can set the attribute "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressMenu=true"}]},{"type":"text","value":" to the column definition to not show the menu for a particular column."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The order of the menu tabs shown in the menu will match the order you specify in this array."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you don't specify a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"menuTabs"}]},{"type":"text","value":" for a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef"}]},{"type":"text","value":" the default is: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"['generalMenuTab', 'filterMenuTab', 'columnsMenuTab']"}]}]},{"type":"element","tagName":"h2","properties":{"id":"customising-the-general-menu-tab","style":"position:relative;"},"children":[{"type":"text","value":"Customising the General Menu Tab"},{"type":"element","tagName":"a","properties":{"href":"#customising-the-general-menu-tab","ariaLabel":"customising the general menu tab permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The main menu panel, by default, will show a set of items. You can adjust which of these items get displayed, or you can start from scratch and provide your own items. To customise the menu, provide the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getMainMenuItems()"}]},{"type":"text","value":" callback."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The result of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getMainMenuItems()"}]},{"type":"text","value":" should be a list with each item either a) a string or b) a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"MenuItemDef"}]},{"type":"text","value":" description. Use 'string' to pick from built in menu items (listed below) and use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"MenuItemDef"}]},{"type":"text","value":" descriptions for your own menu items."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"accessories","names":"[\"getMainMenuItems\"]"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"built-in-menu-items","style":"position:relative;"},"children":[{"type":"text","value":"Built In Menu Items"},{"type":"element","tagName":"a","properties":{"href":"#built-in-menu-items","ariaLabel":"built in menu items permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following is a list of all the default built in menu items with the rules about when they are shown."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pinSubMenu"}]},{"type":"text","value":": Sub-menu for pinning. Always shown."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"valueAggSubMenu"}]},{"type":"text","value":": Sub-menu for value aggregation. Always shown."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoSizeThis"}]},{"type":"text","value":": Auto-size the current column. Always shown."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoSizeAll"}]},{"type":"text","value":": Auto-size all columns. Always shown."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup"}]},{"type":"text","value":": Group by this column. Only shown if column is not grouped. Note this will appear once there is row grouping."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowUnGroup"}]},{"type":"text","value":": Un-group by this column. Only shown if column is grouped. Note this will appear once there is row grouping."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"resetColumns"}]},{"type":"text","value":": Reset column details. Always shown."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"expandAll"}]},{"type":"text","value":": Expand all groups. Only shown if grouping by at least one column."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"contractAll"}]},{"type":"text","value":": Collapse all groups. Only shown if grouping by at least one column."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Reading the list above it can be understood that the list "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultItems"}]},{"type":"text","value":" changes on different calls to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getMainMenuItems()"}]},{"type":"text","value":" callback, depending on, for example, what columns are current used for grouping."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you do not provide a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getMainMenuItems()"}]},{"type":"text","value":" callback, then the rules alone decides what gets shown. If you do provide a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getMainMenuItems()"}]},{"type":"text","value":", then the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultItems"}]},{"type":"text","value":" will be filled using the rules above and you return from the callback whatever you want, using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultItems"}]},{"type":"text","value":" only if you want to."}]},{"type":"element","tagName":"h3","properties":{"id":"menu-item-separators","style":"position:relative;"},"children":[{"type":"text","value":"Menu Item Separators"},{"type":"element","tagName":"a","properties":{"href":"#menu-item-separators","ariaLabel":"menu item separators permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can add menu item separators as follows:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"menuItems"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"push"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'separator'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"repositioning-the-popup","style":"position:relative;"},"children":[{"type":"text","value":"Repositioning the Popup"},{"type":"element","tagName":"a","properties":{"href":"#repositioning-the-popup","ariaLabel":"repositioning the popup permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If not happy with the position of the popup, you can override its position using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"postProcessPopup(params)"}]},{"type":"text","value":" callback. This gives you the popup HTML element so you can change its position should you wish to."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"accessories","names":"[\"postProcessPopup\"]"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"hiding-the-column-menu","style":"position:relative;"},"children":[{"type":"text","value":"Hiding the Column Menu"},{"type":"element","tagName":"a","properties":{"href":"#hiding-the-column-menu","ariaLabel":"hiding the column menu permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Hide the column menu with the grid API "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"hidePopupMenu()"}]},{"type":"text","value":", which will hide either the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.3/context-menu/"},"children":[{"type":"text","value":"Context Menu"}]},{"type":"text","value":" or the column menu, whichever is showing."}]},{"type":"element","tagName":"h2","properties":{"id":"example-column-menu","style":"position:relative;"},"children":[{"type":"text","value":"Example Column Menu"},{"type":"element","tagName":"a","properties":{"href":"#example-column-menu","ariaLabel":"example column menu permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getMainMenuItems()"}]},{"type":"text","value":" callback in action. To demonstrate different scenarios, the callback returns something different based on the selected column as follows:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Athlete column appends custom items to the list of built in items."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Athlete column contains a sub-menu."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Age column provides custom items and adds one built in default item."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Country column trims down the default items by removing values."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Date column changes the order of the tabs to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"['filterMenuTab', 'generalMenuTab', 'columnsMenuTab']"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Sport column changes the order of the tabs to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"['filterMenuTab', 'columnsMenuTab']"}]},{"type":"text","value":". Note that the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'generalMenuTab'"}]},{"type":"text","value":" is suppressed."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Gold column changes the tabs to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"['generalMenuTab']"}]},{"type":"text","value":". Note that the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'filterMenuTab'"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'columnsMenuTab'"}]},{"type":"text","value":" are suppressed."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Silver column hides the menu by suppressing all the menuTabs that can be shown: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"[]"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"All other columns return the default list."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"postProcessPopup"}]},{"type":"text","value":" is used on the Gold column to reposition the menu 25px lower."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Column Menu","name":"column-menu","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"customising-the-columns-menu-tab","style":"position:relative;"},"children":[{"type":"text","value":"Customising the Columns Menu Tab"},{"type":"element","tagName":"a","properties":{"href":"#customising-the-columns-menu-tab","ariaLabel":"customising the columns menu tab permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The behaviour and appearance of the Columns Menu tab can be customised by supplying "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ColumnsMenuParams"}]},{"type":"text","value":" to the column definition: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.columnsMenuParams"}]},{"type":"text","value":". Note that all of the properties are initially set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"ColumnsMenuParams"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates all of the above columns menu tab properties "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"except columnLayout"}]},{"type":"text","value":" which will be covered later on. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"All columns menu tabs have been configured to ignore column moves in the grid by setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressSyncLayoutWithGrid=true"}]},{"type":"text","value":" on the default column definition."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Name"}]},{"type":"text","value":" column doesn't show the top filter section as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressColumnFilter"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressColumnSelectAll"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressColumnExpandAll"}]},{"type":"text","value":" are all set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Age"}]},{"type":"text","value":" column shows the group columns in a collapsed state as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"contractColumnSelection"}]},{"type":"text","value":" is set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Customising Columns Menu Tab","name":"customising-columns-menu-tab","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"columnpanel\" ] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"custom-column-layout","style":"position:relative;"},"children":[{"type":"text","value":"Custom Column Layout"},{"type":"element","tagName":"a","properties":{"href":"#custom-column-layout","ariaLabel":"custom column layout permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default the order of columns in the Columns Menu Tab is derived from the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnDefs"}]},{"type":"text","value":" supplied in the grid options, and is kept in sync with the grid when columns are moved."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"However, a custom column layout can be provided using the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"columnLayout"}]},{"type":"text","value":" property in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.columnsMenuParams"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // original column definitions supplied to the grid\n    columnDefs: [\n        {\n            columnsMenuParams: {\n                columnLayout: [{\n                    headerName: 'Group 1', // group doesn't appear in grid\n                    children: [\n                        { field: 'c' }, // custom column order with column \"b\" omitted\n                        { field: 'a' }\n                    ]\n                }]\n            }\n        },\n        { field: 'b' },\n        { field: 'c' }\n    ]\n}\n"}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When providing a custom columns layout by setting the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"columnLayout"}]},{"type":"text","value":" property, the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressSyncLayoutWithGrid"}]},{"type":"text","value":" will automatically set to true. This means that reordering the columns in the grid will not reorder the columns in the list shown in columns menu tab."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates providing custom column layouts in the column menu tab via the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"columnLayout"}]},{"type":"text","value":" property. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Open the column menu for the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"age"}]},{"type":"text","value":" column and note it shows the actual column order shown in the grid."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Open the column menu for the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" column and note it shows the custom column order as specified in its "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnLayout"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Reorder columns in the grid - drag the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"age"}]},{"type":"text","value":" column and drop it on the left of the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" column."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Open the column menu for the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"age"}]},{"type":"text","value":" column and note that the column layout now shows the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"age"}]},{"type":"text","value":" column before the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" column."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Open the column menu for the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" column and note that the column layout still shows the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" column followed by the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"age"}]},{"type":"text","value":" column  (custom column layout is not synchronized with the grid column order)."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Customising Columns Layout","name":"customising-columns-layout","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"menu\", \"columnpanel\" ] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"popup-parent","style":"position:relative;"},"children":[{"type":"text","value":"Popup Parent"},{"type":"element","tagName":"a","properties":{"href":"#popup-parent","ariaLabel":"popup parent permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Under most scenarios, the menu will fit inside the grid. However if the grid is small and / or the menu is very large, then the menu will not fit inside the grid and it will be clipped. This will lead to a bad user experience."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To fix this, you should set the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.3/context-menu/#popup-parent"},"children":[{"type":"text","value":"Popup Parent"}]},{"type":"text","value":" property."}]}]},"frontmatter":{"title":"Column Menu","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"showing-the-column-menu","depth":2,"value":"Showing the Column Menu"},{"id":"customising-the-general-menu-tab","depth":2,"value":"Customising the General Menu Tab"},{"id":"built-in-menu-items","depth":3,"value":"Built In Menu Items"},{"id":"menu-item-separators","depth":3,"value":"Menu Item Separators"},{"id":"repositioning-the-popup","depth":2,"value":"Repositioning the Popup"},{"id":"hiding-the-column-menu","depth":2,"value":"Hiding the Column Menu"},{"id":"example-column-menu","depth":2,"value":"Example Column Menu"},{"id":"customising-the-columns-menu-tab","depth":2,"value":"Customising the Columns Menu Tab"},{"id":"custom-column-layout","depth":2,"value":"Custom Column Layout"},{"id":"popup-parent","depth":2,"value":"Popup Parent"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"angular","srcPath":"/column-menu","pageName":"column-menu"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}