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'

score 78 · Accepted Answer · edited Feb 12 '19 at 13:59

78

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 }

edited Feb 12 '19 at 13:59

Emeeus

5,072
2
25
37

answered Sep 02 '17 at 14:21

Constantin Guidon

1,892
16
21

Can this do multiple selection? – Jun Bin Feb 07 '18 at 06:28
i guess you can but you have to implement a custom logic to store the selected indexes – Constantin Guidon Feb 09 '18 at 19:07
5

worked for me too, but I also had to check that `rowinfo !== undefined` to avoid runtime errors – Erlend V May 03 '18 at 11:02
Doesn't it only work when you click on the checkbox? How can we make it work when clicking anywhere within a row? – Grzegorz Brzęczyszczykiewicz Aug 08 '18 at 00:07
@ConstantinGuidon I know this is long closed, but I was wondering what value I pass in for rowInfo? – Young Scooter Sep 05 '18 at 13:28
@junBin @duncanrager @ErlendV Hey all, I added the `rowinfo !== undefined` but am unable to get rid of a "TypeError: Cannot read property 'index' of undefined" Any thoughts? I am thinking rowInfo should probably be set somewhere outside the props – Young Scooter Sep 05 '18 at 13:35
@ErlendV where did you add the undefined check? Could you assist? – Young Scooter Sep 05 '18 at 13:41
1

@YoungScooter did you affect `that` with `this` ? did you update the state on click ? – Constantin Guidon Sep 05 '18 at 15:56
Yea I did all of that. Found the solution in another thread. I had to add an else { return {}} after the if (!undefined). Pretty random. I appreciate the response though. – Young Scooter Sep 06 '18 at 15:13
i glad you found it @YoungScooter , can you link me the thread in order to edit my anwser ? thank by advance ! – Constantin Guidon Sep 10 '18 at 08:39
1

@ConstantinGuidon Sorry for the late response. Found the link, here it is! https://github.com/react-tools/react-table/issues/233 – Young Scooter Sep 10 '18 at 17:59
1

HI, can someone kindly explain how come my rowInfo is compaining as undefined? I am not sure how to use the `getTrProps` method properly – AKJ Mar 11 '19 at 09:35
@AKJ i believe this only works with react-table v6. v7 doesn't have `getTrProps`, so this answer won't work. – Zyren Jul 01 '20 at 19:22

score 22 · Answer 2 · edited Jul 04 '19 at 00:02

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

This seems like the best approach. Selection is supported by react-table through this higher order component. — JCF, Apr 25 '19 at 22:58

score 4 · Answer 3 · edited Oct 25 '18 at 16:08

4

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 > 20) 
<ReactTable
  getTrProps={(state, rowInfo, column) => {
    return {
      style: {
        background: rowInfo.row.selected ? 'green' : 'red'
      }
    }
  }}
/>

edited Oct 25 '18 at 16:08

ThunderBird

283
7
13

answered Jun 30 '17 at 14:11

Davorin Ruševljan

4,353
21
27

Thank you for the replay, @Davorin! I don't think that this will be of any use, because I don't have any control over the state of the table and therefore I cannot set rowInfo.row.selected.. without calling this.setState, the table will not rerender – gyosifov Jun 30 '17 at 14:20
How do you mean you do not have control, you are supplying table with data property, change it in data – Davorin Ruševljan Jun 30 '17 at 14:29
What I meant was that getTrProps is not part of the rerendering of the page, when the data is changed. And setting new data to the table does not invoke it, unfortunately. I am going to edit my question with the way that I am trying to do it. – gyosifov Jun 30 '17 at 14:49

score 3 · Answer 4 · answered Feb 14 '18 at 01:49

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: '<',
    nextText: '>',
    showPageJump: false,
    showPagination: true,
    defaultSortMethod: (a, b, desc) => {
    return b - a;
  },


  })

    return(
    <ReactTable className='threatReportTable'
        data= {data}
        columns={columns}
        getTrProps={(state, rowInfo, column) => {


        return {
          onClick: (e) => {


            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"
        />

    )
}
}


  export default ThreatReportTable;

score 3 · Answer 5 · answered Jul 25 '18 at 15:14

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) => {
                    if (rowInfo !== undefined) {
                        return {
                            onClick: (e, handleOriginal) => {
                              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'
                            }
                        }
                    }}
                }

