SwiftUI Table and TextEditor stacked vertically and enclosed in one ScrollView

Question

I would like to have a ScrollView that encloses a Table and a TextEditor, stacked vertically. With this arrangement, a user would always scroll down past all the table rows to find the text editor.

Below is modified Apple example code that I've been experimenting with to no avail. I get the desired stacking by manually adjusting tableContentHeight variable. How could I adjust it dynamically at runtime? Or is there some other way to achieve the desired setup?

import SwiftUI
struct Person: Identifiable {
    let givenName: String
    let familyName: String
    let emailAddress: String
    let id = UUID()
}
struct PeopleTable: View {
    @State private var people = [
        Person(givenName: "Juan", familyName: "Chavez", emailAddress: "[email protected]"),
        Person(givenName: "Mei", familyName: "Chen", emailAddress: "[email protected]"),
        Person(givenName: "Tom", familyName: "Clark", emailAddress: "[email protected]"),
        Person(givenName: "Gita", familyName: "Kumar", emailAddress: "[email protected]"),
        Person(givenName: "Juan", familyName: "Chavez", emailAddress: "[email protected]"),
        Person(givenName: "Mei", familyName: "Chen", emailAddress: "[email protected]"),
        Person(givenName: "Tom", familyName: "Clark", emailAddress: "[email protected]"),
        Person(givenName: "Gita", familyName: "Kumar", emailAddress: "[email protected]")
    ]

    // TODO: make this track table content height
    @State private var tableContentHeight: CGFloat = 235

    @State private var text: String = loremIpsum
    var body: some View {
        ScrollView {
            Table(people) {
                TableColumn("Given Name", value: \.givenName)
                TableColumn("Family Name", value: \.familyName)
                TableColumn("E-Mail Address", value: \.emailAddress)
            }
            .frame(height: tableContentHeight)
            TextEditor(text: $text).font(Font.system(size: 14))
        }
    }
}
#Preview {
    PeopleTable()
}

let loremIpsum = """
Pariatur neque enim occaecati ut inventore odio. Eius earum cumque ea placeat debitis nobis eos. Doloremque eum consectetur quos quia. Optio dignissimos quis iste. Nostrum animi vel doloribus et. Non delectus odio dolor in.

Eos ea aperiam est cupiditate eius quibusdam nulla. Sed sed aut labore blanditiis temporibus dolores. Doloribus vel expedita et possimus rerum. Doloribus ut vel nisi debitis molestias.

Pariatur quia eligendi et. Ipsa quae enim fugiat modi odit voluptatibus est. Officiis non impedit repellat omnis quod labore. Ratione ut iste ab ratione atque atque.

Quos nesciunt aut quos autem aut iusto repellendus. Error ex labore ad eaque dolorem. Laborum sed et ut incidunt mollitia omnis molestias. Reiciendis officiis alias quos expedita asperiores et culpa. Reiciendis nihil minima qui consequuntur. Maiores sint ut numquam facere ullam temporibus ea officiis.
"""

You'll need to use List or just a ScrollView for that. there isn't a built in way yet for this. — Pierre Janineh
– Pierre Janineh, Commented Apr 25 at 17:39

Sweeper · Accepted Answer · 2025-04-26 09:18:43Z

0

This is very similar to this question, and my answer there applies here too. While onScrollGeometryChange doesn't work on macOS Tables, you can still use SwiftUI-Introspect to work with the NSTableView directly.

struct PeopleTable: View {
    @State private var people = [
        Person(givenName: "Juan", familyName: "Chavez", emailAddress: "[email protected]"),
        Person(givenName: "Mei", familyName: "Chen", emailAddress: "[email protected]"),
        Person(givenName: "Tom", familyName: "Clark", emailAddress: "[email protected]"),
        Person(givenName: "Gita", familyName: "Kumar", emailAddress: "[email protected]"),
    ]
    
    @State private var tableContentHeight: CGFloat = 235
    
    @State private var text: String = loremIpsum
    var body: some View {
        ScrollView {
            Table(people) {
                TableColumn("Given Name", value: \.givenName)
                TableColumn("Family Name", value: \.familyName)
                TableColumn("E-Mail Address", value: \.emailAddress)
            }
            // specify the versions of macOS on which you want this to work
            .introspect(.table, on: .macOS(.v15)) { table in
                DispatchQueue.main.async {
                    // take into account the table header height
                    // in addition to the total height of the rows
                    tableContentHeight = table.intrinsicContentSize.height + (table.headerView?.bounds.height ?? 0)
                }
            }
            .scrollDisabled(true)
            .frame(height: tableContentHeight)
            TextEditor(text: $text).font(Font.system(size: 14))
        }
    }
}

edited Apr 26 at 9:18

answered Apr 26 at 0:25

Sweeper

292k23 gold badges260 silver badges438 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user2962393 Apr 26 at 8:36

I applied .onScrollGeometryChange to the table as you suggested, but I don't see it invoked at all. The effect is that PeopleTable remains invisible with initial height of zero. If I add .onScrollGeometryChange to the explicit outer ScrollView, I observe its closure invoked. I read in the docs that "If multiple scroll views are found within the view hierarchy, only the first one will invoke the closure you provide and a runtime issue will be logged.” I don't see anything logged, though. I’m targeting macOS (forgot the tag; will fix that).

user2962393 Apr 26 at 9:10

I should have been more clear. Whatever I initialize tableContentHeight to (e.g., 100), the table remains at the initialized height and onScrollGeometryChange is never invoked.

Sweeper Apr 26 at 9:12

@user2962393 Okay, so this doesn't work for macOS. Are you open to using SwiftUI-Introspect, which is not forward-compatible?

user2962393 Apr 26 at 9:23

Swift-Introspect does not look attractive to me at this point. I guess I’ll just tolerate this limitation for now.

Sweeper Apr 26 at 9:28

@user2962393 SwiftUI Table supports very little on macOS. If you are going to be primarily working with tables, I'd suggest wrapping a NSTableView. Otherwise you would likely have many more limitations to tolerate. I've already shown an example here. All you need to do is override sizeThatFits differently - return proposed width and table.intrinsicContentSize.height + (table.headerView?.bounds.height ?? 0) as the height.

Collectives™ on Stack Overflow

SwiftUI Table and TextEditor stacked vertically and enclosed in one ScrollView

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related