Moving Table rows in SwiftUI

Question

Is it possible to support moving rows in a SwiftUI Table view?

I know there's List which can optionally support selection and drag-and-drop to move single or multiple rows. Since it seems similar, I would like to do this with a Table too, but I wasn't able to find any way to do this. Is this possible in SwiftUI? And if it is, what's the best way to do it?

Answer 1

Where I started to figure this out was the WWDC 2021 session "SwiftUI on the Mac: Finishing Touches". I highly recommend this video, as well as the preceding one "SwiftUI on the Mac: Build the Fundamentals". The code for both sessions is available.

Since you didn't include your code to show what you want to do, I have to use my code. I have a table based on an array of an Identifiable struct called Channel. Among a number of fields which are irrelevant to this problem, there is a field "id" of type UUID.

Following the model of the WWDC video, I made an extension to Channel:

    import UniformTypeIdentifiers
extension Channel {
static var draggableType = UTType(exportedAs: "com.yourCompany.yourApp.channel") 

// define your own type here. don't forget to include it in your info.plist as an exported type

static func fromItemProviders(_ itemProviders: [NSItemProvider], completion: @escaping ([Channel]) -> Void) {
    let typeIdentifier = Self.draggableType.identifier
    let filteredProviders = itemProviders.filter {
        $0.hasItemConformingToTypeIdentifier(typeIdentifier)
    }

    let group = DispatchGroup()
    var result = [Int: Channel]()

    for (index, provider) in filteredProviders.enumerated() {
        group.enter()
        provider.loadDataRepresentation(forTypeIdentifier: typeIdentifier) { (data, error) in
            defer { group.leave() }
            guard let data = data else { return }
            let decoder = JSONDecoder()
            guard let channel = try? decoder.decode(Channel.self, from: data)
            else { return }
            result[index] = channel
        }
    }

    group.notify(queue: .global(qos: .userInitiated)) {
        let channels = result.keys.sorted().compactMap { result[$0] }
        DispatchQueue.main.async {
            completion(channels)
        }
    }
}

var itemProvider: NSItemProvider {
    let provider = NSItemProvider()
    provider.registerDataRepresentation(forTypeIdentifier: Self.draggableType.identifier, visibility: .all) {
        let encoder = JSONEncoder()
        do {
            let data = try encoder.encode(self)
            $0(data, nil)
        } catch {
            $0(nil, error)
        }
        return nil
    }
    return provider
}

}

This makes an item in the table draggable. Of course, that does no good if there's nothing that will accept the drag. So, you have to make a change to your Table.

           Table(selection: $selection, sortOrder: $sortOrder) {

// for clarity, I've removed the table columns

            } rows: {
            ForEach(document.channels) { channel in
                TableRow(channel)
                    .itemProvider { channel.itemProvider }
            }
            .onInsert(of: [Channel.draggableType]) { index, providers in
                Channel.fromItemProviders(providers) { channels in
                       document.channels.insert(contentsOf: channels, at: newIndex)
                        }
                }
            }
        }

Now that will enable you to drag item or items from one window to another. You can, of course, drag within a table now, too. Unfortunately, you will end up making a copy in the new place. Not what you want to do in most cases. How to fix this? Delete the original copy! Of course, you can also run into the problem of indexing in the right place, and if you drag more than one item (from a discontinuous selection, even worse!), the results become, shall we say, undefined.

I still wanted to be able to drag multiple items from another table, so the final onInsert becomes a little more complex (Which I'm sure could be cleaned up a bot further):

                Channel.fromItemProviders(providers) { channels in
                        var newIndex = index

                        let intraTableDrag = document.channels.contains(where: {$0.id == channels[0].id})
                        if intraTableDrag && channels.count == 1 {
                            let oldIndex = document.channels.firstIndex(where: {$0.id == channels[0].id})
                            if newIndex > oldIndex! {
                                newIndex -= 1
                            }
                            for channel in channels {
                                let channelID = channel.id
                                removeChannel(withID: channelID)
                            }
                            let maxIndex = document.channels.count
                            if index > maxIndex {
                                newIndex = maxIndex
                            }
                       }
                        if (intraTableDrag && channels.count == 1) || !intraTableDrag {
                            document.channels.insert(contentsOf: channels, at: newIndex)
                            document.setChannelLocationToArrayOrder()
                        }
                }
            }

I hope this is enough to get you started. Good luck!