Select row on click react-table

I found the solution after a few tries, I hope this can help you. Add the following to your <ReactTable> component:

getTrProps={(state, rowInfo) => {  if (rowInfo && rowInfo.row) {    return {      onClick: (e) => {        this.setState({          selected: rowInfo.index        })      },      style: {        background: rowInfo.index === this.state.selected ? '#00afec' : 'white',        color: rowInfo.index === this.state.selected ? 'white' : 'black'      }    }  }else{    return {}  }}

In your state don't forget to add a null selected value, like:

state = { selected: null }

There is a HOC included for React-Table that allows for selection, even when filtering and paginating the table, the setup is slightly more advanced than the basic table so read through the info in the link below first.

After importing the HOC you can then use it like this with the necessary methods:

/*** Toggle a single checkbox for select table*/toggleSelection(key: number, shift: string, row: string) {    // start off with the existing state    let selection = [...this.state.selection];    const keyIndex = selection.indexOf(key);    // check to see if the key exists    if (keyIndex >= 0) {        // it does exist so we will remove it using destructing        selection = [            ...selection.slice(0, keyIndex),            ...selection.slice(keyIndex + 1)        ];    } else {        // it does not exist so add it        selection.push(key);    }    // update the state    this.setState({ selection });}/*** Toggle all checkboxes for select table*/toggleAll() {    const selectAll = !this.state.selectAll;    const selection = [];    if (selectAll) {        // we need to get at the internals of ReactTable        const wrappedInstance = this.checkboxTable.getWrappedInstance();        // the 'sortedData' property contains the currently accessible records based on the filter and sort        const currentRecords = wrappedInstance.getResolvedState().sortedData;        // we just push all the IDs onto the selection array        currentRecords.forEach(item => {            selection.push(item._original._id);        });    }    this.setState({ selectAll, selection });}/*** Whether or not a row is selected for select table*/isSelected(key: number) {    return this.state.selection.includes(key);}<CheckboxTable    ref={r => (this.checkboxTable = r)}    toggleSelection={this.toggleSelection}    selectAll={this.state.selectAll}    toggleAll={this.toggleAll}    selectType="checkbox"    isSelected={this.isSelected}    data={data}    columns={columns}/>

See here for more information:
https://github.com/tannerlinsley/react-table/tree/v6#selecttable

Here is a working example:
https://codesandbox.io/s/react-table-select-j9jvw

if u want to have multiple selection on select row..

import React from 'react';import ReactTable from 'react-table';import 'react-table/react-table.css';import { ReactTableDefaults } from 'react-table';import matchSorter from 'match-sorter';class ThreatReportTable extends React.Component{constructor(props){  super(props);  this.state = {    selected: [],    row: []  }}render(){  const columns = this.props.label;  const data = this.props.data;  Object.assign(ReactTableDefaults, {    defaultPageSize: 10,    pageText: false,    previousText: '<',    nextText: '>',    showPageJump: false,    showPagination: true,    defaultSortMethod: (a, b, desc) => {    return b - a;  },  })    return(    <ReactTable className='threatReportTable'        data= {data}        columns={columns}        getTrProps={(state, rowInfo, column) => {        return {          onClick: (e) => {            var a = this.state.selected.indexOf(rowInfo.index);            if (a == -1) {              // this.setState({selected: array.concat(this.state.selected, [rowInfo.index])});              this.setState({selected: [...this.state.selected, rowInfo.index]});              // Pass props to the React component            }            var array = this.state.selected;            if(a != -1){              array.splice(a, 1);              this.setState({selected: array});            }          },          // #393740 - Lighter, selected row          // #302f36 - Darker, not selected row          style: {background: this.state.selected.indexOf(rowInfo.index) != -1 ? '#393740': '#302f36'},        }        }}        noDataText = "No available threats"        />    )}}  export default ThreatReportTable;