React Material UI - DataGrid onRowClick - reactjs

Question

I am completely new to React and Material UI. I had followed the step from YouTube to create DataGrid, but now I want to create one more function which when I click on a row of DataGrid, the interface will jump to the detail page of the row.
Thank you so much!!
`
import { Box } from "#mui/material";
import { DataGrid, GridToolbar } from "#mui/x-data-grid";
import { tokens } from "../../theme";
import { mockDatareworks } from "../../data/mockData";
import Header from "../../components/Header";
import { useTheme } from "#mui/material";
const Reworks = () => {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
const columns = [
{ field: "id", headerName: "ID", flex: 0.5 },
{ field: "return_date", headerName: "Date" },
{
field: "customer_name",
headerName: "Customer",
flex: 1,
cellClassName: "name-column--cell",
},
{
field: "product_name",
headerName: 'Product',
flex: 1,
},
{
field: "rework_quantity",
headerName: "Quantity",
type: "number",
headerAlign: "left",
align: "left",
},
];
return (
<Box m="20px">
<Header
title="Rework"
subtitle="List of reworks for Future Reference"
/>
<Box
m="40px 0 0 0"
height="75vh"
sx={{
"& .MuiDataGrid-root": {
border: "none",
},
"& .MuiDataGrid-cell": {
borderBottom: "none",
},
"& .name-column--cell": {
color: colors.greenAccent[300],
},
"& .MuiDataGrid-columnHeaders": {
backgroundColor: colors.blueAccent[700],
borderBottom: "none",
},
"& .MuiDataGrid-virtualScroller": {
backgroundColor: colors.primary[400],
},
"& .MuiDataGrid-footerContainer": {
borderTop: "none",
backgroundColor: colors.blueAccent[700],
},
"& .MuiCheckbox-root": {
color: `${colors.greenAccent[200]} !important`,
},
"& .MuiDataGrid-toolbarContainer .MuiButton-text": {
color: `${colors.grey[100]} !important`,
},
}}
>
<DataGrid
rows={mockDatareworks}
columns={columns}
components={{ Toolbar: GridToolbar }}
/>
</Box>
</Box>
);
};
export default Reworks;
`
This is my current code for the DataGrid page, how can I add the function of clicking and jump to the detail page of the row?

Answer 1

Please use onRowClick prop
https://mui.com/x/react-data-grid/events/
<DataGrid
rows={mockDatareworks}
columns={columns}
components={{ Toolbar: GridToolbar }}
onRowClick={handleRowClick} // here
/>
Here are handleRowClick paras
const handleRowClick = (
params, // GridRowParams
event, // MuiEvent<React.MouseEvent<HTMLElement>>
details, // GridCallbackDetails
) => {
setMessage(params);
};