Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ScrollToRow does not work for the last few rows

See original GitHub issue

Describe the bug

If passed one of the last rows, ScrollToRow fails to make it visible, be it with “center” or “bottom” position.

Tabulator Info

Which version of Tabulator are you using: 4.2.2

Working Example

<html>
  <head>
    <link href="https://unpkg.com/tabulator-tables@4.2.2/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.2/dist/js/tabulator.min.js"></script>
  </head>
  <body>
    <div id="example-table"></div>
    <input id="row-id"/>
    <button onclick="scroll_to_row('bottom')">Scroll to row (bottom)</button>
    <button onclick="scroll_to_row('center')">Scroll to row (center)</button>
    <button onclick="scroll_to_row('top')">Scroll to row (top)</button>
    <script type="text/javascript" src="test.js"></script>
  </body>
</html>

var tabledata = [];
for (i = 1; i < 100; i++) {
  tabledata.push({id:i, name:i});
}
var table = new Tabulator("#example-table", {
  height:205,
  data:tabledata,
  layout:"fitColumns",
  columns:[
    {title:"Name", field:"name", width:150},
  ],
});
function scroll_to_row(kind) {
  table.scrollToRow(document.getElementById("row-id").value, kind, true);
}

Expected behavior

When typing “98” in the field and click on “Scroll to row (bottom/center)”, I would expect row 98 to become visible, but Tabulator does not scroll enough.

Screenshots

The movie below illustrates to scrolling to row 50 works fine with any of the three modes; but 98 works only with top, not bottom nor center.

tabulator_bug