Cannot scroll vertically with mouse wheel when mouse is hovering over frozen table columns

UI Components for React
Post Reply
kbeeveer46
Posts: 2
Joined: 09 Oct 2021, 14:50

26 Oct 2021, 01:48

I have a DataTable with 9 frozen columns. I also have paging enabled and a scroll height set to 550px (see code and output pictures below). When my mouse cursor is hovering over any of the frozen columns rows I am unable to scroll up and down the table rows using my mouse wheel. When I move my cursor over any of the unfrozen columns or the vertical scroll bar I am able to scroll up and down the table rows using my mouse wheel. The left table that gets created by the frozen columns isn't recognizing that it should be able to scroll down.

Just in case some of the other table settings were causing the issue I removed every setting on the table except for the frozen columns and the issue still persists. I even removed all the filters for every column along with testing a table with only 30 rows and that didn't help. Anyone come across this issue before and know how to fix it? I am using the latest version of PrimeReact and React 16.13.1. The issue happens in Chrome/Edge and Firefox.

EDIT: This also happens in the documentation example. You can't scroll the table up and down if your cursor is over a row in the Name column. It scrolls the entire browser window and not just the table https://primefaces.org/primereact/showc ... ble/scroll


Image

Code: Select all

<DataTable
            dataKey="Id" value={TaxReturnsData}
            ref={_TaxReturnsDataFilteredRef}
            stripedRows className="p-datatable-sm"
            sortMode="multiple"
            selectionMode="checkbox" selection={TaxReturnsDataSelected} onSelectionChange={this.onTableSelectionChanged}
            scrollable frozenWidth="1135px"
            loading={!TaxReturnDataLoaded}
            scrollHeight="550px"
            rows={250} paginator paginatorTemplate="CurrentPageReport PrevPageLink NextPageLink" currentPageReportTemplate="{first} to {last} of {totalRecords}"
          >

            <Column selectionMode="multiple" style={{ width: "35px", height: "65px" }} frozen></Column>
            <Column field="LegalEntity" header="Legal Entity" style={{ width: "150px", height: "65px" }} sortable frozen filter filterElement={this.LegalEntityFilter()}></Column>
            <Column field="Period" header="Period" style={{ width: "100px", height: "65px" }} sortable frozen filter filterElement={this.PeriodFilter()}></Column>
            <Column field="State" header="State" style={{ width: "100px", height: "65px" }} sortable frozen filter filterElement={this.StateFilter()}></Column>
            <Column field="Jurisdiction" header="Jurisdiction" style={{ width: "150px", height: "65px" }} sortable frozen filter filterElement={this.JurisdictionFilter()}></Column>
            <Column field="TaxForm" header="Tax Form" style={{ width: "150px", height: "65px" }} sortable frozen filter filterElement={this.TaxFormFilter()}></Column>
            <Column field="Location" header="Location" style={{ width: "150px", height: "65px" }} sortable frozen filter filterElement={this.LocationsFilter()}></Column>
            <Column field="TaxpayerID" header="Taxpayer ID" style={{ width: "150px", height: "65px" }} sortable frozen filter filterElement={this.TaxPayerIdFilter()}></Column>
            <Column field="TaxReturnType" header="Original/Amended" style={{ width: "150px", height: "65px" }} sortable frozen filter filterElement={this.ReturnTypeFilter()}></Column>
            <Column field="GrossSales" header="Gross Sales" style={{ width: "135px", height: "65px" }} sortable body={this.TaxReturnTableBodyTemplate} footer={this.TaxReturnTableFooter} filter filterElement={this.GrossSalesFilter()}></Column>
            <Column field="TaxableSales" header="Taxable Sales" style={{ width: "145px", height: "65px" }} sortable body={this.TaxReturnTableBodyTemplate} footer={this.TaxReturnTableFooter} filter filterElement={this.TaxableSalesFilter()}></Column>
            <Column field="TaxablePurchases" header="Taxable Purchases" style={{ width: "170px", height: "65px" }} sortable body={this.TaxReturnTableBodyTemplate} footer={this.TaxReturnTableFooter} filter filterElement={this.TaxablePurchasesFilter()}></Column>
            <Column field="SalesTax" header="Sales Tax" style={{ width: "120px", height: "65px" }} sortable body={this.TaxReturnTableBodyTemplate} footer={this.TaxReturnTableFooter} filter filterElement={this.SalesTaxFilter()}></Column>
            <Column field="UseTax" header="Use Tax" style={{ width: "110px", height: "65px" }} sortable body={this.TaxReturnTableBodyTemplate} footer={this.TaxReturnTableFooter} filter filterElement={this.UseTaxFilter()}></Column>
            <Column field="OtherTax" header="Other Tax" style={{ width: "125px", height: "65px" }} sortable body={this.TaxReturnTableBodyTemplate} footer={this.TaxReturnTableFooter} filter filterElement={this.OtherTaxFilter()}></Column>
            <Column field="TotalTax" header="Total Tax" style={{ width: "120px", height: "65px" }} sortable body={this.TaxReturnTableBodyTemplate} footer={this.TaxReturnTableFooter} filter filterElement={this.TotalTaxFilter()}></Column>
            <Column field="Adjustments" header="Adjustments" style={{ width: "140px", height: "65px" }} sortable body={this.TaxReturnTableBodyTemplate} footer={this.TaxReturnTableFooter} filter filterElement={this.AdjustmentsFilter()}></Column>
            <Column field="TotalTaxPaid" header="Total Tax Paid" style={{ width: "120px", height: "65px" }} sortable body={this.TaxReturnTableBodyTemplate} footer={this.TaxReturnTableFooter} filter filterElement={this.TotalTaxPaidFilter()}></Column>

          </DataTable>

mcandu
Posts: 107
Joined: 20 Jan 2021, 16:31

04 Nov 2021, 13:30

Hi,

Could you please check new DataTable with the last version of PrimeReact ?
If the issue still persist, please let us know.

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests