feat: table "inline" editing #8754

snowystinger · 2025-08-21T07:57:41Z

Implements our Editable Cell component for Table's. Note, this is called inline editing by Spectrum at the moment, but it does not correlate to aria inline editing.
This essentially works around the issue of textfields in cells or anything else in cells.

Will be adding more tests

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

rspbot · 2025-08-21T08:05:35Z

Build successful! 🎉

rspbot · 2025-08-21T08:10:51Z

Build successful! 🎉

…nvalid state, click off

rspbot · 2025-08-25T07:01:02Z

Build successful! 🎉

rspbot · 2025-08-25T07:38:38Z

Build successful! 🎉

rspbot · 2025-08-25T07:41:12Z

Build successful! 🎉

rspbot · 2025-08-25T08:00:33Z

Build successful! 🎉

rspbot · 2025-08-25T08:10:16Z

Build successful! 🎉

rspbot · 2025-08-27T00:35:19Z

Build successful! 🎉

rspbot · 2025-08-27T02:42:38Z

Build successful! 🎉

snowystinger · 2025-08-27T04:15:06Z

packages/@react-aria/overlays/src/calculatePosition.ts

  let boundaryStartEdge = boundaryDimensions.scroll[AXIS[axis]] + padding;
  let boundaryEndEdge = boundarySize + boundaryDimensions.scroll[AXIS[axis]] - padding;
-  let startEdgeOffset = offset - containerScroll + containerOffsetWithBoundary[axis] - boundaryDimensions[AXIS[axis]];
+  let startEdgeOffset = offset - containerScroll + containerOffsetWithBoundary[axis];


ignore this change for a bit, might be a bug in our positioning code

…plementation to make generic, fix density, individual cell saving state, use touch detection for showing all the time

snowystinger · 2025-08-28T04:46:15Z

packages/@react-aria/table/src/useTableCell.ts

   **/
-  onAction?: () => void
+  onAction?: () => void,
+  focusMode?: 'cell' | 'child'


change we'd need to make if we want to support edit mode on some cells vs others

rspbot · 2025-08-28T04:46:23Z

Build successful! 🎉

snowystinger · 2025-08-28T04:46:32Z

