SwiftUI/Table/Sort: Problem with the sort function on a Table

Question

Created Jul ’23

Replies 1

Boosts 0

Participants 1

Hello everyone. I'm having a problem using the table sort function in Swiftui. Here's an example to illustrate (data is provided by an API that returns fake data) :

struct CompanyListResponse: Codable {
    let status: String
    let code: Int
    let total: Int
    let data: [CompanyData]
}

struct CompanyData: Codable, Identifiable {
    let id: Int
    let name: String
    let email: String
}

@Observable
final class ViewModel {
    var companies : [CompanyData] = []
    
    func fetch() async {
        guard let url = URL(string: "https://fakerapi.it/api/v1/companies?_quantity=200") else { return }
        do {
            let (data, _) = try await URLSession.shared.data(from: url)
            let decoder = JSONDecoder()
            let response = try decoder.decode(CompanyListResponse.self, from: data)
            self.companies = response.data
        } catch {
            print("Error fetching data: \(error)")
        }
    }
}

struct ContentView: View {
    @State private var viewModel = ViewModel()
    @State private var sortOrder : [KeyPathComparator<CompanyData>] = [.init(\.name, order: SortOrder.forward)]

    var body: some View {
        Table(of: CompanyData.self, sortOrder: $sortOrder) {
            TableColumn("Name", value: \.name)
            TableColumn("Email", value: \.email)
        } rows: {
            ForEach(self.viewModel.companies) { cie in
                TableRow(cie)
            }
        }
        .task {
            await self.viewModel.fetch()
        }
        .refreshable {
            await self.viewModel.fetch()
        }
        .onChange(of: sortOrder) { oldValue, newValue in
            self.viewModel.companies.sort(using: newValue)
        }
        .navigationTitle("Companies")
    }
}

My problem is that the Table only allows sorting on the first column and not on the second column. Does anyone know why?

Nota Bene : With an array of data hard-coded into the code, this works.

Modifications :

var fakeData : [CompanyData] = [
    CompanyData(id: 0, name: "Weimann Ltd", email: "fanny.daugherty@reichel.com"),
    CompanyData(id: 1, name: "Kshlerin, Predovic and Stracke", email: "jessyca.graham@gmail.co"),
    CompanyData(id: 2, name: "Toy Ltd", email: "meta13@schneider.com"),
    CompanyData(id: 3, name: "Reichert-Wilkinson", email: "yarmstrong@stamm.com"),
    CompanyData(id: 4, name: "Ondricka Inc", email: "rey.damore@borer.biz"),
    CompanyData(id: 5, name: "Hill-Bednar", email: "uabernathy@bartell.com"),
    CompanyData(id: 6, name: "Dach Inc", email: "willow.cummings@barton.org")
]

ForEach(fakeData) { cie in
    TableRow(cie)
}

onChange(of: sortOrder) { oldValue, newValue in
     fakeData.sort(using: newValue)
}

Thank you in advance

Boost

Answer 1

Lemak OP

Jul ’23

Update :

It works if it's embedded in a VStack, I don't understand why :

         VStack {
            if (self.viewModel.companies.count > 0) {
                Table(of: CompanyData.self, sortOrder: $sortOrder) {
                    TableColumn("Name", value: \.name)
                    TableColumn("Email", value: \.email)
                } rows: {
                    ForEach(self.viewModel.companies) { cie in
                        TableRow(cie)
                    }
                }
                .refreshable {
                    await self.viewModel.fetch()
                }
                .onChange(of: sortOrder) { oldValue, newValue in
                    self.viewModel.companies.sort(using: newValue)
                }
                .navigationTitle("Companies")
            }
            else {
                ProgressView()
            }
        }
        .task {
            await self.viewModel.fetch()
        }

0