Buttonmenu and buttonmenuitem cannot be added to feature table

[GDipublisher]

I am very confused, because I followed official samples and codes, but none worked for me.
I am mostly a new developer that's learning both JS and Experience Builder.

I tried codes from both of these related questions:

How to display feature table 

How to customize the feature table 

I also researched many samples and tried the codes, like:

Widgets Tablelist 

Widgets FeatureTable Editing 

I cannot add a custom button anywhere in the feature table through ButtonMenu, ButtonMenuItem.
I am very confused because it is all official documentation, but it doesn't work for me in either 
JS files that I manually create or through custom widget in Experience Builder. Neither works for me.

featureTable.visibleElements = {
        header: true,
        menu: true,
        menuItems: {
          clearSelection: true,
          refreshData: true,
          toggleColumns: true,
          selectedRecordsShowAllToggle: true,
          zoomToSelection: true
        },
        selectionColumn: true,
        columnMenus: true
      }

featureTable.when().then(() => {
        const newMenuItem = {
            label: "Do something",
            iconClass: "Icon font name, if applicable",
            visible: true,
            clickFunction: (event) => {
                console.log("Clicked!");
            }
        };
        featureTable.menu.items.push(newMenuItem);
    });

   // Typical usage for ButtonMenuItem
      const buttonMenuItem1 = new ButtonMenuItem ({
        label: "custom menu item label",
        iconClass: "Icon font name, if applicable",
        clickFunction: function () {
          // Add custom function to perform on menu item button click
        }
      });
      
      const buttonMenuItem2 = new ButtonMenuItem ({
        label: "Second custom menu item label",
        iconClass: "esri-icon-minimize",
        clickFunction: function (event) {
          // Add second custom function to perform on menu item button click
        }
      });
      
      // Apply the button menu items above to the button menu
      const buttonMenu = new ButtonMenu ({
        iconClass: "esri-icon-minimize",
        items: [buttonMenuItem1, buttonMenuItem2]
      });

None of the above worked for me. I cannot determine any issues.
Is it possible all of this is because of specific Feature Layer limitations? I have no knowledge of how feature layers are made from administrators. Thank you any feedback is welcome.

[KenBuja · Accepted solution]

The menu property of the FeatureTable is read-only, so you can't set anything with it. Instead, you can use the menuConfig property to set which menu items appear, using your buttonMenu variable. Take a look at this CodePen, using a modified FeatureTable sample.

[GDipublisher]

Sorry for the delayed response.

So that's how the menuConfig is used. I researched it, but didn't find many examples of it being used, that's why I didn't consider it important. But thank you, it was the missing piece! Thank you, beer or coffee on me.

I got one little further up question - can the menuConfig be dynamically added and removed from the table? Or just toggled visibility on and off.

[KenBuja]

Yes you can. I updated the CodePen showing this. When it first opens, there is just one menu item. Clicking the button in the upper left adds another menu item.

[GDipublisher]

I checked it out, its perfect. 

Only thing I would like to ask again is hiding the menu after being shown. I tried to do "selection-change" event on the feature table, and it shows the menu on row select, now I just need it hidden when there are no rows selected.  I tried with the removedRows, but it doesn't fire when turning off selected feature.

the_table.on("selection-change", (event) => {
    let addedRows = event.added; 
    let removedRows = event.removed;

if(addedRows.length === 0) { the_table.menuConfig = null; }
      
if(addedRows && addedRows.length > 0){

            the_table.menuConfig = buttonMenu;     
  
  }
  });

[KenBuja]

Which version of the API are you using? That event was deprecated in 4.25

[GDipublisher]

In the JS API I'm mainly switching between 4.23 and 4.25 for styles and some functionality. 


In the Experience Builder, I'm not sure I'll get back to you and edit this post later.

I don't think highlightIds changes my situation, as I need to hide and show the menu, the event where is irrelevant. For now its table select on 4.25. But thank you all in all, I learned much and I'll figure it out.