T
TanStack•7mo ago
yelping-magenta

Is it possible to implement nested virtualization with @tanstack/virtual

Hey is it possible to implement nested virtualization with @tanstack/virtual, or is it better to flatten everything into a single list for better performance? I have a hierarchical data structure like this: 
const data = [
  {
    id: "m1",
    name: "Module 1",
    modules: [
      {
        id: "sub-m1",
        name: "Sub-Module 1",
        roles: [
          {
            id: "r1",
            name: "Role 1",
            tasks: [
              { id: "t1", name: "Task 1" },
              { id: "t2", name: "Task 2" }
            ]
          }
        ]
      }
    ]
  },
  {
    id: "m2",
    name: "Module 2",
    modules: [
      {
        id: "sub-m2",
        name: "Sub-Module 2",
        roles: [
          {
            id: "r2",
            name: "Role 2",
            tasks: [{ id: "t3", name: "Task 3" }]
          }
        ]
      }
    ]
  }
];
const data = [
  {
    id: "m1",
    name: "Module 1",
    modules: [
      {
        id: "sub-m1",
        name: "Sub-Module 1",
        roles: [
          {
            id: "r1",
            name: "Role 1",
            tasks: [
              { id: "t1", name: "Task 1" },
              { id: "t2", name: "Task 2" }
            ]
          }
        ]
      }
    ]
  },
  {
    id: "m2",
    name: "Module 2",
    modules: [
      {
        id: "sub-m2",
        name: "Sub-Module 2",
        roles: [
          {
            id: "r2",
            name: "Role 2",
            tasks: [{ id: "t3", name: "Task 3" }]
          }
        ]
      }
    ]
  }
];
Would it be better to virtualize each level separately or flatten the hierarchy into a single list and manage expansion manually? note: my list can be very long
1 Reply
conscious-sapphire
conscious-sapphire•6mo ago
You could only do flatten, I am not sure how can you proceed with nested virtulization, also representation and internal structure could be always different and that is what react-table also does.

Did you find this page helpful?