0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【React】React Tableで行をクリックした際のonclickイベントハンドラを設定する方法

Posted at

メモとして残します。

みんな大好き、React Tableですが、行をクリックした際のイベントハンドラの設定方法メモとして残します。

#■やり方
下記の通りgetTdPropsプロパティに設定をします。

<ReactTable
    getTdProps={(state, rowInfo, column, instance) => {
        return {
            onClick: e => {
                //if(column.id !== 'col-check'){
                    // 基本的な処理
                //  return
                //}
            }
        }
    }}
/>

ちなみに、getTrPropsというプロパティもありますが、このプロパティだと、例外的にイベントを発火させたくない列があったときに対応できないため、getTrPropsはあえて、採用しませんでした。
他thといった要素にも設定できるため、公式で確認しましょう。
image.png

以上。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?