CODEWITHSUNDEEP
reactjsreact-table
Aqib Zaman
Aqib Zaman

Reputation: 285

React-Table getting data of a specific row and Set in to the state

I am new to React. I used react-table to show the data I have. Now I need to take some specific data from my table and set it to a state, such as the name from the last row that I have. How could I do this? I want the last row data while doing pagination, that is in all pages. My table is just like below

<ReactTable
  columns={columns}
  data={this.state.users}
  defaultPageSize={3}
  className="-striped -highlight"
  sortable={false}
  resizable={false}
  style={{
    textAlign: "center"
  }}
/>

Upvotes: 2

Views: 8607

Answers (2)

Richard Stoeffel
Richard Stoeffel

Reputation: 695

You can interact with the row using pre-specified commands by using the getTdProps or getTrProps when making your react-table

<ReactTable
  columns={columns}
  data={this.state.users}
  defaultPageSize={3}
  className="-striped -highlight"
  sortable={false}
  resizable={false}
  style={{
    textAlign: "center"
  }}
  getTdProps={(state, rowInfo, column, instance) => {
      // rowInfo contains a lot of information about the row (including index on both the
      // page and it's index within the data set), the rowInfo.original objet contains 
      // values in the cells of the row clicked.
      return {
        // You can define an onClick function here that will apply to all rows
        onClick: (e, handleOriginal) => {
           const rowData = rowInfo.original
           // You can interact with the row data here, to use it however you want
           this.setState({userName: rowData.userName, userEmail: rowData.userEmail})
        }
  }};
/>

This function specifically will set a userName and userEmail to your state (assuming those are values you have in the table)

Here's a great sandbox set up to play with this feature, and the react-table docs are here

Upvotes: 0

ManavM
ManavM

Reputation: 3098

You could try to extract it from your this.state.users array. depending on your page size you could run a filter like

lastRows = this.state.users.filter((user, index) => ((index-1) % page_size) === 0)

given page_size as the number or rows in a page. You seem to have set it as 3.

PS: If you want access to the current page_size you can make it a part of your parent component's state and then give react-table the page size using the pageSize prop.

Upvotes: 1

Related Questions