Autodesk / Autodesk/react-base-table

Dynamic row height with infinite scroll

Open
#267 5 comments 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1.5k
Forks
170
PR merge metrics
No merged PRs in 30d

Description

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?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.