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

[ottbasics]

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

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]

@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]

@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

[ottbasics]

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