Select row on click react-table

Question

I am trying to find the best table to use with my react apps, and for now, the react-table offers everything I need (pagination, server-side control, filtering, sorting, footer row).

This being said, I can't seem to be able to select a row. There are no examples that show this.

Some things, that I have tried include trying to set a className on click of the row. But I can't seem to find the calling element in e nor t. Also, I don't like this approach, because it is not how a react app should do things.

<ReactTable             ...             getTrProps={(state, rowInfo, column, instance) => {                 return {                     onClick: (e, t) => {                         t.srcElement.classList.add('active')                     },                     style: {                     }                 }             }}         /> 

Some possible workaround would be to render checkboxes as a first column, but this is not optimal as it limits the area to click to 'activate' the row. Also, the visual feedback will be less expressive.

Am I missing the elephant in the room? And if not, do you know another library that supports the things that I've described earlier?

Thank you!

EDIT: Another option, this being open source, is to suggest an edit. And maybe this is the proper thing to do.

EDIT 2

Another thing, suggested by Davorin Ruševljan in the comments, but I couldn't make it work was:

onRowClick(e, t, rowInfo) {     this.setState((oldState) => {         let data = oldState.data.slice();         let copy = Object.assign({},  data[rowInfo.index]);          copy.selected = true;         copy.FirstName = "selected";         data[rowInfo.index] = copy;          return {             data: data,         }     }) }  ....              getTrProps={(state, rowInfo, column) => {                 return {                     onClick: (e, t) => { this.onRowClick(e, t, rowInfo) },                     style: {                         background: rowInfo && rowInfo.row.selected ? 'green' : 'red'                     }                 }             }} 

This sets the 'FirstName' column to 'selected', but does not set the class to 'green'

Answer 1

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 } 

Answer 2

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