Need to implement fluent UI Details list with context menu on right click over any item through SPFX

Question

I have created a spfx webpart.Using Fluent UI DetailsList with Grouped to display list items.I am following https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/grouped

Now I want to have a context menu with different options to action should displayed on right/left click over the item.

Please guide me on this.

Thanks in advance!

Answer 1

Refer to fluent ui- contextual menu to add a menu on item click. Add a function onRender in the column of the grouped list component to custom render cell and in the function define the element as a button and pass the contextual menu props to link the list and menu.

Details on how to custom render fluentui-custom render.

Answer 2

Here's a React Class component based code snippet. Function component code should be similar. Add a column collection and extend onRender method to render a defined commandBar object as documented. Assuming all event code is linked to the commandBar elements. This way it keeps the commandBar flexible to be used as a page component header or as a context menu / inline to each row of a grid / detailslist.

    const columnsOnPanel: IColumn[] = [
...        
        {
            key: 'columnMenu',
            name: '...',
            minWidth: 15,
            maxWidth: 20,
            isResizable: false,
            isCollapsible: false,
            onRender: (item: IDataColumnInfo) => {
                return <CommandBar
                    items={this._commandbarItems}
                    className={classNames.inlineContextMenu}
                />;
            },
            isPadded: true,
        },

...
    //Component Command Bar Ux
    private _commandbarItems: ICommandBarItemProps[] = [
        {
            key: 'cmdRunSource',
            text: 'Run from Source',
            iconProps: { iconName: 'Play' },
            onClick: () => this._onCommand1Execute(),
        },
        {
            key: 'cmdRunTarget',
            text: 'Run from Target',
            iconProps: { iconName: 'Play' },
            onClick: () => this._onCommand2Execute(),
        },
    ];

...
const classNames = mergeStyleSets({
    inlineContextMenu: {
        verticalAlign: 'middle',
        maxHeight: '16px',
        maxWidth: '16px',
    },