Skip to content

feat: Add support for nested table rows #9740

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devongovett merged 10 commits into from
Mar 9, 2026
Merged

feat: Add support for nested table rows #9740

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
eee43b1
feat: Add support for nested table rows
devongovett Mar 2, 2026
db18a02
Add tests
devongovett Mar 3, 2026
dca2c50
Merge branch 'main' of github.com:adobe/react-spectrum into treeble
devongovett Mar 3, 2026
e9504f8
Merge branch 'main' of github.com:adobe/react-spectrum into treeble
devongovett Mar 4, 2026
3e22876
Fix S1 tests
devongovett Mar 5, 2026
4d65d03
Add stories and chromatic for S2
devongovett Mar 5, 2026
df4fce6
fix types
devongovett Mar 5, 2026
dc3a36c
Merge branch 'main' of github.com:adobe/react-spectrum into treeble
devongovett Mar 6, 2026
2370433
fix version
devongovett Mar 7, 2026
e2eb072
review comments
devongovett Mar 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/@react-aria/collections/src/useCachedChildren.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export function useCachedChildren<T extends object>(props: CachedChildrenOptions
throw new Error('Could not determine key for item');
}

if (idScope != null) {
if (idScope != null && rendered.props.id == null) {
Copy link
Member

@snowystinger snowystinger Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when does this happen? was it a bug we had not keeping the id as a key?

Copy link
Contributor

@nwidynski nwidynski Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nested rows without an explicit id would have an idScope prepended for every level. Since the collection is flattened anyways I suppose it makes sense to skip that.

Copy link
Member Author

@devongovett devongovett Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah this was meant to scope the ids of the cells within a row so you can loop over the columns multiple times and not get duplicates. We don't want that for rows. If an explicit id is given, we should respect that. That was the change here. I was also considering moving this scoping into Cell itself so it would only apply there. wdyt?

Copy link
Member

@LFDanLu LFDanLu Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think moving this into Cell only makes sense, I can't really think of any other cases where we'd also want to do this scoping

Copy link
Member Author

@devongovett devongovett Mar 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will have to think about how to do this. createLeafComponent doesn't really provide a way to add that logic right now. maybe we could do it by creating a wrapper component or something.

key = idScope + ':' + key;
}
// Note: only works if wrapped Item passes through id...
Expand Down
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/ar-AE.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "اضغط على مفتاح Enter لبدء تغيير الحجم",
"select": "تحديد",
"selectAll": "تحديد الكل",
"sortable": "عمود قابل للترتيب"
"sortable": "عمود قابل للترتيب",
"collapse": "طي",
"expand": "تمديد"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/bg-BG.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Натиснете „Enter“, за да започнете да преоразмерявате",
"select": "Изберете",
"selectAll": "Изберете всичко",
"sortable": "сортираща колона"
"sortable": "сортираща колона",
"collapse": "Свиване",
"expand": "Разширяване"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/cs-CZ.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Stisknutím klávesy Enter začnete měnit velikost",
"select": "Vybrat",
"selectAll": "Vybrat vše",
"sortable": "sloupec s možností řazení"
"sortable": "sloupec s možností řazení",
"collapse": "Sbalit",
"expand": "Roztáhnout"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/da-DK.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Tryk på Enter for at ændre størrelse",
"select": "Vælg",
"selectAll": "Vælg alle",
"sortable": "sorterbar kolonne"
"sortable": "sorterbar kolonne",
"collapse": "Skjul",
"expand": "Udvid"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/de-DE.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Eingabetaste zum Starten der Größenänderung drücken",
"select": "Auswählen",
"selectAll": "Alles auswählen",
"sortable": "sortierbare Spalte"
"sortable": "sortierbare Spalte",
"collapse": "Reduzieren",
"expand": "Erweitern"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/el-GR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Πατήστε Enter για έναρξη της αλλαγής μεγέθους",
"select": "Επιλογή",
"selectAll": "Επιλογή όλων",
"sortable": "Στήλη διαλογής"
"sortable": "Στήλη διαλογής",
"collapse": "Σύμπτυξη",
"expand": "Ανάπτυξη"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"ascendingSort": "sorted by column {columnName} in ascending order",
"descendingSort": "sorted by column {columnName} in descending order",
"columnSize": "{value} pixels",
"resizerDescription": "Press Enter to start resizing"
"resizerDescription": "Press Enter to start resizing",
"expand": "Expand",
"collapse": "Collapse"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/es-ES.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Pulse Intro para empezar a redimensionar",
"select": "Seleccionar",
"selectAll": "Seleccionar todos",
"sortable": "columna ordenable"
"sortable": "columna ordenable",
"collapse": "Contraer",
"expand": "Ampliar"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/et-EE.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Suuruse muutmise alustamiseks vajutage klahvi Enter",
"select": "Vali",
"selectAll": "Vali kõik",
"sortable": "sorditav veerg"
"sortable": "sorditav veerg",
"collapse": "Ahenda",
"expand": "Laienda"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/fi-FI.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Aloita koon muutos painamalla Enter-näppäintä",
"select": "Valitse",
"selectAll": "Valitse kaikki",
"sortable": "lajiteltava sarake"
"sortable": "lajiteltava sarake",
"collapse": "Pienennä",
"expand": "Laajenna"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/fr-FR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Appuyez sur Entrée pour commencer le redimensionnement.",
"select": "Sélectionner",
"selectAll": "Sélectionner tout",
"sortable": "colonne triable"
"sortable": "colonne triable",
"collapse": "Réduire",
"expand": "Développer"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/he-IL.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "הקש Enter כדי לשנות את הגודל",
"select": "בחר",
"selectAll": "בחר הכול",
"sortable": "עמודה שניתן למיין"
"sortable": "עמודה שניתן למיין",
"collapse": "כווץ",
"expand": "הרחב"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/hr-HR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Pritisnite Enter da biste započeli promenu veličine",
"select": "Odaberite",
"selectAll": "Odaberite sve",
"sortable": "stupac koji se može razvrstati"
"sortable": "stupac koji se može razvrstati",
"collapse": "Sažmi",
"expand": "Proširi"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/hu-HU.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Nyomja le az Enter billentyűt az átméretezés megkezdéséhez",
"select": "Kijelölés",
"selectAll": "Összes kijelölése",
"sortable": "rendezendő oszlop"
"sortable": "rendezendő oszlop",
"collapse": "Összecsukás",
"expand": "Kibontás"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/it-IT.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Premi Invio per iniziare a ridimensionare",
"select": "Seleziona",
"selectAll": "Seleziona tutto",
"sortable": "colonna ordinabile"
"sortable": "colonna ordinabile",
"collapse": "Comprimi",
"expand": "Espandi"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/ja-JP.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Enter キーを押してサイズ変更を開始",
"select": "選択",
"selectAll": "すべて選択",
"sortable": "並べ替え可能な列"
"sortable": "並べ替え可能な列",
"collapse": "折りたたむ",
"expand": "展開"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/ko-KR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "크기 조정을 시작하려면 Enter를 누르세요.",
"select": "선택",
"selectAll": "모두 선택",
"sortable": "정렬 가능한 열"
"sortable": "정렬 가능한 열",
"collapse": "접기",
"expand": "펼치기"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/lt-LT.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Paspauskite „Enter“, kad pradėtumėte keisti dydį",
"select": "Pasirinkti",
"selectAll": "Pasirinkti viską",
"sortable": "rikiuojamas stulpelis"
"sortable": "rikiuojamas stulpelis",
"collapse": "Sutraukti",
"expand": "Išskleisti"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/lv-LV.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Nospiediet Enter, lai sāktu izmēru mainīšanu",
"select": "Atlasīt",
"selectAll": "Atlasīt visu",
"sortable": "kārtojamā kolonna"
"sortable": "kārtojamā kolonna",
"collapse": "Sakļaut",
"expand": "Izvērst"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/nb-NO.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Trykk på Enter for å starte størrelsesendring",
"select": "Velg",
"selectAll": "Velg alle",
"sortable": "kolonne som kan sorteres"
"sortable": "kolonne som kan sorteres",
"collapse": "Skjul",
"expand": "Utvid"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/nl-NL.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Druk op Enter om het formaat te wijzigen",
"select": "Selecteren",
"selectAll": "Alles selecteren",
"sortable": "sorteerbare kolom"
"sortable": "sorteerbare kolom",
"collapse": "Samenvouwen",
"expand": "Uitvouwen"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/pl-PL.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Naciśnij Enter, aby rozpocząć zmienianie rozmiaru",
"select": "Zaznacz",
"selectAll": "Zaznacz wszystko",
"sortable": "kolumna z możliwością sortowania"
"sortable": "kolumna z możliwością sortowania",
"collapse": "Zwiń",
"expand": "Rozwiń"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/pt-BR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Pressione Enter para começar a redimensionar",
"select": "Selecionar",
"selectAll": "Selecionar tudo",
"sortable": "coluna classificável"
"sortable": "coluna classificável",
"collapse": "Recolher",
"expand": "Expandir"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/pt-PT.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Prima Enter para iniciar o redimensionamento",
"select": "Selecionar",
"selectAll": "Selecionar tudo",
"sortable": "Coluna ordenável"
"sortable": "Coluna ordenável",
"collapse": "Colapsar",
"expand": "Expandir"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/ro-RO.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Apăsați pe Enter pentru a începe redimensionarea",
"select": "Selectare",
"selectAll": "Selectare totală",
"sortable": "coloană sortabilă"
"sortable": "coloană sortabilă",
"collapse": "Restrângeți",
"expand": "Extindeți"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/ru-RU.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Нажмите клавишу Enter для начала изменения размеров",
"select": "Выбрать",
"selectAll": "Выбрать все",
"sortable": "сортируемый столбец"
"sortable": "сортируемый столбец",
"collapse": "Свернуть",
"expand": "Развернуть"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/sk-SK.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Stlačením klávesu Enter začnete zmenu veľkosti",
"select": "Vybrať",
"selectAll": "Vybrať všetko",
"sortable": "zoraditeľný stĺpec"
"sortable": "zoraditeľný stĺpec",
"collapse": "Zbaliť",
"expand": "Rozbaliť"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/sl-SI.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Pritisnite tipko Enter da začnete spreminjati velikost",
"select": "Izberite",
"selectAll": "Izberite vse",
"sortable": "razvrstljivi stolpec"
"sortable": "razvrstljivi stolpec",
"collapse": "Strni",
"expand": "Razširi"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/sr-SP.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Pritisnite Enter da biste započeli promenu veličine",
"select": "Izaberite",
"selectAll": "Izaberite sve",
"sortable": "kolona koja se može sortirati"
"sortable": "kolona koja se može sortirati",
"collapse": " Skupi",
"expand": "Proširi"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/sv-SE.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Tryck på Retur för att börja ändra storlek",
"select": "Markera",
"selectAll": "Markera allt",
"sortable": "sorterbar kolumn"
"sortable": "sorterbar kolumn",
"collapse": "Dölj",
"expand": "Expandera"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/tr-TR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Yeniden boyutlandırmak için Enter'a basın",
"select": "Seç",
"selectAll": "Tümünü Seç",
"sortable": "Sıralanabilir sütun"
"sortable": "Sıralanabilir sütun",
"collapse": "Daralt",
"expand": "Genişlet"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/uk-UA.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "Натисніть Enter, щоб почати зміну розміру",
"select": "Вибрати",
"selectAll": "Вибрати все",
"sortable": "сортувальний стовпець"
"sortable": "сортувальний стовпець",
"collapse": "Згорнути",
"expand": "Розгорнути"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "按“输入”键开始调整大小。",
"select": "选择",
"selectAll": "全选",
"sortable": "可排序的列"
"sortable": "可排序的列",
"collapse": "折叠",
"expand": "扩展"
}
4 changes: 3 additions & 1 deletion packages/@react-aria/table/intl/zh-TW.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,7 @@
"resizerDescription": "按 Enter 鍵以開始調整大小",
"select": "選取",
"selectAll": "全選",
"sortable": "可排序的欄"
"sortable": "可排序的欄",
"collapse": "收合",
"expand": "展開"
}
1 change: 1 addition & 0 deletions packages/@react-aria/table/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"url": "https://github.com/adobe/react-spectrum"
},
"dependencies": {
"@react-aria/button": "^3.14.5",
"@react-aria/focus": "^3.21.5",
"@react-aria/grid": "^3.14.8",
"@react-aria/i18n": "^3.12.16",
Expand Down
5 changes: 2 additions & 3 deletions packages/@react-aria/table/src/useTable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import intlMessages from '../intl/*.json';
import {Key, LayoutDelegate, Rect, RefObject, Size} from '@react-types/shared';
import {mergeProps, useDescription, useId, useUpdateEffect} from '@react-aria/utils';
import {TableKeyboardDelegate} from './TableKeyboardDelegate';
import {tableNestedRows} from '@react-stately/flags';
import {TableState, TreeGridState} from '@react-stately/table';
import {useCollator, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
import {useMemo} from 'react';
Expand Down Expand Up @@ -76,7 +75,7 @@ export function useTable<T>(props: AriaTableProps, state: TableState<T> | TreeGr
layout
}), [keyboardDelegate, state.collection, state.disabledKeys, disabledBehavior, ref, direction, collator, layoutDelegate, layout]);
let id = useId(props.id);
gridIds.set(state, id);
gridIds.set(state as TableState<T>, id);

