olifolkerd / tabulator

Interactive Tables and Data Grids for JavaScript
http://tabulator.info
MIT License
6.76k stars 821 forks source link

White space appears above first row when scrolling up with arrow key #4631

Open mariorodriguezruiz opened 1 week ago

mariorodriguezruiz commented 1 week ago

Describe the bug I'm experiencing an issue in Tabulator version 6.3.0 when scrolling up with the keyboard arrow keys in a table. When reaching the top of the table using the "up" arrow key, a large blank space appears above the first row. However, I noticed that removing the rowHeight parameter (currently set to rowHeight: 23) seems to fix the problem, so I believe the issue may be related to this setting.

Tabulator Info

Working Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabulator analytics</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.0/css/tabulator.min.css">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
        crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.0/js/tabulator.min.js"></script>
    <script type="text/javascript">        
        $(document).ready(function () { 
            initSearchTable();
        });

        function createMockDataRecordings() {
            const data = [];
            const thisMonth = (new Date()).getMonth() + 1;
            const thisYear = (new Date()).getFullYear();
            for (let i = 0; i < 500; i++) {
                data.push({
                    id: i,
                    name: "Person " + i,
                    progress: Math.floor(Math.random() * 100),
                    gender: "male",
                    rating: Math.floor(Math.random() * 5),
                    col: "red",
                    dob: "" + Math.floor(Math.random() * 31) + thisMonth + thisYear,
                    car: i % 3 == 0,
                    cheese: Math.floor(Math.random() * 100),
                    age: Math.floor(Math.random() * 100),
                    height: Math.floor(Math.random() * 100)
                });
            }
            return data;
        }

        function createSearchedRecsTableOptions(columns, recordings) {
            return {
                columns,
                data: recordings,
                height: "400px",
                movableColumns: true,
                layout: "fitDataStretch",
                rowHeight: 23,
            };
        }

        function createMockDataColumns() {
            return [
                {title:"Name", field:"name"},
                {title:"Progress", field:"progress", sorter:"number"},
                {title:"Gender", field:"gender"},
                {title:"Rating", field:"rating"},
                {title:"Favourite Color", field:"col"},
                {title:"Date Of Birth", field:"dob", hozAlign:"center"},
                {title:"Driver", field:"car", hozAlign:"center", formatter:"tickCross", sorter:"boolean"},
                {title:"Cheese Preference", field:"cheese", hozAlign:"center", formatter:"star", width:100},
                {title:"Age", field:"age", sorter:"number", width:100},
                {title:"Height", field:"height", sorter:"number", width:100}
            ];
        }

        function initSearchTable() {
            const recordings = createMockDataRecordings();
            const columns = createMockDataColumns();
            const options = createSearchedRecsTableOptions(columns, recordings);
            const target = "#searchedRecordingsTable";
            new Tabulator(target, options);
        }
    </script>
</head>
<body>
    <div id="searchedRecordingsTable"></div>
</body>
</html>

To Reproduce

  1. Create a table using Tabulator with the parameter rowHeight set (e.g., rowHeight: 23).
  2. Populate it with several rows of data (enough rows to generate significant scroll length).
  3. Use the keyboard "down" arrow key or scroll to reach the very bottom of the table.
  4. Then, use the keyboard "up" arrow key to scroll back to the top.
  5. Observe the blank space that appears above the first row once the top is reached.

Expected behavior The first row should align with the top of the table, with no extra white space above it.

Actual Behavior A large blank space is displayed above the first row, which disrupts the table layout. Removing the rowHeight parameter seems to prevent this issue.

Screenshots v3

Desktop (please complete the following information):

Additional context The issue only occurs when scrolling to the top using the "up" arrow key on the keyboard after having scrolled to the very bottom. This problem does not appear when scrolling up with a mouse or trackpad. It is important to have a large number of rows in the table to create a scroll with a significant distance. This behavior has been tested on multiple browsers with consistent results, suggesting that the rowHeight setting may affect keyboard navigation specifically.