SwiftUI: Large grid view - performance vs. layout issues

Question

I'm trying to build a large spreadsheet type view with SwiftUI that needs to be able to handle 5000 rows and 200 columns.

With this amount of data it seems to be necessary to use lazy loading in both axes. With the following code performance is great, but it seems due to the lazy loading in the LazyHStack there are layout issues when scrolling fast vertically and horizontally at the same time (see video below). When changing the LazyHStack to a regular HStack the layout issues are gone, but performance is unbearable. Is there any way to have both?

ScrollView([.vertical, .horizontal], showsIndicators: true) {
    LazyVStack (alignment: .leading, spacing: 0){
         ForEach((1...5000), id: \.self){ item in
              LazyHStack (spacing: 0) {
                    ForEach((1...200), id: \.self){ cell in
                          Text("Cell")
                             .frame(width: 100, height: 50)
                             .border(Color.green)
                    }
               }
          }
     }
}
.frame(width: 800, height: 600)

Btw. I have also tried using LazyVGrid which also has performance issues with a large amount of columns.

Answer 1

Try using UICollectionView wrapped in UIViewRepresentable. Performance-wise it works much better than LazyVGrid, but I'm not entirely sure how it will behave with this kind of layout.

Here's an example of implementation.

Let me know, if you find a better solution!