0

I am trying to render a table using gridjs under react and attach an eventListener to tables cells. My code is partially working, but when I click a given cell, I got repeated events, probably one for each row in the table for that event. You can see below, the event is able to tell which column was clicked but it looks it fires for all rows in table.

import React, { useEffect, useRef } from "react";
import { Grid as Gridjs } from "gridjs";

function App() {
  const wrapperRef = useRef(null);

  const grid = new Gridjs({
    columns: ["Name", "Email", "Phone Number"],
    data: [
      ["John", "john@example.com", "(353) 01 222 3333"],
      ["Mark", "mark@gmail.com", "(01) 22 888 4444"]
    ]
  });

  useEffect(() => {
    grid.render(wrapperRef.current);
    wrapperRef.current.addEventListener("click", (ev) => {
      if (ev.target.tagName === "TD") {
        console.log(ev.target.dataset.columnId);
      }
    });
  });

  return (
    <div className="App">
      <header className="App-header"></header>
      <body>
        <div ref={wrapperRef} />
      </body>
    </div>
  );
}

export default App;

Here is the CodeSandBox

enter image description here

Any idea what am I doing wrong or lacking here?

mhanuel
  • 75
  • 1
  • 12
  • 1
    Please use this https://gridjs.io/docs/integrations/react instead –  Aug 30 '22 at 12:06
  • Hi @ChrisG, if I do that nothing get redered. I have updated the CodeSandbox. – mhanuel Aug 30 '22 at 15:10
  • Well, you have to actually read and implement the react integration page...!? https://codesandbox.io/s/test-event-listener-forked-51on60 –  Aug 30 '22 at 16:15
  • Hi @ChrisG, sorry I am not very used to react, can you help explain what do you mean with "read and implement the react integration page", by the way the sandbox link you share is not available on my side for some reason. Thanks – mhanuel Aug 31 '22 at 11:29
  • I mean the only thing you changed in your sandbox is the library import, but integrating with React works by using the Grid component, as opposed to rendering it into a DOM element. See [here](https://gridjs.io/docs/integrations/react/#usage), which your sandbox doesn't remotely do. (My sandbox was already deleted because I regularly clean up / repurpose them) PS: you have a element inside your App
    for some reason which you should remove, that's very invalid HTML
     –  Aug 31 '22 at 12:04
  • I totally understand your point, very valid. Now I think the reason I was not doing it was because I was trying to render using useEffect, I am calling grid.render on wrapperReg. So if I understand correctly you are saying that the multiple calls to click events on cells are because I am not using gridjs-react and try to integrate as you have pointed? But then the question is, if I follow the link you share and do the gridjs-react integration, how can I add the addEventListener to the cells in table? – mhanuel Aug 31 '22 at 13:01
  • That's a good question, apparently the react integration doesn't support events...? What kind of library is this? Anyway, I wrote my own integration: https://codesandbox.io/s/test-event-listener-forked-bg0yxf?file=/src/Grid.js and see h ere how to use it: https://codesandbox.io/s/test-event-listener-forked-bg0yxf?file=/src/App.js –  Aug 31 '22 at 14:16
  • I also contacted the author on twitter, maybe he can shed some light on this –  Aug 31 '22 at 14:20

0 Answers0