Add Custom Item to FeatureTable Menu and Keep Original Functionality

[ShannonDeArmond]

I have a web app built with the arcgis js 4 api that uses the featuretable widget. I would like to enable some of the stock menu items on the feature table such as zoom to selected features. This works fine until I try to add additional custom items to the menu. Then the options related to selected features in the table (zoom to selection, show selection, clear selection, etc.) are no longer available. Does anyone know how to add a custom menu item and keep this functionality?

            // Create the feature table
            const featureTable = new FeatureTable({
                view: view, 
                layer: featureLayer,
                visibleElements: {
                    menu: true,
                    // Autocast to VisibleElements
                    menuItems: {
                        clearSelection: true,
                        refreshData: true,
                        toggleColumns: true,
                        selectedRecordsShowAllToggle: true,
                        selectedRecordsShowSelectedToggle: true,
                        zoomToSelection: true
                    }
                },
                container: "tableDiv"
            });

            //Adds custom menu options to featuretable
            featureTable.when().then(() => {
                const buttonMenuItem1 = new ButtonMenuItem ({
                    label: "Download Table",
                    clickFunction: function (event) {
                        setupCSV();
                    }
                });
                const buttonMenu = new ButtonMenu ({
                    iconClass: "esri-icon-handle-horizontal",
                    items: []
                });
                featureTable.menu.items.forEach(element => {
                    console.log(element.label);
                    buttonMenu.items.push(element);
                });
                buttonMenu.items.push(buttonMenuItem1);
                featureTable.menuConfig = buttonMenu;
            });

[Justin_Greco]

You can add the button to the menuConfig.items property when initializing the FeatureTable widget.

UPDATE: I read your problem wrong, this does the same thing as your code, but is a simpler way.

I think the issue is that you must have a row selected in the first screenshot and not selected in the second screenshot.  The menu items that apply to selections only appear if you have a row selected.

// Create the feature table
const featureTable = new FeatureTable({
  view: view,
  layer: featureLayer,
  visibleElements: {
    menu: true,
    // Autocast to VisibleElements
    menuItems: {
      clearSelection: true,
      refreshData: true,
      toggleColumns: true,
      selectedRecordsShowAllToggle: true,
      selectedRecordsShowSelectedToggle: true,
      zoomToSelection: true
    }
  },
  container: "tableDiv",
  menuConfig: {
    items: [
      new ButtonMenuItem({
        label: "Download Table",
        clickFunction: function (event) {
          setupCSV();
        }
      })
    ]
  }
});

[ShannonDeArmond]

Unfortunately not, Justin_Greco, but thanks for trying. There are items selected in both screen shots. The addition of the new menu item seems to remove the zoom-to-selected functionality.

[Justin_Greco · Accepted solution]

I was able to reproduce using your code: https://codepen.io/justingreco/pen/eYXvMyX

But it works if you add the button when you initialize the FeatureTable widget:

https://codepen.io/justingreco/pen/yLwMKjG

[cadgism]

Works perfect. how can I show my custom menu item  on the top of the list , please

[ShannonDeArmond]

Hi @cadgism . Hmm... I'm not sure how to do that. The way this code is written it's appending the new menu item to an existing list so it will default to the last position. Because this topic is marked complete, though, I'm not sure many other people will see your question. Perhaps try posting as a new topic to get some attention? Good luck!

[JeffreyThompson2]

Try this.

// Create the feature table
const featureTable = new FeatureTable({
  view: view,
  layer: featureLayer,
  visibleElements: {
    menu: true,
    // Autocast to VisibleElements
    menuItems: {
      clearSelection: true,
      refreshData: true,
      toggleColumns: true,
      selectedRecordsShowAllToggle: true,
      selectedRecordsShowSelectedToggle: true,
      zoomToSelection: true
    }
  },
  container: "tableDiv",
});

const newItem = new ButtonMenuItem({
        label: "Download Table",
        clickFunction: function (event) {
          setupCSV();
        }
      });
featureTable.menuItems.unshift(newItem)

[JeffreyThompson2]

@ShannonDeArmond Did you try @Justin_Greco 's code? I think it should work. There is a fundamental difference between your original code and Justin's. He is creating the table and adding the new item in a single step. Your code creates the table first and then replaces the menu with a new menu that only contains the download button.

[Justin_Greco]

I know why the selection options are not appearing in the menu in the original code.  Since there is no feature selected, those options are not in the menu when the widgets loads, so the featureTable.menu.items only contains the Refresh Data and Show/Hide Columns options.  As a test, I set the highlightIds value on the FeatureTable, so there is a selected record when the table loads.  Doing that made the selection options appear in the menu.  So its best to add your custom button item when the widget is initialized, since the SDK handles the display of the built in items.

[ShannonDeArmond]

That worked and makes much more sense. Thanks very much @Justin_Greco and @JeffreyThompson2 . I appreciate the help.