React-table: Select rows in table with checkbox

[shezankazi]

Is there any way of putting a checkbox in rows so that they can be used by an action menu? e.g. delete selected items?

[dcworldwide]

Yes overload column renderer and add a checkbox.

Track selected row state in your data model.

[tannerlinsley]

@dcworldwide nailed it.

[shezankazi]

will try this soon and post here

[ericmcgregor]

I'm trying to wire something like this up myself and I'd like to see an example of how you might handle it. I'm currently using getTrProps and instead of returning any props, i'm attaching a 'selected:true' to rowInfo which i can then access in the cell with the checkbox. but i'm not really sure what the best way to do this is if you have a lot of rows. it doesn't seem like a good idea to have each row check to see if it's id is in another data store. if you had some insight i'd love to see how you've approached this.

[shezankazi]

Sorry for taking so long to reply. I had some backend issues I needed to sort out first.

I hope this is still of use to anyone:

So this is my table:

import React, {Component} from 'react';

import Moment from 'react-moment';
import ReactTable from 'react-table';
import 'react-table/react-table.css';

class MyTable extends Component {
    render() {
        const columns = [
            {
                header: 'Foo',
                accessor: 'bar',
            },
            {
                header: 'Bar',
                accessor: 'bar',
            },
            {
                header: '',
                accessor: 'editButton',
                render: (value) => (
                    <button onClick={this.props.onClick.bind(this, value)}>
                        click me!
                    </button>
                ),
                maxWidth: 60
            },
        ]

        return (
            <div>
                <ReactTable
                    loading={this.props.loading}
                    className="-striped -highlight"
                    previousText="Zurück"
                    nextText="Weiter"
                    pageText="Seite"
                    ofText="von"
                    data={this.props.data}
                    columns={columns}
                    loadingText="Looking for foo"
                    noDataText="couldn't find foo"
                    rowsText="Zeilen"
                />
            </div>
        )
    }
}

export default CandidateOptionsList;

this is my component

...
handleTableButtonClick(obj) {
    console.log(obj.row)
}

return(
    <MyTable
        loading={this.state.loadingMyTable}
        data={this.state.myTableData}
        onClick={this.handleTableButtonClick.bind(this)}
    />
)
...

handleTableButtonClick receives the table row and from there I can do whatever I want with it.