(DNM) Add TableView expandable rows docs by reidbarber · Pull Request #4758 · adobe/react-spectrum

reidbarber · 2023-07-11T20:30:42Z

✅ 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:

https://reactspectrum.blob.core.windows.net/reactspectrum/9bd8f9fba7c90ace28faa4fd98d682b8bf3f5467/docs/react-spectrum/TableView.html#expandable-rows

🧢 Your Project:

still need to double check node info like index, level, prev/next key and fix keyboard nav

for some reason it is trying to render a child row of a non-expanded row

…e_rows_collection_update

…eys expanded

for now made changes to getNext/PrevKey in the collection, see comments about why

still need to debug why I cant make the rows in the body 0 indexed

…g indexOfType to track posinset

…dTable

we dont actually set indexOfType in TableCollection so use index as fallback

for now not including aria row index, will need to test announcement differences

it is possible for the collection to be up to date but the removed items still go through a render cycle before being removed

experiemented with adding aria-rowindex as per wai-aria docs but decided to omit it since it made for a confusing announcement in NVDA where there was two row position announcements

not sure why the feature flag isnt being set to true...

…e_rows_collection_update

as per review, already done in TableCollection, nor do I really use it

the type change broadens the table children type so Collection builder doesnt complain. I also moved the feature flag test into TableView so I dont need the .onlys. Making a separate file to contain the tableTests function works as well and allows us to run those tests in TreeGridTable instead but this felt more appropriate

…react-spectrum into expandable-rows-docs

rspbot · 2023-07-21T00:10:38Z

Build successful! 🎉

ross-pfahler · 2023-07-21T17:00:00Z

packages/@react-spectrum/table/docs/TableView.mdx

