TableColumn with text and image on iPadOS

Question

I'm trying to display a Label in a TableColumn but the header is not rendered properly:

Here's some code:

struct Computer: Identifiable {
    let id: UUID
    let name: String
    
    init(_ name: String) {
        id = UUID()
        self.name = name
    }
}

struct ContentView: View {
    private var computers = [Computer("iMac"), Computer("MacBook"), Computer("Mac mini")]
    
    @State private var selectedComputers = Set<Computer.ID>()
    @State private var sortOrder = [KeyPathComparator(\Computer.name)]
    
    var body: some View {
        Table(computers, selection: $selectedComputers, sortOrder: $sortOrder) {
            // Header rendered incorrectly
            TableColumn("Name", value: \.name) { computer in
                Label(computer.name, systemImage: "desktopcomputer")
            }
            
            // This works:
            // TableColumn("Name", value: \.name)
        }
    }
}

If I use a Text element instead (or not define any custom view for the TableColumn), the header is rendered properly:

Am I doing it wrong or this is a bug?

I'm clearly missing something, but running your code I don't see _any_ table header! — Ashley Mills, Feb 22 '23 at 15:04
The header will only show on iPadOS and macOS. It is hidden on iOS. — GSD, Feb 22 '23 at 19:08

score 0 · Answer 1 · answered Feb 22 '23 at 15:33

0

Someone suggested this solution:

Text(Image(systemName: "desktopcomputer")) + Text(verbatim: " ") + Text(computer.name)

Not great but at least it works.

answered Feb 22 '23 at 15:33

GSD

149
6

TableColumn with text and image on iPadOS

1 Answers1