By default, the component structure renders as several nested
scroller (div) |-viewport (div) |-list (div) |-one or more sticky items (div) |-items (div) |-footer (div)
The Virtuoso components expose several
Container properties which allow you to change the elements rendered.
Notice: changing the structure elements is in general more complex; you need to accept and pass a few properties (check the example). Change the containers only if you need to do that. Most of the time, you can get away with tweaking the
footer render props.
ListContainerchanges the rendering of the
listelement which wraps the items.
ItemContainerchanges the element which wraps each item.
GroupedVirtuoso) changes the element which wraps the group headers.
FooterContainerchanges the element which the footer.
The example below replaces the
DIV elements with
UL/LI. Notice that the margins of the elements are removed in order for the measurement to work as expected.