Auto-size list based on height of children about react-virtualized HOT 6 CLOSED

1 The component height but instead calculate based on the just the heights of the element itself.

I'm thinking of creating a wrapper component that will automatically expand a list or table to fill the available width and height. I'm thinking of something kind of like this:

<AutoSizer
  ChildComponent={VirtualScroll}
  rowsCount={list.size}
  rowHeight={20}
  rowRenderer={() => {
    // Your renderer here
  }}
/>

2 The rowHeight and instead base that on the content of the height

Supporting dynamic row height is pretty complicated. I actually created issue #23 to experiment with this.

from react-virtualized.

Okay so I created an AutoSizer component as described above. I'd be interested in hearing your thoughts once you've had a chance to play with it. I'll try to release it in an update sometime this afternoon.

from react-virtualized.

This component is available in release 2.5.0. Check it out.

from react-virtualized.

@bvaughn Happy New Year and Sorry for disappearing but just getting a chance to get back to the project and this use-case. I am excited to try it out!

(Btw, the link to docs on Autosizer lead to an empty page. Not sure if that was the wrong link or you just haven't had a chance to add them. Either way, thought I should mention it.)

Thanks again for your work and receptiveness to issues! :)

Edited to withdraw a question I asked. I just didn't read the description of the component carefully :/

from react-virtualized.

Happy new year to you also, @oyeanuj!

Thanks for pointing out the bad docs link. Looks like I forgot to actually write those docs. (Whoops.) I will fix it momentarily. :)

from react-virtualized.

Thanks for this wonderful library, @bvaughn. Which I have used in some places in different apps. But still, I am quite confused about some concepts. Is there any demo for chat messages virtualization which will have auto height rows and auto height List? i.e there is no fixed height for the list as well as rows.

from react-virtualized.