Table rows don't get appended on scroll if height is too large

[mootari]

Given a table with a fixed height

Inputs.table(penguins, { height: 400 })

scrolling through the table won't append new rows.

The exact height is dependent on various factors like page zoom. I tested (and found) the issue in Chrome, Firefox and Safari. Note that Safari may still load new rows on the first scroll.

Demonstration:

Kapture.2023-03-04.at.11.57.18.mp4

[tophtucker]

Reproduction: https://observablehq.com/d/686eb071dc56c459. For me, it breaks at ≥ 379px tall, and above ~555px you can see even before you try to scroll that only the first page has loaded.

[mootari]

@simond shared the correct workaround in #261: Increase the number of rows until they expand enough beyond the visible area.

(I used to set - and recommend - {rows: Infinity} because I misunderstood what the option actually does.)

[mootari]

A fix might be to attach an IntersectionObserver to the last row and have that trigger appendRows() for the next chunk.