The Table rows don't stay selected when the state of a variable changes.

[lantikchi]

Hi, When I change the state of a variable in the handleRowSelection(selectedRows) function the render() is called again and my rows are deselected. I found the following solution https://stackoverflow.com/questions/39995836/how-to-set-component-state-based-on-material-ui-selected-table-rows

Could you please advise how I can apply this solution to the DataTables or if there is another solution available.

The following is my handleRowSelection() function which enables/disables a delete button:

 handleRowSelection(selectedRows) {
      const topicsArr = this.state.topics.sort((a, b) => (a.topic < b.topic ? -1 : 1));
      this.setState({disableDelete :false });
      this.setState({selectedTopic:topicsArr[selectedRows]});
  }

The following is my render function:

render() {

      // Only filter if required
        let filteredItems = this.state.topics;

          return (
      <div style={styles.component}>

         <Tooltip 
          title="Delete"
          >
            <IconButton 
            aria-label="Delete"
            onClick={this.handleDelete}
            disabled={this.state.disableDelete}
            >

              <DeleteIcon />
            </IconButton>
           </Tooltip>

        <DataTables
          height={'auto'}
          selectable={true}
          showRowHover={false}
          columns={TABLE_COLUMNS}
          data={formattedDataItems.sort((a, b) => (a.topic < b.topic ? -1 : 1))}
          showCheckboxes={true}
          multiSelectable={false}
          showHeaderToolbar={true}
          onPreviousPageClick={this.handlePreviousPageClick}
          onNextPageClick={this.handleNextPageClick}
           onRowSelection={this.handleRowSelection}
          onFilterValueChange={this.handleFilterValueChange}
          count={this.state.topics.length}
          page={this.state.page}
          tableBodyStyle={styles.tableBodyStyle}
          tableStyle={styles.tableStyle}
          tableWrapperStyle={styles.tableWrapperStyle}
          rowSizeLabel={""}
          rowSizeList   ={[]}
        />
    </div>

      );
    }