nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Add custom menu item to FeatureTable menu

SeanRedar

I can create the menu item but am stumped how I add the menu item to the FeatureTable's menu. Any suggestions would be great.

Find more posts tagged with

Accepted answers

AlejandroMari1

This has worked for me on JS API 4.23:

const table = new FeatureTable({
    layer: myLayer,
    fieldConfigs: myFields,
    attachmentsEnabled: false,
    visibleElements: {
        selectionColumn: true,
        header: true,
        menu: true
    }
});

table.when().then(() => {
    const newMenuItem = {
        label: "Do something",
        clickFunction: (event) => {
            console.log("Clicked!");
        }
    };
    table.menu.items.push(newMenuItem);
});

All comments

ChristineWiltawsky1

The menu property is marked as readonly and should not be edited. You can use the property menuConfig instead. Here is an example which shows standard entries and a custom menu item in the Feature Tables's menu

featureTable.when().then(() => {
            const buttonMenuItem1 = new ButtonMenuItem ({
                    label: "custom menu item label",
                    clickFunction: function () {
                        console.log("click MenuItem1");
                    }
                });
                const buttonMenu = new ButtonMenu ({
                    iconClass: "esri-icon-handle-horizontal",
                    items: []
                });
                featureTable.menu.items.forEach(element => {
                    buttonMenu.items.push(element);
                });
                buttonMenu.items.push(buttonMenuItem1);
                featureTable.menuConfig = buttonMenu;
        });

KevinUseche

add visible property on object newMenuItem

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

SeanRedar

Update - it worked inconsistently but doesn't seem to be working at all now.

SeanRedar

Yes, thank you. I think I was passing the wrong object to the menu.

AlejandroMari1

This has worked for me on JS API 4.23:

const table = new FeatureTable({
    layer: myLayer,
    fieldConfigs: myFields,
    attachmentsEnabled: false,
    visibleElements: {
        selectionColumn: true,
        header: true,
        menu: true
    }
});

table.when().then(() => {
    const newMenuItem = {
        label: "Do something",
        clickFunction: (event) => {
            console.log("Clicked!");
        }
    };
    table.menu.items.push(newMenuItem);
});

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.