MUI DataGrid how to pass data from Row to another page

Question

I have a table showing a list of users. When a row is clicked, I would like the user's detail to show up on a new page.

So far, I have it so when the row is clicked, it navigates to the Individual User page. I'm not sure how to get the user's data onto the Individual user's page though.

function Users() {
  const history = useNavigate();
  const [userList, setUserList] = useState([]);

  const handleOnCellClick = (params) => {
    setUserList(params);
    history('/pages/IndividualUsers');
  };

  useEffect(() => {
    Axios.get('http://localhost:4000/api/users').then((response) => {
      setUserList(response.data);
    });
  });

  const columns = [
    {
      field: 'first_name',
      headerName: 'first name',
      width: 100,
    },
    {
      field: 'last_name',
      headerName: 'last name',
    },
    {
      field: 'email',
      headerName: 'email',
      width: 250,
    },
    {
      field: 'creation_date',
      headerName: 'Creation Date',
      width: 250,
    },
  ];

  return (
   
        <DataGrid
          rows={userList}
          columns={columns}
          getRowId={(row) => row.email}
          pageSize={10}
          onCellClick={handleOnCellClick}
        />
   
  
  );
}

export default Users;

score 0 · Accepted Answer · answered Sep 17 '22 at 11:28

You can use createSearchParams and navigate like this:

import { useNavigate, createSearchParams } from "react-router-dom";

const handleOnCellClick = (params) => {
    const currentRow = params.row;
    const options = {
      pathname: "/pages/IndividualUsers",
      search: `?${createSearchParams(currentRow)}`
    };
    navigate(options, { replace: true });
};

and in your individual user route, you can get the search params from location like this:

import { useLocation } from "react-router-dom";

const location = useLocation();
let params = new URLSearchParams(location.search);

You can take a look at this sandbox for a live working example.

MUI DataGrid how to pass data from Row to another page

1 Answers1