React Material UI - DataGrid onRowClick

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);
};