How to apply a context menu to SwiftUI Table row? - swiftui

Question

I found that the new table component of SwiftUI 3.0 is like a toy, which can be used easily, but it is difficult to expand more functions.
TableRow and TableColumn inherit from the value object. How can I get the view of a row? I want to set a different ContextMenu for each row. In addition, I want to set the ContextMenu for the column header.
How to implement it on the basis of Table component? I don't want to use the List component.
struct Person: Identifiable {
let givenName: String
let familyName: String
let id = UUID()
}
#State private var people = [
Person(givenName: "Juan", familyName: "Chavez"),
Person(givenName: "Mei", familyName: "Chen"),
Person(givenName: "Tom", familyName: "Clark"),
Person(givenName: "Gita", familyName: "Kumar"),
]
#State private var sortOrder = [KeyPathComparator(\Person.givenName)]
var body: some View {
Table(people, sortOrder: $sortOrder) {
TableColumn("Given Name", value: \.givenName)
TableColumn("Family Name", value: \.familyName)
}
.onChange(of: sortOrder) {
people.sort(using: $0)
}
}

Answer 1

In order to have contextMenu working on SwiftUI 3.0 Table it is necessary to add it to every TableColumn item. Plus, if you want to add Double Tap support it is necessary to add it independently too.
Table(documents, selection: $fileSelection) {
TableColumn("File name") { item in
Text(item.filename)
.contextMenu { YOUR_CONTEXT_MENU }
.simultaneousGesture(TapGesture(count: 1).onEnded { fileSelection = item.id })
.simultaneousGesture(TapGesture(count: 2).onEnded { YOUR_DOUBLE_TAP_IMPLEMENTATION })
}
TableColumn("Size (MB)") { item in
Text(item.size)
.contextMenu { YOUR_CONTEXT_MENU }
.simultaneousGesture(TapGesture(count: 1).onEnded { fileSelection = item.id })
.simultaneousGesture(TapGesture(count: 2).onEnded { YOUR_DOUBLE_TAP_IMPLEMENTATION })
}
}

Answer 2

From macOS 13 this will work as expected:
To try it out use the Garden App from apple and replace the row section of the Table as below
} rows: {
ForEach(plants) { plant in
TableRow(plant)
.itemProvider { plant.itemProvider }
.contextMenu {
Button {
} label: {
Text("test")
}
}
}
.onInsert(of: [Plant.draggableType]) { index, providers in
Plant.fromItemProviders(providers) { plants in
garden.plants.insert(contentsOf: plants, at: index)
}
}
}