TanStackT
TanStack•3y ago•
2 replies
rubber-blue

Using virtual scroll with nested lists

I have a combobox dropdown that has groups of items (nested lists).

I have been struggling to figure out how to use virtual scrolling with this setup. Anyone have any suggestions?

This is the css framework I am using and must follow the provided dom structure for styling to work
https://www.lightningdesignsystem.com/components/combobox/#Grouped-options


Data is stored like this
[
  {
    label: 'group header1',
    items: [
      {label: 'item', value: 'item'}
    ]
  },
  {
    label: 'group header2',
    items: [
      {label: 'item', value: 'item'}
    ]
  }
]


Rendered into this type of structure
<div>
  <ul>
    <li>group header 1</li>
    <li>item</li>
  </ul>
  <ul>
    <li>group header 2</li>
    <li>item</li>
  </ul>
</div>
Was this page helpful?