title: How to handle click row event on react-table
body: <p>All the examples on the internet are using old-style <strong>></strong> component, I could not found any example for showing how to handle row_click event.
  I tried my below example but no luck.
  It won't be stopped by <strong>const onRowClick = (state, rowInfo, column, instance) => {</strong> as it's supposed to be.</p>
  
  <pre><code>        import React from 'react'
          import {useTable, useSortBy, useTableState, usePagination} from 'react-table'
  
          function Table({getTrProps, columns, data}) {
              const tableState = useTableState({pageIndex: 2})
              const {
                  getTableProps,
                  getTrProps,
                  ....
                  state: [{pageIndex, pageSize}],
              } = useTable(
                  {
                      getTrProps,
                      columns,
                      data,
                      state: tableState,
                  },
                  useSortBy,
                  usePagination
              )
  
  
  
              // Render the UI for your table
              return (
                  &lt;&gt;
  
                      &lt;table {...getTableProps()}
                             className="table table-bordered"
                      &gt;
                          &lt;thead&gt;
                          {headerGroups.map((headerGroup): any =&gt; (
                              &lt;tr {...headerGroup.getHeaderGroupProps()}
                                  className={`tx-10 tx-spacing-1 tx-color-03 tx-uppercase`}
                              &gt;
                                  {headerGroup.headers.map(column =&gt; (
                                      &lt;th {...column.getHeaderProps(column.getSortByToggleProps())}&gt;{column.render('Header')}
                                          &lt;span&gt;
                                          {(column as any).isSorted
                                              ? (column as any).isSortedDesc
                                                  ? ' '
                                                  : ' '
                                              : ''}
                                      &lt;/span&gt;
                                      &lt;/th&gt;
                                  ))}
                              &lt;/tr&gt;
                          ))}
                          &lt;/thead&gt;
                      &lt;/table&gt;
  
                  &lt;/&gt;
              )
          }
  
          function TransactionTable(props) {
              let data = props.data || []
              let filter = props.filter || {}
              ....
              const onRowClick = (state, rowInfo, column, instance) =&gt; {
                  return {
                      onClick: e =&gt; {
                          debugger
                      }
                  }
              }
  
  
              return (
                  &lt;div className={`card card-dashboard-table`}&gt;
                      &lt;div className="table-responsive"&gt;
                          &lt;Table
                              getTrProps={onRowClick}
                              columns={filter.adjustParkingLot ? columns: withouParkingColumns}
                              data={data}/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              )
          }
  
          export default TransactionTable
  </code></pre>