+your TableView.
+
+```tsx example
+import {enableTableNestedRows} from '@react-stately/flags';


can we add where in your app this should go? eg the root vs the file that expandable rows is used? or anywhere? does it matter?

I'll update this section with some clarification. Here is the entire explanation:

This approach is the easiest because the flags can be accessed from anywhere. However, one downside is that flags are enabled for all instances of a component across the whole app, not for one specific table for example. We could do that with context, but then the flags would need to be wired to more places that aren't allowed to access classes (e.g. classes, non-hook functions, etc.). The flags also need to be set before anything is rendered in the app or things may break unexpectedly, so libraries like quarry should not be enabling flags, they should be enabled in apps. Like any other package, there must be only one copy installed or things will also not work.

From #4617

So you'll want to do this once, likely at the root of your app since it will affect all instances and should be done before rendering the table.

The base branch was changed.

…e-rows-docs

rspbot · 2023-08-04T17:53:35Z

Build successful! 🎉

rspbot · 2023-08-28T20:09:19Z

Build successful! 🎉

rspbot · 2023-11-15T23:02:14Z

Build successful! 🎉

rspbot · 2023-11-16T17:54:09Z

Build successful! 🎉

rspbot · 2023-11-16T17:54:11Z

## API Changes

unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any', access: 'private' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }
unknown top level export { type: 'any' }

@react-spectrum/table

Column

 TableView<T extends {}> {
+  UNSTABLE_allowsExpandableRows?: boolean
+  UNSTABLE_defaultExpandedKeys?: 'all' | Iterable<Key>
+  UNSTABLE_expandedKeys?: 'all' | Iterable<Key>
+  UNSTABLE_onExpandedChange?: (Set<Key>) => any
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
   isQuiet?: boolean
   onAction?: (Key) => void
   onResizeEnd?: (Map<Key, ColumnSize>) => void
   onResizeStart?: (Map<Key, ColumnSize>) => void
   overflowMode?: 'wrap' | 'truncate' = 'truncate'
   renderEmptyState?: () => React.JSX.Element
 }

TableBodyProps

 RowProps<T> {
+  UNSTABLE_childItems?: Iterable<T>
   children: CellElement | Array<CellElement> | CellRenderer
   textValue?: string
 }

CellProps

 SpectrumTableProps<T> {
+  UNSTABLE_allowsExpandableRows?: boolean
+  UNSTABLE_defaultExpandedKeys?: 'all' | Iterable<Key>
+  UNSTABLE_expandedKeys?: 'all' | Iterable<Key>
+  UNSTABLE_onExpandedChange?: (Set<Key>) => any
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   dragAndDropHooks?: DragAndDropHooks['dragAndDropHooks']
   isQuiet?: boolean
   onAction?: (Key) => void
   onResizeEnd?: (Map<Key, ColumnSize>) => void
   onResizeStart?: (Map<Key, ColumnSize>) => void
   overflowMode?: 'wrap' | 'truncate' = 'truncate'
   renderEmptyState?: () => React.JSX.Element
 }

@react-stately/table

RowProps

 RowProps<T> {
+  UNSTABLE_childItems?: Iterable<T>
   children: CellElement | Array<CellElement> | CellRenderer
   textValue?: string
 }

LFDanLu added 30 commits May 30, 2023 17:29

poking around to make Rows process nested rows

3bc6f78

cleanup

0bf43fd

progress

4609379

got nested rows rendering

22dde54

still need to double check node info like index, level, prev/next key and fix keyboard nav

fixing naming and adding way to track rows that have nested rows

9fb0a5f

fixing expandable row detection and debugging weird TableLayout issue

d57f877

for some reason it is trying to render a child row of a non-expanded row

Merge branch 'main' of github.com:adobe/react-spectrum into expandabl…

529125e

…e_rows_collection_update

renaming from treeble to TreeGrid

7c26625

fix cell values and weird crash with dynamic treeble with subset of k…

4db5b4c

…eys expanded

update left/right keyboard navigation logic

092b43c

updating up/down keyboard navigation logic

c630325

for now made changes to getNext/PrevKey in the collection, see comments about why

fixing typeahead and using this.getChildNodes whereever possible

29cd760

cleanup and fix getText

2af16aa

fixing index and column assignment to node

c44b194

still need to debug why I cant make the rows in the body 0 indexed

debugging persisted keys

b4a9cf1

adding basic story to check controlled expanded keys

c8aa238

musings when trying to fix persisted key case

c9ca507

enforcing user places cells before nested rows

b5c62d8

making GridNode index track position with respect to parent and addin…

a6f090e

…g indexOfType to track posinset

fixing persisted keys by adding index for headerrows and columns

56d31cb

create Table wrapper element to conditionally render Table or TreeGri…

6671f88

…dTable

get rid of extra story

1a00526

update keyboard delegate to use node.indexOfType

fdcf68b

we dont actually set indexOfType in TableCollection so use index as fallback

adding tree grid aria

5ccc400

for now not including aria row index, will need to test announcement differences

fix crash on collapse

e423431

it is possible for the collection to be up to date but the removed items still go through a render cycle before being removed

fixes from screen reader testing

6ef96de

experiemented with adding aria-rowindex as per wai-aria docs but decided to omit it since it made for a confusing announcement in NVDA where there was two row position announcements

setting up tests, debugging why they dont run

bb30a78

not sure why the feature flag isnt being set to true...

add feature flag getter for tests for now

7d5a3a6

fixing row border styling and adding more tests

73ec246

Merge branch 'main' of github.com:adobe/react-spectrum into expandabl…

c0f5ca8

…e_rows_collection_update

LFDanLu added 8 commits July 20, 2023 11:31

addressing review comments (prop rename and stuff)

c517cec

hide expandable table props from spectrum docs

777de01

removing column node assigment to treegrid node cell

c9e9d76

as per review, already done in TableCollection, nor do I really use it

Merge branch 'expandable_rows_collection_update' of github.com:adobe/…

be833bb

…react-spectrum into expandable-rows-docs

updating docs copy for new prop names and exposing props in props tables

1d3a324

fix tests in 17

02515a9

Merge branch 'expandable_rows_collection_update' of github.com:adobe/…

0349928

…react-spectrum into expandable-rows-docs

ross-pfahler reviewed Jul 21, 2023

View reviewed changes

Base automatically changed from expandable_rows_collection_update to main July 21, 2023 22:55

LFDanLu added 2 commits August 4, 2023 09:48

Merge branch 'main' of github.com:adobe/react-spectrum into expandabl…

decca29

…e-rows-docs

remove extraneous strings

e595600

Merge branch 'main' into expandable-rows-docs

fb499c1

Merge branch 'main' into expandable-rows-docs

df683b8

fix key type

2c4e8d0

kysley mentioned this pull request Nov 17, 2023

Include colSpan values, while comparing the actual cell values with header columns count. #5334

Closed

devongovett force-pushed the main branch 2 times, most recently from 8cb1a5d to 3013156 Compare July 23, 2024 22:43

devongovett force-pushed the main branch 2 times, most recently from a79adcf to 3013156 Compare September 30, 2024 21:00

reidbarber closed this Jan 7, 2025

reidbarber deleted the expandable-rows-docs branch January 16, 2026 18:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(DNM) Add TableView expandable rows docs#4758

(DNM) Add TableView expandable rows docs#4758
reidbarber wants to merge 82 commits intomainfrom
expandable-rows-docs

reidbarber commented Jul 11, 2023 •

edited

Loading

Uh oh!

rspbot commented Jul 21, 2023

Uh oh!

ross-pfahler Jul 21, 2023

Uh oh!

reidbarber Jul 31, 2023

Uh oh!

reidbarber Jul 31, 2023

Uh oh!

rspbot commented Aug 4, 2023

Uh oh!

rspbot commented Aug 28, 2023

Uh oh!

rspbot commented Nov 15, 2023

Uh oh!

rspbot commented Nov 16, 2023

Uh oh!

rspbot commented Nov 16, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Conversation

reidbarber commented Jul 11, 2023 • 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 Jul 21, 2023

Uh oh!

ross-pfahler Jul 21, 2023

Choose a reason for hiding this comment

Uh oh!

reidbarber Jul 31, 2023

Choose a reason for hiding this comment

Uh oh!

reidbarber Jul 31, 2023

Choose a reason for hiding this comment

Uh oh!

rspbot commented Aug 4, 2023

Uh oh!

rspbot commented Aug 28, 2023

Uh oh!

rspbot commented Nov 15, 2023

Uh oh!

rspbot commented Nov 16, 2023

Uh oh!

rspbot commented Nov 16, 2023

@react-spectrum/table

Column

TableBodyProps

CellProps

@react-stately/table

RowProps

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

reidbarber commented Jul 11, 2023 •

edited

Loading