How to apply a context menu to SwiftUI Table row?

Question 1

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)

}

}

Question 2

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 })
    }
}

AlbertUI · Answer 1 · 2021-11-21T10:57:48

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 })
    }
}

Thank you for your reply, but this implementation can only work on the content of the cell, cannot completely cover the content of the whole line, and will not take effect for the blank part of the line.

How to apply a context menu to SwiftUI Table row?

In other languages

This page is in other languages

Popular in the category