CODEWITHSUNDEEP
reactjsag-grid
Pratik das baghel
Pratik das baghel

Reputation: 305

AG Grid Render React Component when a Cell is Clicked

I need to render a React Component, which is basically a text box. I need to call onClick function only when any cell under "Age" column is clicked. The requirement is when the cell is clicked we need to render the React component.

Code section - cellRenderer: ClickableCellRenderer

function handleCellClicked(event){ if(event.colDef.field === "age") {<ClickableCellRender />}}

This is the codesandbox link - https://codesandbox.io/s/ag-grid-react-hello-world-forked-5yxz28?file=/src/App.js:1316-1537

I am not able to link onClick with Cell Render, can anyone help here.

Upvotes: 0

Views: 694

Answers (1)

Sonam Gupta
Sonam Gupta

Reputation: 383

If you wish to render the component on the cell itself on which you have clicked, cellRenderer in the columnDefs of the particular field is good to use.

onCellClicked can also work but it seems to be slow and is affecting the performance of application.

Here is the gridOptions declaration:-

   const gridOptions = {
    columnDefs: [
      {
        headerName: "ID",
        field: "id"
      },
      {
        headerName: "Name",
        field: "name"
      },
      {
        headerName: "Age",
        field: "age",
        cellRenderer: ClickableCellRenderer
      }
    ],
    rowData 
 };

And in place of passing the state's setter and getter from parent component, I have declared the states inside CellRenderer Component. Hence the CellRenderer component will be rendering the component and also will handle the state for displaying the component on the basis of click.

   const ClickableCellRenderer = ({ value, data }) => {
  const [cellClicked, setCellClicked] = useState("");
  return (
    <div
      onClick={() => {
        setCellClicked(data.id);
      }}
      style={{ cursor: "pointer" }}
    >
      {cellClicked ? <ClickableComponent value={value} /> : value}
    </div>
  );
};

Here is the full working Example.

Hope this provides any help.

Upvotes: 0

Related Questions