Dynamic row height with infinite scroll

[zorzysty]

I'm unable to get dynamic row height to work nicely with infinite scroll. It's flickering as you can see in the demo (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?

[nihgwu]

The problem is that the row height is not stable with certain data, and changes every time the table gets re-rendered, here is a working example I simply make the dynamic height stable based on rowIndex Math.random() > 0.5 -> rowIndex % 2 === 1

BTW you've made great progess since #266 👍

[zorzysty]

Thanks for the suggestion. Unfortunately, I still can't get it to work with real-life data from the API. When I base the content height on actual param from the row data it is still flickering - just as in the demo with Math.random.

Here's the renderer:

const buttonCellRenderer = ({ rowData }) => {
  return (
    <button
      style={{ height: `${100 + (rowData.multi ?? 0) * 100}px` }}
      onClick={() => console.log(rowData.customerName)}
    >
      show customerName
    </button>
  )
}

and here's the table:

  return (
    <BaseTable
      data={data}
      width={1000}
      height={500}
      estimatedRowHeight={500}
      // estimatedRowHeight={({ rowData }) => 100 + (rowData.multi || 0) * 100}
      onEndReachedThreshold={1}
      onEndReached={handleEndReached}
      fixed
      loadingMore={loadingMore}
    >
      <Column
        key="accountOrderNumber"
        dataKey="accountOrderNumber"
        width={100}
      />
      <Column key="status" dataKey="status" width={100} />
      <Column key="orderTotal" dataKey="orderTotal" width={100} />
      <Column
        key="accountBatchNumber"
        dataKey="accountBatchNumber"
        width={100}
      />
      <Column key="customerName" dataKey="customerName" width={100} />
      <Column key="button" width={200} cellRenderer={buttonCellRenderer} />
    </BaseTable>
  )

[zlldnv]

@nihgwu I will also confirm that my data is flickering with dynamic row heights, but in all other ways(if not scrolling) it does it job all of the time. So also waiting for the solution of the problem :(
Maybe there is a way how it is possible to memoize table heights somehow?

[zlldnv]

@zorzysty I have also faced same issue and found the solution. Just make sure that you are using unique id for the each table row in your data.

[zlldnv]

@nihgwu I guess issue can be closed