Customize Rendering

By default, the component structure renders as several nested DIV elements:

      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 item, group and footer render props.

  • ListContainer changes the rendering of the list element which wraps the items.
  • ItemContainer changes the element which wraps each item.
  • GroupContainer (available in GroupedVirtuoso) changes the element which wraps the group headers.
  • FooterContainer changes 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.

  • End