Material React Table - OnClick not working

Question

I am using Material React Table, below is the code -

muiTableBodyCellProps: ({cell}) => ({
      onClick: (event) => {
        console.log(event);
        return handleCellClicked(event);
      },
    })

I am getting the log message, however not able to return anything. I want to show a window basically when the cell is clicked.

Cell Click not working, attached code sandbox link - https://codesandbox.io/s/prod-wind-c9r9zn?file=/demo.js.

Answer 1

import React, { useMemo, useState, Fragment } from "react";
import { MaterialReactTable } from "material-react-table";
import { data } from "./makeData";
import Button from "@mui/material/Button";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Modal from "@mui/material/Modal";
const style = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: 400,
  bgcolor: "background.paper",
  border: "2px solid #000",
  boxShadow: 24,
  p: 4
};
export const Example = () => {
  const [showComments, setShowComments] = useState(false);
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const columns = useMemo(
    //column definitions...
    () => [
      {
        accessorKey: "firstName",
        header: "First Name"
      },
      {
        accessorKey: "lastName",
        header: "Last Name",
        muiTableBodyCellProps: ({ cell }) => ({
          onClick: (event) => {
            handleOpen();
            console.log(event);
            setShowComments(true);
            console.log(showComments);
            // return <Button> "ABC" </Button>;
        
          }
        }),
        Cell: ({ renderedCellValue, cell }) => {
          console.log(renderedCellValue);
          console.log(cell);
          return showComments ? (
            <Box
              sx={{
                color: "#00ADEF",
                textDecoration: "none",
                "&:hover": { textDecoration: "underline" },
                textAlign: "center"
              }}
            >
              {"Comments..."}
            </Box>
          ) : (
            <Button> something </Button>
          );
        }
      },
      {
        accessorKey: "address",
        header: "Address"
      },
      {
        accessorKey: "city",
        header: "City"
      },
      {
        accessorKey: "state",
        header: "State"
      }
    ],
    []
    //end
  );
  

  const renderModal = () => {
    return (
      open ?  <Modal
      open={open}
      onClose={handleClose}
      aria-labelledby="modal-modal-title"
      aria-describedby="modal-modal-description"
    >
      <Box sx={style}>
        <Typography id="modal-modal-title" variant="h6" component="h2">
          Text in a modal
        </Typography>
        <Typography id="modal-modal-description" sx={{ mt: 2 }}>
          Duis mollis, est non commodo luctus, nisi erat porttitor
          ligula.
        </Typography>
      </Box>
    </Modal> : null
    )
  }

  return (
    <Fragment>
    {renderModal()}
    <MaterialReactTable
      columns={columns}
      data={data}
      enableColumnActions={false}
      enableColumnFilters={false}
      enablePagination={false}
      enableSorting={false}
      enableBottomToolbar={false}
      enableTopToolbar={false}
      muiTableBodyRowProps={{ hover: false }}
      muiTableProps={{
        sx: {
          border: "1px solid rgba(81, 81, 81, 1)"
        }
      }}
      muiTableHeadCellProps={{
        sx: {
          border: "1px solid rgba(81, 81, 81, 1)"
        }
      }}
      muiTableBodyCellProps={{
        sx: {
          border: "1px solid rgba(81, 81, 81, 1)"
        }
      }}
    />
    </Fragment>
  
  );
};

export default Example;