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
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>