React Context Menu on react table using react-contexify

Question

I have a project that I am using react table with but also need a context menu to popup on right click of the row in the react table. The only thing I cant get is the selected row data. Because I have to wrap the entire react table in the context menu component, props returns just the main react table component and not active row. Here is my code.

<ContextMenuProvider id="menu_id">
                    <ReactTable
                      data={items}
                      columns={columns}
                      showPagination={false}
                      getTdProps={(state, rowInfo, column, instance) => {
                        return {
                          onClick: (e, handleOriginal) => {
                            const activeItem = rowInfo.original
                            this.getDetails(activeItem.contact_id)
                          }
                        }
                      }

                    }
                    />
                    </ContextMenuProvider>

                    <MyAwesomeMenu />

Then up top in the file I declare the menu and click function

const onClick = ({ event, ref, data, dataFromProvider }) => 
console.log(ref.props);
// create your menu first
const MyAwesomeMenu = () => (
    <ContextMenu id='menu_id'>
       <Submenu label="Color">
        <Item data="green" onClick={onClick}><div className="green"></div> </Item>
        <Item data="yellow" onClick={onClick}><div className="yellow"></div> 
            </Item>
        <Item data="red" onClick={onClick}><div className="red"></div></Item>
       </Submenu>
    </ContextMenu>
);

Just need the last piece to the puzzle. thanks if you can help

Answer 1

I am able to get the row data clicked as follows.

onContextMenu property of the getTdProps will triggere the right click, so that the state is set to true which says to show our Awesome menu to be shown and at the same time the data is sent through props.

<ContextMenuTrigger id="menu_id">
    <ReactTable
                  data={Data}
                  columns={Columns}
                  showPagination={false}
                  getTdProps={(state, rowInfo, column, instance) => {
                    return {
                      onClick: (e, handleOriginal) => {
                        const activeItem = rowInfo.original
                        console.log(activeItem)
                      },
                      onContextMenu:()=>{
                        console.log("contextMenu", rowInfo);
                        this.setState({showContextMenu:true ,rowClickedData: rowInfo.original});
                      }
                    }
                  }

                }
                />
        </ContextMenuTrigger>
        {
          this.state.showContextMenu ?
           <MyAwesomeMenu clickedData={this.state.rowClickedData} />
          :null
        }





const onClick = (props) => 
  console.log("-------------->",props );
// create your menu first
const MyAwesomeMenu = (props) => (
    <ContextMenu id='menu_id'>
        <MenuItem data={props.clickedData} onClick={(e,props) => onClick({e,props})}><div className="green">
        ContextMenu Item 1 - {props.clickedData.id}
        </div> 
        </MenuItem>

    </ContextMenu>
);

This is working for me.

Thanks.

Answer 2

You need to add onClick something like below. To call functions declared inside the component you need to use this.functionName

  onClick={e => this.onClick({e, param2, param3, param4})}

Also your code needs corrections. Your code should look like below and add onClick as suggested above

    const onClick = ({ event, ref, data, dataFromProvider }) => {
      console.log(ref.props);
      this.MyAwesomeMenu();
    }

  const MyAwesomeMenu = () => (
       <ContextMenu id='menu_id'>
           <Submenu label="Color">
               <Item data="green" onClick={onClick}><div className="green"></div> </Item>
               <Item data="yellow" onClick={onClick}><div className="yellow"></div> 
                </Item>
               <Item data="red" onClick={onClick}><div className="red"></div></Item>
         </Submenu>
       </ContextMenu>
     );