title: Select row on click react-table
body: <p>I am trying to find the best table to use with my react apps, and for now, the <a href="https://www.npmjs.com/package/react-table" rel="noreferrer">react-table</a> offers everything I need (pagination, server-side control, filtering, sorting, footer row).</p>
  
  <p>This being said, I can't seem to be able to select a row. There are no <a href="https://react-table.js.org/#/story/simple-table" rel="noreferrer">examples</a> that show this. </p>
  
  <p>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 <code>e</code> nor <code>t</code>. Also, I don't like this approach, because it is not how a react app should do things.</p>
  
  <pre><code>&lt;ReactTable
              ...
              getTrProps={(state, rowInfo, column, instance) =&gt; {
                  return {
                      onClick: (e, t) =&gt; {
                          t.srcElement.classList.add('active')
                      },
                      style: {
                      }
                  }
              }}
          /&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>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?</p>
  
  <p>Thank you! </p>
  
  <p><strong>EDIT:</strong>
  Another option, this being open source, is to suggest an edit. And maybe this is the proper thing to do.</p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>Another thing, suggested by Davorin Ruševljan in the comments, but I couldn't make it work was:</p>
  
  <pre><code>onRowClick(e, t, rowInfo) {
      this.setState((oldState) =&gt; {
          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) =&gt; {
                  return {
                      onClick: (e, t) =&gt; { this.onRowClick(e, t, rowInfo) },
                      style: {
                          background: rowInfo &amp;&amp; rowInfo.row.selected ? 'green' : 'red'
                      }
                  }
              }}
  </code></pre>
  
  <p>This sets the 'FirstName' column to 'selected', but does not set the class to 'green'</p>