feat(table): S2 tableview custom column menu #7617

snowystinger · 2025-01-16T05:06:22Z

Closes
Based on DNM - on hold: Implement Table Column custom actions
RSP Component Milestones (view)

Some requirements we should consider, grouping multiple ways to sort. See acrobat.com's tables.

✅ 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-01-16T22:24:22Z

Build successful! 🎉

rspbot · 2025-01-16T23:45:52Z

Build successful! 🎉

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

reidbarber

LGTM

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

snowystinger · 2025-01-20T00:51:55Z

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

+            <MenuSection aria-label='Sort or resize?'>
+              <Collection items={items}>
+                {(item) => <MenuItem>{item?.label}</MenuItem>}
+              </Collection>


best way to add other sort options here (for other columns like doc cloud has?)

Discussion so far, this is ok for the different/ other sorts to be separate, they are likely not as closely related

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

rspbot · 2025-01-20T04:25:22Z

Build successful! 🎉

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

devongovett · 2025-01-28T19:14:55Z

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

+          width={150}
+          minWidth={150}
+          isRowHeader={column.isRowHeader}
+          menu={


Bit strange that this doesn't actually accept a <Menu>. We should discuss options for the API here.

yeah, that's another option to handle it
was trying to answer #7617 (comment) as well

if it accepted a Menu, I guess we could do a custom renderer to inject our three menu items, still not a good way to ensure groups that make sense though

maybe people have to provide a menu with specific ids on certain children if they want resize/sort?

open to other ideas, not sold on what I currently have

Marked current api as UNSTABLE, also changed to menuItems

Other API considerations have been

// use a MenuTrigger around Column, but how to inject extra children??? also, prevent context leak into Resizer menuItems={[ // seems silly, may as well use jsx {id: 'filter', label: 'Filter', icon: <Filter />}, {id: 'hide column', label: 'Hide column'}, {id: 'manage columns', label: 'Manage columns'} ]} menu={(extraChildren) => { return ( // too much control? what if our children are omitted <Menu> {extraChildren} <MenuSection> <MenuItem onAction={action('filter')}><Filter /><Text slot="label">Filter</Text></MenuItem> </MenuSection> <MenuSection> <MenuItem onAction={action('hide column')}><Text slot="label">Hide column</Text></MenuItem> <MenuItem onAction={action('manage columns')}><Text slot="label">Manage columns</Text></MenuItem> </MenuSection> </Menu> ); }} menu={ // how to inject extra children? S2 context to inject them? create a new component, ColumnMenu? <Menu> <MenuSection> <MenuItem onAction={action('filter')}><Filter /><Text slot="label">Filter</Text></MenuItem> </MenuSection> <MenuSection> <MenuItem onAction={action('hide column')}><Text slot="label">Hide column</Text></MenuItem> <MenuItem onAction={action('manage columns')}><Text slot="label">Manage columns</Text></MenuItem> </MenuSection> </Menu> } menuItems={ // current implementation <> <MenuSection> <MenuItem onAction={action('filter')}><Filter /><Text slot="label">Filter</Text></MenuItem>

Design is fine (for now) if our default items are in their own section at the top. We've decided that without needing to interleave/change order of menuitems, it's better to not give an API which allows people to omit our default options as this could be a problem for accessibility.

# Conflicts: # packages/@react-spectrum/s2/src/TableView.tsx

rspbot · 2025-03-18T06:36:10Z

Build successful! 🎉

rspbot · 2025-03-19T00:20:05Z

Build successful! 🎉

rspbot · 2025-03-19T00:22:24Z

Build successful! 🎉

rspbot · 2025-03-19T00:23:50Z

Build successful! 🎉

rspbot · 2025-03-19T00:25:52Z

Build successful! 🎉

LFDanLu · 2025-03-21T00:22:20Z

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

-  children: ReactNode
+  children: ReactNode,
+  /** Menu fragment to be rendered inside the column header's menu. */
+  UNSTABLE_menuItems?: ReactNode


This is probably ok since users could use Collection to pass a dynamic menuItems renderer and I figure menus will be pretty small for the header menu, but this only accepting ReactNode and not a render function as well gave me pause

Yeah, if they want to make it dynamic, then they can use a Collection, but I wasn't planning on composing to expose the render props since most s2 components dont' do that

LFDanLu · 2025-03-21T00:32:24Z

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

+            <MenuSection aria-label={stringFormatter.format('table.standardColumnMenu')}>
+              <Collection items={items}>
+                {(item) => <MenuItem>{item?.label}</MenuItem>}
+              </Collection>


Looks like the sorting options aren't being included even with isSortable being true in this story: https://reactspectrum.blob.core.windows.net/reactspectrum/1b8dfffb43dab04ee2e289602d94ca176927bf5a/storybook-s2/index.html?path=/story/tableview--resizing-sortable-table&args=density:regular

ah, yep, our storybook was using the incorrect prop name and then converting it, I missed that, it's fixed now

snowystinger · 2025-03-24T21:00:44Z

packages/@react-spectrum/s2/intl/en-US.json

@@ -25,6 +25,7 @@
  "table.sortAscending": "Sort Ascending",
  "table.sortDescending": "Sort Descending",
  "table.resizeColumn": "Resize column",
+  "table.standardColumnMenu": "Default column actions",


Need a better menu section name/label

maybe could just say "defaultColumnActions", but this is just for referring to the translations so its probably ok IMO

hmm does the section have to have it's own label? is that required by aria? Maybe I'd just say "Column actions" - default is kind of an implementation detail no?

rspbot · 2025-03-24T21:11:18Z

Build successful! 🎉

rspbot · 2025-03-31T06:05:57Z

Build successful! 🎉

rspbot · 2025-03-31T06:05:58Z

## API Changes

@react-spectrum/s2

/@react-spectrum/s2:Column

 Column {
+  UNSTABLE_menuItems?: ReactNode
   align?: 'start' | 'center' | 'end' = 'start'
   allowsResizing?: boolean
   allowsSorting?: boolean
   children: ReactNode
     defaultClassName: string | undefined
 })) => string
   defaultWidth?: ColumnSize | null
   id?: Key
   isRowHeader?: boolean
   maxWidth?: ColumnStaticSize | null
   minWidth?: ColumnStaticSize | null
   showDivider?: boolean
   style?: CSSProperties | ((ColumnRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   textValue?: string
   width?: ColumnSize | null
 }

/@react-spectrum/s2:ColumnProps

 ColumnProps {
+  UNSTABLE_menuItems?: ReactNode
   align?: 'start' | 'center' | 'end' = 'start'
   allowsResizing?: boolean
   allowsSorting?: boolean
   children: ReactNode
     defaultClassName: string | undefined
 })) => string
   defaultWidth?: ColumnSize | null
   id?: Key
   isRowHeader?: boolean
   maxWidth?: ColumnStaticSize | null
   minWidth?: ColumnStaticSize | null
   showDivider?: boolean
   style?: CSSProperties | ((ColumnRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   textValue?: string
   width?: ColumnSize | null
 }

LFDanLu · 2025-04-11T17:10:19Z

packages/@react-spectrum/s2/intl/en-US.json

@@ -25,6 +25,7 @@
  "table.sortAscending": "Sort Ascending",
  "table.sortDescending": "Sort Descending",
  "table.resizeColumn": "Resize column",
+  "table.standardColumnMenu": "Default column actions",


maybe could just say "defaultColumnActions", but this is just for referring to the translations so its probably ok IMO

devongovett · 2025-04-12T00:46:06Z

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

+              </Collection>
+            </MenuSection>
+          )}
+          {menuItems}


