Feature Request – Sticky Columns and Summary Row for TableView

[Sourour18]

Thanks to the React Spectrum team for the great work and high-quality components. We’re building our application entirely with React Spectrum and truly appreciate its robustness and accessibility.

We’d like to request two important enhancements for the TableView component that we genuinely need in our application and that would make a significant difference in real-world use :

• Sticky columns — essential when horizontally scrolling through large datasets to keep key identifiers visible.
• Summary row — required to display totals or aggregated metrics, which are crucial for analytical and financial views.

Both features are fundamental for handling complex data tables and would make TableView more complete for production use.
Looking forward to seeing these capabilities considered in future updates.

[reidbarber]

For sticky columns, check out #6081 and #6080

And for summary rows, this is in our backlog: RSP Component Milestones (view)

[Sourour18]

Thanks for the update and for sharing the references. Great to know that summary rows are part of the backlog.
Appreciate the team’s continued work on React Spectrum.

[Sourour18]

When I defined the first two columns as isSticky and added isSticky={!!column.isSticky} to the appropriate column headers and cells, the sticky positioning worked. However, on horizontal scroll, the content of other columns appears behind the sticky columns because they are transparent — as shown in the following animated GIF.

By manually adding a background color using CSS, the sticky columns displayed correctly (in both light and dark modes), as shown in the GIF.

These CSS changes were only for testing.

 div[role="presentation"][style*="position: sticky"] > div[role="columnheader"]{
  background-color: var(--lightningcss-light, #f3f3f3) var(--lightningcss-dark, #222);
}

div[role="presentation"][style*="position: sticky"] > div[role="rowheader"] {
  background-color: var(--rowBackgroundColor) ; 
  border-bottom: 1px solid var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
} 

Is there a clean way to apply these modifications to sticky column headers and cells? The Column component doesn’t seem to accept className, styles, UNSAFE_style, or UNSAFE_className props.

Many thanks.