CODEWITHSUNDEEP
javascriptreactjsreact-state
alex
alex

Reputation: 35

how to add onclick event in renderCell of dataGrid mui components which is class based component

below is my userlist.jsx component which show the user data on the table iam using mui component datagrid and i have added delete button in the table using renderCell but it's doesnot work.

    { field: 'id', headerName: 'ID', width: 70 },
    { field: 'user', headerName: 'User', width: 170, renderCell: (params)=>{
        return(
            <div className='userlistuser'>
            <img className='userlistimage' src={params.row.avatar} alt="profile"/>
            {params.row.username}
            </div>
        )
    } },
    { field: 'email', headerName: 'Email', width: 190},
    {
      field: 'post',
      headerName: 'Post',
      width: 140,
    },
    {
        field:'Action',
        headerName:'Action',
        widht:150,
        renderCell:(params)=>{
            return(
                <>
                <Link to={"/user/"+ params.row.id}>
                <button className='userlistedit'>Edit</button>
                </Link>
>>after clicking this button i want to delete this particular user from the table.
<DeleteOutline className="userlistdelete" onClick={()=>this.handleDelete(params.row.id)}/>
                </>
            )
    
        }

    }

  ];

export default class UserList extends React.Component {
state={userdata:Userrows}

handleDelete = (id) =>{
    console.log(id);
}

 render(){
  return (
<div className='userlist'>
<DataGrid
        rows={this.state.userdata}
        columns={columns}
        pageSize={7}
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
      />
    </div>
  )
}
}

*i have a delete button which should delete the data of the table but as i click the delete button is throws error at console 'Cannot read properties of undefined (reading 'handleDelete') *

Upvotes: 0

Views: 5182

Answers (1)

Sandeep Jain
Sandeep Jain

Reputation: 1269

Below is the code to have render cell to provide onClick event on MUI Data Grid :

  { field:"fundListMapped",headerName: "Funds Mapped" ,type: 'string', width:300 ,
  renderCell: (cellValues) => {
   
      return (
        <>
        <div>{displayList[0]},{displayList[1]},{displayList[2]}      
        <a href="#" onClick={(event) => {
  this.setActiveTab(event, cellValues);
}}>
        ...View Full List
         </a>
                       <Button
    variant="contained"
    color="primary"
    onClick={(event) => {
      this.handleCellClick(event, cellValues);
    }}
  >
    Print
  </Button>
        </div>
        </>
        );
    }
    
}

Upvotes: 0

Related Questions