score 3 · Answer 6 · answered Feb 23 '22 at 19:00

If you are using the latest version (7.7 at the time) it is possible to select rows using toggleRoWSelected() see full example;

<tr
  {...row.getRowProps()}
  className="odd:bg-white even:bg-gray-100"
  onClick={() => row.toggleRowSelected()}
>
  {row.cells.map((cell) => {
    return (
      <td {...cell.getCellProps()} className="p-2">
        {cell.render("Cell")}
      </td>
    );
  })}
</tr>;

score 0 · Answer 7 · answered Nov 21 '17 at 20:17

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 (
    <li key={move}>
      <button style={{fontWeight:(move === this.state.stepNumber ? 'bold' : '')}} onClick={() => this.jumpTo(move)}>{desc}</button>
    </li>
  );

Granted, a cleaner approach would be to add/remove a 'selected' CSS class but this direct approach might be helpful in some cases.

score 0 · Answer 8 · answered Oct 15 '19 at 01:41

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), () => false));
    const [ selected, setSelected ] = useState([]);

    const handleToggleAll = allToggled => {
        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 => {
        let toggledCopy = [...toggled];
        toggledCopy[index] = !toggledCopy[index];
        setToggled(toggledCopy);
        if( toggledCopy[index] === false ){
            setAllToggled(false);
        }
        else if (allToggled) {
            setAllToggled(false);
        }
    };

....


                Header: state => (
                    <input
                        type="checkbox"
                        checked={allToggled}
                        onChange={() => handleToggleAll(allToggled)}
                    />
                ),
                Cell: row => (
                    <input
                        type="checkbox"
                        checked={toggled[row.index]}
                        onChange={() => handleToggle(row.index)}
                    />
                ),

....

<ReactTable

...
                    getTrProps={(state, rowInfo, column, instance) => {
                        if (rowInfo && rowInfo.row) {
                            return {
                                onClick: (e, handleOriginal) => {
                                    let present = selected.indexOf(rowInfo.index);
                                    let selectedCopy = selected;

                                    if (present === -1){
                                        selected.push(rowInfo.index);
                                        setSelected(selected);
                                    }

                                    if (present > -1){
                                        selectedCopy.splice(present, 1);
                                        setSelected(selectedCopy);
                                    }

                                    handleToggle(rowInfo.index);
                                },
                                style: {
                                    background: selected.indexOf(rowInfo.index)  > -1 ? '#00afec' : 'white',
                                    color: selected.indexOf(rowInfo.index) > -1 ? 'white' : 'black'
                                },
                            }
                        }
                        else {
                            return {}
                        }
                    }}
/>

score 0 · Answer 9 · answered Apr 29 '21 at 01:46

0

# react-table with edit button #
const [rowIndexState, setRowIndexState] = useState(null);
const [rowBackGroundColor, setRowBackGroundColor] = useState('')
{...row.getRowProps({
  onClick: (e) => {
    if (!e.target.cellIndex) {
       setRowIndexState(row.index);
       setRowBackGroundColor('#f4f4f4')
    }
  },
  style: {
   background: row.index === rowIndexState ? rowBackGroundColor : '',
  },              
})}

answered Apr 29 '21 at 01:46

Shiva Vivek

1
1

could you explain the logic behind `!e.target.cellIndex` ? – HiLuLiT Nov 14 '22 at 09:55

score 0 · Answer 10 · answered Jun 18 '23 at 18:24

0

for version ~8

<tr
  {...row.getRowProps()}
  className="odd:bg-white even:bg-gray-100"
  onClick={() => row.toggleSelected()} <------ (from nick answer the method name is different)
>
  {row.cells.map((cell) => {
    return (
      <td {...cell.getCellProps()} className="p-2">
        {cell.render("Cell")}
      </td>
    );
  })}
</tr>;

answered Jun 18 '23 at 18:24

user1642340

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 21 '23 at 20:36

Select row on click react-table

10 Answers10

Linked