Autodesk / Autodesk/react-base-table

Dynamic row height with infinite scroll

Offen
#267 5 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
1.5k
Forks
170
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

I'm unable to get dynamic row height to work nicely with infinite scroll. It's flickering as you can see in [the demo](https://autodesk.github.io/react-base-table/playground#MYewdgzgLgBAKgeTgQQDIH0DKBJAWgURgF4YBGABnIFYAoUSWABWQHF8s9CSrya7xoMUABsArgFtIxGAHMApmDkAnAIZQ5AYRBjJEABQUAlPwYwAIshTT5i1erNqVekRMgAaeEjQcCxk4IAzAEsADzkAEy0dKRIXXQA6cRUABz1nbVcPOLBsMHC5EMNiAD4YAG8aGBhhOVgApRAALwVKmCCAmHTo3PyQmAAeGAAmIvqmhWko13iAMQbmsDMgpTlgKCDweNR8GbhW9s7snoKYUoAOUfmJkinJWavF5dX1zYAlbBYACT2qlahRJRgcoweKg7IeMYLGAAXxo0MM8XowDUegqVSqAGs5ABPABcMAARCpiQS3K0qgB3ILhKAAC3xAGZKGT0TB1lAaviCeIQAArFSk8lCOTCYSvBT5FZKfF6IpEUp6IVVfrhIIAN2KSvRKvVxWJKn6AHpVRqtcqTcUAEbWo0Ws3lACyalp8VUeRA4llpxg5HiVBgADIA517crNayI9qLcAY7bdaGo7rwsm46bI6yjeH04ZYZHU1mqoYWTC-PRBPhxMkoNjpNBsTVwvETQADVq0uRBGS0qD4ijkACkAG5WqqIMlhCo8TAAjUQsOqiphJ2wABaILqcQQfHABTqJTzmC80TQdrYlf0dRgHvCq-KYet-ywBpQNRyaRY7H1FTiOQQVtVMZxHKIUoDdCAAhAJRxHxZ9Xz0ch8hkQwD1hVooBAYDWVAlRIAgqCYJAF91D0BkADYELkJCUJoB8y1gVAQBUSVa2rBsm3Vf8YFHcdJ3xIIwCXRQV0tYQQGADED0tSDJRXVRVWPXtKCHVokiUGR+PxIZkjnVopKUSVNO0mAIG0akYAAYnIUiAE5SPCAB2STpOUYTCPQ8Rz20SD8WwyBkhUFYrwPVT1LAQydMpak6XxAASMpkgaZIIBKToEpAJL4ggJJRRgAB+MghhgTSRmhbSD3bTtu1i+LEuS+VUtqzLsuEPKCqK4YSrK1ocKCJIXjCmA4tg9RoR9eJ7KoZLBLkAK2jAYIwHXOR7z4OiYAYpj+JkVBJ2UFj6widi1U47iJynGcCgPRdlzXDctxvPcDyPE8AjPC9d23Xc710lRxJkBpRDyTzROlGA1MtJwhioKgPChmHhmhjxfQZZCVIC0L8XIA8qRpekyCU8qOy7a8+2U2iBHoxjVTAGQHUguQduxPaSDrNiW1aZIQH4vcVzkNVd3usBwGWn6-oBvIYJkCGSKGDxyI8ayABYkfiFGD05iB1w2AaVEtEyxHUJyoHcxlyC6qoagCa8eGUqpfPAyDoLZMCJ3UAANPQVxt1Gqn85MtvxKgjNIIOIpgPSZLkoIFPx82uKCMczvxC6w+umRVyWzdPtvfcaNWin1qpra6ZWOAClgFnWMOsccM4kRvIsgIm+C9H+Nkyrra68nTDgEBtAhpR9rZjiRwTnjztnK6l3T265Czh7vqqZ71lezzbyvfEa53YTagpOQFBbtS26k42PUUrv89MGY+73IfDvZqpTt46dJ+66eM7u7PHtaZfTzXy9rw7hzoTDuikBwrRoAUTmShYD5ACCoUQwhYDAAnBAZKyBkjJBgOXCUyVxS-SgPELQlZhZXkwsZIib4SBonROERw+IADaABdYsFsi40x8koUQchWHVHYbTemydFwQB4UKUSTEIjIFFEI4QIjiyoQArUYAtIHAvj0CAJuIiK4+g8EucQ65pDMDYD4fARQaG-FqACIE+QzokUoOQBEdIFBpDlKUcx6I-hWPMJYZAmUlw7nUZo2oHgNEBC0TAAA1NUXq65jCsnhK0BRfCmKqKcGYkCtIE7xACEolRjh4IeCdHSV0OFwgei9IMX0hV8rkHakY9gOBfDxCcWAPQdCXwpXcVUA4egACEdIsnoATnTQGUAiieMBFqAZEBMq1EwJQ1E9p2kqF4aycR1MZAyLkfadZkjpFcUcPEGoNM6QDBgPUkxqySxCgSVUJJ6yS5yC9O46ZsyoDzLgmUZJGzHmcO4dcrCmSZk5KgMo1JehXnQFfE2Q5xyZB0kce2VpyzOlah6f0oF8QhkQBGVecZljJmRkhXMhZXTaH0JgAw0EzTMVQvUDCl8HhqXLJYTs-hvzpzCNEemb5ezhD4mWUchQ8LaRnIuY0-AVzbnomlUk2kpSaj4DyPg5RERpDozqm4oUBDtZ6AAOTgCVeEFV7Zwh6sMHoDVcT0RrS+esrauj2X00dRI8IUiWqjRIJCyhQoen2ppjAAAPoG75xd6ZBpDbst1op8X-EJeiV5Dz6aykSXwKo8q8g1HFOs6QXp6ovNpSSz5WplmMNZZGf1mznbcN4dKu2mL1ngutUkwKkoKxVhrCQPNWrWQ9O9dCytsavFgEQcIIUEygT9HbdWYoAA5DCKKVBqhUEECcIk5BGmndiLMLaJTKAQPzJQZ1c2uPIVUW1oaaYup+eGz1bJaU+t9R0PQlbHnWtZBOkMPL+gbRvSsRmygCzph-U60u5dii-q2jAR5RpIM00eWXEIUAgN5l-XtLKi4WqGhQ9qQ0cGBH-t2koHD762jPsHVqT9ipv34YA8RhMIGJGD2w-aWD-C6MkbTR4glQIR2ilTa0UAJDFBXiWOEXFUBnkZMGcMkAozpCgW4dJmZjb8nNq40JzmImoAAHVV3CAAKpgB5KMqTgKZM4rk2Qkg8DZFyAExYvIygzM2oLl85Z16HWXoIzw3l0aPUKYfa+cdPGv0Rn6Dh5Uvd+4BUi9qGuYAINUzVSiuF0VyiCrS7SaERoEtxeVHl91ByOlRvxGUKN7rmkgHmUoLasocuGjywxy0ohT5AnABofxGIiBlFeRm8IWaRRU2hMUcUNhlCviNC1trcWjTReEAPWbcBdY1ATMEMI4QEy-nWH1CIrwQAUk+ETbsPWeDkFzDyoQGRdA9fWxEW4kALs8uWT15ZT30yjhWxEHrlb3sVtA3IH7AO-sRkNcqmaqrwhwFpCsCAtJtDhB60yc7CYwfGoh6anrfWFVyCNSaiIIPWQgEPWdcUTmpRY8xa2-dJPJyE-RHPDtZPJTKEp1k6nSgt305Y3mHn6J1OwiAA) (click "Regenerate" if data does not appear at first).

I created this demo by taking https://autodesk.github.io/react-base-table/examples/infinite-loading example and adding `estimatedRowHeight={50}` and an additional column with a custom renderer which makes rows of different height.

Is there any easy way to make it work?

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, die verlinkte Demo zu reproduzieren und sie mit dem Beispiel examples/infinite-loading zu vergleichen. Konzentriere dich dabei auf estimatedRowHeight={50} und den hinzugefügten benutzerdefinierten Renderer, der Zeilen mit variabler Höhe erzeugt. Die Arbeit ist abgeschlossen, wenn dynamische Zeilenhöhen und unendliches Scrollen im demonstrierten Fall nicht mehr flackern.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript
Bereich
frontend, performance
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
42/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.