@rio-cloud/uikit-mcp 1.1.10 → 1.1.12

package/dist/docs/components/table.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Table
 *Source:* https://uikit.developers.rio.cloud/#/components/table
-*Captured:* 2026-04-20T12:56:03.494Z
+*Captured:* 2026-05-06T12:15:46.902Z
 
 The new Table component is the preferred approach for building tables in the UIKIT. It provides a declarative API for headers, rows, cells, and footers while keeping table and card views consistent across responsive layouts.
 
@@ -1445,6 +1445,7 @@ const TableResizableSortableExample = () => {
         sortBy: String(sortKey),
         sortDirection,
     });
+    const visibleColumns = columns.filter(column => column.visible !== false);
 
     const selection = useTableSelection({
         rows: sortedItems,
@@ -1518,41 +1519,84 @@ const TableResizableSortableExample = () => {
                 onColumnOrderChange={handleColumnOrderChange}
             >
                 <TableHeader>
-                    {columns
-                        .filter(column => column.visible !== false)
-                        .map(column => (
-                            <TableHeaderColumn
-                                key={column.key}
-                                columnKey={column.key}
-                                width={column.width}
-                                sortable={column.sortable}
-                                resizeable={column.resizeable}
-                                draggable={column.draggable}
-                                horizontalAlign={column.horizontalAlign}
-                                icon={column.icon}
-                                hideLabel={column.hideLabel}
-                            >
-                                {column.label}
-                            </TableHeaderColumn>
-                        ))}
+                    {visibleColumns.map(column => (
+                        <TableHeaderColumn
+                            key={column.key}
+                            columnKey={column.key}
+                            width={column.width}
+                            sortable={column.sortable}
+                            resizeable={column.resizeable}
+                            draggable={column.draggable}
+                            horizontalAlign={column.horizontalAlign}
+                            icon={column.icon}
+                            hideLabel={column.hideLabel}
+                        >
+                            {column.label}
+                        </TableHeaderColumn>
+                    ))}
                 </TableHeader>
 
                 <TableBody>
                     {sortedItems.map(row => (
                         <TableRow key={row.id} id={row.id}>
-                            <TableColumn columnKey='orderId'>{row.orderId}</TableColumn>
-                            <TableColumn columnKey='vehicle'>{row.vehicle}</TableColumn>
-                            <TableColumn columnKey='route'>{row.route}</TableColumn>
-                            <TableColumn columnKey='cargo'>{row.cargo}</TableColumn>
-                            <TableColumn columnKey='status'>
-                                <span className={resolveStatusLabelClassName(row.status)}>{row.status}</span>
-                            </TableColumn>
-                            <TableColumn columnKey='eta' horizontalAlign='right'>
-                                {row.eta}
-                            </TableColumn>
-                            <TableColumn columnKey='actions' horizontalAlign='right'>
-                                <Button bsStyle='default' iconName='rioglyph-pencil' iconOnly />
-                            </TableColumn>
+                            {visibleColumns.map(column => {
+                                switch (column.key) {
+                                    case 'status':
+                                        return (
+                                            <TableColumn key={column.key} columnKey={column.key}>
+                                                <span className={resolveStatusLabelClassName(row.status)}>
+                                                    {row.status}
+                                                </span>
+                                            </TableColumn>
+                                        );
+                                    case 'eta':
+                                        return (
+                                            <TableColumn
+                                                key={column.key}
+                                                columnKey={column.key}
+                                                horizontalAlign='right'
+                                            >
+                                                {row.eta}
+                                            </TableColumn>
+                                        );
+                                    case 'actions':
+                                        return (
+                                            <TableColumn
+                                                key={column.key}
+                                                columnKey={column.key}
+                                                horizontalAlign='right'
+                                            >
+                                                <Button bsStyle='default' iconName='rioglyph-pencil' iconOnly />
+                                            </TableColumn>
+                                        );
+                                    case 'orderId':
+                                        return (
+                                            <TableColumn key={column.key} columnKey={column.key}>
+                                                {row.orderId}
+                                            </TableColumn>
+                                        );
+                                    case 'vehicle':
+                                        return (
+                                            <TableColumn key={column.key} columnKey={column.key}>
+                                                {row.vehicle}
+                                            </TableColumn>
+                                        );
+                                    case 'route':
+                                        return (
+                                            <TableColumn key={column.key} columnKey={column.key}>
+                                                {row.route}
+                                            </TableColumn>
+                                        );
+                                    case 'cargo':
+                                        return (
+                                            <TableColumn key={column.key} columnKey={column.key}>
+                                                {row.cargo}
+                                            </TableColumn>
+                                        );
+                                    default:
+                                        return null;
+                                }
+                            })}
                         </TableRow>
                     ))}
                 </TableBody>
@@ -1637,7 +1681,7 @@ const useTableDemoUrlState = (params: {
             <div class="table-toolbar-group-right">
                 <div class="table-toolbar-column align-self-end">
                     <div class="dropdown btn-group">
-                        <button type="button" id="qi45h0fgeg" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">
+                        <button type="button" id="d77tyokvyod" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">
                             <span class="display-inline-flex align-items-center gap-5">
                                 <span class="rioglyph rioglyph-table-view">
                                 </span>
@@ -1652,7 +1696,7 @@ const useTableDemoUrlState = (params: {
     <div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(0, 100px) minmax(0, 100px) minmax(0, 68px); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3 table-col-4 table-col-5 table-col-6 table-col-7&quot;; --table-column-count: 8; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="8">
         <div class="table-head" role="rowgroup">
             <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
-                <div class="table-head-cell table-selection-cell table-align-center" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="indeterminate">
@@ -1696,7 +1740,7 @@ const useTableDemoUrlState = (params: {
                         <div class="table-head-cell-content-row">
                             <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-0">
                                 <span class="table-head-label">
-                                    <span class="display-inline-flex align-items-center gap-5">
+                                    <span class="display-flex align-items-center gap-5">
                                         <span class="text-color-dark rioglyph rioglyph-route">
                                         </span>
                                         <span>Route</span>
@@ -1716,7 +1760,7 @@ const useTableDemoUrlState = (params: {
                                     <span class="sort-arrows ">
                                     </span>
                                     <span class="table-head-label">
-                                        <span class="display-inline-flex align-items-center gap-5">
+                                        <span class="display-flex align-items-center gap-5">
                                             <span class="text-color-dark rioglyph rioglyph-palette">
                                             </span>
                                             <span>Cargo</span>
@@ -1778,7 +1822,7 @@ const useTableDemoUrlState = (params: {
         </div>
         <div class="table-body" role="rowgroup">
             <div id="row-1" class="table-row" data-index="0" data-row-id="row-1" role="row">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -1817,7 +1861,7 @@ const useTableDemoUrlState = (params: {
                 </div>
             </div>
             <div id="row-2" class="table-row table-row-selected" data-index="1" data-row-id="row-2" role="row">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="" checked="">
@@ -1856,7 +1900,7 @@ const useTableDemoUrlState = (params: {
                 </div>
             </div>
             <div id="row-3" class="table-row" data-index="2" data-row-id="row-3" role="row">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -1895,7 +1939,7 @@ const useTableDemoUrlState = (params: {
                 </div>
             </div>
             <div id="row-4" class="table-row" data-index="3" data-row-id="row-4" role="row">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -2092,7 +2136,7 @@ export default TableSelectionExample;
     <div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
         <div class="table-head" role="rowgroup">
             <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
-                <div class="table-head-cell table-selection-cell table-align-center" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -2132,7 +2176,7 @@ export default TableSelectionExample;
         </div>
         <div class="table-body" role="rowgroup">
             <div id="101" class="table-row table-row-clickable" data-index="0" data-row-id="101" role="row" tabindex="0">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -2152,7 +2196,7 @@ export default TableSelectionExample;
                 </div>
             </div>
             <div id="102" class="table-row table-row-active table-row-clickable" data-index="1" data-row-id="102" role="row" tabindex="0">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -2172,7 +2216,7 @@ export default TableSelectionExample;
                 </div>
             </div>
             <div id="103" class="table-row table-row-clickable" data-index="2" data-row-id="103" role="row" tabindex="0">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -2192,7 +2236,7 @@ export default TableSelectionExample;
                 </div>
             </div>
             <div id="104" class="table-row table-row-clickable" data-index="3" data-row-id="104" role="row" tabindex="0">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -2402,10 +2446,10 @@ export default TableSelectionBatchExample;
     <div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
         <div class="table-head" role="rowgroup">
             <div class="table-head-grid table-head-grid-custom-selection" role="row" style="grid-template-rows: repeat(1, auto);">
-                <div class="table-head-cell table-selection-cell table-align-center table-selection-cell-custom-content" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle table-selection-cell-custom-content" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <div class="dropdown btn-group">
-                            <button type="button" id="ak0ltwcaxb7" class="btn btn-default btn-outline btn-sm btn-icon-only btn-component dropdown-toggle table-batch-dropdown-button no-hover-scale" tabindex="0">
+                            <button type="button" id="6gdh9taa73u" class="btn btn-default btn-outline btn-sm btn-icon-only btn-component dropdown-toggle table-batch-dropdown-button no-hover-scale" tabindex="0">
                                 <span class="rioglyph rioglyph-checkboxes">
                                 </span>
                             </button>
@@ -2443,7 +2487,7 @@ export default TableSelectionBatchExample;
         </div>
         <div class="table-body" role="rowgroup">
             <div id="101" class="table-row table-row-clickable" data-index="0" data-row-id="101" role="row" tabindex="0">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -2463,7 +2507,7 @@ export default TableSelectionBatchExample;
                 </div>
             </div>
             <div id="102" class="table-row table-row-clickable" data-index="1" data-row-id="102" role="row" tabindex="0">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -2483,7 +2527,7 @@ export default TableSelectionBatchExample;
                 </div>
             </div>
             <div id="103" class="table-row table-row-clickable" data-index="2" data-row-id="103" role="row" tabindex="0">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -2503,7 +2547,7 @@ export default TableSelectionBatchExample;
                 </div>
             </div>
             <div id="104" class="table-row table-row-clickable" data-index="3" data-row-id="104" role="row" tabindex="0">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -2714,7 +2758,7 @@ export default TableSelectionFooterBatchExample;
 <div class="table table-view-table table-hover border table-rounded table-has-head table-has-footer" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
     <div class="table-head" role="rowgroup">
         <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
-            <div class="table-head-cell table-selection-cell table-align-center" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+            <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                 <div class="table-selection-control">
                     <label class="checkbox" tabindex="0">
                         <input type="checkbox" class="">
@@ -2754,7 +2798,7 @@ export default TableSelectionFooterBatchExample;
     </div>
     <div class="table-body" role="rowgroup">
         <div id="201" class="table-row" data-index="0" data-row-id="201" role="row">
-            <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                 <div class="table-selection-control">
                     <label class="checkbox" tabindex="0">
                         <input type="checkbox" class="">
@@ -2774,7 +2818,7 @@ export default TableSelectionFooterBatchExample;
             </div>
         </div>
         <div id="202" class="table-row" data-index="1" data-row-id="202" role="row">
-            <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                 <div class="table-selection-control">
                     <label class="checkbox" tabindex="0">
                         <input type="checkbox" class="">
@@ -2794,7 +2838,7 @@ export default TableSelectionFooterBatchExample;
             </div>
         </div>
         <div id="203" class="table-row" data-index="2" data-row-id="203" role="row">
-            <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                 <div class="table-selection-control">
                     <label class="checkbox" tabindex="0">
                         <input type="checkbox" class="">
@@ -2814,7 +2858,7 @@ export default TableSelectionFooterBatchExample;
             </div>
         </div>
         <div id="204" class="table-row" data-index="3" data-row-id="204" role="row">
-            <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                 <div class="table-selection-control">
                     <label class="checkbox" tabindex="0">
                         <input type="checkbox" class="">
@@ -2840,7 +2884,7 @@ export default TableSelectionFooterBatchExample;
                 <div class="table-cell-content">
                     <div class="display-flex gap-15 align-items-center">
                         <div class="dropdown btn-group">
-                            <button type="button" id="vzevzgkeqeg" class="btn btn-default btn-outline btn-sm btn-icon-only btn-component dropdown-toggle table-batch-dropdown-button no-hover-scale" tabindex="0">
+                            <button type="button" id="71i91m21ver" class="btn btn-default btn-outline btn-sm btn-icon-only btn-component dropdown-toggle table-batch-dropdown-button no-hover-scale" tabindex="0">
                                 <span class="rioglyph rioglyph-checkboxes">
                                 </span>
                             </button>
@@ -3036,7 +3080,7 @@ export default TableSelectiveRowsExample;
     <div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
         <div class="table-head" role="rowgroup">
             <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
-                <div class="table-head-cell table-selection-cell table-align-center" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -3076,7 +3120,7 @@ export default TableSelectiveRowsExample;
         </div>
         <div class="table-body" role="rowgroup">
             <div id="101" class="table-row table-row-clickable" data-index="0" data-row-id="101" role="row" tabindex="0">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -3096,7 +3140,7 @@ export default TableSelectiveRowsExample;
                 </div>
             </div>
             <div id="102" class="table-row table-row-clickable" data-index="1" data-row-id="102" role="row" tabindex="0">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                 </div>
                 <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                     <div class="table-cell-content overflow-hidden">Munich to Cologne</div>
@@ -3110,7 +3154,7 @@ export default TableSelectiveRowsExample;
                 </div>
             </div>
             <div id="103" class="table-row table-row-clickable" data-index="2" data-row-id="103" role="row" tabindex="0">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -3130,7 +3174,7 @@ export default TableSelectiveRowsExample;
                 </div>
             </div>
             <div id="104" class="table-row table-row-clickable" data-index="3" data-row-id="104" role="row" tabindex="0">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                 </div>
                 <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                     <div class="table-cell-content overflow-hidden">Nürnberg to Frankfurt</div>
@@ -3300,7 +3344,7 @@ export default TableDisabledRowsExample;
     <div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 5; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="5">
         <div class="table-head" role="rowgroup">
             <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
-                <div class="table-head-cell table-selection-cell table-align-center" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="indeterminate">
@@ -3349,7 +3393,7 @@ export default TableDisabledRowsExample;
         </div>
         <div class="table-body" role="rowgroup">
             <div id="row-1" class="table-row table-row-selected table-row-clickable" data-index="0" data-row-id="row-1" role="row" tabindex="0">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="" checked="">
@@ -3372,7 +3416,7 @@ export default TableDisabledRowsExample;
                 </div>
             </div>
             <div id="row-2" class="table-row table-row-disabled table-row-no-hover" data-index="1" data-row-id="row-2" role="row">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox disabled" tabindex="0">
                             <input type="checkbox" disabled="" class="">
@@ -3395,7 +3439,7 @@ export default TableDisabledRowsExample;
                 </div>
             </div>
             <div id="row-3" class="table-row table-row-clickable" data-index="2" data-row-id="row-3" role="row" tabindex="0">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -3961,7 +4005,7 @@ export default TableToolbarLayoutGuidelineExample;
                 </div>
                 <div class="table-toolbar-column align-self-end table-toolbar-column-separator">
                     <div class="dropdown btn-group">
-                        <button type="button" id="t77nqu8ak1j" class="btn btn-default btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                        <button type="button" id="xbcdoub07go" class="btn btn-default btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                             <span class="rioglyph rioglyph-filter">
                             </span>
                         </button>
@@ -4038,7 +4082,7 @@ export default TableToolbarLayoutGuidelineExample;
                             </div>
                         </div>
                         <div class="dropdown btn-group">
-                            <button type="button" id="uqq5utpsksr" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">
+                            <button type="button" id="rka0nzxen7" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">
                                 <span class="display-inline-flex align-items-center gap-5">
                                     <span class="rioglyph rioglyph-table-view">
                                     </span>
@@ -4054,10 +4098,10 @@ export default TableToolbarLayoutGuidelineExample;
     <div class="table table-view-table border table-rounded table-has-head" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 5; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="5">
         <div class="table-head" role="rowgroup">
             <div class="table-head-grid table-head-grid-custom-selection" role="row" style="grid-template-rows: repeat(1, auto);">
-                <div class="table-head-cell table-selection-cell table-align-center table-selection-cell-custom-content" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle table-selection-cell-custom-content" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <div class="dropdown btn-group">
-                            <button type="button" id="ii1tw49mapb" class="btn btn-default btn-outline btn-sm btn-icon-only btn-component dropdown-toggle table-batch-dropdown-button no-hover-scale" tabindex="0">
+                            <button type="button" id="kye79jtq46l" class="btn btn-default btn-outline btn-sm btn-icon-only btn-component dropdown-toggle table-batch-dropdown-button no-hover-scale" tabindex="0">
                                 <span class="rioglyph rioglyph-checkboxes">
                                 </span>
                             </button>
@@ -4104,7 +4148,7 @@ export default TableToolbarLayoutGuidelineExample;
         </div>
         <div class="table-body" role="rowgroup">
             <div id="request-1" class="table-row" data-index="0" data-row-id="request-1" role="row">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -4127,7 +4171,7 @@ export default TableToolbarLayoutGuidelineExample;
                 </div>
             </div>
             <div id="request-2" class="table-row table-row-selected" data-index="1" data-row-id="request-2" role="row">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="" checked="">
@@ -4150,7 +4194,7 @@ export default TableToolbarLayoutGuidelineExample;
                 </div>
             </div>
             <div id="request-3" class="table-row" data-index="2" data-row-id="request-3" role="row">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -4173,7 +4217,7 @@ export default TableToolbarLayoutGuidelineExample;
                 </div>
             </div>
             <div id="request-4" class="table-row table-row-selected" data-index="3" data-row-id="request-4" role="row">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="" checked="">
@@ -4196,7 +4240,7 @@ export default TableToolbarLayoutGuidelineExample;
                 </div>
             </div>
             <div id="request-5" class="table-row" data-index="4" data-row-id="request-5" role="row">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -4219,7 +4263,7 @@ export default TableToolbarLayoutGuidelineExample;
                 </div>
             </div>
             <div id="request-6" class="table-row" data-index="5" data-row-id="request-6" role="row">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -4242,7 +4286,7 @@ export default TableToolbarLayoutGuidelineExample;
                 </div>
             </div>
             <div id="request-7" class="table-row" data-index="6" data-row-id="request-7" role="row">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -4265,7 +4309,7 @@ export default TableToolbarLayoutGuidelineExample;
                 </div>
             </div>
             <div id="request-8" class="table-row" data-index="7" data-row-id="request-8" role="row">
-                <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-selection-control">
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
@@ -5670,7 +5714,7 @@ export default TableToolbarDropdownFilterExample;
             <div class="table-toolbar-group-right">
                 <div class="table-toolbar-column align-self-end table-toolbar-column-separator">
                     <div class="dropdown btn-group">
-                        <button type="button" id="fxw9flmpscr" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">
+                        <button type="button" id="4pdt96djmoi" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">
                             <span class="rioglyph rioglyph-filter">
                             </span>Filter</button>
                     </div>
@@ -7351,7 +7395,7 @@ export default TableColumnFilterExample;
                             </button>
                             <span class="table-head-filter">
                                 <div class="dropdown btn-group">
-                                    <button type="button" id="1zuz0hop01ij" class="btn btn-default btn-outline btn-xs btn-component dropdown-toggle table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small padding-left-2" tabindex="0">
+                                    <button type="button" id="301ayxijtrt" class="btn btn-default btn-outline btn-xs btn-component dropdown-toggle table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small padding-left-2" tabindex="0">
                                         <span class="display-flex gap-0 align-items-center text-color-dark">
                                             <span class="text-size-16 rioglyph rioglyph-filter-active" aria-hidden="true">
                                             </span>
@@ -7375,7 +7419,7 @@ export default TableColumnFilterExample;
                             </button>
                             <span class="table-head-filter">
                                 <div class="dropdown btn-group">
-                                    <button type="button" id="f8qc1nsnml7" class="btn btn-default btn-outline btn-xs btn-icon-only btn-component dropdown-toggle table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small" tabindex="0">
+                                    <button type="button" id="v2mj5nb9dad" class="btn btn-default btn-outline btn-xs btn-icon-only btn-component dropdown-toggle table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small" tabindex="0">
                                         <span class="display-flex gap-0 align-items-center text-color-dark">
                                             <span class="text-size-16 rioglyph rioglyph-filter-active" aria-hidden="true">
                                             </span>
@@ -7560,7 +7604,7 @@ export default TableHeaderTruncationExample;
                         </span>
                         <span class="table-head-filter">
                             <div class="dropdown btn-group">
-                                <button type="button" id="3vovlpk1hqw" class="btn btn-default btn-outline btn-xs btn-icon-only btn-component dropdown-toggle table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small" tabindex="0">
+                                <button type="button" id="d3bx5yb31it" class="btn btn-default btn-outline btn-xs btn-icon-only btn-component dropdown-toggle table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small" tabindex="0">
                                     <span class="display-flex gap-0 align-items-center text-color-dark">
                                         <span class="text-size-16 rioglyph rioglyph-filter" aria-hidden="true">
                                         </span>
@@ -7774,7 +7818,7 @@ export default TableHeaderContentVariantsExample;
                     <div class="table-head-cell-content-row">
                         <span class="table-head-label-wrapper">
                             <span class="table-head-label">
-                                <span class="display-inline-flex align-items-center gap-5">
+                                <span class="display-flex align-items-center gap-5">
                                     <span class="text-color-dark rioglyph rioglyph-volume">
                                     </span>
                                     <span>
@@ -9818,7 +9862,7 @@ export default TableGroupedStickyRowsExample;
         <div class="scrollbar-view" style="position: relative; overflow: scroll; margin-right: 0px; margin-bottom: 0px; min-height: 0px; max-height: calc(320px);">
             <div class="scrollbar-content-wrapper">
                 <div class="table-body" role="rowgroup">
-                    <div class="table-row table-row-group table-row-group-sticky table-row-sticky-in-container" data-index="0" role="row">
+                    <div class="table-row table-row-group table-row-group-sticky table-row-sticky-in-container" data-index="0" data-row-id="group-0" role="row">
                         <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                             <div class="table-cell-content">
                                 <div class="display-flex align-items-center gap-10">
@@ -9890,7 +9934,7 @@ export default TableGroupedStickyRowsExample;
                             <div class="table-cell-content">Total projects for Amy Elsner: 5</div>
                         </div>
                     </div>
-                    <div class="table-row table-row-group table-row-group-sticky table-row-sticky-in-container" data-index="7" role="row">
+                    <div class="table-row table-row-group table-row-group-sticky table-row-sticky-in-container" data-index="7" data-row-id="group-7" role="row">
                         <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                             <div class="table-cell-content">
                                 <div class="display-flex align-items-center gap-10">
@@ -9962,7 +10006,7 @@ export default TableGroupedStickyRowsExample;
                             <div class="table-cell-content">Total projects for Anna Fali: 5</div>
                         </div>
                     </div>
-                    <div class="table-row table-row-group table-row-group-sticky table-row-sticky-in-container" data-index="14" role="row">
+                    <div class="table-row table-row-group table-row-group-sticky table-row-sticky-in-container" data-index="14" data-row-id="group-14" role="row">
                         <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                             <div class="table-cell-content">
                                 <div class="display-flex align-items-center gap-10">
@@ -10034,7 +10078,7 @@ export default TableGroupedStickyRowsExample;
                             <div class="table-cell-content">Total projects for Ben Turner: 5</div>
                         </div>
                     </div>
-                    <div class="table-row table-row-group table-row-group-sticky table-row-sticky-in-container" data-index="21" role="row">
+                    <div class="table-row table-row-group table-row-group-sticky table-row-sticky-in-container" data-index="21" data-row-id="group-21" role="row">
                         <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                             <div class="table-cell-content">
                                 <div class="display-flex align-items-center gap-10">
@@ -10575,6 +10619,10 @@ Use stickyColumns={{ left: 1 }} to keep the currently first visible data column
 
 > Note: Sticky columns currently work reliably only when no TableBody maxHeight is set.
 
+> Note
+
+Sticky columns currently work reliably only when no TableBody maxHeight is set.
+
 ### Example: Vehicle access handover
 
 Request
@@ -10930,7 +10978,7 @@ export default TableStickyFirstColumnExample;
             <div class="table-scroll-content" role="presentation">
                 <div class="table-head" role="rowgroup">
                     <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
-                        <div class="table-head-cell table-selection-cell table-align-center" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                        <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                             <div class="table-selection-control">
                                 <label class="checkbox" tabindex="0">
                                     <input type="checkbox" class="">
@@ -11021,13 +11069,13 @@ export default TableStickyFirstColumnExample;
                     </div>
                 </div>
                 <div class="table-body" role="rowgroup">
-                    <div class="table-row table-row-group" data-index="0" role="row">
+                    <div class="table-row table-row-group" data-index="0" data-row-id="group-0" role="row">
                         <div class="table-cell table-group-cell" role="cell" aria-colspan="9">
                             <div class="table-cell-content">Morning shift</div>
                         </div>
                     </div>
                     <div id="REQ-3004" class="table-row" data-index="1" data-row-id="REQ-3004" role="row">
-                        <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                        <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                             <div class="table-selection-control">
                                 <label class="checkbox" tabindex="0">
                                     <input type="checkbox" class="">
@@ -11069,7 +11117,7 @@ export default TableStickyFirstColumnExample;
                         </div>
                     </div>
                     <div id="REQ-3021" class="table-row" data-index="2" data-row-id="REQ-3021" role="row">
-                        <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                        <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                             <div class="table-selection-control">
                                 <label class="checkbox" tabindex="0">
                                     <input type="checkbox" class="">
@@ -11115,13 +11163,13 @@ export default TableStickyFirstColumnExample;
                             <div class="table-cell-content">2 requests in morning shift</div>
                         </div>
                     </div>
-                    <div class="table-row table-row-group" data-index="4" role="row">
+                    <div class="table-row table-row-group" data-index="4" data-row-id="group-4" role="row">
                         <div class="table-cell table-group-cell" role="cell" aria-colspan="9">
                             <div class="table-cell-content">Night shift</div>
                         </div>
                     </div>
                     <div id="REQ-3057" class="table-row" data-index="5" data-row-id="REQ-3057" role="row">
-                        <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                        <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                             <div class="table-selection-control">
                                 <label class="checkbox" tabindex="0">
                                     <input type="checkbox" class="">
@@ -11163,7 +11211,7 @@ export default TableStickyFirstColumnExample;
                         </div>
                     </div>
                     <div id="REQ-3072" class="table-row" data-index="6" data-row-id="REQ-3072" role="row">
-                        <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                        <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                             <div class="table-selection-control">
                                 <label class="checkbox" tabindex="0">
                                     <input type="checkbox" class="">
@@ -11286,6 +11334,10 @@ Use stickyColumns={{ right: 1 }} to keep the currently last visible data column
 
 > Note: Sticky columns currently work reliably only when no TableBody maxHeight is set.
 
+> Note
+
+Sticky columns currently work reliably only when no TableBody maxHeight is set.
+
 ### Example: Vehicle access handover
 
 Request
@@ -11662,7 +11714,7 @@ export default TableStickyLastColumnExample;
             <div class="table-scroll-content" role="presentation">
                 <div class="table-head" role="rowgroup">
                     <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
-                        <div class="table-head-cell table-selection-cell table-align-center" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                        <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                             <div class="table-selection-control">
                                 <label class="checkbox" tabindex="0">
                                     <input type="checkbox" class="">
@@ -11753,13 +11805,13 @@ export default TableStickyLastColumnExample;
                     </div>
                 </div>
                 <div class="table-body" role="rowgroup">
-                    <div class="table-row table-row-group" data-index="0" role="row">
+                    <div class="table-row table-row-group" data-index="0" data-row-id="group-0" role="row">
                         <div class="table-cell table-group-cell" role="cell" aria-colspan="9">
                             <div class="table-cell-content">Morning shift</div>
                         </div>
                     </div>
                     <div id="REQ-3004" class="table-row" data-index="1" data-row-id="REQ-3004" role="row">
-                        <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                        <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                             <div class="table-selection-control">
                                 <label class="checkbox" tabindex="0">
                                     <input type="checkbox" class="">
@@ -11807,7 +11859,7 @@ export default TableStickyLastColumnExample;
                         </div>
                     </div>
                     <div id="REQ-3021" class="table-row" data-index="2" data-row-id="REQ-3021" role="row">
-                        <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                        <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                             <div class="table-selection-control">
                                 <label class="checkbox" tabindex="0">
                                     <input type="checkbox" class="">
@@ -11859,13 +11911,13 @@ export default TableStickyLastColumnExample;
                             <div class="table-cell-content">2 requests in morning shift</div>
                         </div>
                     </div>
-                    <div class="table-row table-row-group" data-index="4" role="row">
+                    <div class="table-row table-row-group" data-index="4" data-row-id="group-4" role="row">
                         <div class="table-cell table-group-cell" role="cell" aria-colspan="9">
                             <div class="table-cell-content">Night shift</div>
                         </div>
                     </div>
                     <div id="REQ-3057" class="table-row" data-index="5" data-row-id="REQ-3057" role="row">
-                        <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                        <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                             <div class="table-selection-control">
                                 <label class="checkbox" tabindex="0">
                                     <input type="checkbox" class="">
@@ -11913,7 +11965,7 @@ export default TableStickyLastColumnExample;
                         </div>
                     </div>
                     <div id="REQ-3072" class="table-row" data-index="6" data-row-id="REQ-3072" role="row">
-                        <div class="table-cell table-selection-cell" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                        <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                             <div class="table-selection-control">
                                 <label class="checkbox" tabindex="0">
                                     <input type="checkbox" class="">
@@ -12450,10 +12502,10 @@ const TableMultiRowHeaderExample = () => (
         <Table rowKey='id' {...tableStyle}>
             <TableHeader>
                 <TableHeaderRow>
-                    <TableHeaderColumn columnKey='product' rowSpan={2}>
+                    <TableHeaderColumn columnKey='product' rowSpan={2} verticalAlign='bottom'>
                         Product
                     </TableHeaderColumn>
-                    <TableHeaderColumn columnKey='metric' rowSpan={2}>
+                    <TableHeaderColumn columnKey='metric' rowSpan={2} verticalAlign='bottom'>
                         Metric
                     </TableHeaderColumn>
                     <TableHeaderColumn colSpan={3} horizontalAlign='center'>
@@ -12508,7 +12560,7 @@ export default TableMultiRowHeaderExample;
     <div class="table table-view-table table-grid-lines border table-rounded table-has-head table-has-footer" role="table" style="--table-columns: minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4 table-col-5&quot;; --table-column-count: 5; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="5">
         <div class="table-head" role="rowgroup">
             <div class="table-head-grid" role="presentation" style="grid-template-rows: repeat(2, auto);">
-                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="product" role="columnheader" aria-colindex="1" aria-rowindex="1" aria-rowspan="2" style="grid-area: 1 / 1 / span 2 / span 1;">
+                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-bottom" data-column="product" role="columnheader" aria-colindex="1" aria-rowindex="1" aria-rowspan="2" style="grid-area: 1 / 1 / span 2 / span 1;">
                     <div class="table-head-cell-content">
                         <div class="table-head-cell-content-row">
                             <span class="table-head-label-wrapper">
@@ -12517,7 +12569,7 @@ export default TableMultiRowHeaderExample;
                         </div>
                     </div>
                 </div>
-                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="metric" role="columnheader" aria-colindex="2" aria-rowindex="1" aria-rowspan="2" style="grid-area: 1 / 2 / span 2 / span 1;">
+                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-bottom" data-column="metric" role="columnheader" aria-colindex="2" aria-rowindex="1" aria-rowspan="2" style="grid-area: 1 / 2 / span 2 / span 1;">
                     <div class="table-head-cell-content">
                         <div class="table-head-cell-content-row">
                             <span class="table-head-label-wrapper">
@@ -12566,10 +12618,10 @@ export default TableMultiRowHeaderExample;
         </div>
         <div class="table-body" role="rowgroup">
             <div id="1" class="table-row" data-index="0" data-row-id="1" role="row">
-                <div class="table-cell table-align-left table-vertical-align-middle" data-column="product" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-align-left table-vertical-align-bottom" data-column="product" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-cell-content overflow-hidden">Product 1</div>
                 </div>
-                <div class="table-cell table-align-left table-vertical-align-middle" data-column="metric" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell table-align-left table-vertical-align-bottom" data-column="metric" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                     <div class="table-cell-content overflow-hidden">Income</div>
                 </div>
                 <div class="table-cell table-align-right table-vertical-align-middle" data-column="year2023" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
@@ -12583,10 +12635,10 @@ export default TableMultiRowHeaderExample;
                 </div>
             </div>
             <div id="2" class="table-row" data-index="1" data-row-id="2" role="row">
-                <div class="table-cell table-align-left table-vertical-align-middle" data-column="product" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-align-left table-vertical-align-bottom" data-column="product" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-cell-content overflow-hidden">Product 1</div>
                 </div>
-                <div class="table-cell table-align-left table-vertical-align-middle" data-column="metric" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell table-align-left table-vertical-align-bottom" data-column="metric" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                     <div class="table-cell-content overflow-hidden">Profit</div>
                 </div>
                 <div class="table-cell table-align-right table-vertical-align-middle" data-column="year2023" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
@@ -12604,10 +12656,10 @@ export default TableMultiRowHeaderExample;
                 </div>
             </div>
             <div id="3" class="table-row" data-index="3" data-row-id="3" role="row">
-                <div class="table-cell table-align-left table-vertical-align-middle" data-column="product" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-align-left table-vertical-align-bottom" data-column="product" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-cell-content overflow-hidden">Product 2</div>
                 </div>
-                <div class="table-cell table-align-left table-vertical-align-middle" data-column="metric" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell table-align-left table-vertical-align-bottom" data-column="metric" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                     <div class="table-cell-content overflow-hidden">Income</div>
                 </div>
                 <div class="table-cell table-align-right table-vertical-align-middle" data-column="year2023" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
@@ -12621,10 +12673,10 @@ export default TableMultiRowHeaderExample;
                 </div>
             </div>
             <div id="4" class="table-row" data-index="4" data-row-id="4" role="row">
-                <div class="table-cell table-align-left table-vertical-align-middle" data-column="product" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-align-left table-vertical-align-bottom" data-column="product" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-cell-content overflow-hidden">Product 2</div>
                 </div>
-                <div class="table-cell table-align-left table-vertical-align-middle" data-column="metric" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell table-align-left table-vertical-align-bottom" data-column="metric" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                     <div class="table-cell-content overflow-hidden">Profit</div>
                 </div>
                 <div class="table-cell table-align-right table-vertical-align-middle" data-column="year2023" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
@@ -12640,7 +12692,7 @@ export default TableMultiRowHeaderExample;
         </div>
         <div class="table-footer" role="rowgroup">
             <div class="table-row table-row-footer bg-white text-bold" role="row">
-                <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="product" role="cell" aria-colindex="1" aria-colspan="2" style="grid-area: 1 / 1 / span 1 / span 2;">
+                <div class="table-cell table-footer-cell table-align-left table-vertical-align-bottom" data-column="product" role="cell" aria-colindex="1" aria-colspan="2" style="grid-area: 1 / 1 / span 1 / span 2;">
                     <div class="table-cell-content overflow-hidden">Total Profit</div>
                 </div>
                 <div class="table-cell table-footer-cell table-align-right table-vertical-align-middle" data-column="year2023" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
@@ -15065,7 +15117,7 @@ export default TableRowActionsExample;
             <div class="table-cell table-align-right table-vertical-align-middle padding-10" data-column="actions" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                 <div class="table-cell-content overflow-hidden">
                     <div class="dropdown btn-group">
-                        <button type="button" aria-label="Row actions" id="vfhq8fte1g" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                        <button type="button" aria-label="Row actions" id="0r0xcntfo24a" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                             <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
                             </span>
                         </button>
@@ -15087,7 +15139,7 @@ export default TableRowActionsExample;
                             <span class="rioglyph rioglyph-unassigned">
                             </span>Assign</button>
                         <div class="dropdown btn-group">
-                            <button type="button" aria-label="Row actions" id="9b6oifiy6yv" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                            <button type="button" aria-label="Row actions" id="a6ax7llrezs" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                                 <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
                                 </span>
                             </button>
@@ -15613,8 +15665,8 @@ export default TableExpandedRowsExample;
             </div>
             <div class="table-cell table-align-right table-vertical-align-middle padding-y-0" data-column="actions" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                 <div class="table-cell-content overflow-hidden">
-                    <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
-                        <span class="rioglyph rioglyph-chevron-up">
+                    <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button table-expander-button-expanded" tabindex="0">
+                        <span class="rioglyph rioglyph-chevron-down">
                         </span>
                     </button>
                 </div>
@@ -15949,8 +16001,8 @@ export default TableExpandedChildRowsExample;
             </div>
             <div class="table-cell table-align-right table-vertical-align-middle padding-y-0" data-column="actions" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                 <div class="table-cell-content overflow-hidden">
-                    <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
-                        <span class="rioglyph rioglyph-chevron-up">
+                    <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button table-expander-button-expanded" tabindex="0">
+                        <span class="rioglyph rioglyph-chevron-down">
                         </span>
                     </button>
                 </div>
@@ -16535,12 +16587,12 @@ export default TableExpandableGroupRowsExample;
         </div>
     </div>
     <div class="table-body" role="rowgroup">
-        <div class="table-row table-row-group" data-index="0" role="row">
+        <div class="table-row table-row-group" data-index="0" data-row-id="group-0" role="row">
             <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                 <div class="table-cell-content">
                     <div class="display-flex align-items-center gap-10">
-                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
-                            <span class="rioglyph rioglyph-chevron-up">
+                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button table-expander-button-expanded" tabindex="0">
+                            <span class="rioglyph rioglyph-chevron-down">
                             </span>
                         </button>
                         <div class="Avatar bg-lighter" style="height: 35px;">
@@ -16600,7 +16652,7 @@ export default TableExpandableGroupRowsExample;
                 <div class="table-cell-content">Total projects for Amy Elsner: 4</div>
             </div>
         </div>
-        <div class="table-row table-row-group" data-index="6" role="row">
+        <div class="table-row table-row-group" data-index="6" data-row-id="group-6" role="row">
             <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                 <div class="table-cell-content">
                     <div class="display-flex align-items-center gap-10">
@@ -16616,7 +16668,7 @@ export default TableExpandableGroupRowsExample;
                 </div>
             </div>
         </div>
-        <div class="table-row table-row-group" data-index="7" role="row">
+        <div class="table-row table-row-group" data-index="7" data-row-id="group-7" role="row">
             <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                 <div class="table-cell-content">
                     <div class="display-flex align-items-center gap-10">
@@ -16632,7 +16684,7 @@ export default TableExpandableGroupRowsExample;
                 </div>
             </div>
         </div>
-        <div class="table-row table-row-group" data-index="8" role="row">
+        <div class="table-row table-row-group" data-index="8" data-row-id="group-8" role="row">
             <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                 <div class="table-cell-content">
                     <div class="display-flex align-items-center gap-10">
@@ -16658,148 +16710,1857 @@ export default TableExpandableGroupRowsExample;
 rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
 ```
 
-## Row animation
+## Grouped rows with selection
 
-### Example: Example 40
+Group rows can control which rows are shown while the expanded data rows still render against the table columns. Keep multi-selection controlled on Table with selectedRowIds, onSelectionChange, and showSelectionColumn.
 
-Remove row Reset table
+### Example: 5 of 33 departures
 
-Id
+Vehicle
 
-Name
+Driver
 
-VIN
+Route
+
+ETA
 
 Status
 
-1
+Berlin Hub 5 of 33 departures
 
-Lorem
+R-2041
 
-7354
+Lena Vogt
 
-Active
+Berlin - Hamburg
 
-2
+08:40
 
-Ipsum
+Ready
 
-456457
+R-2042
 
-Inactive
+Milan Weber
 
-3
+Berlin - Leipzig
 
-Dolor
+09:10
 
-895
+Loading
 
-Active
+R-2043
 
-4
+Eva Kruger
 
-Sit
+Berlin - Dresden
 
-3456
+09:35
 
-Active
+Ready
 
-5
+R-2044
 
-Amet
+Jonas Brandt
 
-2445
+Berlin - Rostock
 
-Active
+10:05
 
-6
+Delayed
 
-Consectetur
+R-2045
 
-878
+Nora Seidel
 
-Active
+Berlin - Bremen
+
+10:30
+
+Ready
+
+Hamburg Yard 6 of 33 departures
+
+Munich Depot 5 of 33 departures
+
+Cologne Crossdock 6 of 33 departures
+
+Frankfurt Gate 5 of 33 departures
+
+Stuttgart Terminal 6 of 33 departures
 
 #### React (tsx)
 
 ```tsx
-import { useState } from 'react';
+import { Fragment, useMemo, useState } from 'react';
 
-import Button from '@rio-cloud/rio-uikit/Button';
-import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
-import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
-import useSorting from '@rio-cloud/rio-uikit/useSorting';
+import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
+import Table, {
+    TableBody,
+    TableColumn,
+    TableExpandAllGroupsButton,
+    TableExpandedRow,
+    TableExpanderButton,
+    TableGroupRow,
+    TableHeader,
+    TableHeaderColumn,
+    type TableRowId,
+} from '@rio-cloud/rio-uikit/Table';
 
-type TableRowAnimationItem = {
-    id: number;
-    name: string;
-    vin: string;
+type DemoGroupedRowsSelectionRow = {
+    id: string;
+    groupId: string;
+    vehicle: string;
+    driver: string;
+    route: string;
+    eta: string;
     status: string;
 };
 
-const tableData: TableRowAnimationItem[] = [
+type DemoGroupedRowsSelectionGroup = {
+    id: string;
+    terminal: string;
+};
+
+const groups: DemoGroupedRowsSelectionGroup[] = [
+    { id: 'berlin', terminal: 'Berlin Hub' },
+    { id: 'hamburg', terminal: 'Hamburg Yard' },
+    { id: 'munich', terminal: 'Munich Depot' },
+    { id: 'cologne', terminal: 'Cologne Crossdock' },
+    { id: 'frankfurt', terminal: 'Frankfurt Gate' },
+    { id: 'stuttgart', terminal: 'Stuttgart Terminal' },
+];
+
+const groupIds = groups.map(group => group.id);
+
+const rows: DemoGroupedRowsSelectionRow[] = [
     {
-        id: 1,
-        name: 'Lorem',
-        vin: '7354',
-        status: 'Active',
+        id: 'berlin-1',
+        groupId: 'berlin',
+        vehicle: 'R-2041',
+        driver: 'Lena Vogt',
+        route: 'Berlin - Hamburg',
+        eta: '08:40',
+        status: 'Ready',
     },
     {
-        id: 2,
-        name: 'Ipsum',
-        vin: '456457',
-        status: 'Inactive',
+        id: 'berlin-2',
+        groupId: 'berlin',
+        vehicle: 'R-2042',
+        driver: 'Milan Weber',
+        route: 'Berlin - Leipzig',
+        eta: '09:10',
+        status: 'Loading',
     },
     {
-        id: 3,
-        name: 'Dolor',
-        vin: '895',
-        status: 'Active',
+        id: 'berlin-3',
+        groupId: 'berlin',
+        vehicle: 'R-2043',
+        driver: 'Eva Kruger',
+        route: 'Berlin - Dresden',
+        eta: '09:35',
+        status: 'Ready',
     },
     {
-        id: 4,
-        name: 'Sit',
-        vin: '3456',
-        status: 'Active',
+        id: 'berlin-4',
+        groupId: 'berlin',
+        vehicle: 'R-2044',
+        driver: 'Jonas Brandt',
+        route: 'Berlin - Rostock',
+        eta: '10:05',
+        status: 'Delayed',
     },
     {
-        id: 5,
-        name: 'Amet',
-        vin: '2445',
-        status: 'Active',
+        id: 'berlin-5',
+        groupId: 'berlin',
+        vehicle: 'R-2045',
+        driver: 'Nora Seidel',
+        route: 'Berlin - Bremen',
+        eta: '10:30',
+        status: 'Ready',
     },
     {
-        id: 6,
-        name: 'Consectetur',
-        vin: '878',
-        status: 'Active',
+        id: 'hamburg-1',
+        groupId: 'hamburg',
+        vehicle: 'H-1180',
+        driver: 'Oskar Klein',
+        route: 'Hamburg - Kiel',
+        eta: '08:55',
+        status: 'In transit',
+    },
+    {
+        id: 'hamburg-2',
+        groupId: 'hamburg',
+        vehicle: 'H-1181',
+        driver: 'Mara Stein',
+        route: 'Hamburg - Bremen',
+        eta: '09:20',
+        status: 'Ready',
+    },
+    {
+        id: 'hamburg-3',
+        groupId: 'hamburg',
+        vehicle: 'H-1182',
+        driver: 'Timo Wolf',
+        route: 'Hamburg - Lubeck',
+        eta: '09:45',
+        status: 'Loading',
+    },
+    {
+        id: 'hamburg-4',
+        groupId: 'hamburg',
+        vehicle: 'H-1183',
+        driver: 'Sina Roth',
+        route: 'Hamburg - Hannover',
+        eta: '10:15',
+        status: 'Ready',
+    },
+    {
+        id: 'hamburg-5',
+        groupId: 'hamburg',
+        vehicle: 'H-1184',
+        driver: 'Felix Graf',
+        route: 'Hamburg - Schwerin',
+        eta: '10:50',
+        status: 'Delayed',
+    },
+    {
+        id: 'hamburg-6',
+        groupId: 'hamburg',
+        vehicle: 'H-1185',
+        driver: 'Iris Lind',
+        route: 'Hamburg - Flensburg',
+        eta: '11:10',
+        status: 'Ready',
+    },
+    {
+        id: 'munich-1',
+        groupId: 'munich',
+        vehicle: 'M-3301',
+        driver: 'Anja Hofmann',
+        route: 'Munich - Augsburg',
+        eta: '08:25',
+        status: 'Ready',
+    },
+    {
+        id: 'munich-2',
+        groupId: 'munich',
+        vehicle: 'M-3302',
+        driver: 'David Lang',
+        route: 'Munich - Salzburg',
+        eta: '09:05',
+        status: 'In transit',
+    },
+    {
+        id: 'munich-3',
+        groupId: 'munich',
+        vehicle: 'M-3303',
+        driver: 'Clara Beck',
+        route: 'Munich - Regensburg',
+        eta: '09:40',
+        status: 'Ready',
+    },
+    {
+        id: 'munich-4',
+        groupId: 'munich',
+        vehicle: 'M-3304',
+        driver: 'Erik Hahn',
+        route: 'Munich - Ulm',
+        eta: '10:20',
+        status: 'Loading',
+    },
+    {
+        id: 'munich-5',
+        groupId: 'munich',
+        vehicle: 'M-3305',
+        driver: 'Paula Rehm',
+        route: 'Munich - Passau',
+        eta: '11:00',
+        status: 'Ready',
+    },
+    {
+        id: 'cologne-1',
+        groupId: 'cologne',
+        vehicle: 'C-7101',
+        driver: 'Ben Keller',
+        route: 'Cologne - Bonn',
+        eta: '08:45',
+        status: 'Ready',
+    },
+    {
+        id: 'cologne-2',
+        groupId: 'cologne',
+        vehicle: 'C-7102',
+        driver: 'Lea Sommer',
+        route: 'Cologne - Essen',
+        eta: '09:25',
+        status: 'Delayed',
+    },
+    {
+        id: 'cologne-3',
+        groupId: 'cologne',
+        vehicle: 'C-7103',
+        driver: 'Noah Frey',
+        route: 'Cologne - Dortmund',
+        eta: '09:55',
+        status: 'Loading',
+    },
+    {
+        id: 'cologne-4',
+        groupId: 'cologne',
+        vehicle: 'C-7104',
+        driver: 'Mia Busch',
+        route: 'Cologne - Aachen',
+        eta: '10:35',
+        status: 'Ready',
+    },
+    {
+        id: 'cologne-5',
+        groupId: 'cologne',
+        vehicle: 'C-7105',
+        driver: 'Lars Kunz',
+        route: 'Cologne - Koblenz',
+        eta: '11:05',
+        status: 'Ready',
+    },
+    {
+        id: 'cologne-6',
+        groupId: 'cologne',
+        vehicle: 'C-7106',
+        driver: 'Rosa Dietz',
+        route: 'Cologne - Mainz',
+        eta: '11:35',
+        status: 'In transit',
+    },
+    {
+        id: 'frankfurt-1',
+        groupId: 'frankfurt',
+        vehicle: 'F-5201',
+        driver: 'Klara May',
+        route: 'Frankfurt - Kassel',
+        eta: '08:35',
+        status: 'Ready',
+    },
+    {
+        id: 'frankfurt-2',
+        groupId: 'frankfurt',
+        vehicle: 'F-5202',
+        driver: 'Jan Otto',
+        route: 'Frankfurt - Wurzburg',
+        eta: '09:15',
+        status: 'Loading',
+    },
+    {
+        id: 'frankfurt-3',
+        groupId: 'frankfurt',
+        vehicle: 'F-5203',
+        driver: 'Sarah Blum',
+        route: 'Frankfurt - Mannheim',
+        eta: '09:50',
+        status: 'Ready',
+    },
+    {
+        id: 'frankfurt-4',
+        groupId: 'frankfurt',
+        vehicle: 'F-5204',
+        driver: 'Tom Ritter',
+        route: 'Frankfurt - Trier',
+        eta: '10:40',
+        status: 'In transit',
+    },
+    {
+        id: 'frankfurt-5',
+        groupId: 'frankfurt',
+        vehicle: 'F-5205',
+        driver: 'Nina Adler',
+        route: 'Frankfurt - Fulda',
+        eta: '11:20',
+        status: 'Delayed',
+    },
+    {
+        id: 'stuttgart-1',
+        groupId: 'stuttgart',
+        vehicle: 'S-4101',
+        driver: 'Luis Horn',
+        route: 'Stuttgart - Karlsruhe',
+        eta: '08:50',
+        status: 'Ready',
+    },
+    {
+        id: 'stuttgart-2',
+        groupId: 'stuttgart',
+        vehicle: 'S-4102',
+        driver: 'Greta Vogler',
+        route: 'Stuttgart - Freiburg',
+        eta: '09:30',
+        status: 'Loading',
+    },
+    {
+        id: 'stuttgart-3',
+        groupId: 'stuttgart',
+        vehicle: 'S-4103',
+        driver: 'Aron Weiss',
+        route: 'Stuttgart - Ulm',
+        eta: '10:00',
+        status: 'Ready',
+    },
+    {
+        id: 'stuttgart-4',
+        groupId: 'stuttgart',
+        vehicle: 'S-4104',
+        driver: 'Lina Fuchs',
+        route: 'Stuttgart - Tubingen',
+        eta: '10:45',
+        status: 'In transit',
+    },
+    {
+        id: 'stuttgart-5',
+        groupId: 'stuttgart',
+        vehicle: 'S-4105',
+        driver: 'Theo Bach',
+        route: 'Stuttgart - Heilbronn',
+        eta: '11:25',
+        status: 'Ready',
+    },
+    {
+        id: 'stuttgart-6',
+        groupId: 'stuttgart',
+        vehicle: 'S-4106',
+        driver: 'Emma Koch',
+        route: 'Stuttgart - Singen',
+        eta: '12:00',
+        status: 'Delayed',
     },
 ];
 
-const TableRowAnimationExample = () => {
-    const [data, setData] = useState(tableData);
-
-    const { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection } = useSorting(data, 'id');
+const TableGroupedRowsSelectionExample = () => {
+    const [expandedGroups, setExpandedGroups] = useState<string[]>(['berlin']);
+    const [selectedRowIds, setSelectedRowIds] = useState<TableRowId[]>([]);
 
-    const handleRemoveRow = (fatalRow: number) => {
-        setData(previousData => previousData.filter(item => item.id !== fatalRow));
+    const rowsByGroupId = useMemo(() => Map.groupBy(rows, row => row.groupId), []);
+    const rowIds = useMemo(() => rows.map(row => row.id), []);
+    const areAllGroupsExpanded = groupIds.every(groupId => expandedGroups.includes(groupId));
+    const areAllRowsSelected = rowIds.every(rowId => selectedRowIds.includes(rowId));
+    const areSomeRowsSelected = selectedRowIds.some(rowId => rowIds.includes(String(rowId)));
+
+    const toggleGroup = (groupId: string) => {
+        setExpandedGroups(currentExpandedGroups =>
+            currentExpandedGroups.includes(groupId)
+                ? currentExpandedGroups.filter(expandedGroupId => expandedGroupId !== groupId)
+                : [...currentExpandedGroups, groupId]
+        );
     };
 
-    const handleReset = () => setData(tableData);
+    const toggleAllGroups = () => {
+        setExpandedGroups(currentExpandedGroups =>
+            groupIds.every(groupId => currentExpandedGroups.includes(groupId)) ? [] : groupIds
+        );
+    };
 
-    const handleSortChange = (columnKey: string, direction: 'asc' | 'desc') => {
-        setSortKey(columnKey as keyof TableRowAnimationItem);
-        setSortDirection(direction);
+    const toggleAllRowsSelection = () => {
+        setSelectedRowIds(areAllRowsSelected ? [] : rowIds);
     };
 
     return (
-        <div>
-            <TableToolbar disableResponsiveCollapse>
-                <TableToolbarColumn>
-                    <div className='btn-toolbar'>
-                        <Button bsStyle={Button.PRIMARY} onClick={() => handleRemoveRow(3)}>
-                            Remove row
-                        </Button>
+        <Table
+            rowKey='id'
+            hover
+            selectedRowIds={selectedRowIds}
+            onSelectionChange={setSelectedRowIds}
+            showSelectionColumn
+            selectionHeaderContent={
+                <Checkbox
+                    checked={areAllRowsSelected}
+                    indeterminate={!areAllRowsSelected && areSomeRowsSelected}
+                    onChange={toggleAllRowsSelection}
+                />
+            }
+        >
+            <TableHeader>
+                <TableHeaderColumn columnKey='vehicle'>Vehicle</TableHeaderColumn>
+                <TableHeaderColumn columnKey='driver'>Driver</TableHeaderColumn>
+                <TableHeaderColumn columnKey='route'>Route</TableHeaderColumn>
+                <TableHeaderColumn columnKey='eta'>ETA</TableHeaderColumn>
+                <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
+                <TableHeaderColumn columnKey='actions' horizontalAlign='right' className='padding-y-0'>
+                    <TableExpandAllGroupsButton expanded={areAllGroupsExpanded} onClick={toggleAllGroups} />
+                </TableHeaderColumn>
+            </TableHeader>
+
+            <TableBody>
+                {groups.map(group => {
+                    const isExpanded = expandedGroups.includes(group.id);
+                    const groupRows = rowsByGroupId.get(group.id) ?? [];
+
+                    return (
+                        <Fragment key={group.id}>
+                            <TableGroupRow noHover>
+                                <div className='display-flex align-items-center justify-content-between gap-15 width-100pct'>
+                                    <div className='display-flex align-items-center gap-10'>
+                                        <span className='text-bold'>{group.terminal}</span>
+                                        <span className='text-color-dark'>
+                                            {groupRows.length} of {rows.length} departures
+                                        </span>
+                                    </div>
+                                    <TableExpanderButton expanded={isExpanded} onClick={() => toggleGroup(group.id)} />
+                                </div>
+                            </TableGroupRow>
+
+                            {isExpanded &&
+                                groupRows.map(row => (
+                                    <TableExpandedRow key={row.id} parentKey={group.id} className='bg-white' {...row}>
+                                        <TableColumn columnKey='vehicle'>{row.vehicle}</TableColumn>
+                                        <TableColumn columnKey='driver'>{row.driver}</TableColumn>
+                                        <TableColumn columnKey='route'>{row.route}</TableColumn>
+                                        <TableColumn columnKey='eta'>{row.eta}</TableColumn>
+                                        <TableColumn columnKey='status'>{row.status}</TableColumn>
+                                        <TableColumn columnKey='actions' />
+                                    </TableExpandedRow>
+                                ))}
+                        </Fragment>
+                    );
+                })}
+            </TableBody>
+        </Table>
+    );
+};
+
+export default TableGroupedRowsSelectionExample;
+```
+
+#### HTML (html)
+
+```html
+<div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3 table-col-4 table-col-5 table-col-6&quot;; --table-column-count: 7; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="7">
+    <div class="table-head" role="rowgroup">
+        <div class="table-head-grid table-head-grid-custom-selection" role="row" style="grid-template-rows: repeat(1, auto);">
+            <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle table-selection-cell-custom-content" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-selection-control">
+                    <label class="checkbox" tabindex="0">
+                        <input type="checkbox" class="">
+                        <span class="checkbox-text">
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="vehicle" role="columnheader" aria-colindex="2" aria-rowindex="1" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-head-cell-content">
+                    <div class="table-head-cell-content-row">
+                        <span class="table-head-label-wrapper">
+                            <span class="table-head-label">Vehicle</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="driver" role="columnheader" aria-colindex="3" aria-rowindex="1" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-head-cell-content">
+                    <div class="table-head-cell-content-row">
+                        <span class="table-head-label-wrapper">
+                            <span class="table-head-label">Driver</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="route" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
+                <div class="table-head-cell-content">
+                    <div class="table-head-cell-content-row">
+                        <span class="table-head-label-wrapper">
+                            <span class="table-head-label">Route</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="eta" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1;">
+                <div class="table-head-cell-content">
+                    <div class="table-head-cell-content-row">
+                        <span class="table-head-label-wrapper">
+                            <span class="table-head-label">ETA</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="6" aria-rowindex="1" style="grid-area: 1 / 6 / span 1 / span 1;">
+                <div class="table-head-cell-content">
+                    <div class="table-head-cell-content-row">
+                        <span class="table-head-label-wrapper">
+                            <span class="table-head-label">Status</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="table-head-cell table-align-right table-vertical-align-middle padding-y-0" data-column="actions" role="columnheader" aria-colindex="7" aria-rowindex="1" style="grid-area: 1 / 7 / span 1 / span 1;">
+                <div class="table-head-cell-content">
+                    <div class="table-head-cell-content-row">
+                        <span class="table-head-label-wrapper">
+                            <span class="table-head-label">
+                                <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component table-expand-all-groups-button" tabindex="0">
+                                    <span class="rioglyph rioglyph-angle-double-down text-size-16">
+                                    </span>
+                                </button>
+                            </span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="table-body" role="rowgroup">
+        <div class="table-row table-row-group table-row-no-hover" data-index="0" data-row-id="group-0" role="row">
+            <div class="table-cell table-group-cell" role="cell" aria-colspan="7">
+                <div class="table-cell-content">
+                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
+                        <div class="display-flex align-items-center gap-10">
+                            <span class="text-bold">Berlin Hub</span>
+                            <span class="text-color-dark">5 of 33 departures</span>
+                        </div>
+                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button table-expander-button-expanded" tabindex="0">
+                            <span class="rioglyph rioglyph-chevron-down">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="berlin-1" class="table-row table-row-expanded-data bg-white" data-index="1" data-row-id="berlin-1" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-selection-control">
+                    <label class="checkbox" tabindex="0">
+                        <input type="checkbox" class="">
+                        <span class="checkbox-text">
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">R-2041</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Lena Vogt</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Berlin - Hamburg</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">08:40</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Ready</div>
+            </div>
+            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">
+                </div>
+            </div>
+        </div>
+        <div id="berlin-2" class="table-row table-row-expanded-data bg-white" data-index="2" data-row-id="berlin-2" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-selection-control">
+                    <label class="checkbox" tabindex="0">
+                        <input type="checkbox" class="">
+                        <span class="checkbox-text">
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">R-2042</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Milan Weber</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Berlin - Leipzig</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">09:10</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Loading</div>
+            </div>
+            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">
+                </div>
+            </div>
+        </div>
+        <div id="berlin-3" class="table-row table-row-expanded-data bg-white" data-index="3" data-row-id="berlin-3" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-selection-control">
+                    <label class="checkbox" tabindex="0">
+                        <input type="checkbox" class="">
+                        <span class="checkbox-text">
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">R-2043</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Eva Kruger</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Berlin - Dresden</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">09:35</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Ready</div>
+            </div>
+            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">
+                </div>
+            </div>
+        </div>
+        <div id="berlin-4" class="table-row table-row-expanded-data bg-white" data-index="4" data-row-id="berlin-4" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-selection-control">
+                    <label class="checkbox" tabindex="0">
+                        <input type="checkbox" class="">
+                        <span class="checkbox-text">
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">R-2044</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Jonas Brandt</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Berlin - Rostock</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">10:05</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Delayed</div>
+            </div>
+            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">
+                </div>
+            </div>
+        </div>
+        <div id="berlin-5" class="table-row table-row-expanded-data bg-white" data-index="5" data-row-id="berlin-5" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-selection-control">
+                    <label class="checkbox" tabindex="0">
+                        <input type="checkbox" class="">
+                        <span class="checkbox-text">
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">R-2045</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Nora Seidel</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Berlin - Bremen</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">10:30</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Ready</div>
+            </div>
+            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">
+                </div>
+            </div>
+        </div>
+        <div class="table-row table-row-group table-row-no-hover" data-index="6" data-row-id="group-6" role="row">
+            <div class="table-cell table-group-cell" role="cell" aria-colspan="7">
+                <div class="table-cell-content">
+                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
+                        <div class="display-flex align-items-center gap-10">
+                            <span class="text-bold">Hamburg Yard</span>
+                            <span class="text-color-dark">6 of 33 departures</span>
+                        </div>
+                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
+                            <span class="rioglyph rioglyph-chevron-down">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="table-row table-row-group table-row-no-hover" data-index="7" data-row-id="group-7" role="row">
+            <div class="table-cell table-group-cell" role="cell" aria-colspan="7">
+                <div class="table-cell-content">
+                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
+                        <div class="display-flex align-items-center gap-10">
+                            <span class="text-bold">Munich Depot</span>
+                            <span class="text-color-dark">5 of 33 departures</span>
+                        </div>
+                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
+                            <span class="rioglyph rioglyph-chevron-down">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="table-row table-row-group table-row-no-hover" data-index="8" data-row-id="group-8" role="row">
+            <div class="table-cell table-group-cell" role="cell" aria-colspan="7">
+                <div class="table-cell-content">
+                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
+                        <div class="display-flex align-items-center gap-10">
+                            <span class="text-bold">Cologne Crossdock</span>
+                            <span class="text-color-dark">6 of 33 departures</span>
+                        </div>
+                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
+                            <span class="rioglyph rioglyph-chevron-down">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="table-row table-row-group table-row-no-hover" data-index="9" data-row-id="group-9" role="row">
+            <div class="table-cell table-group-cell" role="cell" aria-colspan="7">
+                <div class="table-cell-content">
+                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
+                        <div class="display-flex align-items-center gap-10">
+                            <span class="text-bold">Frankfurt Gate</span>
+                            <span class="text-color-dark">5 of 33 departures</span>
+                        </div>
+                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
+                            <span class="rioglyph rioglyph-chevron-down">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="table-row table-row-group table-row-no-hover" data-index="10" data-row-id="group-10" role="row">
+            <div class="table-cell table-group-cell" role="cell" aria-colspan="7">
+                <div class="table-cell-content">
+                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
+                        <div class="display-flex align-items-center gap-10">
+                            <span class="text-bold">Stuttgart Terminal</span>
+                            <span class="text-color-dark">6 of 33 departures</span>
+                        </div>
+                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
+                            <span class="rioglyph rioglyph-chevron-down">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props (json)
+
+```json
+rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
+```
+
+## Selectable groups with expanded rows
+
+When selection should apply to groups instead of expanded data rows, enable the table selection column and make only the TableGroupRow selectable. Expanded rows can opt out with selectable={false} and hide their empty selection controls via hideSelectionCheckboxesForExcludedRows.
+
+### Example: 5 departures
+
+Vehicle
+
+Driver
+
+Destination
+
+Departure
+
+Status
+
+North region 5 departures
+
+N-1041
+
+Lena Vogt
+
+Hamburg
+
+08:00
+
+Ready
+
+N-1042
+
+Milan Weber
+
+Kiel
+
+08:25
+
+Loading
+
+N-1043
+
+Eva Kruger
+
+Bremen
+
+08:50
+
+Ready
+
+N-1044
+
+Jonas Brandt
+
+Lubeck
+
+09:15
+
+Delayed
+
+N-1045
+
+Nora Seidel
+
+Rostock
+
+09:40
+
+Ready
+
+East region 6 departures
+
+South region 5 departures
+
+West region 6 departures
+
+Central region 5 departures
+
+Southwest region 6 departures
+
+#### React (tsx)
+
+```tsx
+import { Fragment, useMemo, useState } from 'react';
+
+import Table, {
+    TableBody,
+    TableColumn,
+    TableExpandAllGroupsButton,
+    TableExpandedRow,
+    TableExpanderButton,
+    TableGroupRow,
+    TableHeader,
+    TableHeaderColumn,
+    type TableRowId,
+} from '@rio-cloud/rio-uikit/Table';
+
+type DemoSelectableGroupRow = {
+    id: string;
+    groupId: string;
+    vehicle: string;
+    driver: string;
+    destination: string;
+    departure: string;
+    status: string;
+};
+
+type DemoSelectableGroup = {
+    id: string;
+    name: string;
+};
+
+const groups: DemoSelectableGroup[] = [
+    { id: 'north', name: 'North region' },
+    { id: 'east', name: 'East region' },
+    { id: 'south', name: 'South region' },
+    { id: 'west', name: 'West region' },
+    { id: 'central', name: 'Central region' },
+    { id: 'southwest', name: 'Southwest region' },
+];
+
+const groupIds = groups.map(group => group.id);
+
+const rows: DemoSelectableGroupRow[] = [
+    {
+        id: 'north-1',
+        groupId: 'north',
+        vehicle: 'N-1041',
+        driver: 'Lena Vogt',
+        destination: 'Hamburg',
+        departure: '08:00',
+        status: 'Ready',
+    },
+    {
+        id: 'north-2',
+        groupId: 'north',
+        vehicle: 'N-1042',
+        driver: 'Milan Weber',
+        destination: 'Kiel',
+        departure: '08:25',
+        status: 'Loading',
+    },
+    {
+        id: 'north-3',
+        groupId: 'north',
+        vehicle: 'N-1043',
+        driver: 'Eva Kruger',
+        destination: 'Bremen',
+        departure: '08:50',
+        status: 'Ready',
+    },
+    {
+        id: 'north-4',
+        groupId: 'north',
+        vehicle: 'N-1044',
+        driver: 'Jonas Brandt',
+        destination: 'Lubeck',
+        departure: '09:15',
+        status: 'Delayed',
+    },
+    {
+        id: 'north-5',
+        groupId: 'north',
+        vehicle: 'N-1045',
+        driver: 'Nora Seidel',
+        destination: 'Rostock',
+        departure: '09:40',
+        status: 'Ready',
+    },
+    {
+        id: 'east-1',
+        groupId: 'east',
+        vehicle: 'E-2081',
+        driver: 'Oskar Klein',
+        destination: 'Leipzig',
+        departure: '08:10',
+        status: 'Ready',
+    },
+    {
+        id: 'east-2',
+        groupId: 'east',
+        vehicle: 'E-2082',
+        driver: 'Mara Stein',
+        destination: 'Dresden',
+        departure: '08:35',
+        status: 'Loading',
+    },
+    {
+        id: 'east-3',
+        groupId: 'east',
+        vehicle: 'E-2083',
+        driver: 'Timo Wolf',
+        destination: 'Potsdam',
+        departure: '09:05',
+        status: 'In transit',
+    },
+    {
+        id: 'east-4',
+        groupId: 'east',
+        vehicle: 'E-2084',
+        driver: 'Sina Roth',
+        destination: 'Cottbus',
+        departure: '09:30',
+        status: 'Ready',
+    },
+    {
+        id: 'east-5',
+        groupId: 'east',
+        vehicle: 'E-2085',
+        driver: 'Felix Graf',
+        destination: 'Erfurt',
+        departure: '10:00',
+        status: 'Ready',
+    },
+    {
+        id: 'east-6',
+        groupId: 'east',
+        vehicle: 'E-2086',
+        driver: 'Iris Lind',
+        destination: 'Jena',
+        departure: '10:25',
+        status: 'Delayed',
+    },
+    {
+        id: 'south-1',
+        groupId: 'south',
+        vehicle: 'S-3301',
+        driver: 'Anja Hofmann',
+        destination: 'Munich',
+        departure: '08:15',
+        status: 'Ready',
+    },
+    {
+        id: 'south-2',
+        groupId: 'south',
+        vehicle: 'S-3302',
+        driver: 'David Lang',
+        destination: 'Augsburg',
+        departure: '08:45',
+        status: 'In transit',
+    },
+    {
+        id: 'south-3',
+        groupId: 'south',
+        vehicle: 'S-3303',
+        driver: 'Clara Beck',
+        destination: 'Ulm',
+        departure: '09:10',
+        status: 'Ready',
+    },
+    {
+        id: 'south-4',
+        groupId: 'south',
+        vehicle: 'S-3304',
+        driver: 'Erik Hahn',
+        destination: 'Passau',
+        departure: '09:50',
+        status: 'Loading',
+    },
+    {
+        id: 'south-5',
+        groupId: 'south',
+        vehicle: 'S-3305',
+        driver: 'Paula Rehm',
+        destination: 'Regensburg',
+        departure: '10:20',
+        status: 'Ready',
+    },
+    {
+        id: 'west-1',
+        groupId: 'west',
+        vehicle: 'W-4101',
+        driver: 'Ben Keller',
+        destination: 'Cologne',
+        departure: '08:05',
+        status: 'Ready',
+    },
+    {
+        id: 'west-2',
+        groupId: 'west',
+        vehicle: 'W-4102',
+        driver: 'Lea Sommer',
+        destination: 'Dortmund',
+        departure: '08:30',
+        status: 'Delayed',
+    },
+    {
+        id: 'west-3',
+        groupId: 'west',
+        vehicle: 'W-4103',
+        driver: 'Noah Frey',
+        destination: 'Essen',
+        departure: '09:00',
+        status: 'Loading',
+    },
+    {
+        id: 'west-4',
+        groupId: 'west',
+        vehicle: 'W-4104',
+        driver: 'Mia Busch',
+        destination: 'Aachen',
+        departure: '09:35',
+        status: 'Ready',
+    },
+    {
+        id: 'west-5',
+        groupId: 'west',
+        vehicle: 'W-4105',
+        driver: 'Lars Kunz',
+        destination: 'Bonn',
+        departure: '10:05',
+        status: 'Ready',
+    },
+    {
+        id: 'west-6',
+        groupId: 'west',
+        vehicle: 'W-4106',
+        driver: 'Rosa Dietz',
+        destination: 'Koblenz',
+        departure: '10:35',
+        status: 'In transit',
+    },
+    {
+        id: 'central-1',
+        groupId: 'central',
+        vehicle: 'C-5201',
+        driver: 'Klara May',
+        destination: 'Frankfurt',
+        departure: '08:20',
+        status: 'Ready',
+    },
+    {
+        id: 'central-2',
+        groupId: 'central',
+        vehicle: 'C-5202',
+        driver: 'Jan Otto',
+        destination: 'Kassel',
+        departure: '08:55',
+        status: 'Loading',
+    },
+    {
+        id: 'central-3',
+        groupId: 'central',
+        vehicle: 'C-5203',
+        driver: 'Sarah Blum',
+        destination: 'Mannheim',
+        departure: '09:25',
+        status: 'Ready',
+    },
+    {
+        id: 'central-4',
+        groupId: 'central',
+        vehicle: 'C-5204',
+        driver: 'Tom Ritter',
+        destination: 'Mainz',
+        departure: '09:55',
+        status: 'In transit',
+    },
+    {
+        id: 'central-5',
+        groupId: 'central',
+        vehicle: 'C-5205',
+        driver: 'Nina Adler',
+        destination: 'Fulda',
+        departure: '10:30',
+        status: 'Delayed',
+    },
+    {
+        id: 'southwest-1',
+        groupId: 'southwest',
+        vehicle: 'SW-6101',
+        driver: 'Luis Horn',
+        destination: 'Stuttgart',
+        departure: '08:30',
+        status: 'Ready',
+    },
+    {
+        id: 'southwest-2',
+        groupId: 'southwest',
+        vehicle: 'SW-6102',
+        driver: 'Greta Vogler',
+        destination: 'Freiburg',
+        departure: '09:00',
+        status: 'Loading',
+    },
+    {
+        id: 'southwest-3',
+        groupId: 'southwest',
+        vehicle: 'SW-6103',
+        driver: 'Aron Weiss',
+        destination: 'Karlsruhe',
+        departure: '09:30',
+        status: 'Ready',
+    },
+    {
+        id: 'southwest-4',
+        groupId: 'southwest',
+        vehicle: 'SW-6104',
+        driver: 'Lina Fuchs',
+        destination: 'Tubingen',
+        departure: '10:10',
+        status: 'In transit',
+    },
+    {
+        id: 'southwest-5',
+        groupId: 'southwest',
+        vehicle: 'SW-6105',
+        driver: 'Theo Bach',
+        destination: 'Heilbronn',
+        departure: '10:45',
+        status: 'Ready',
+    },
+    {
+        id: 'southwest-6',
+        groupId: 'southwest',
+        vehicle: 'SW-6106',
+        driver: 'Emma Koch',
+        destination: 'Singen',
+        departure: '11:15',
+        status: 'Delayed',
+    },
+];
+
+const TableSelectableGroupRowsExample = () => {
+    const [expandedGroups, setExpandedGroups] = useState<string[]>(['north']);
+    const [selectedGroupIds, setSelectedGroupIds] = useState<TableRowId[]>([]);
+
+    const rowsByGroupId = useMemo(() => Map.groupBy(rows, row => row.groupId), []);
+    const areAllGroupsExpanded = groupIds.every(groupId => expandedGroups.includes(groupId));
+
+    const toggleGroup = (groupId: string) => {
+        setExpandedGroups(currentExpandedGroups =>
+            currentExpandedGroups.includes(groupId)
+                ? currentExpandedGroups.filter(expandedGroupId => expandedGroupId !== groupId)
+                : [...currentExpandedGroups, groupId]
+        );
+    };
+
+    const toggleAllGroups = () => {
+        setExpandedGroups(currentExpandedGroups =>
+            groupIds.every(groupId => currentExpandedGroups.includes(groupId)) ? [] : groupIds
+        );
+    };
+
+    return (
+        <Table
+            rowKey='id'
+            hover
+            selectedRowIds={selectedGroupIds}
+            onSelectionChange={setSelectedGroupIds}
+            showSelectionColumn
+            hideSelectionCheckboxesForExcludedRows
+        >
+            <TableHeader>
+                <TableHeaderColumn columnKey='vehicle'>Vehicle</TableHeaderColumn>
+                <TableHeaderColumn columnKey='driver'>Driver</TableHeaderColumn>
+                <TableHeaderColumn columnKey='destination'>Destination</TableHeaderColumn>
+                <TableHeaderColumn columnKey='departure'>Departure</TableHeaderColumn>
+                <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
+                <TableHeaderColumn columnKey='actions' horizontalAlign='right' className='padding-y-0'>
+                    <TableExpandAllGroupsButton expanded={areAllGroupsExpanded} onClick={toggleAllGroups} />
+                </TableHeaderColumn>
+            </TableHeader>
+
+            <TableBody>
+                {groups.map(group => {
+                    const isExpanded = expandedGroups.includes(group.id);
+                    const groupRows = rowsByGroupId.get(group.id) ?? [];
+
+                    return (
+                        <Fragment key={group.id}>
+                            <TableGroupRow id={group.id} selectable noHover>
+                                <div className='display-flex align-items-center justify-content-between gap-15 width-100pct'>
+                                    <div className='display-flex align-items-center gap-10'>
+                                        <span className='text-bold'>{group.name}</span>
+                                        <span className='text-color-dark'>{groupRows.length} departures</span>
+                                    </div>
+                                    <TableExpanderButton expanded={isExpanded} onClick={() => toggleGroup(group.id)} />
+                                </div>
+                            </TableGroupRow>
+
+                            {isExpanded &&
+                                groupRows.map(row => (
+                                    <TableExpandedRow
+                                        key={row.id}
+                                        parentKey={group.id}
+                                        selectable={false}
+                                        className='bg-white'
+                                        {...row}
+                                    >
+                                        <TableColumn columnKey='vehicle'>{row.vehicle}</TableColumn>
+                                        <TableColumn columnKey='driver'>{row.driver}</TableColumn>
+                                        <TableColumn columnKey='destination'>{row.destination}</TableColumn>
+                                        <TableColumn columnKey='departure'>{row.departure}</TableColumn>
+                                        <TableColumn columnKey='status'>{row.status}</TableColumn>
+                                        <TableColumn columnKey='actions' />
+                                    </TableExpandedRow>
+                                ))}
+                        </Fragment>
+                    );
+                })}
+            </TableBody>
+        </Table>
+    );
+};
+
+export default TableSelectableGroupRowsExample;
+```
+
+#### HTML (html)
+
+```html
+<div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3 table-col-4 table-col-5 table-col-6&quot;; --table-column-count: 7; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="7">
+    <div class="table-head" role="rowgroup">
+        <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
+            <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-selection-control">
+                    <label class="checkbox" tabindex="0">
+                        <input type="checkbox" class="">
+                        <span class="checkbox-text">
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="vehicle" role="columnheader" aria-colindex="2" aria-rowindex="1" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-head-cell-content">
+                    <div class="table-head-cell-content-row">
+                        <span class="table-head-label-wrapper">
+                            <span class="table-head-label">Vehicle</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="driver" role="columnheader" aria-colindex="3" aria-rowindex="1" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-head-cell-content">
+                    <div class="table-head-cell-content-row">
+                        <span class="table-head-label-wrapper">
+                            <span class="table-head-label">Driver</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="destination" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
+                <div class="table-head-cell-content">
+                    <div class="table-head-cell-content-row">
+                        <span class="table-head-label-wrapper">
+                            <span class="table-head-label">Destination</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="departure" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1;">
+                <div class="table-head-cell-content">
+                    <div class="table-head-cell-content-row">
+                        <span class="table-head-label-wrapper">
+                            <span class="table-head-label">Departure</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="6" aria-rowindex="1" style="grid-area: 1 / 6 / span 1 / span 1;">
+                <div class="table-head-cell-content">
+                    <div class="table-head-cell-content-row">
+                        <span class="table-head-label-wrapper">
+                            <span class="table-head-label">Status</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="table-head-cell table-align-right table-vertical-align-middle padding-y-0" data-column="actions" role="columnheader" aria-colindex="7" aria-rowindex="1" style="grid-area: 1 / 7 / span 1 / span 1;">
+                <div class="table-head-cell-content">
+                    <div class="table-head-cell-content-row">
+                        <span class="table-head-label-wrapper">
+                            <span class="table-head-label">
+                                <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component table-expand-all-groups-button" tabindex="0">
+                                    <span class="rioglyph rioglyph-angle-double-down text-size-16">
+                                    </span>
+                                </button>
+                            </span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="table-body" role="rowgroup">
+        <div class="table-row table-row-group table-row-group-selectable table-row-no-hover" data-index="0" data-row-id="north" role="row">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-selection-control">
+                    <label class="checkbox" tabindex="0">
+                        <input type="checkbox" class="">
+                        <span class="checkbox-text">
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <div class="table-cell table-group-cell" role="cell" aria-colspan="6">
+                <div class="table-cell-content">
+                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
+                        <div class="display-flex align-items-center gap-10">
+                            <span class="text-bold">North region</span>
+                            <span class="text-color-dark">5 departures</span>
+                        </div>
+                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button table-expander-button-expanded" tabindex="0">
+                            <span class="rioglyph rioglyph-chevron-down">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="north-1" class="table-row table-row-expanded-data bg-white" data-index="1" data-row-id="north-1" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">N-1041</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Lena Vogt</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Hamburg</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="departure" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">08:00</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Ready</div>
+            </div>
+            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">
+                </div>
+            </div>
+        </div>
+        <div id="north-2" class="table-row table-row-expanded-data bg-white" data-index="2" data-row-id="north-2" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">N-1042</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Milan Weber</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Kiel</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="departure" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">08:25</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Loading</div>
+            </div>
+            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">
+                </div>
+            </div>
+        </div>
+        <div id="north-3" class="table-row table-row-expanded-data bg-white" data-index="3" data-row-id="north-3" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">N-1043</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Eva Kruger</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Bremen</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="departure" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">08:50</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Ready</div>
+            </div>
+            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">
+                </div>
+            </div>
+        </div>
+        <div id="north-4" class="table-row table-row-expanded-data bg-white" data-index="4" data-row-id="north-4" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">N-1044</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Jonas Brandt</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Lubeck</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="departure" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">09:15</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Delayed</div>
+            </div>
+            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">
+                </div>
+            </div>
+        </div>
+        <div id="north-5" class="table-row table-row-expanded-data bg-white" data-index="5" data-row-id="north-5" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">N-1045</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Nora Seidel</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Rostock</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="departure" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">09:40</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Ready</div>
+            </div>
+            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">
+                </div>
+            </div>
+        </div>
+        <div class="table-row table-row-group table-row-group-selectable table-row-no-hover" data-index="6" data-row-id="east" role="row">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-selection-control">
+                    <label class="checkbox" tabindex="0">
+                        <input type="checkbox" class="">
+                        <span class="checkbox-text">
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <div class="table-cell table-group-cell" role="cell" aria-colspan="6">
+                <div class="table-cell-content">
+                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
+                        <div class="display-flex align-items-center gap-10">
+                            <span class="text-bold">East region</span>
+                            <span class="text-color-dark">6 departures</span>
+                        </div>
+                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
+                            <span class="rioglyph rioglyph-chevron-down">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="table-row table-row-group table-row-group-selectable table-row-no-hover" data-index="7" data-row-id="south" role="row">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-selection-control">
+                    <label class="checkbox" tabindex="0">
+                        <input type="checkbox" class="">
+                        <span class="checkbox-text">
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <div class="table-cell table-group-cell" role="cell" aria-colspan="6">
+                <div class="table-cell-content">
+                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
+                        <div class="display-flex align-items-center gap-10">
+                            <span class="text-bold">South region</span>
+                            <span class="text-color-dark">5 departures</span>
+                        </div>
+                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
+                            <span class="rioglyph rioglyph-chevron-down">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="table-row table-row-group table-row-group-selectable table-row-no-hover" data-index="8" data-row-id="west" role="row">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-selection-control">
+                    <label class="checkbox" tabindex="0">
+                        <input type="checkbox" class="">
+                        <span class="checkbox-text">
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <div class="table-cell table-group-cell" role="cell" aria-colspan="6">
+                <div class="table-cell-content">
+                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
+                        <div class="display-flex align-items-center gap-10">
+                            <span class="text-bold">West region</span>
+                            <span class="text-color-dark">6 departures</span>
+                        </div>
+                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
+                            <span class="rioglyph rioglyph-chevron-down">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="table-row table-row-group table-row-group-selectable table-row-no-hover" data-index="9" data-row-id="central" role="row">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-selection-control">
+                    <label class="checkbox" tabindex="0">
+                        <input type="checkbox" class="">
+                        <span class="checkbox-text">
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <div class="table-cell table-group-cell" role="cell" aria-colspan="6">
+                <div class="table-cell-content">
+                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
+                        <div class="display-flex align-items-center gap-10">
+                            <span class="text-bold">Central region</span>
+                            <span class="text-color-dark">5 departures</span>
+                        </div>
+                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
+                            <span class="rioglyph rioglyph-chevron-down">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="table-row table-row-group table-row-group-selectable table-row-no-hover" data-index="10" data-row-id="southwest" role="row">
+            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-selection-control">
+                    <label class="checkbox" tabindex="0">
+                        <input type="checkbox" class="">
+                        <span class="checkbox-text">
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <div class="table-cell table-group-cell" role="cell" aria-colspan="6">
+                <div class="table-cell-content">
+                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
+                        <div class="display-flex align-items-center gap-10">
+                            <span class="text-bold">Southwest region</span>
+                            <span class="text-color-dark">6 departures</span>
+                        </div>
+                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
+                            <span class="rioglyph rioglyph-chevron-down">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props (json)
+
+```json
+rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
+```
+
+## Row animation
+
+### Example: Example 42
+
+Remove row Reset table
+
+Id
+
+Name
+
+VIN
+
+Status
+
+1
+
+Lorem
+
+7354
+
+Active
+
+2
+
+Ipsum
+
+456457
+
+Inactive
+
+3
+
+Dolor
+
+895
+
+Active
+
+4
+
+Sit
+
+3456
+
+Active
+
+5
+
+Amet
+
+2445
+
+Active
+
+6
+
+Consectetur
+
+878
+
+Active
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
+import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
+import useSorting from '@rio-cloud/rio-uikit/useSorting';
+
+type TableRowAnimationItem = {
+    id: number;
+    name: string;
+    vin: string;
+    status: string;
+};
+
+const tableData: TableRowAnimationItem[] = [
+    {
+        id: 1,
+        name: 'Lorem',
+        vin: '7354',
+        status: 'Active',
+    },
+    {
+        id: 2,
+        name: 'Ipsum',
+        vin: '456457',
+        status: 'Inactive',
+    },
+    {
+        id: 3,
+        name: 'Dolor',
+        vin: '895',
+        status: 'Active',
+    },
+    {
+        id: 4,
+        name: 'Sit',
+        vin: '3456',
+        status: 'Active',
+    },
+    {
+        id: 5,
+        name: 'Amet',
+        vin: '2445',
+        status: 'Active',
+    },
+    {
+        id: 6,
+        name: 'Consectetur',
+        vin: '878',
+        status: 'Active',
+    },
+];
+
+const TableRowAnimationExample = () => {
+    const [data, setData] = useState(tableData);
+
+    const { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection } = useSorting(data, 'id');
+
+    const handleRemoveRow = (fatalRow: number) => {
+        setData(previousData => previousData.filter(item => item.id !== fatalRow));
+    };
+
+    const handleReset = () => setData(tableData);
+
+    const handleSortChange = (columnKey: string, direction: 'asc' | 'desc') => {
+        setSortKey(columnKey as keyof TableRowAnimationItem);
+        setSortDirection(direction);
+    };
+
+    return (
+        <div>
+            <TableToolbar disableResponsiveCollapse>
+                <TableToolbarColumn>
+                    <div className='btn-toolbar'>
+                        <Button bsStyle={Button.PRIMARY} onClick={() => handleRemoveRow(3)}>
+                            Remove row
+                        </Button>
                         <Button onClick={handleReset}>Reset table</Button>
                     </div>
                 </TableToolbarColumn>
@@ -17738,7 +19499,7 @@ bottom
 
 Table flags
 
-Selection column Virtualized 3rd row sticky
+Selection column Selection checkbox top aligned Virtualized 3rd row sticky
 
 #### React (tsx)
 
@@ -17785,18 +19546,14 @@ const styleToggles: { key: keyof DemoTableStyle; label: string }[] = [
 
 type DemoTableFlags = {
     showSelectionColumn: boolean;
+    selectionCheckboxVerticalAlignmentTop: boolean;
     virtualizedRows: boolean;
     stickyThirdRow: boolean;
 };
 
-const flagToggles: { key: keyof DemoTableFlags; label: string }[] = [
-    { key: 'showSelectionColumn', label: 'Selection column' },
-    { key: 'virtualizedRows', label: 'Virtualized' },
-    { key: 'stickyThirdRow', label: '3rd row sticky' },
-];
-
 const defaultTableFlags: DemoTableFlags = {
     showSelectionColumn: false,
+    selectionCheckboxVerticalAlignmentTop: false,
     virtualizedRows: false,
     stickyThirdRow: false,
 };
@@ -17899,6 +19656,17 @@ const TableWithSettingsExample = () => {
         setColumns(demoTableColumnsForComponents.map(column => ({ ...column })));
     };
 
+    const flagToggles: { key: keyof DemoTableFlags; label: string; disabled?: boolean }[] = [
+        { key: 'showSelectionColumn', label: 'Selection column' },
+        {
+            key: 'selectionCheckboxVerticalAlignmentTop',
+            label: 'Selection checkbox top aligned',
+            disabled: !tableFlags.showSelectionColumn,
+        },
+        { key: 'virtualizedRows', label: 'Virtualized' },
+        { key: 'stickyThirdRow', label: '3rd row sticky' },
+    ];
+
     const cardSortingSelectOptions = sortableColumns.map(column => ({
         id: column.key,
         label: column.label,
@@ -17969,6 +19737,7 @@ const TableWithSettingsExample = () => {
                 cardsStyle={demoTableCardsStyle}
                 {...tableStyle}
                 showSelectionColumn={tableFlags.showSelectionColumn}
+                selectionCheckboxVerticalAlignment={tableFlags.selectionCheckboxVerticalAlignmentTop ? 'top' : 'middle'}
                 virtualizedRows={isTableView && tableFlags.virtualizedRows}
                 sortBy={String(displayedSortKey)}
                 sortDirection={sortDirection}
@@ -17987,7 +19756,6 @@ const TableWithSettingsExample = () => {
                             sortable={column.sortable}
                             draggable={column.draggable}
                             icon={column.icon}
-                            verticalAlign={column.verticalAlign}
                             resizeable
                             minResizeWidth={100}
                             maxResizeWidth={500}
@@ -18012,6 +19780,7 @@ const TableWithSettingsExample = () => {
                                             key={column.key}
                                             columnKey={column.key}
                                             horizontalAlign={column.horizontalAlign}
+                                            verticalAlign={column.verticalAlign}
                                         >
                                             <div className='max-width-100'>
                                                 <LicensePlate>{row.licensePlate}</LicensePlate>
@@ -18026,6 +19795,7 @@ const TableWithSettingsExample = () => {
                                             key={column.key}
                                             columnKey={column.key}
                                             horizontalAlign={column.horizontalAlign}
+                                            verticalAlign={column.verticalAlign}
                                         >
                                             <div className='margin-bottom-3'>{row.route.name}</div>
                                             <div>
@@ -18042,6 +19812,7 @@ const TableWithSettingsExample = () => {
                                             key={column.key}
                                             columnKey={column.key}
                                             horizontalAlign={column.horizontalAlign}
+                                            verticalAlign={column.verticalAlign}
                                         >
                                             <div>{row.cargo}</div>
                                         </TableColumn>
@@ -18232,7 +20003,7 @@ export default TableWithSettingsExample;
                             </div>
                         </div>
                         <div class="dropdown btn-group">
-                            <button type="button" id="6gvfcn35zvi" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">
+                            <button type="button" id="k4fkypb9c6p" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">
                                 <span class="display-inline-flex align-items-center gap-5">
                                     <span class="rioglyph rioglyph-table-view">
                                     </span>
@@ -18248,7 +20019,7 @@ export default TableWithSettingsExample;
     <div class="table table-view-table shadow-default border table-rounded table-has-head table-has-footer" role="table" style="--table-columns: minmax(0, 180px) minmax(0, 280px) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3&quot;; --table-cards-min: 280px; --table-cards-max: 380px; --table-column-count: 3; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="3">
         <div class="table-head" role="rowgroup">
             <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
-                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-top" data-column="licensePlate" role="columnheader" aria-colindex="1" aria-rowindex="1" aria-sort="ascending" style="grid-area: 1 / 1 / span 1 / span 1; transition: transform linear;">
+                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="licensePlate" role="columnheader" aria-colindex="1" aria-rowindex="1" aria-sort="ascending" style="grid-area: 1 / 1 / span 1 / span 1; transition: transform linear;">
                     <div class="table-head-cell-content">
                         <div class="table-head-cell-content-row">
                             <button type="button" class="table-head-button">
@@ -18263,7 +20034,7 @@ export default TableWithSettingsExample;
                     <div class="table-column-resize-handle">
                     </div>
                 </div>
-                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-top" data-column="route" role="columnheader" aria-colindex="2" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 2 / span 1 / span 1; transition: transform linear;">
+                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="route" role="columnheader" aria-colindex="2" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 2 / span 1 / span 1; transition: transform linear;">
                     <div class="table-head-cell-content">
                         <div class="table-head-cell-content-row">
                             <button type="button" class="table-head-button">
@@ -18278,12 +20049,12 @@ export default TableWithSettingsExample;
                     <div class="table-column-resize-handle">
                     </div>
                 </div>
-                <div class="table-head-cell table-head-cell-draggable table-align-left table-vertical-align-top" data-column="cargo" role="columnheader" aria-colindex="3" aria-rowindex="1" style="grid-area: 1 / 3 / span 1 / span 1; transition: transform linear;">
+                <div class="table-head-cell table-head-cell-draggable table-align-left table-vertical-align-middle" data-column="cargo" role="columnheader" aria-colindex="3" aria-rowindex="1" style="grid-area: 1 / 3 / span 1 / span 1; transition: transform linear;">
                     <div class="table-head-cell-content">
                         <div class="table-head-cell-content-row">
                             <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-7">
                                 <span class="table-head-label">
-                                    <span class="display-inline-flex align-items-center gap-5">
+                                    <span class="display-flex align-items-center gap-5">
                                         <span class="text-color-dark rioglyph rioglyph-comment">
                                         </span>
                                         <span>Comment</span>
@@ -19130,10 +20901,10 @@ export default TableWithSettingsExample;
         </div>
         <div class="table-footer" role="rowgroup">
             <div class="table-row table-row-footer" role="row">
-                <div class="table-cell table-footer-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                     <div class="table-cell-content overflow-hidden">Trucks: 30</div>
                 </div>
-                <div class="table-cell table-footer-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                     <div class="table-cell-content overflow-hidden">Total: 17490 km</div>
                 </div>
             </div>
@@ -19557,6 +21328,12 @@ export default TableWithSettingsExample;
                                 <span>Selection column</span>
                             </span>
                         </label>
+                        <label class="checkbox disabled" tabindex="0">
+                            <input type="checkbox" disabled="" class="">
+                            <span class="checkbox-text">
+                                <span>Selection checkbox top aligned</span>
+                            </span>
+                        </label>
                         <label class="checkbox" tabindex="0">
                             <input type="checkbox" class="">
                             <span class="checkbox-text">