3
<div>
     <ReactTable
         data={this.state.listFruitData}
         columns={columns}
         defaultPageSize={10}
         getTrProps={onRowClick}
     />
</div>
  1. I am actually populating data(listFruitData) in ReactTable from post request call.
  2. My requirement is I need to first select row of ReactTable may be using some background color so that it looks like the row is selected
  3. While I am selecting row I should get hand(icon) hover on ReactTable row
  4. How to do this?
ravibagul91
  • 20,072
  • 5
  • 36
  • 59
Shraddha Agarwal
  • 183
  • 2
  • 14
  • You can create CSS for this... Have You seen ?? and – bakar_dev Oct 02 '19 at 12:24
  • when I select row I want to show some color only for that selected row? how to do this because when I am applying background style its getting applied to all rows ,I want to apply color to only selected row can you please help? and in all other posts examples are given only to just provide style to all rows not only 1 selected rows – Shraddha Agarwal Oct 02 '19 at 12:46

1 Answers1

10

You just need to add a style for cursor From your onRowClick function you can return a style object along with the onClick handler. In your onRowClick

onRowClick = () => {
return {
    onClick: () => {}, // your onClick handler
    style: {
           cursor: 'pointer'
    },
   }
}

Hope this helps

ibtsam
  • 1,620
  • 1
  • 10
  • 10
  • yes its working thanks, and also when I select row I want to show some color only for that selected row? how to do this because when I am applying background style its getting applied to all rows ,I want to apply color to only selected row can you please help? – Shraddha Agarwal Oct 02 '19 at 12:32
  • you need to have a local state to keep track of the selected row, then change the style based on the selected row. i have made a sandbox example you can check [here](https://codesandbox.io/s/react-table-simple-table-5vi5c) – ibtsam Oct 02 '19 at 17:30