'Lazy loading SwiftUI Grid on both vertical and horizontal direction

As the title says I try to build a Grid view that loads lazily on both vertical and horizontal, the main goal is building a calendar for a list of employee, both the list and the calendar interval can be very large so they have to be rendered lazily. I've tried LazyHGrid and LazyVGrid but they only render views lazily on one direction. The further approach uses one LazyVStack for the whole view and one LazyHStack for each row, the loading is lazily (check print in the console) but while scrolling the views loses their position and the grid get's broken

struct ContentView: View {
    var body: some View {
        ScrollView([.horizontal, .vertical]) {
            LazyVStack(spacing: 20, pinnedViews: .sectionHeaders) {
                Section(header: columnHeaders) {
                    ForEach(0..<20) { row in
                        LazyHStack(spacing: 20, pinnedViews: .sectionHeaders) {
                            Section(header: rowHeader(with: "Employee \(row)")) {
                                ForEach(0..<100) { column in
                                    Text("Cell \(row), \(column)")
                                        .foregroundColor(.white)
                                        .font(.largeTitle)
                                        .frame(width: 200, height: 100)
                                        .background(Color.red)
                                        .onAppear {
                                            print("Cell \(row), \(column)")
                                        }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    var columnHeaders: some View {
        LazyHStack(spacing: 20, pinnedViews: .sectionHeaders) {
            Section(header: rowHeader(with: "")) {
                ForEach(0..<100) { column in
                    Text("Header \(column)")
                        .frame(width: 200, height: 100)
                        .background(Color.white)
                }
            }
        }
    }
    
    func rowHeader(with label: String) -> some View {
        Text(label)
            .frame(width: 100, height: 100)
            .background(Color.white)
    }
    
}

enter image description here

PS: I also need fixed headers, that is achieved in the code above using pinnedViews



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source