let {gridProps} = useGrid({
...props,
Expand All @@ -89,7 +88,7 @@ export function useTable<T>(props: AriaTableProps, state: TableState<T> | TreeGr
gridProps['aria-rowcount'] = state.collection.size + state.collection.headerRows.length;
}

if (tableNestedRows() && 'expandedKeys' in state) {
if (state.treeColumn != null) {
gridProps.role = 'treegrid';
}

Expand Down
3 changes: 1 addition & 2 deletions packages/@react-aria/table/src/useTableHeaderRow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@

import {DOMAttributes, RefObject} from '@react-types/shared';
import {GridRowProps} from '@react-aria/grid';
import {tableNestedRows} from '@react-stately/flags';
import {TableState} from '@react-stately/table';

export interface TableHeaderRowAria {
Expand All @@ -32,7 +31,7 @@ export function useTableHeaderRow<T>(props: GridRowProps<T>, state: TableState<T
role: 'row'
};

if (isVirtualized && !(tableNestedRows() && 'expandedKeys' in state)) {
if (isVirtualized && state.treeColumn == null) {
Copy link
Member

@snowystinger snowystinger Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bit of a strange check, could we put it behind some other state property? like state.isATreeRoot() or something that makes more sense

Copy link
Member Author

@devongovett devongovett Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm why is it strange? if there is a tree column it is a tree grid.

Copy link
Member

@snowystinger snowystinger Mar 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The name just doesn't really make sense in my head. Looking at it again today just reviewing my comments and closing out the answered ones, I have no idea what this check is for.

rowProps['aria-rowindex'] = node.index + 1; // aria-rowindex is 1 based
}

Expand Down
Loading