React-virtualized: FlexTable: provide event to onRowClick

Created on 1 Mar 2016  路  6Comments  路  Source: bvaughn/react-virtualized

I have a FlexTable with custom renderer on one of the FlexColumn which returns a Link.
I need a way to avoid running onRowClick callback when cell with Link was clicked.
My suggestion is to provide event as second argument.

question

Most helpful comment

Need to notice that the div from the example should be replaced with a span to avoid onclick dead zones (such as div is a block element).

cellRenderer={
  (cellData, cellDataKey, rowData, rowIndex, columnData) => (
    <span onClick={(event) => event.stopPropagation()}>
      <Link to='...'>Title</Link>
    </span>
  )
}

All 6 comments

I don't understand why that would be necessary. If your custom cell render wants to trap the click event, why not just trap it there?

cellRenderer={
  (cellData, cellDataKey, rowData, rowIndex, columnData) => (
    <div onClick={(event) => event.stopPropagation()}>
      <Link to='...'>Title</Link>
    </div>
  )
}

Closing as a no-op.

@bvaughn tried your suggestion and it doesn't work for me because it breaks my Link component making SPA to hit the server and reload. Also it adds an extra div. Moreover, providing event just seems pretty natural for on*Click callbacks.

There's no reason to provide a click event to the onRowClicked callback so you can trap the click inside of a cell. You have the ability to trap the click inside of a cell as I mentioned above. I don't know what you mean by:

it breaks my Link component making SPA to hit the server and reload

Wrapping your Link in a div that stops the event from bubbling should _not_ have any effect on your Link component unless you have your Link component misconfigured somehow (for example, by setting target='_blank' in your Link component which causes it to be handled differently).

Need to notice that the div from the example should be replaced with a span to avoid onclick dead zones (such as div is a block element).

cellRenderer={
  (cellData, cellDataKey, rowData, rowIndex, columnData) => (
    <span onClick={(event) => event.stopPropagation()}>
      <Link to='...'>Title</Link>
    </span>
  )
}

Nice catch, @cyberxndr.

Was this page helpful?
0 / 5 - 0 ratings