packages/@react-spectrum/s2/src/Picker.tsx

              context={TextContext}
              value={{
                slots: {
+                  [DEFAULT_SLOT]: {styles: label({size})},


this is just a missing feature we should really have in S2

rspbot · 2025-09-01T02:12:43Z

Build successful! 🎉

rspbot · 2025-09-19T01:14:27Z

Build successful! 🎉

rspbot · 2025-09-19T01:56:21Z

Build successful! 🎉

rspbot · 2025-09-19T02:16:49Z

Build successful! 🎉

rspbot · 2025-10-01T22:26:07Z

Build successful! 🎉

rspbot · 2025-10-02T05:22:02Z

Build successful! 🎉

patches/@parcel+transformer-css+2.0.0-dev.1601.patch

LFDanLu · 2025-10-02T18:57:35Z

packages/@react-spectrum/s2/src/TableView.tsx

one thing I noticed when testing is that tabbing through the table will move you to the edit buttons instead of treating the table as a single tab stop like it does for v3 table, not quite sure why. Note that this specifically happens when selection is enabled: https://reactspectrum.blob.core.windows.net/reactspectrum/f8ad4f7b2000787617b3b6097af722ecf8b5679f/storybook-s2/index.html?path=/story/tableview--editable-table&args=selectionMode:multiple

hmmm odd, i'll have a look

o, i see
lastChild is the last checkbox, which is in a row, we focus it without scrolling, which makes the edit button visible
then we let tab naturally move us to the next element, which is the now visible edit button...

I think i've fixed it by applying excludeFromTabOrder since the collection should handle moving to and from it

added tests as well

LFDanLu · 2025-10-02T22:34:33Z

packages/@react-spectrum/s2/src/TableView.tsx

+              isPending: isSaving,
+              isQuiet: !isSaving,
+              size,
+              styles: style({


nit: noticed that the edit button's focus ring is visible behind the checkbox:

probably ok? probably not common that people keyboard focus, then scroll without clicking somewhere

bit unfortunate that the button is sized/the row outlines are made in such a way that the top of the ring sits flush under the top row's border but the bottom of the ring sits on top of the border. Not too bothered by it, we can look into it as a followup

LFDanLu · 2025-10-02T22:43:47Z

packages/@react-spectrum/s2/src/TableView.tsx

+            if (!popoverRef.current?.contains(document.activeElement)) {
+              return false;
+            }
+            formRef.current?.requestSubmit();


I might just be forgetting prior examples, but I feel like dismissing a popover via clicking outside shouldn't be a confirm/submit action but instead just a cancel action

Design specifically says this should confirm 🤷🏻

packages/@react-spectrum/s2/src/TableView.tsx

rspbot · 2025-10-02T23:53:52Z

Build successful! 🎉

rspbot · 2025-10-03T00:03:42Z

Build successful! 🎉

rspbot · 2025-10-03T00:07:18Z

Build successful! 🎉

rspbot · 2025-10-03T00:18:39Z

Build successful! 🎉

rspbot · 2025-10-03T00:18:41Z

## API Changes

@react-spectrum/s2

/@react-spectrum/s2:EditableCell

+EditableCell {
+  align?: 'start' | 'center' | 'end' = 'start'
+  children: ReactNode
+  className?: ClassNameOrFunction<CellRenderProps>
+  colSpan?: number
+  id?: Key
+  isSaving?: boolean
+  onCancel: () => void
+  onSubmit: () => void
+  renderEditing: () => ReactNode
+  showDivider?: boolean
+  style?: StyleOrFunction<CellRenderProps>
+  textValue?: string
+}

LFDanLu

overall looks pretty good to me, lets get this in for additional browser testing

LFDanLu · 2025-10-03T23:52:57Z

packages/@react-spectrum/s2/src/TableView.tsx

+              isPending: isSaving,
+              isQuiet: !isSaving,
+              size,
+              styles: style({


bit unfortunate that the button is sized/the row outlines are made in such a way that the top of the ring sits flush under the top row's border but the bottom of the ring sits on top of the border. Not too bothered by it, we can look into it as a followup

snowystinger added 2 commits August 21, 2025 17:57

table inline editing

957f321

remove extra exports

097ba50

snowystinger added 2 commits August 25, 2025 16:43

Add extra controls for different interactions, mobile, inline save, i…

98e8d84

…nvalid state, click off

fix lint

7ea9be0

snowystinger and others added 2 commits August 25, 2025 17:30

Add fake saving logic

f447491

Merge branch 'main' into inline-table-editing

59bea14

snowystinger added 2 commits August 25, 2025 17:51

use better color and fix flex grow

0bff5e3

add back hiding logic

feb8a96

simplify fake save logic

9c6e6f5

Merge branch 'main' into inline-table-editing

337b809

set boundary element of the table, design updates

6be0394

snowystinger commented Aug 27, 2025

View reviewed changes

snowystinger added 2 commits August 28, 2025 14:36

Add picker, restore focus to cell when trigger is hidden, converge im…

a887e36

…plementation to make generic, fix density, individual cell saving state, use touch detection for showing all the time

fix lint and small screen rendering

150efc7

snowystinger commented Aug 28, 2025

View reviewed changes

snowystinger added 2 commits September 1, 2025 11:41

Change editable cell hover color when row is hovered

a471192

invert hover color for non-selection

7ef763a

use a pending action button and change background cell color for hover

bffae5a

add comments and fix types

41dbd4b

snowystinger added 2 commits September 19, 2025 12:07

Make picker nice

bc6c359

fix lint

b9d2f2e

snowystinger added 2 commits October 1, 2025 14:40

Merge branch 'main' into inline-table-editing

745afcb

Implement our actual component and start tests

1f641a4

snowystinger changed the title ~~wip: table inline editing~~ feat: table "inline" editing Oct 1, 2025

snowystinger marked this pull request as ready for review October 1, 2025 05:28

snowystinger added 2 commits October 1, 2025 15:31

add default slot so that people can add other buttons to the row

ec72958

fix lint

70a6336

snowystinger added 2 commits October 2, 2025 14:22

Merge branch 'main' into inline-table-editing

08623b2

add tests

871bcda

snowystinger added the ready for review label Oct 2, 2025

fix lint

f8ad4f7

LFDanLu reviewed Oct 2, 2025

View reviewed changes

review updates

bcb7c0e

github-actions bot added the needs translations label Oct 2, 2025

fix tab behaviour

b1e2303

add tab tests

bd79935

Merge branch 'main' into inline-table-editing

ad83b85

LFDanLu approved these changes Oct 3, 2025

View reviewed changes

feat: table "inline" editing #8754

Are you sure you want to change the base?

feat: table "inline" editing #8754

Conversation

snowystinger commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Aug 21, 2025

Uh oh!

rspbot commented Aug 21, 2025

Uh oh!

rspbot commented Aug 25, 2025

Uh oh!

rspbot commented Aug 25, 2025

Uh oh!

rspbot commented Aug 25, 2025

Uh oh!

rspbot commented Aug 25, 2025

Uh oh!

rspbot commented Aug 25, 2025

Uh oh!

rspbot commented Aug 27, 2025

Uh oh!

rspbot commented Aug 27, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Aug 28, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Sep 1, 2025

Uh oh!

rspbot commented Sep 19, 2025

Uh oh!

rspbot commented Sep 19, 2025

Uh oh!

rspbot commented Sep 19, 2025

Uh oh!

rspbot commented Oct 1, 2025

Uh oh!

rspbot commented Oct 2, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rspbot commented Oct 2, 2025

Uh oh!

rspbot commented Oct 3, 2025

Uh oh!

rspbot commented Oct 3, 2025

Uh oh!

rspbot commented Oct 3, 2025

Uh oh!

rspbot commented Oct 3, 2025

@react-spectrum/s2

snowystinger commented Aug 21, 2025 •

edited

Loading