Skip to content

Commit a4a8240

Browse files
committed
Guidelines.md
1 parent f948f66 commit a4a8240

File tree

4 files changed

+36
-8
lines changed

4 files changed

+36
-8
lines changed

website/docs/components/table/advanced-table/partials/guidelines/guidelines.md

+36-8
Original file line numberDiff line numberDiff line change
@@ -168,26 +168,54 @@ Avoid using different density settings for parent and child rows.
168168

169169
!!!
170170

171-
### Expand/Collapse All Button
171+
### Expand/Collapse All Control
172+
173+
#### Button Behavior
174+
175+
The button expands first unless all rows have already been expanded, and then it switches to Collapse All.
176+
- Manual expanding/collapsing does not change the button state.
177+
- If users collapse rows individually, the button stays Expand All until all rows are collapsed.
178+
179+
#### Interactions
180+
181+
#### Default State
182+
183+
The table can load with any combination of expanded or collapsed rows.
184+
The button reflects the initial state:
185+
- Expand All if any rows are collapsed.
186+
- Collapse All if all rows are expanded.
187+
188+
#### Expanding All Rows
189+
190+
Clicking Expand All expands everything, including nested rows.
191+
- The button updates to Collapse All.
192+
193+
#### Mixed State
194+
195+
Some rows are expanded while others are collapsed.
196+
The button stays Expand All, as its following action will expand all collapsed rows.
197+
- Clicking Expand All in this state expands everything and updates the button to Collapse All.
198+
Expanding from a Mixed State
199+
- Clicking Expand All expands all rows, including manually collapsed ones.
200+
- The button updates to Collapse All.
172201

173202
#### Button States
174203

175204
The button updates based on the current expansion state of the table:
176205

177206
- Expand All will display when all rows are collapsed.
178207

179-
![](/assets/components/table/advanced-table/advanced-table-sticky-header.png)
208+
![](/assets/components/table/advanced-table/expandable-rows-collapsed-state.png)
180209

181210
- Collapse All will display when all rows are expanded.
182211

183-
![](/assets/components/table/advanced-table/advanced-table-sticky-header.png)
184-
185-
- Mixed State – Displays when some, but not all, rows are expanded.
186-
- Mixed State Behavior
187-
- The mixed state provides a visual cue that expansion states vary within the table. Selecting the button in this state expands all rows.
212+
![](/assets/components/table/advanced-table/expandable-rows-expanded-state.png)
188213

189-
![](/assets/components/table/advanced-table/advanced-table-sticky-header.png)
214+
- Mixed State displays when some, but not all, rows are expanded.
190215

216+
![](/assets/components/table/advanced-table/expandable-rows-mixed-state.png)
217+
<Doc::ImageCaption @text="The mixed state provides a visual cue that expansion states vary within the table. Selecting the button in this state expands all rows.
218+
"/> -->
191219
### Striping
192220

193221
!!! Info
Loading
Loading
Loading

0 commit comments

Comments
 (0)