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    lt ReactTable                             getTrProps   state  rowInfo  column  instance    gt                    return                       onClick   e  t    gt                            t srcElement classList add  active                                              style                                                                     gt    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    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                                                           This sets the  FirstName  column to  selected   but does not set the class to  green

User · Answer

The answer you selected is correct  however if you are using a sorting table it will crash since rowInfo will became undefined as you search  would recommend using this function instead                  getTrGroupProps   state  rowInfo  column  instance    gt                        if  rowInfo     undefined                            return                               onClick   e  handleOriginal    gt                                  console log  It was in this row    rowInfo                                this setState                                     firstNameState  rowInfo row firstName                                    lastNameState  rowInfo row lastName                                    selectedIndex  rowInfo original id                                                                                             style                                    cursor   pointer                                   background  rowInfo original id     this state selectedIndex     00afec     white                                   color  rowInfo original id     this state selectedIndex    white     black

User · Answer

Another mechanism for dynamic styling is to define it in the JSX for your component  For example  the following could be used to selectively style the current step in the React tic-tac-toe tutorial  one of the suggested extra credit enhancements     return        lt li key  move  gt         lt button style   fontWeight  move     this state stepNumber    bold          onClick       gt  this jumpTo move   gt  desc  lt  button gt       lt  li gt         Granted  a cleaner approach would be to add remove a  selected  CSS class but this direct approach might be helpful in some cases

User · Answer

Multiple rows with checkboxes and select all using useState   hooks  Requires minor implementation to adjust to own project       const data      const   allToggled  setAllToggled     useState false       const   toggled  setToggled     useState Array from new Array data length        gt  false        const   selected  setSelected     useState           const handleToggleAll   allToggled   gt            let selectAll    allToggled          setAllToggled selectAll           let toggledCopy               let selectedCopy               data forEach function  e  index                toggledCopy push selectAll               if selectAll                    selectedCopy push index                                     setToggled toggledCopy           setSelected selectedCopy               const handleToggle   index   gt            let toggledCopy       toggled           toggledCopy index     toggledCopy index           setToggled toggledCopy           if  toggledCopy index      false                setAllToggled false                     else if  allToggled                setAllToggled false                                            Header  state   gt                         lt input                         type  checkbox                          checked  allToggled                          onChange       gt  handleToggleAll allToggled                         gt                                     Cell  row   gt                         lt input                         type  checkbox                          checked  toggled row index                           onChange       gt  handleToggle row index                         gt                             lt ReactTable                          getTrProps   state  rowInfo  column  instance    gt                            if  rowInfo  amp  amp  rowInfo row                                return                                   onClick   e  handleOriginal    gt                                        let present   selected indexOf rowInfo index                                       let selectedCopy   selected                                       if  present     -1                                           selected push rowInfo index                                           setSelected selected                                                                              if  present  gt  -1                                           selectedCopy splice present  1                                           setSelected selectedCopy                                                                              handleToggle rowInfo index                                                                      style                                        background  selected indexOf rowInfo index    gt  -1     00afec     white                                       color  selected indexOf rowInfo index   gt  -1    white     black                                                                                                                     else                               return                                                       gt

User · Answer

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  gt   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   gt                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       lt CheckboxTable     ref  r   gt   this checkboxTable   r       toggleSelection  this toggleSelection      selectAll  this state selectAll      toggleAll  this toggleAll      selectType  checkbox      isSelected  this isSelected      data  data      columns  columns    gt    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

User · Answer

I found the solution after a few tries  I hope this can help you  Add the following to your  lt ReactTable gt  component   getTrProps   state  rowInfo    gt      if  rowInfo  amp  amp  rowInfo row        return         onClick   e    gt            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

User · Answer

I am not familiar with  react-table  so I do not know it has direct support for selecting and deselecting  it would be nice if it had    If it does not  with the piece of code you already have you can install the onCLick handler  Now instead of trying to attach style directly to row  you can modify state  by for instance adding selected  true to row data  That would trigger rerender  Now you only have to override how are rows with selected     true rendered  Something along lines of      Any Tr element will be green if its  row age  gt  20    lt ReactTable   getTrProps   state  rowInfo  column    gt        return         style            background  rowInfo row selected    green     red                       gt

User · Answer

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    lt        nextText    gt        showPageJump  false      showPagination  true      defaultSortMethod   a  b  desc    gt        return b - a                   return       lt ReactTable className  threatReportTable          data   data          columns  columns          getTrProps   state  rowInfo  column    gt              return             onClick   e    gt                  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            gt                 export default ThreatReportTable

[reactjs] Select row on click react-table

Examples related to reactjs

Examples related to react-table