SwiftUI Table reorder columns - macOS - swift

Question

Is it possible to reorder columns in SwiftUI Tables using Drag and Drop?
Apple has introduced "Table" in SwiftUI 3.0 in summer 2021. It's the SwiftUI equivalent of NSTableView.
I was not able to find any hints in apples documentation regarding column reordering.
I'm speaking of reordering as we all know from NSTableViews like the one in Finder.
I used the sample code provided by Apple.
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"),
]
var body: some View {
Table(people, selection: $selectedPeople, sortOrder: $sortOrder) {
TableColumn("Given Name", value: \.givenName)
TableColumn("Family Name", value: \.familyName)
}
}
I also tried to build the table columns dynamically with for each. but that throws a bunch of debug errors.
#State private var columns = [
TableColumn("Given Name", value: \Person.givenName),
TableColumn("Family Name", value: \Person.familyName)
]
var body: some View {
Table(people, selection: $selectedPeople, sortOrder: $sortOrder) {
ForEach (columns, id: \.self) { column in
column
}
}
}
Seems like ForEach is not compatible with TableColumns:
Generic struct 'Table' requires that 'ForEach<[TableColumn<Person, Never, Text, Text>], TableColumn<Person, Never, Text, Text>, some AccessibilityRotorContent>' conform to 'TableColumnContent'
Static method 'buildBlock' requires that 'ForEach<[TableColumn<Person, Never, Text, Text>], TableColumn<Person, Never, Text, Text>, some AccessibilityRotorContent>' conform to 'TableColumnContent'

Answer 1

First of all, you should know that UITableView has only one column.
So to help you with your problem, I can suggest you do these steps.
To have a tableView with multiple columns, create multiple UITableView, and put them together on the UI. (in a way that each tableView will play as one column!)
Now you have some tables that sit next to each other, and each table will be playing as one column.
Now problem is that each table has its own scroll.
As UITableview is derived from UIScrollview you can get the scroll amounts in the 'scrollViewDidScroll' delegate method.
On this delegate method, get the offset of the scrollView which is being scrolled, and assign that value to the other tableViews.
firstTableview.contentOffset = scrollview.contentOffset
Now all tableViews will be scrolling simultaneously with the same px height and feels that they play as a single TableView with multiple columns.
In the end, you want to make the user be able to reorder the table columns (actually you have to make tableViews to be able to change their position)
To achieve this, you have to create a UICollectionView that every cell of a collectionView will be one of your tableView. and then use some packages like 'Reorder' to make cells to be reordered.
(Reorder GitHub address: https://github.com/pikachu987/Reorder)
summary:
Create a UICollectionView with 3 cells. (cell.hight = yourPageHeigh, cell.width = yourPageWidth/3)
Use 'Reorder' package to make cells reorderable.
Each cell of the collectionView will contain one of your UITableView.
By using 'scrollViewDidScroll' method, make all tables scroll simultaneously.
Now you have a table that has some columns and columns can be reordered.