Autodesk / Autodesk/react-base-table

Dynamic row height with infinite scroll

オープン
#267 コメント 5 件 リアクション 2 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
1.5k
フォーク
170
PR マージ指標
30日以内にマージされた PR はありません

説明

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?

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

まず、リンクされたデモを再現し、examples/infinite-loading の例と比較します。estimatedRowHeight={50} と、行の高さを可変にするために追加されたカスタムレンダラーに注目してください。示されているケースで、動的な行の高さと無限スクロールのちらつきがなくなれば、作業は完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react, typescript
領域
frontend, performance
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
42/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。