PrimeReact DataTable: How to (visually) deselect rows

Question

I'm using a DataTable that has row selection via checkbox as well as a global search. The problem is that if I select one (or more) rows and then filter via the global search, the positions of the selected rows stay the same, e. g. if I select row one and two and filter, row one and two are still selected even if they have completely different content now because of the filtering. I even managed to reset the underlying selection in the state leading to nothing being selected in the state but the checkboxes are still checked. Resetting the DataTable doesn't do anything.

How do I (at least visually) reset the checkboxes? Thanks!

My code is as follows:

<InputText type="search" onInput={e =>
    this.setState({
            globalFilter: e.target.value,
            selectedProjectListEntries: []
    })}
    placeholder={this.intl.formatMessage({id: "input.global-search.hint"})}
    className={"form-control"}/>  
              
<DataTable ref={el => this.dataTable = el}
   value={this.state.projectListEntries} autoLayout={false}
   globalFilter={this.state.globalFilter} rows={20}
   className={'table table-striped'}
   selection={this.state.selectedProjectListEntries}
   onSelectionChange={e => this.setState({selectedProjectListEntries: e.value})}>
       <Column selectionMode="multiple"/>
       ... Columns ...

Okay the problem seems to be that I'm not using PrimeReact's CSS/Themes and styling it all by myself (well mostly with Bootstrap) as the rest of the site uses Bootstrap and the disabling/enabling seems to happen mostly via CSS classes (checkbox being hidden and their own one being used), so I 'only' need to figure out which styles I need where. Splendid. — N4zroth, Jul 20 '20 at 23:18

score 0 · Accepted Answer · answered Jul 24 '20 at 23:05

If anyone else is using the DataTable without PrimeReact's CSS and theme, the following CSS is necessary to get it to work (in addition to using PrimeIcons):

body .p-checkbox {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  width: 20px;
  height: 20px;
}

.p-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.p-hidden-accessible input, .p-hidden-accessible select {
  -webkit-transform: scale(0);
  transform: scale(0);
}

body .p-checkbox .p-checkbox-box.p-highlight {
  border-color: $highlight_color;
  background-color: $highlight_color;
  color: #ffffff;
}

body .p-checkbox .p-checkbox-box {
  border: 1px solid #a6a6a6;
  background-color: #ffffff;
  width: 20px;
  height: 20px;
  text-align: center;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.p-checkbox .p-checkbox-box {
  width: 1.125em;
  height: 1.125em;
  line-height: 1.125em;
  border-radius: 2px;
  text-align: center;
}

body .p-checkbox .p-checkbox-box .p-checkbox-icon {
  overflow: hidden;
  position: relative;
  font-size: 18px;
}

.p-checkbox .p-checkbox-icon {
  display: block;
}

body .p-datatable .p-datatable-tbody > tr.p-highlight {
  background-color: $highlight_color;
  color: #ffffff;
}

PrimeReact DataTable: How to (visually) deselect rows

1 Answers1