How to handle click row event on react-table

Question

All the examples on the internet are using old-style > 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 const onRowClick = (state, rowInfo, column, instance) => { as it's supposed to be.

        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 (
                <>

                    <table {...getTableProps()}
                           className="table table-bordered"
                    >
                        <thead>
                        {headerGroups.map((headerGroup): any => (
                            <tr {...headerGroup.getHeaderGroupProps()}
                                className={`tx-10 tx-spacing-1 tx-color-03 tx-uppercase`}
                            >
                                {headerGroup.headers.map(column => (
                                    <th {...column.getHeaderProps(column.getSortByToggleProps())}>{column.render('Header')}
                                        <span>
                                        {(column as any).isSorted
                                            ? (column as any).isSortedDesc
                                                ? ' 🔽'
                                                : ' 🔼'
                                            : ''}
                                    </span>
                                    </th>
                                ))}
                            </tr>
                        ))}
                        </thead>
                    </table>

                </>
            )
        }

        function TransactionTable(props) {
            let data = props.data || []
            let filter = props.filter || {}
            ....
            const onRowClick = (state, rowInfo, column, instance) => {
                return {
                    onClick: e => {
                        debugger
                    }
                }
            }


            return (
                <div className={`card card-dashboard-table`}>
                    <div className="table-responsive">
                        <Table
                            getTrProps={onRowClick}
                            columns={filter.adjustParkingLot ? columns: withouParkingColumns}
                            data={data}/>
                    </div>
                </div>
            )
        }

        export default TransactionTable

Answer 1

I think you can pass additional props to getRowProps function on row. You just need to pass an object containing additional props. For example you can pass style object as this

tr.getRowProps({ style: { color: 'blue' } })

Same way you can pass onClick to getRowProps function. You can pass the row object to your onClick callback to get the row data

I passed rowInfo callback for getting the row click

Hope this is what you want.

Ref: ReactTable RowProperties