Material-table: How to pass row data to icon in actions?

[sornman]

Instead of using onClick for an icon, I would like to pass the row data to the icon function of actions to use Link (react-router-dom). The main reason for this is to allow normal click functions (open in new window/tab) to the icon. Something like this, minus the onClick function.

actions={[{
  icon: row => (
    <Link to={window.location.pathname + row.id}><ViewIcon /></Link>
  ),
  tooltip: 'View',
  onClick: (e, row) => {
    window.location = window.location.pathname + row.id;
  }
}]}

Is there any way to accomplish this?

[oze4]

You have to pass rowData to each action - not just a property of an action. This is how I use it:

actions={[
    // First action
    rowData => ({
        icon: () => <LocationCityOutlined />,
        tooltip: <Typography>ABC</Typography>,
        onClick: (event, rowData) => handleFirstAction(event, rowData)
    }), 
    // Second action
    rowData => ({
        icon: () => <Opacity />,
        tooltip: (<Typography>DEF</Typography>),
        onClick: (event, rowData) => handleSecondAction(event, rowData)
    })
]}

[sornman]

Thanks! I thought I had tried that multiple times, but I guess I had something else messed up at the time. Anyways, here is what works.

actions={[
  rowData => ({
    icon: () => <Link to={window.location.pathname + rowData.id}><ViewIcon /></Link>
    tooltip: 'View',
  }),
]}

[moramike]

You have to pass rowData to each action - not just a property of an action. This is how I use it:

actions={[
    // First action
    rowData => ({
        icon: () => <LocationCityOutlined />,
        tooltip: <Typography>ABC</Typography>,
        onClick: (event, rowData) => handleFirstAction(event, rowData)
    }), 
    // Second action
    rowData => ({
        icon: () => <Opacity />,
        tooltip: (<Typography>DEF</Typography>),
        onClick: (event, rowData) => handleSecondAction(event, rowData)
    })
]}

Thank you, thank you! I tried so many times using different approaches, even overriding the Action component.

[sidagwl5]

Can someone tell me how I can access corresponding row data when I Click on edit icon?

[muhammadhamza4338]

You have to pass rowData to each action - not just a property of an action. This is how I use it:

actions={[
    // First action
    rowData => ({
        icon: () => <LocationCityOutlined />,
        tooltip: <Typography>ABC</Typography>,
        onClick: (event, rowData) => handleFirstAction(event, rowData)
    }), 
    // Second action
    rowData => ({
        icon: () => <Opacity />,
        tooltip: (<Typography>DEF</Typography>),
        onClick: (event, rowData) => handleSecondAction(event, rowData)
    })
]}

what will be onClick method if i click on edit icon and it gives the rowData in editable form