What happens if the menuItems are not wrapped in a MenuSection by the user? Does that still work?

It still works, dividers for the sections wouldn't be there, but that's the only thing. Since the default ones we add are in a section though, people don't need to worry about forgetting to be divided from those

devongovett · 2025-04-12T00:46:51Z

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

+    disabledKeys: ['Foo 5']
+  }
+};
+


We should look at potentially combining some of the stories since these are also our docs

devongovett

Good enough for testing!

snowystinger added 2 commits January 16, 2025 15:23

S2 TableView custom column menus

2f2da02

Fix lint

4fc2b6e

snowystinger marked this pull request as ready for review January 16, 2025 05:06

snowystinger changed the title ~~feature(table): S2 tableview custom column menu~~ feat(table): S2 tableview custom column menu Jan 16, 2025

Merge branch 'main' into s2-tableview-custom-column-menu

e6c04fe

This comment was marked as resolved.

Sign in to view

Update TableView.tsx

1682ec4

ktabors previously approved these changes Jan 17, 2025

View reviewed changes

packages/@react-spectrum/s2/stories/TableView.stories.tsx Show resolved Hide resolved

reidbarber previously approved these changes Jan 17, 2025

View reviewed changes

fix styles and empty section

d027c92

snowystinger dismissed stale reviews from reidbarber and ktabors via d027c92 January 20, 2025 00:50

