How do I implement a view in SwiftUI similar to the table below? The table is scrollable vertically and horizontally, able to sort it using any of the columns and when clicked on row, it opens another view with details.
The image is from an app called Thinkorswim which is a broker for trading stocks. The spark chart column can be ignored.
E.g. Here’s an example of table view I’m been trying using Table
view, however, it only displays single column on iOS platform. The documentation for Table specifies “You can define a single table for use on macOS, iOS, and iPadOS. However, in a compact horizontal size class environment — typical on iPhone or on iPad in certain modes, like Slide Over — the table has limited space to display its columns. To conserve space, the table automatically hides headers and all columns after the first when it detects this condition”
struct TickerDetails: Identifiable {
let id = UUID()
let ticker: String
let price: Double
let percChange: Double
let volume: Int
}
struct TableViewExample: View {
@State var tickers = [TickerDetails(ticker: "AAPL", price: 100.0, percChange: 1.2, volume: 4_500_000),
TickerDetails(ticker: "AMZN", price: 180.0, percChange: 2.5, volume: 6_000_000),
TickerDetails(ticker: "NVDA", price: 130.0, percChange: 5.2, volume: 7_500_000)]
var body: some View {
Table(tickers) {
TableColumn("Ticker", value: .ticker)
TableColumn("Mark") { ticker in
Text(String(ticker.price))
}
TableColumn("Mark %") { ticker in
Text(String(ticker.percChange))
}
TableColumn("Volume") { ticker in
Text(String(ticker.volume))
}
}
}
}
Thanks!