Ag-Grid is failing to display MenuTabs

I need help getting the columns menu tab to appear in Ag-Grid. It should be a simple task. I want both the general and columns tabs, similar to the demo shown here

Currently, when I specify both tabs, only the general tab is displayed. If I specify just the columns tab, I see a strange blank bar.

Here is how it looks with both general and columns tabs set: https://i.sstatic.net/an3fV.jpg

Here's the code (using CoffeeScript within gridOptions):

defaultColDef:
  sortable: true
  resizable: true
  menuTabs: ['generalMenuTab', 'columnsMenuTab']

No errors are showing in the console. The project is built using Vue.js.

javascriptvue.jsag-grid

Answer №1

If you want to obtain the desired outcome, consider utilizing the getMainMenuItems callback instead of the menuTabs option.

var gridOptions = {
    sortable: true
    resizable: true
    getMainMenuItems: () => {
     return ['generalMenuTab', 'columnsMenuTab']
    }

Answer №2

While exploring the material theme, I encountered limited support for MenuTabs. However, upon transitioning to Balham theme, I was delighted to find the desired menu tabs available.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Zoomsounds: Injecting fresh content into div using data-source attribute

Currently, I am utilizing a javascript audio player called ZoomSounds. It generates circular play button divs and injects content into them using the following code: <div id="ap3" class="audioplayer-tobe skin-minimal" style="po ...

javascriptjqueryhtml

Identifying a user's unique identity through a POST request using Node.js

Currently, I am developing a browser game that integrates voice communication. To capture audio within the browser, I have chosen to use wami-recorder. This tool relies on Flash technology to make a POST request to the server containing the recorded audio. ...

javascriptnode.jssocketspostexpress

Checking for the existence of a Vue.js component

In the ready: method of the root instance, I have certain tasks to perform but only if some components are not present (not declared in the HTML). Is there a way to verify the existence of a component? ...

javascriptvue.js

Unearthing the worth of the closest button that was clicked

I am currently working on a profile management feature where I need to add students to the teacher's database. To achieve this, I am using jQuery and AJAX. However, I am encountering an issue where clicking the "add" button for each student listed on ...

javascriptjqueryhtmlajax

What steps do I need to take to extract the date and month from a single datepicker using the code below?

<div class="col-md-3 pull-left" style="padding:9px"> <input type="text" id="datepicker" class="form-control"> </div> The HTML and C ...

javascriptc#htmlcssasp.net-core

Trigger a JavaScript function on a body click, specifically targeting certain elements to be excluded

I have a dropdown menu within a div element. I've created a javascript function called HideDropdown() that hides the menu when any main link on the page is clicked, except for links within the dropdown menu itself: <script> function HideDropdow ...

javascriptjquery

if there is an error in a JavaScript statement

<!DOCTYPE html> <html> <head> </head> <body> <hr> <div> <div id="myPosition"> </div> </div> <hr> <!--Storing the gun array --> <div id ...

javascripthtml

What is the best way to retrieve two elements from the same index level that are located in separate parent DIVs?

Take a look at this HTML setup: <div id="container"> <div class="left-column"> <div class="row">Person 1:</div> <div class="row">Person 2:</div> <div class="row">Person 3:</div> </div> ...

javascriptjquery

Bring JavaScript Function into Vue's index.html File

Recently in my code files, I noticed the following: function example() { console.log("testing"); } In another file, I have something like this: <head> <script src="../src/example.js" type="text/babel"></sc ...

javascripthtmlvue.js

Steps for dynamically executing an Angular ng-include directive in real-time

Is there a way to dynamically insert an ng-include element into an HTML page and have it function properly? I am working on a Drag N Drop application where users can drag an element onto the page, and upon dropping it in the designated zone, the original ...

javascriptangularjsangularjs-ng-include

Binding textarea data in Angular is a powerful feature that allows

I am looking to display the content from a textarea on the page in real time, but I am struggling to get the line breaks to show up. Here is my current code snippet: app.component.html <div class="ui center aligned grid">{{Form.value.address}}< ...

javascripthtmlangularangular2-databinding

Utilizing a variable in a for loop with Django

I am a beginner in the world of Python and Django framework and I am encountering a small hurdle when trying to assign a variable to my for loop. Within my html file, there are buttons and a list (generated through a loop). For example: Buttons <li&g ...

javascriptpythonhtmldjango

Top method for individually choosing multiple selections from a foreach loop output

Need help with a loop: foreach ($userItems_get as $item => $value) { if ($value['prefab'] == 'wearable') { echo $value['name'] . "</br>"; echo "<img src=\"{$value['image_invent ...

javascriptphphtmlselectforeach

Having trouble with Vue Router at the root path ("/") while utilizing Quasar Server-Side Rendering (SSR)?

THE ISSUE AT HAND I have a Quasar CLI (Webpack) setup for my app, and everything runs smoothly in SPA mode. However, when I switch to SSR, an unexpected issue arises. The Vue Router redirect from path "/"" to "/index" does not function as expected. Instea ...

vue.jsexpressserver-side-renderingwebpack-dev-serverquasar

Utilizing Vue Cli 3 to Implement Service Worker Registration with Firebase

After using Vue-cli 3 to create a Vue app, I attempted to integrate FCM into it but have been struggling for two days with no success. Below is the code snippet I've been working with: importScripts('https://www.gstatic.com/firebasejs/4.8.1/fir ...

vue.jsvuejs2service-workervue-cliworkbox

The function of window.location is a mixed bag of success and failure

I am encountering an issue with a JavaScript function that is supposed to navigate to the next page when clicking a button. The function works correctly for step 1, but it fails for step 2. Upon executing the function using nextstep = 'form', _b ...

javascriptphphtmldebuggingnavigation

"Troubleshooting the ineffectiveness of JavaScript's

(After reviewing all questions and answers related to this issue, I have not found a solution that works for me.) Here is the code snippet in question: var timeoutHandle; function showLoader(show) { if (show) { $('.loader').html(&a ...

javascriptjqueryajax

Maintaining my navigation menu as you scroll through the page

I've been working on creating a website for my business but I'm facing a challenge. My goal is to have a fixed navigation bar that stays in place as people scroll down the page, similar to what you can see on this website: (where the navigat ...

javascriptjquerycss

Utilizing Node Mailer and Sendgrid to send emails in an Angular MEAN stack project with the angular-fullstack framework generated by Yeoman

Trying to figure out the best location for the code responsible for sending an email through a contact form in my Angular App using angular-fullstack MEAN stack from Yeoman. I managed to implement the email sending logic in the app.js file on the server s ...

javascriptnode.jsangularjsemailexpress

Implementing a Tab on Firefox Extension Upon Window Load

I have a requirement to add a tab whenever a new Firefox window is loaded for my bootstrap extension. Below is the code snippet I am using: var WindowListener = { setupBrowserUI: function(window) { window.gBrowser.selectedTab=window.gBrowser.a ...

javascriptfirefoxfirefox-addon