T
TanStack•3y ago
plain-purple

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'}
    ]
  }
]
[
  {
    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>
<div>
  <ul>
    <li>group header 1</li>
    <li>item</li>
  </ul>
  <ul>
    <li>group header 2</li>
    <li>item</li>
  </ul>
</div>
2 Replies
foreign-sapphire
foreign-sapphire•3y ago
Hi, there was a thread before about nested virtual list, checkout this example https://discord.com/channels/719702312431386674/1053491290718875678/1054266025002156044
plain-purple
plain-purpleOP•3y ago
Thanks! I think this gives me a starting point to work from.

Did you find this page helpful?