search

observablehq / inputs

Better input elements
https://observablehq.com/framework/lib/inputs
ISC License
127 stars 34 forks source link

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

Open mootari opened 1 year ago

mootari commented 1 year ago

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:

https://user-images.githubusercontent.com/322014/222896160-7881d4a1-1b59-418c-9bc4-66894dfa245a.mp4

tophtucker commented 1 year ago

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 commented 7 months ago

@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 commented 7 months ago

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