Table container, when scrolling content, the content will appear underneath and to the top of the column headings.

When the Table container is scrolled up the data rows just keep moving up and become unreadable with the column headings superimposed over the top.

Prior to scrolling upwards, the display will look like this.

However, if you start to scroll up

This behaviour does not seem to be the expected behaviour without any modifiers etc.

The following is the code I have been using.

import SwiftUI

struct Customer: Identifiable {
    let id = UUID()
    let name: String
    let email: String
    let creationDate: Date
}

struct SwiftyPlaceTable: View {
    @State var customers = [Customer(name: "John Smith",
                                     email: "john.smith@example.com",
                                     creationDate: Date() + 100),
                            Customer(name: "Jane Doe",
                                     email: "jane.doe@example.com",
                                     creationDate: Date() - 3000),
                            Customer(name: "Bob Johnson",
                                     email: "bob.johnson@example.com",
                                     creationDate: Date())]
    var body: some View {
        Table(customers) {
            TableColumn("name", value: \.name)
            TableColumn("email", value: \.email)
            TableColumn("joined at") { customer in
                Text(customer.creationDate, style: .date)
            }
        }
    }
}

#Preview {
    SwiftyPlaceTable()
}