macOS SwiftUI Table with contextMenu-CodePudding

Using SwiftUI's new

I tried adding the modifier to the TableColumn itself, but it shows a compile error:

Value of type 'TableColumn<RowValue, Never, Text, Text>' has no member 'contextMenu'

Here's what I have in terms of source code, with the contextMenu modifier in the content of the TableColumn:

struct ContentView: View {

    @Environment(\.managedObjectContext) private var viewContext

    @FetchRequest(sortDescriptors: [NSSortDescriptor(keyPath: \Item.name, ascending: true)])
    private var items: FetchedResults<Item>

    @State
    private var sortOrder = [KeyPathComparator(\Item.name)]

    @State
    private var selection = Set<Item.ID>()

    var body: some View {
        NavigationView {
            Table(items, selection: $selection, sortOrder: $items.sortDescriptors) {
                TableColumn("Column 1") {
                    Text("Item at \($0.name!)")
                        .contextMenu {
                            Button(action: {}) { Text("Action 1") }
                            Divider()
                            Button(action: {}) { Text("Action 2") }
                            Button(action: {}) { Text("Action 3") }
                        }
                }

                TableColumn("Column 2") {
                    Text($0.id.debugDescription)
                }
            }
            .toolbar {
                ToolbarItem {
                    Button(action: addItem) {
                        Label("Add Item", systemImage: "plus")
                    }
                }
            }

            if selection.isEmpty {
                Text("Select an item")
            } else if selection.count == 1 {
                Text("Selected \(items.first(where: { $0.id == selection.first! })!.id.debugDescription)")
            } else {
                Text("Selected \(selection.count)")
            }
        }
    }
}

So, how can I add a context menu to the entire row inside the Table?

CodePudding user response：

You can make cell view with the following extensions and use it for each column cell, then it will be clickable in any row place

Text("Item at \($0.name!)")
    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading) // << this !!
    .contentShape(Rectangle())                                            // << this !!
    .contextMenu {
        Button(action: {}) { Text("Action 1") }
        Divider()
        Button(action: {}) { Text("Action 2") }
        Button(action: {}) { Text("Action 3") }
    }