snowystinger commented Jan 20, 2025

View reviewed changes

packages/@react-spectrum/s2/src/TableView.tsx Outdated Show resolved Hide resolved

snowystinger commented Jan 20, 2025

View reviewed changes

packages/@react-spectrum/s2/src/TableView.tsx Outdated Show resolved Hide resolved

fix lint

f975d06

devongovett reviewed Jan 28, 2025

View reviewed changes

packages/@react-spectrum/s2/src/TableView.tsx Outdated Show resolved Hide resolved

devongovett reviewed Jan 28, 2025

View reviewed changes

Merge branch 'main' into s2-tableview-custom-column-menu

f256395

# Conflicts: # packages/@react-spectrum/s2/src/TableView.tsx

snowystinger and others added 4 commits March 19, 2025 11:07

chnage prop name, description, internal component name

2764778

Add better string

2ea2c08

add unstable prefix

d246fcc

Merge branch 'main' into s2-tableview-custom-column-menu

1b8dfff

snowystinger added the in sprint label Mar 19, 2025

LFDanLu added this to RSP Component Milestones Mar 19, 2025

github-project-automation bot moved this to 🩺 To Triage in RSP Component Milestones Mar 19, 2025

LFDanLu moved this from 🩺 To Triage to 👀 In Review in RSP Component Milestones Mar 19, 2025

LFDanLu self-assigned this Mar 20, 2025

LFDanLu reviewed Mar 21, 2025

View reviewed changes

fix storybook

76c3578

snowystinger commented Mar 24, 2025

View reviewed changes

Merge branch 'main' into s2-tableview-custom-column-menu

5e4ba24

LFDanLu approved these changes Apr 11, 2025

View reviewed changes

devongovett reviewed Apr 12, 2025

View reviewed changes

devongovett approved these changes Apr 12, 2025

View reviewed changes

devongovett added this pull request to the merge queue Apr 12, 2025

Merged via the queue into main with commit 23faef4 Apr 12, 2025
30 checks passed

devongovett deleted the s2-tableview-custom-column-menu branch April 12, 2025 00:57

github-project-automation bot moved this from 👀 In Review to ✅ Done in RSP Component Milestones Apr 12, 2025

feat(table): S2 tableview custom column menu #7617

feat(table): S2 tableview custom column menu #7617

Uh oh!

Conversation

snowystinger commented Jan 16, 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 Jan 16, 2025

Uh oh!

This comment was marked as resolved.

Uh oh!

rspbot commented Jan 16, 2025

Uh oh!

Uh oh!

reidbarber left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rspbot commented Jan 20, 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!

rspbot commented Mar 18, 2025

Uh oh!

rspbot commented Mar 19, 2025

Uh oh!

rspbot commented Mar 19, 2025

Uh oh!

rspbot commented Mar 19, 2025

Uh oh!

rspbot commented Mar 19, 2025

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!

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

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!

rspbot commented Mar 24, 2025

Uh oh!

rspbot commented Mar 31, 2025

Uh oh!

rspbot commented Mar 31, 2025

@react-spectrum/s2

/@react-spectrum/s2:Column

/@react-spectrum/s2:ColumnProps

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!

snowystinger commented Jan 16, 2025 •

edited

Loading

snowystinger Mar 24, 2025 •

edited

Loading