Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect Page Size Calculation in Table Pagination #146

Open
lemkeprzemyslaw opened this issue Jan 31, 2025 · 0 comments
Open

Incorrect Page Size Calculation in Table Pagination #146

lemkeprzemyslaw opened this issue Jan 31, 2025 · 0 comments

Comments

@lemkeprzemyslaw
Copy link

Description
There is an issue with calculating the page size when both scrollbarV and virtualization are enabled. The page size is determined using Math.ceil, as seen in the following code snippet:

/**
 * Recalculates the sizes of the page
 */
calcPageSize(val = this.rows) {
    // Keep the page size constant even if a row has been expanded.
    // This is because an expanded row is still considered a child of
    // the original row, so the calculation uses rowHeight only.
    if (this.scrollbarV && this.virtualization) {
        const size = Math.ceil(this.bodyHeight / this.rowHeight);
        return Math.max(size, 0);
    }
    // If limit is passed, we are paging
    if (this.limit !== undefined) {
        return this.limit;
    }
    // Otherwise, use row length
    if (val) {
        return val.length;
    }
    // Default case
    return 0;
}

Problem
The current calculation treats the last row as fully visible even if just 1 pixel of it is displayed in the table. It does not account for the height of the bottom scrollbar. As a result, if the last row is partially visible but covered by the scrollbar, it is not included on the second page of the table. This leads to missing rows during pagination.

Expected Behavior
The table should fully display each row on every page. A row that is partially visible or obscured by the scrollbar should be treated as not visible and displayed on the next page. The pagination logic should ensure that only fully visible rows are counted on each page, preventing any rows from being cut off or excluded.

Steps to Reproduce

  1. Enable scrollbarV and virtualization.
  2. Ensure that the last row of the current page is partially visible but covered by the bottom scrollbar.
  3. Observe that this row is not included in the second page of the table.

Suggested Fix
Use Math.floor instead of Math.ceil to ensure that each table row is fully visible on every page. Additionally, modify the calculation to take the scrollbar height into account when determining the page size.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant