feat: Add TableFooter component by devongovett · Pull Request #9943 · adobe/react-spectrum

devongovett · 2026-04-17T02:26:23Z

Closes #4372, closes #7312

Adds a new <TableFooter> component to React Aria and S2, which may contain one or more rows. When rendered as an HTML table, this is a <tfoot> element, otherwise it has role="rowgroup".

It also allows rendering multiple <TableBody> elements, which enables sections to be implemented.

devongovett · 2026-04-17T02:27:27Z

      id={id}
      dependencies={[...dependencies, columns]}
+      isDisabled={isInFooter}
+      disabledBehavior="selection"


New feature: support for disabledBehavior at the individual Row level, not just at the Table level. This is so that the summary rows are not selectable but still focusable, regardless of the disabledBehavior of the rest of the table. Is this something we want to support?

I think that makes sense.

I guess its fine, but feels a bit iffy to me to make it public api if it really is only used for the summary row case. Could we not just do a private prop or context or somethingto set this?

rspbot · 2026-04-20T17:51:33Z

Build successful! 🎉

rspbot · 2026-04-20T18:39:18Z

Build successful! 🎉

rspbot · 2026-04-20T22:50:50Z

Build successful! 🎉

snowystinger · 2026-04-20T22:53:45Z

+  );
+};
+
+export const TableSectionDnd: TableStory = (args) => {


I'm unable to drop at the end of a given section. I also cannot drop into an empty section

for some reason, in Chrome , each drag takes me two mouse clicks to initiate, I doubt that was caused by this PR, so just noting it

I was trying to keep this PR simple. 😅 It was not my intent to work on drag and drop here but you asked for an example so I added one. The issue you mention is pre-existing: you can't drop before a disabled items (like the section headers). We should handle that separately.

yeah, not going to hold anything up with it, all good

I also noticed that just keyboard navigating up and down/through a row's elements in this table also causes keyboard focus to get stuck on the drag handle, just something to also track

LFDanLu · 2026-04-21T00:01:07Z

      id={id}
      dependencies={[...dependencies, columns]}
+      isDisabled={isInFooter}
+      disabledBehavior="selection"


I guess its fine, but feels a bit iffy to me to make it public api if it really is only used for the summary row case. Could we not just do a private prop or context or somethingto set this?

LFDanLu · 2026-04-21T00:14:45Z

+  );
+};
+
+export const TableSectionDnd: TableStory = (args) => {


I also noticed that just keyboard navigating up and down/through a row's elements in this table also causes keyboard focus to get stuck on the drag handle, just something to also track

Co-authored-by: Daniel Lu <danilu@adobe.com>

rspbot · 2026-04-22T22:16:28Z

Build successful! 🎉

snowystinger · 2026-04-22T22:39:56Z

+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
+   * @default 'react-aria-TableFooter'
+   */
+  className?: string


why not renderProps enabled? I guess it's non-breaking to add it in the future

because there aren't any states

well, there aren't any states yet, but TableBody has isEmpty and isDropTarget. Which, maybe empty makes sense and drop target doesn't. Could also include id on both of them

snowystinger · 2026-04-22T22:58:46Z

+            </Row>
+          )}
+        </TableBody>
+        <TableFooter>


I checked and multiple footer rows appears to work, though row divider borders aren't a good contrast. I tried nesting rows in the footer as well in case someone wanted to use progressive disclosure for more complicated summaries, that also worked, though the expansion could end up in an odd spot, I made it the title column here.

I'm assuming these aren't officially supported, but nice to know they won't be much trouble to eventually support. Though it might be nice to be able to tell a TableBody/Footer if it is expandable so that the alignment doesn't end up like this if only one of them actually has expansion. I don't think we're doing anything right now that would prevent that in the future though.

rspbot · 2026-04-23T17:25:09Z

Build successful! 🎉

rspbot · 2026-04-23T17:25:10Z

## API Changes

react-aria-components

/react-aria-components:Row

 Row <T extends {}> {
   children?: ReactNode | ({}) => ReactElement
   className?: ClassNameOrFunction<RowRenderProps> = 'react-aria-Row'
   columns?: Iterable<{}>
   dependencies?: ReadonlyArray<any>
+  disabledBehavior?: DisabledBehavior
   download?: boolean | string
   hasChildItems?: boolean
   href?: Href
   hrefLang?: string
   isDisabled?: boolean
   onAction?: () => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, RowRenderProps>
   routerOptions?: RouterOptions
   style?: StyleOrFunction<RowRenderProps>
   target?: HTMLAttributeAnchorTarget
   textValue?: string
   value?: {}
 }

/react-aria-components:RowProps

 RowProps <T> {
   children?: ReactNode | (T) => ReactElement
   className?: ClassNameOrFunction<RowRenderProps> = 'react-aria-Row'
   columns?: Iterable<T>
   dependencies?: ReadonlyArray<any>
+  disabledBehavior?: DisabledBehavior
   download?: boolean | string
   hasChildItems?: boolean
   href?: Href
   hrefLang?: string
   isDisabled?: boolean
   onAction?: () => void
   onClick?: (MouseEvent<FocusableElement>) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, RowRenderProps>
   routerOptions?: RouterOptions
   style?: StyleOrFunction<RowRenderProps>
   target?: HTMLAttributeAnchorTarget
   textValue?: string
   value?: T
 }

/react-aria-components:TableFooter

+TableFooter <T extends {}> {
+  children?: ReactNode | (T) => ReactNode
+  className?: string = 'react-aria-TableFooter'
+  dependencies?: ReadonlyArray<any>
+  items?: Iterable<T>
+  style?: CSSProperties
+}

/react-aria-components:TableFooterProps

+TableFooterProps <T> {
+  children?: ReactNode | (T) => ReactNode
+  className?: string = 'react-aria-TableFooter'
+  dependencies?: ReadonlyArray<any>
+  items?: Iterable<T>
+  style?: CSSProperties
+}

@react-spectrum/s2

/@react-spectrum/s2:TableFooter

+TableFooter <T extends {}> {
+  children?: ReactNode | (T) => ReactNode
+  dependencies?: ReadonlyArray<any>
+  items?: Iterable<T>
+}

/@react-spectrum/s2:TableFooterProps

+TableFooterProps <T> {
+  children?: ReactNode | (T) => ReactNode
+  dependencies?: ReadonlyArray<any>
+  items?: Iterable<T>
+}

devongovett added 4 commits April 16, 2026 17:15

feat: Add TableFooter component

e215aab

Add docs

cbb38cd

fix test

d7d8913

fix docs

67186fd

github-actions Bot added RAC S2 labels Apr 17, 2026

devongovett commented Apr 17, 2026

View reviewed changes

devongovett added 2 commits April 20, 2026 11:24

Support multiple table bodies

a0e19e7

Fix S2 test

b92a840

updates from testing

23c1526

snowystinger reviewed Apr 20, 2026

View reviewed changes

LFDanLu reviewed Apr 21, 2026

View reviewed changes

reidbarber previously approved these changes Apr 22, 2026

View reviewed changes

extra ;

e34e20e

Co-authored-by: Daniel Lu <danilu@adobe.com>

LFDanLu dismissed reidbarber’s stale review via e34e20e April 22, 2026 22:09

snowystinger previously approved these changes Apr 22, 2026

View reviewed changes

Merge branch 'main' into table-footer

0e3e2aa

devongovett dismissed snowystinger’s stale review via 0e3e2aa April 23, 2026 17:16

snowystinger approved these changes Apr 23, 2026

View reviewed changes

LFDanLu approved these changes Apr 23, 2026

View reviewed changes

devongovett added this pull request to the merge queue Apr 23, 2026

Merged via the queue into main with commit 918f0ae Apr 23, 2026
31 checks passed

devongovett deleted the table-footer branch April 23, 2026 23:32

yihuiliao added the TableView label Apr 30, 2026

yihuiliao mentioned this pull request May 12, 2026

feat: add highlight selection to S2 TableView #9883

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Add TableFooter component#9943

feat: Add TableFooter component#9943
devongovett merged 9 commits into
mainfrom
table-footer

devongovett commented Apr 17, 2026 •

edited

Loading

devongovett Apr 17, 2026

snowystinger Apr 18, 2026

LFDanLu Apr 21, 2026

rspbot commented Apr 20, 2026

rspbot commented Apr 20, 2026

rspbot commented Apr 20, 2026

snowystinger Apr 20, 2026

snowystinger Apr 20, 2026

devongovett Apr 20, 2026

snowystinger Apr 20, 2026

LFDanLu Apr 21, 2026

LFDanLu Apr 21, 2026

LFDanLu Apr 21, 2026

Uh oh!

Uh oh!

Uh oh!

rspbot commented Apr 22, 2026

snowystinger Apr 22, 2026

devongovett Apr 22, 2026 •

edited

Loading

snowystinger Apr 23, 2026

snowystinger Apr 22, 2026

rspbot commented Apr 23, 2026

rspbot commented Apr 23, 2026

Uh oh!

Labels

6 participants

Uh oh!

Conversation

devongovett commented Apr 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rspbot commented Apr 20, 2026

rspbot commented Apr 20, 2026

rspbot commented Apr 20, 2026

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

rspbot commented Apr 22, 2026

Choose a reason for hiding this comment

devongovett Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rspbot commented Apr 23, 2026

rspbot commented Apr 23, 2026

react-aria-components

/react-aria-components:Row

/react-aria-components:RowProps

/react-aria-components:TableFooter

/react-aria-components:TableFooterProps

@react-spectrum/s2

/@react-spectrum/s2:TableFooter

/@react-spectrum/s2:TableFooterProps

Uh oh!

Labels

6 participants

devongovett commented Apr 17, 2026 •

edited

Loading

devongovett Apr 22, 2026 •

edited

Loading