[V2] Grid `onCellsRendered` function index params are not `visible[Row/Column][Start/Stop]Index`

[li1234yun]

Hello @bvaughn ,

I found the nest inner grid onCellsRendered index params are not correct. I had tested on my playground, and I’ve ruled out any mistakes I might have made. So I would like you to help confirm if there are any issues.

Playground

Code Sandbox

Snapshots

[li1234yun]

I found the reason, it should has add the overscanCount count.
Maybe the doc should be more clear :-)

Is it possible to provide independent return parameters like in v1, such as: visibleRowStartIndex, visibleColumnStartIndex?
Because rowStartIndex+overscanCount is very inconvenient to determine the starting index of the visualization window.

[bvaughn]

The indices rendered include the overscan count. That's intentional though I can see why it might be surprising.

I'd rather not go the route of v1 and add 8 parameters for this though. I think I'll keep the current behavior as is. Sorry for the confusion though!

[li1234yun]

Hello @bvaughn ,

I understand that you may not want to add too many parameters, but I have a question about how to get the visible[Row/Column][Start/Stop]Index. You can try to compute it. It will be very inconvenient!

I don't think increasing the complexity of library usage is the original intention of every author.

So I hope you can reconsider :-)

[bvaughn]

Sure ok. I've rolled it into #836

[bvaughn]

You can try the alpha release out: react-window@2.1.0-alpha.0

These methods will now receive two params– the first for visible rows and the second for all rows (including overscan), e.g.:

function onRowsRendered(
  visibleRows: {
    startIndex: number;
    stopIndex: number;
  },
  allRows: {
    startIndex: number;
    stopIndex: number;
  }
): void {
  // ...
}

function onCellsRendered(
  visibleCells: {
    columnStartIndex: number;
    columnStopIndex: number;
    rowStartIndex: number;
    rowStopIndex: number;
  },
  allCells: {
    columnStartIndex: number;
    columnStopIndex: number;
    rowStartIndex: number;
    rowStopIndex: number;
  }
): void {
  // ...
}

[li1234yun]

Thank you!👍 @bvaughn