diff --git a/website/docs/components/table/advanced-table/partials/guidelines/guidelines.md b/website/docs/components/table/advanced-table/partials/guidelines/guidelines.md index 9d4fab56ce..3ba0db914b 100644 --- a/website/docs/components/table/advanced-table/partials/guidelines/guidelines.md +++ b/website/docs/components/table/advanced-table/partials/guidelines/guidelines.md @@ -144,6 +144,7 @@ Sticky headers keep column labels visible while scrolling, aiding navigation in ![](/assets/components/table/advanced-table/advanced-table-sticky-header.png) + ### Expandable rows Expandable rows let users show or hide more content without navigating away from the table. The expanded content should align with the header labels, even if the parent row includes minimal data. @@ -167,6 +168,35 @@ Avoid using different density settings for parent and child rows. !!! +### Expand/Collapse All Button +The Expand/Collapse All button allows users to expand or collapse all rows, including nested rows. It provides quick access to more content but may impact readability when content is long or detailed. + +#### Interactions + +##### Default state + +The Advanced Table supports any combination of expanded or collapsed rows on load. The button reflects the initial state. + +![Expand all button with an expand icon.](/assets/components/table/advanced-table/expandable-rows-expand-all.png) + + +![Expand all button with a collapse icon.](/assets/components/table/advanced-table/expandable-rows-collapse-all.png) + + +##### Collapsed state + +![](/assets/components/table/advanced-table/expandable-rows-expand-state.png) + + +##### Expanded state + +![](/assets/components/table/advanced-table/expandable-rows-collapse-state.png) + + +##### Mixed state + +![](/assets/components/table/advanced-table/expandable-rows-mixed-state.png) + ### Striping diff --git a/website/public/assets/components/table/advanced-table/expandable-rows-collapse-all.png b/website/public/assets/components/table/advanced-table/expandable-rows-collapse-all.png new file mode 100644 index 0000000000..f02863bedc Binary files /dev/null and b/website/public/assets/components/table/advanced-table/expandable-rows-collapse-all.png differ diff --git a/website/public/assets/components/table/advanced-table/expandable-rows-collapse-state.png b/website/public/assets/components/table/advanced-table/expandable-rows-collapse-state.png new file mode 100644 index 0000000000..1771f70699 Binary files /dev/null and b/website/public/assets/components/table/advanced-table/expandable-rows-collapse-state.png differ diff --git a/website/public/assets/components/table/advanced-table/expandable-rows-expand-all.png b/website/public/assets/components/table/advanced-table/expandable-rows-expand-all.png new file mode 100644 index 0000000000..7b9fa210f0 Binary files /dev/null and b/website/public/assets/components/table/advanced-table/expandable-rows-expand-all.png differ diff --git a/website/public/assets/components/table/advanced-table/expandable-rows-expand-state.png b/website/public/assets/components/table/advanced-table/expandable-rows-expand-state.png new file mode 100644 index 0000000000..008aae8e98 Binary files /dev/null and b/website/public/assets/components/table/advanced-table/expandable-rows-expand-state.png differ diff --git a/website/public/assets/components/table/advanced-table/expandable-rows-mixed-state.png b/website/public/assets/components/table/advanced-table/expandable-rows-mixed-state.png new file mode 100644 index 0000000000..a765fa073a Binary files /dev/null and b/website/public/assets/components/table/advanced-table/expandable-rows-mixed-state.png differ