Bug in DataTable selection and Column

[patrick-radulian]

I'm submitting a ...

[x ] bug report

Plunkr Case (Bug Reports)
https://plnkr.co/edit/iT7L9DPBjLcPEADbpSqV?p=preview

Current behavior
Bug One:
If I instantiate a DataTable with scrollable={true} and then use a Column with selectionMode="multiple" as well as frozen={true}, then the scrolling behavior of the DataTable breaks.

Bug Two:
If I use a DataTable with lazy={true} and onLazyLoad={someLazyLoadFunction} and then use a Column with selectionMode="multiple", then the selection of rows AND the selection of the entire page/result-set is broken.

Clicking the checkboxes selects the rows (or the entire result-set) but the DataTable does not re-render the checked / selected state of the rows. It renders the correct "checked" state only after paginating once. If have 10 items per page, you are on page one, select a row, then paginate to page 2 and back to page 1, the row will show up as selected - but not before that.

Expected behavior
One:
The DataTable should allow to be used with scrollable={true} and mutiple frozen Columns INCLUDING a frozen Select-Column, without breaking the scroll behavior.

Two:
The DataTable should immediately render the checked state of rows, even when using lazy={true}

Minimal reproduction of the problem with instructions
See the Plunkr link above.

• React version:
  16.3.1

• PrimeReact version:
  1.5.1

• Browser:
  Chrome 65.0.3325.181 (64bit)
  Firefox Quantum 59.0.2 (64bit)
  Microsoft Edge 41.16299.334.0

• Language:
  ES6

[mertsincan]

Bug One:
If I instantiate a DataTable with scrollable={true} and then use a Column with selectionMode="multiple"
as well as frozen={true}, then the scrolling behavior of the DataTable breaks.

Firstly, you need to use unfrozenWidth attribute. Exp;

<DataTable scrollable={true} frozenWidth="120px" unfrozenWidth="200px" ...>

There are two solutions to solve alignment issue between row height in FrozenTable and rows height in UnFrozenTable. You can add a dummy column or give height to rows. As you know, we can not know the contents of the column elements and need to search all the rows to find the column with the highest height in each row. This may cause the performance issue on the dataTable with large data.
Exp;

<DataTable
                    scrollable={true}
                    value={this.state.cars}
                    totalRecords={40}
                    selection={this.state.selectedCars}
                    onSelectionChange={this.onSelectionChange}
                    rows={this.state.rowsPerPage}
                    paginator={true}
                    frozenWidth="120px" unfrozenWidth="200px">
                    
              <Column expander={true} style={{width: "60px"}} frozen={true} />
              <Column selectionMode="multiple" style={{width: "60px"}} frozen={true} />
              <Column frozen={true} field="vin" header="Vin" body={this.colTemplate} editor={(props) => this.editor(props, "vin")} />

              {dynamicColumns ? (
                dynamicColumns
              ) : (
                <Column field="" header="" />
              )}
</DataTable>

Bug Two:
If I use a DataTable with lazy={true} and onLazyLoad={someLazyLoadFunction} and then use a Column with selectionMode="multiple", then the selection of rows AND the selection of the entire page/result-set is broken.

I'll work on it and get back to you.

[patrick-radulian]

Awesome, thanks for the reply - I'll be waiting