updating React Table to not have any rows selected after submission

Question

EDIT -

I am using this example here of the react-table select table (HOC)

Simply adding this code in the example code at the link mentioned above provides the results I am trying to achieve.

  logSelection = () => {
    console.log('selection:', this.state.selection);
    this.setState({ selection: [] });
  }

Background

I am using react-table in my React.js application. Specifically I am using the select table which provides a check box next to each row. In my case this allows the user to select multiple rows. Once the user submits their selections the data from the rows they selected is sent off for other use in my application.

After submission I am clearing the data that is being held in state. This is important in case they need to make another submission directly afterwords. After I clear the data from the state array holding each row that had previously been selected, the table still shows the previous rows selected even though the data is no longer being held in the state array.

Example Code

This is how I am clearing the array holding the selected arrays,

  exportExcel() {
    this.setState({ selection: [], selectAll: false });
  }

This is all the relevant code in the class,

import React, {Component} from 'react';
import _ from 'lodash';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input } from 'reactstrap';
import ReactTable from 'react-table';
import checkboxHOC from 'react-table/lib/hoc/selectTable';
import 'react-table/react-table.css';
import Chance from 'chance';
import { connect } from 'react-redux';
import { fetchOdx } from '../../store/actions/Odx';

const CheckboxTable = checkboxHOC(ReactTable);
const chance = new Chance();

class TypeAHead extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showRow: false,
      showExcelForm: false,
      modal: false,
      selection: [],
      selectAll: false,
      state: {},
      row: {},
      column: {},
      instance: {},
      data: [],
    };
    this.showRow = this.showRow.bind(this);
    this.showExcelForm = this.showExcelForm.bind(this);
    this.toggleSelection = this.toggleSelection.bind(this);
    this.toggleAll = this.toggleAll.bind(this);
    this.isSelected = this.isSelected.bind(this);
    this.exportExcel = this.exportExcel.bind(this);
    this.setClientEmail = this.setClientEmail.bind(this);

    this.props.fetchOdx();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.odxData) {
      this.setState({
        data: nextProps.odxData
      });
    }
  }

  showRow() {
    this.setState({
      showRow: !this.state.showRow
    });
  }

  showExcelForm() {
    this.setState({
      clientEmail: '',
      showExcelForm: !this.state.showExcelForm
    });
  }

  toggleSelection(key, shift, row) {
    let selection = [
      ...this.state.selection
    ];
    const keyIndex = selection.indexOf(key);
    if (keyIndex >= 0) {
      selection = [
        ...selection.slice(0, keyIndex),
        ...selection.slice(keyIndex + 1)
      ];
    } else {
      selection.push(row);
    }
    this.setState({ selection });
  }

  toggleAll() {
    const selectAll = this.state.selectAll ? false : true;
    const selection = [];
    if (selectAll) {
      const wrappedInstance = this.checkboxTable.getWrappedInstance();
      const currentRecords = wrappedInstance.getResolvedState().sortedData;
      currentRecords.forEach((item) => {
        selection.push(item._original._id);
      });
    }
    this.setState({ selectAll, selection });
  }

  isSelected(key) {
    this.state.selection.includes(key);
  }

  setClientEmail(event) {
    this.setState({ clientEmail: event.target.value.toLowerCase() });
  }

  exportExcel(event) {
    this.setState({ selection: [], selectAll: false });
    this.showExcelForm();
  }

  render() {
    const { toggleSelection, toggleAll, isSelected } = this;
    const { selectAll, } = this.state;
    const checkboxProps = {
      toggleSelection,
      toggleAll,
      isSelected,
      selectAll,
      selectType: 'checkbox',
    };
    const columns = [{
      Header: 'DebtCltRefNo',
      accessor: 'DebtCltRefNo'
    }, {
      Header: 'DbtrDebtorType',
      accessor: 'DbtrDebtorType',
    }];
    return (
      <div>
        <Button onClick={this.showExcelForm} color="success" size="lg" block>Export Excel</Button>
        <CheckboxTable
          data={this.state.data}
          columns={columns}
          className="-striped -highlight"
          defaultPageSize={10}
          ref={(r) => this.checkboxTable = r}
          filterable
          defaultFilterMethod={(filter, row) =>
            String(row[filter.id]) === filter.value}
          getTdProps={(state, row, column, instance) => ({
            onClick: e => {
              const r = row.original;
              this.setState({ state, row: r, column, instance });
              this.showRow();
            }})}
          {...checkboxProps}
        />
        <div>
          <Modal isOpen={this.state.showRow} toggle={this.showRow}>
            <ModalHeader toggle={this.showRow}>{this.state.row.DebtCltRefNo}</ModalHeader>
            <ModalBody>
              DbtrDebtorType: {this.state.row.DbtrDebtorType}<br />
              DebtType: {this.state.row.DebtType}<br />
            </ModalBody>
            <ModalFooter>
              <Button color="danger" onClick={this.toggle}>Cancel</Button>
            </ModalFooter>
          </Modal>
        </div>
        <div>
          <Modal isOpen={this.state.showExcelForm} toggle={this.showExcelForm}>
            <ModalHeader toggle={this.showExcelForm}>Grant Client Access</ModalHeader>
            <ModalBody>
              <Form>
                <FormGroup>
                  <Label for="clientEmail">Client's Email Address</Label>
                  <Input value={this.state.clientEmail} onChange={this.setClientEmail} type="email" name="clientEmail" id="clientEmail" placeholder="Client's Email Address" />
                </FormGroup>
              </Form>
            </ModalBody>
            <ModalFooter>
              <Button color="danger" onClick={this.showExcelForm}>Cancel</Button>
              <Button color="success" onClick={this.exportExcel}>Submit</Button>
            </ModalFooter>
          </Modal>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  if (state.Odx.odx) {
    let data = state.Odx.odx;
    data = _.forEach([...data], (o) => o._id = chance.guid());
    return {
      odxData: data
    };
  } else {
    return {};
  }
};

const mapDispatchToProps = dispatch => ({
  fetchOdx: () => dispatch(fetchOdx()),
});

export default connect(mapStateToProps, mapDispatchToProps)(TypeAHead);

Question

How do I make the table update after my form is submitted, so that no rows have a check box checked? Or in other words, how can I get the table to coincide with the state array which shows the rows that have been selected? In my case, after I update the state array to be an empty array, the selected rows are still selected in the UI.

Answer 1

Try useTable({columns, data, defaultColumn, autoResetPage: !skipPageReset, updateMyData, autoResetSelectedRows: false}, ...) Adding the autoResetSelectedRows: false option worked for me.