search

bvaughn / react-window

React components for efficiently rendering large lists and tabular data
https://react-window.now.sh/
MIT License
15.72k stars 782 forks source link

Can we have columns with varying widths on the same row? #627

Closed shivaksk1 closed 2 years ago

shivaksk1 commented 2 years ago

Hi, I am evaluating if I can use react-window to create an EPG (Electronic Program Guide) which has the following layout.

image

Each column in a row can have a different width (column indicates an event. column width is proportional the event duration, in seconds).

I went through the documentation, examples and also tried using the library by configuring parameters/functions like columnWidth, but couldn't find a way to do it.

Could you please let me know if react-window can be used to achieve the above layout?

angel-langdon commented 2 years ago

@shivaksk1

I don't know, but as a work-around maybe you could to a List with each item being independent of it's layout distribution

Charles-XD commented 2 years ago

@shivaksk1 You can use VariableSizeList for each row and sync their scrolls. Take a look at this: https://stackblitz.com/edit/react-ts-c7hjyp?file=EpgList.tsx

shivaksk1 commented 2 years ago

@Charles-XD yes, this meets my requirement. Thank you very much for the proposal, and the working code.