docs(table): add grouped rows example (#4074)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/content/3.components/table.md

@@ -260,6 +260,30 @@ You can use the `expanded` prop to control the expandable state of the rows (can
 You could also add this action to the [`DropdownMenu`](/components/dropdown-menu) component inside the `actions` column.
 ::
 
+### With grouped rows
+
+You can group rows based on a given column value and show/hide sub rows via some button added to the cell using the TanStack Table [Grouping APIs](https://tanstack.com/table/latest/docs/api/features/grouping).
+
+#### Important parts:
+
+* Add prop `grouping` to `UTable` component with an array of column ids you want to group by.
+* Add prop `grouping-options` to `UTable`. It must include `getGroupedRowModel`, you can import it from `@tanstack/vue-table` or implement your own.
+* Expand rows via `row.toggleExpanded()` method on any cell of the row. Keep in mind, it also toggles `#expanded` slot.
+* Use `aggregateFn` on column definition to define how to aggregate the rows.
+* `agregatedCell` renderer on column definition only works if there is no `cell` renderer.
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-grouped-rows-example'
+highlights:
+  - 159
+  - 169
+class: '!p-0'
+---
+::
+
 ### With row selection
 
 You can add a new column that renders a [Checkbox](/components/checkbox) component inside the `header` and `cell` to select rows using the TanStack Table [Row Selection APIs](https://tanstack.com/table/latest/docs/api/features/row-selection).