How to: React Table with Double Click

 by Robin Wieruch
 - Edit this Post

This tutorial is part 2 of 2 in this series.

In this tutorial, I want to show you how to use React Table Library with double click on a row. In the previous example, you have already installed React Table Library to create a table component. By example, a row single click is enabled the following way:

<Row
key={item.id}
item={item}
onClick={(tableItem, event) =>
console.log('Click Row', tableItem, event)
}
>

In contrast, a double click on a row can be achieved this way:

<Row
key={item.id}
item={item}
onDoubleClick={(tableItem, event) =>
console.log('Click Row', tableItem, event)
}
>

Keep in mind that enabling a double click on a row will lead to a slight delay in the single click, because the table waits for a certain time until it confirms a click as a single click, because a double click could still happen.

Keep reading about 

In this tutorial, I want to show you how to use React Table Library with a search feature. In the previous example, you have already installed React Table Library to create a table component. Now…

In this tutorial, I want to show you how to use React Table Library with its useRowSelect plugin for a select feature. In the previous example, you have already installed React Table Library to…

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.