<Table onRowClick={cylinder => this.changeSelection()} />
@TimKraemer ,as @dengfuping said, the onRow event is to set props for each row, it means the work of onRow is changed, and you need to pass rowSelection[Object] props to deal with select events. You can checkout my modified codepen,OR check the document this part: https://ant.design/components/table/#rowSelection. Hope this helps. Also I think they should change the warning description as this props function totally changed, not instead.
yesmeck, aaronplanell, CecileChelim, jasveer1997, azizijunaid-zz, and vadimbakaev reacted with thumbs up emoji
cgarciahdez, azizijunaid-zz, and peterkvac reacted with heart emoji
JessyZeroual reacted with rocket emoji
All reactions
Hello everybody,
First of all, thanks @dogbutcat for your full explanation. I agree with you: the warning description must be changed, because it seems that you must replace onRowClick by onRow and they don't do the same. In fact, as I am concerned, there is no similar functionality in v3.0... You cannot click to an entire row and give it the same callback, you must create a rowSelection and this means that a column with checkboxes will appear and you can click any checkbox, and it's not the same 😢
Any idea? Why deprecate onRowClick? 🤔
Thanks!
It works with:
onRow={(record) => ({
onClick: () => { myCallBackThatReceivesTheID(record.key); }
Thanks a lot @yesmeck !!!
At this point, there is a click event in the row ,at the time, there is a button in the row, and there is also a lick event. When I click the button, the two events will be triggered. and in fact, I just want to trigger the event of the button, do not trigger event of the row. My idea is by judging the node properties,Is there any other way?
The following example shows how to use a v2 style onRowClick function with v3 style onRow
<Table
onRow={(record, index) => ({
onClick: (event) => { onRowClick(record, index, event) }
@mikaelascorn I'm doing it like this...
const onRow = (record: any, rowIndex: any) => {
return {
onClick: () => { setSelectedRow(rowIndex) }
const rowClassName = (record: any, index: number): string => {
return index === selectedRow ? `${gStyles.active}` : ``;
<Table rowClassName={rowClassName} onRow={onRow} ......></Table>
If you still getting this issue : Warning: onRowClick is deprecated, please use onRow instead.
you can fixed this issue by trying this:
onRow={(record) => ({ onClick: () => { this.someClick(record.key) } })}
When I am clicking on Checkbox of any row of the table then onRow functionality of the table is being triggered at the same time because of event bubbling. I am not able to stop this because they are not giving event in rowSelection .
I'm having the same issue.
@stefatkins , @nischalhubbler Today I have confronted with this issue. I use the 3.26.16 version of the ant. To get rid of bubbling you must add onClick to the Checkbox component and call the stopPropagation method. I reproduced my fix using the codesanbox. Here is a link: https://codesandbox.io/s/bold-hodgkin-voiol?file=/src/App.js
I spent approximately one hour to fix this issue. I found out that the Checkbox component has the OnClick property after looking through allowed properties in the source of the component. You can ensure: https://github.com/ant-design/ant-design/blob/master/components/checkbox/Checkbox.tsx#L16