@rio-cloud/uikit-mcp 1.1.8 → 1.1.10

package/dist/docs/components/tableControls.md

@@ -0,0 +1,982 @@
+# Table controls
+
+*Category:* Components
+*Section:* Table
+*Source:* https://uikit.developers.rio.cloud/#/components/tableControls
+*Captured:* 2026-04-20T12:54:36.257Z
+
+The toolbar and its content has to be implemented by each team itself. Please use the sample as a reference and adapt it accordingly.
+
+## Table controls
+
+> These controls can be used with both Table component and HTML table components.
+
+## TableToolbar
+
+### Example: Example 1
+
+TableToolbar label
+
+‹ April 2026 ›
+Su Mo Tu We Th Fr Sa
+
+29 30 31 1 2 3 4
+5 6 7 8 9 10 11
+12 13 14 15 16 17 18
+19 20 21 22 23 24 25
+26 27 28 29 30 1 2
+3 4 5 6 7 8 9
+
+12:00 AM
+
+TableToolbar button
+
+TableToolbar label
+
+Table view
+Cards view
+List view
+
+#### React (tsx)
+
+```tsx
+import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
+import TableSearch from '@rio-cloud/rio-uikit/TableSearch';
+import DatePicker from '@rio-cloud/rio-uikit/DatePicker';
+import Button from '@rio-cloud/rio-uikit/Button';
+import TableViewToggles, { type TableViewTogglesViewType } from '@rio-cloud/rio-uikit/TableViewToggles';
+
+const TableToolbarDemo = () => (
+    <TableToolbar>
+        <TableToolbarColumn label='TableToolbar label' className='min-width-200'>
+            <DatePicker inputProps={{ placeholder: 'Select Date' }} />
+        </TableToolbarColumn>
+        <TableToolbarColumn>
+            <Button bsStyle={Button.PRIMARY}>TableToolbar button</Button>
+        </TableToolbarColumn>
+        <TableToolbarColumn horizontalAlign='right' label='TableToolbar label'>
+            <TableSearch placeholder='Search in table' />
+        </TableToolbarColumn>
+        <TableToolbarColumn horizontalAlign='right' separator>
+            <TableViewToggles
+                initialViewType={TableViewToggles.VIEW_TYPE_TABLE}
+                tableViewLabel='Table view'
+                singleCardViewLabel='List view'
+                multiCardsViewLabel='Cards view'
+                onViewTypeChange={(viewType: TableViewTogglesViewType) => console.log(viewType)}
+            />
+        </TableToolbarColumn>
+        <TableToolbarColumn horizontalAlign='right'>
+            <Button iconOnly iconName='rioglyph-settings' />
+        </TableToolbarColumn>
+    </TableToolbar>
+);
+
+export default TableToolbarDemo;
+```
+
+#### HTML (html)
+
+```html
+<div class="table-toolbar">
+    <div class="table-toolbar-container">
+        <div class="table-toolbar-group-left">
+            <div class="table-toolbar-column align-self-end min-width-200">
+                <label class="table-toolbar-label">TableToolbar label</label>
+                <div class="rdt DatePicker form-group">
+                    <div class="input-group">
+                        <span class="input-group-addon">
+                            <span class="rioglyph rioglyph-calendar" aria-hidden="true">
+                            </span>
+                        </span>
+                        <div class="ClearableInput input-group">
+                            <input type="text" class="form-control" placeholder="Select Date" value="">
+                        </div>
+                    </div>
+                    <div class="rdtPicker">
+                        <div class="rdtDays">
+                            <table>
+                                <thead>
+                                    <tr>
+                                        <th class="rdtPrev">
+                                            <span>‹</span>
+                                        </th>
+                                        <th class="rdtSwitch" colspan="5" data-value="3">April 2026</th>
+                                        <th class="rdtNext">
+                                            <span>›</span>
+                                        </th>
+                                    </tr>
+                                    <tr>
+                                        <th class="dow">Su</th>
+                                        <th class="dow">Mo</th>
+                                        <th class="dow">Tu</th>
+                                        <th class="dow">We</th>
+                                        <th class="dow">Th</th>
+                                        <th class="dow">Fr</th>
+                                        <th class="dow">Sa</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td data-value="29" data-month="2" data-year="2026" class="rdtDay rdtOld">29</td>
+                                        <td data-value="30" data-month="2" data-year="2026" class="rdtDay rdtOld">30</td>
+                                        <td data-value="31" data-month="2" data-year="2026" class="rdtDay rdtOld">31</td>
+                                        <td data-value="1" data-month="3" data-year="2026" class="rdtDay">1</td>
+                                        <td data-value="2" data-month="3" data-year="2026" class="rdtDay">2</td>
+                                        <td data-value="3" data-month="3" data-year="2026" class="rdtDay">3</td>
+                                        <td data-value="4" data-month="3" data-year="2026" class="rdtDay">4</td>
+                                    </tr>
+                                    <tr>
+                                        <td data-value="5" data-month="3" data-year="2026" class="rdtDay">5</td>
+                                        <td data-value="6" data-month="3" data-year="2026" class="rdtDay">6</td>
+                                        <td data-value="7" data-month="3" data-year="2026" class="rdtDay">7</td>
+                                        <td data-value="8" data-month="3" data-year="2026" class="rdtDay">8</td>
+                                        <td data-value="9" data-month="3" data-year="2026" class="rdtDay">9</td>
+                                        <td data-value="10" data-month="3" data-year="2026" class="rdtDay">10</td>
+                                        <td data-value="11" data-month="3" data-year="2026" class="rdtDay">11</td>
+                                    </tr>
+                                    <tr>
+                                        <td data-value="12" data-month="3" data-year="2026" class="rdtDay">12</td>
+                                        <td data-value="13" data-month="3" data-year="2026" class="rdtDay">13</td>
+                                        <td data-value="14" data-month="3" data-year="2026" class="rdtDay">14</td>
+                                        <td data-value="15" data-month="3" data-year="2026" class="rdtDay">15</td>
+                                        <td data-value="16" data-month="3" data-year="2026" class="rdtDay">16</td>
+                                        <td data-value="17" data-month="3" data-year="2026" class="rdtDay">17</td>
+                                        <td data-value="18" data-month="3" data-year="2026" class="rdtDay">18</td>
+                                    </tr>
+                                    <tr>
+                                        <td data-value="19" data-month="3" data-year="2026" class="rdtDay">19</td>
+                                        <td data-value="20" data-month="3" data-year="2026" class="rdtDay rdtToday">20</td>
+                                        <td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
+                                        <td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
+                                        <td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
+                                        <td data-value="24" data-month="3" data-year="2026" class="rdtDay">24</td>
+                                        <td data-value="25" data-month="3" data-year="2026" class="rdtDay">25</td>
+                                    </tr>
+                                    <tr>
+                                        <td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
+                                        <td data-value="27" data-month="3" data-year="2026" class="rdtDay">27</td>
+                                        <td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
+                                        <td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
+                                        <td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
+                                        <td data-value="1" data-month="4" data-year="2026" class="rdtDay rdtNew">1</td>
+                                        <td data-value="2" data-month="4" data-year="2026" class="rdtDay rdtNew">2</td>
+                                    </tr>
+                                    <tr>
+                                        <td data-value="3" data-month="4" data-year="2026" class="rdtDay rdtNew">3</td>
+                                        <td data-value="4" data-month="4" data-year="2026" class="rdtDay rdtNew">4</td>
+                                        <td data-value="5" data-month="4" data-year="2026" class="rdtDay rdtNew">5</td>
+                                        <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtNew">6</td>
+                                        <td data-value="7" data-month="4" data-year="2026" class="rdtDay rdtNew">7</td>
+                                        <td data-value="8" data-month="4" data-year="2026" class="rdtDay rdtNew">8</td>
+                                        <td data-value="9" data-month="4" data-year="2026" class="rdtDay rdtNew">9</td>
+                                    </tr>
+                                </tbody>
+                                <tfoot>
+                                    <tr>
+                                        <td colspan="7" class="rdtTimeToggle">12:00 AM</td>
+                                    </tr>
+                                </tfoot>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="table-toolbar-column align-self-end">
+                <button type="button" class="btn btn-primary btn-component" tabindex="0">TableToolbar button</button>
+            </div>
+        </div>
+        <div class="table-toolbar-group-right">
+            <div class="table-toolbar-column align-self-end">
+                <label class="table-toolbar-label">TableToolbar label</label>
+                <div class="table-toolbar-search input-group">
+                    <span class="input-group-addon">
+                        <span class="rioglyph rioglyph-search">
+                        </span>
+                    </span>
+                    <div class="ClearableInput input-group">
+                        <input placeholder="Search in table" class="form-control" type="text" tabindex="0" value="">
+                        <span class="clearButton hide">
+                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                            </span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="table-toolbar-column align-self-end table-toolbar-column-separator">
+                <div class="TableViewToggles">
+                    <div class="form-group margin-bottom-0">
+                        <div class="select dropdown">
+                            <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
+                                <span class="selected-option-text">
+                                    <span>
+                                        <span class="rioglyph rioglyph-table-view">
+                                        </span>
+                                    </span>
+                                </span>
+                                <span class="select-toggle-actions">
+                                    <span class="clearButton hide pointer-events-none">
+                                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                        </span>
+                                    </span>
+                                    <span class="caret">
+                                    </span>
+                                </span>
+                            </button>
+                            <ul class="dropdown-menu pull-right" role="menu">
+                                <li class="" role="listitem">
+                                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="TABLE" data-item-index="0">
+                                        <span class="selected-option-dropdown-item">
+                                            <span class="rioglyph rioglyph-table-view">
+                                            </span>Table view</span>
+                                        <input type="hidden" value="TABLE">
+                                    </a>
+                                </li>
+                                <li class="" role="listitem">
+                                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="MULTI_CARDS" data-item-index="1">
+                                        <span class="selected-option-dropdown-item">
+                                            <span class="rioglyph rioglyph-split-view">
+                                            </span>Cards view</span>
+                                        <input type="hidden" value="MULTI_CARDS">
+                                    </a>
+                                </li>
+                                <li class="" role="listitem">
+                                    <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="SINGLE_CARD" data-item-index="2">
+                                        <span class="selected-option-dropdown-item">
+                                            <span class="rioglyph rioglyph-th-list">
+                                            </span>List view</span>
+                                        <input type="hidden" value="SINGLE_CARD">
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="table-toolbar-column align-self-end">
+                <button type="button" class="btn btn-default btn-icon-only btn-component" tabindex="0">
+                    <span class="rioglyph rioglyph-settings">
+                    </span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: TableToolbar
+
+### TableToolbar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Optional class names for the wrapper element. |
+| collapseCardClassName | string | — | Optional class names for the card that wraps collapsed toolbar controls in the compact mobile layout. |
+| responsiveCollapseBreakpoint | number | 544 | Optional toolbar width in pixels at which the toolbar switches into its compact mobile/collapsible layout. |
+| disableResponsiveCollapse | boolean | false | Disables the compact mobile/collapsible toolbar layout. Use this as an escape hatch when a consuming service needs to keep the default wrapping toolbar behavior regardless of the available toolbar width. |
+
+#### Props: TableCardsSorting
+
+### TableCardsSorting
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| sortName | string | — | "Name", "Key", or "Id" of the current sorted column. |
+| sortOrder | 'asc' \| 'desc' | 'asc' | Defines the sort direction. |
+| selectOptions | TableCardsSortingOption[] | — | List of objects for the column name select component. |
+| └id | string | — | ID to use for the select option. |
+| └label | string \| React.ReactNode | — | Translated column label to be shown in the select. |
+| └selected | boolean | — | Defines the column which is currently sorted by. |
+| └disabled | boolean | — | Defines if the column can be sorted. Hence, it will be disabled in the select. |
+| onSortChange | (name: string, order: 'asc' \| 'desc') => void | noop | Function that is called when the sort key or direction changes. |
+| className | string | — | Optional class names for the wrapper element. |
+
+## TableSearch
+
+### Example: Example 2
+
+ID
+
+Name
+
+Status
+
+7354
+
+Vehicle 7354
+
+Active
+
+233
+
+Vehicle 233
+
+Inactive
+
+895
+
+Vehicle 895
+
+Active
+
+3456
+
+Vehicle 3456
+
+Active
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
+import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
+import TableSearch from '@rio-cloud/rio-uikit/TableSearch';
+
+const demoItems = [
+    { id: '7354', name: 'Vehicle 7354', status: 'Active' },
+    { id: '233', name: 'Vehicle 233', status: 'Inactive' },
+    { id: '895', name: 'Vehicle 895', status: 'Active' },
+    { id: '3456', name: 'Vehicle 3456', status: 'Active' },
+];
+
+const TableSearchDemo = () => {
+    const [searchValue, setSearchValue] = useState('');
+
+    const normalizedSearchValue = searchValue.toLowerCase();
+    const filteredItems = demoItems.filter(
+        item =>
+            item.id.toLowerCase().includes(normalizedSearchValue) ||
+            item.name.toLowerCase().includes(normalizedSearchValue) ||
+            item.status.toLowerCase().includes(normalizedSearchValue)
+    );
+
+    return (
+        <div>
+            <TableToolbar>
+                <TableToolbarColumn horizontalAlign='right'>
+                    <TableSearch value={searchValue} onChange={setSearchValue} placeholder='Search in table' />
+                </TableToolbarColumn>
+            </TableToolbar>
+            <Table hover>
+                <TableHeader>
+                    <TableHeaderColumn columnKey='id'>ID</TableHeaderColumn>
+                    <TableHeaderColumn columnKey='name'>Name</TableHeaderColumn>
+                    <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
+                </TableHeader>
+                <TableBody>
+                    {filteredItems.map(item => (
+                        <TableRow key={item.id} id={item.id}>
+                            <TableColumn>
+                                <span>{item.id}</span>
+                            </TableColumn>
+                            <TableColumn>
+                                <span>{item.name}</span>
+                            </TableColumn>
+                            <TableColumn>
+                                <span>{item.status}</span>
+                            </TableColumn>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    );
+};
+
+export default TableSearchDemo;
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="table-toolbar">
+        <div class="table-toolbar-container">
+            <div class="table-toolbar-group-right">
+                <div class="table-toolbar-column align-self-end">
+                    <div class="table-toolbar-search input-group">
+                        <span class="input-group-addon">
+                            <span class="rioglyph rioglyph-search">
+                            </span>
+                        </span>
+                        <div class="ClearableInput input-group">
+                            <input placeholder="Search in table" class="form-control" type="text" tabindex="0" value="">
+                            <span class="clearButton hide">
+                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3&quot;; --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-has-column-divider table-align-left table-vertical-align-middle" data-column="id" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / 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">ID</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="name" 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">Name</span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="status" 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">Status</span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="table-body" role="rowgroup">
+            <div id="7354" class="table-row" data-index="0" data-row-id="0" role="row">
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="id" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>7354</span>
+                    </div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="name" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>Vehicle 7354</span>
+                    </div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>Active</span>
+                    </div>
+                </div>
+            </div>
+            <div id="233" class="table-row" data-index="1" data-row-id="1" role="row">
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="id" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>233</span>
+                    </div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="name" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>Vehicle 233</span>
+                    </div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>Inactive</span>
+                    </div>
+                </div>
+            </div>
+            <div id="895" class="table-row" data-index="2" data-row-id="2" role="row">
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="id" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>895</span>
+                    </div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="name" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>Vehicle 895</span>
+                    </div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>Active</span>
+                    </div>
+                </div>
+            </div>
+            <div id="3456" 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="id" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>3456</span>
+                    </div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="name" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>Vehicle 3456</span>
+                    </div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>Active</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: TableSearch
+
+### TableSearch
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | string | — | Optional class names for the wrapper. |
+| ...additional props |  | — | As this component is using the ClearableInput component internally, checkout all possible props there. |
+
+## TableViewToggles
+
+### Example: Example 3
+
+Table view
+Cards view
+List view
+
+ID
+
+Name
+
+Status
+
+7354
+
+Vehicle 7354
+
+Active
+
+233
+
+Vehicle 233
+
+Inactive
+
+895
+
+Vehicle 895
+
+Maintenance
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
+import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
+import TableViewToggles, { type TableViewTogglesViewType } from '@rio-cloud/rio-uikit/TableViewToggles';
+
+const demoItems = [
+    { id: '7354', name: 'Vehicle 7354', status: 'Active' },
+    { id: '233', name: 'Vehicle 233', status: 'Inactive' },
+    { id: '895', name: 'Vehicle 895', status: 'Maintenance' },
+];
+
+const statusLabelClassNames: Record<(typeof demoItems)[number]['status'], string> = {
+    Active: 'label label-success label-filled label-condensed',
+    Inactive: 'label label-warning label-filled label-condensed',
+    Maintenance: 'label label-info label-filled label-condensed',
+};
+
+const TableViewTogglesDemo = () => {
+    const [viewType, setViewType] = useState<TableViewTogglesViewType>(TableViewToggles.VIEW_TYPE_TABLE);
+
+    return (
+        <div>
+            <TableToolbar>
+                <TableToolbarColumn horizontalAlign='right'>
+                    <TableViewToggles
+                        viewType={viewType}
+                        onViewTypeChange={setViewType}
+                        tableViewLabel='Table view'
+                        singleCardViewLabel='List view'
+                        multiCardsViewLabel='Cards view'
+                    />
+                </TableToolbarColumn>
+            </TableToolbar>
+            <Table viewType={viewType} hover>
+                <TableHeader>
+                    <TableHeaderColumn columnKey='id'>ID</TableHeaderColumn>
+                    <TableHeaderColumn columnKey='name'>Name</TableHeaderColumn>
+                    <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
+                </TableHeader>
+                <TableBody>
+                    {demoItems.map(item => (
+                        <TableRow key={item.id} id={item.id}>
+                            <TableColumn>
+                                <span>{item.id}</span>
+                            </TableColumn>
+                            <TableColumn>
+                                <span>{item.name}</span>
+                            </TableColumn>
+                            <TableColumn>
+                                <span className={statusLabelClassNames[item.status]}>{item.status}</span>
+                            </TableColumn>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    );
+};
+
+export default TableViewTogglesDemo;
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="table-toolbar">
+        <div class="table-toolbar-container">
+            <div class="table-toolbar-group-right">
+                <div class="table-toolbar-column align-self-end">
+                    <div class="TableViewToggles">
+                        <div class="form-group margin-bottom-0">
+                            <div class="select dropdown">
+                                <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
+                                    <span class="selected-option-text">
+                                        <span>
+                                            <span class="rioglyph rioglyph-table-view">
+                                            </span>
+                                        </span>
+                                    </span>
+                                    <span class="select-toggle-actions">
+                                        <span class="clearButton hide pointer-events-none">
+                                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                            </span>
+                                        </span>
+                                        <span class="caret">
+                                        </span>
+                                    </span>
+                                </button>
+                                <ul class="dropdown-menu pull-right" role="menu">
+                                    <li class="" role="listitem">
+                                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="TABLE" data-item-index="0">
+                                            <span class="selected-option-dropdown-item">
+                                                <span class="rioglyph rioglyph-table-view">
+                                                </span>Table view</span>
+                                            <input type="hidden" value="TABLE">
+                                        </a>
+                                    </li>
+                                    <li class="" role="listitem">
+                                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="MULTI_CARDS" data-item-index="1">
+                                            <span class="selected-option-dropdown-item">
+                                                <span class="rioglyph rioglyph-split-view">
+                                                </span>Cards view</span>
+                                            <input type="hidden" value="MULTI_CARDS">
+                                        </a>
+                                    </li>
+                                    <li class="" role="listitem">
+                                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="SINGLE_CARD" data-item-index="2">
+                                            <span class="selected-option-dropdown-item">
+                                                <span class="rioglyph rioglyph-th-list">
+                                                </span>List view</span>
+                                            <input type="hidden" value="SINGLE_CARD">
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3&quot;; --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-has-column-divider table-align-left table-vertical-align-middle" data-column="id" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / 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">ID</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="name" 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">Name</span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="status" 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">Status</span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="table-body" role="rowgroup">
+            <div id="7354" class="table-row" data-index="0" data-row-id="0" role="row">
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="id" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>7354</span>
+                    </div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="name" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>Vehicle 7354</span>
+                    </div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span class="label label-success label-filled label-condensed">Active</span>
+                    </div>
+                </div>
+            </div>
+            <div id="233" class="table-row" data-index="1" data-row-id="1" role="row">
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="id" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>233</span>
+                    </div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="name" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>Vehicle 233</span>
+                    </div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span class="label label-warning label-filled label-condensed">Inactive</span>
+                    </div>
+                </div>
+            </div>
+            <div id="895" class="table-row" data-index="2" data-row-id="2" role="row">
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="id" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>895</span>
+                    </div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="name" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span>Vehicle 895</span>
+                    </div>
+                </div>
+                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
+                    <div class="table-cell-content overflow-hidden">
+                        <span class="label label-info label-filled label-condensed">Maintenance</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: TableViewToggles
+
+### TableViewToggles
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| viewType | TableViewTogglesViewType | — | The current viewType for controlling the TablesViewToggles component. Possible values are: 'SINGLE_CARD' 'MULTI_CARDS' 'TABLE' TableViewToggles.VIEW_TYPE_TABLE TableViewToggles.VIEW_TYPE_SINGLE_CARD TableViewToggles.VIEW_TYPE_MULTI_CARDS |
+| initialViewType | TableViewTogglesViewType | TableViewToggles.VIEW_TYPE_TABLE | Defines the initial viewType (when viewType is not controlled from the outside). Possible values are: 'SINGLE_CARD' 'MULTI_CARDS' 'TABLE' TableViewToggles.VIEW_TYPE_TABLE TableViewToggles.VIEW_TYPE_SINGLE_CARD TableViewToggles.VIEW_TYPE_MULTI_CARDS |
+| disabledViewTypes | TableViewTogglesViewType[] | [] | Defines the view types which shall not be supported and are omitted. |
+| onViewTypeChange | (viewType: TableViewTogglesViewType) => void | — | Callback function for when the user wants to change the viewType. Receives the new type as an argument. |
+| tableViewTooltipContent(deprecated) | string \| ReactNode | — | Optional tooltip content for table view button. |
+| tableViewLabel | string \| ReactNode | — | Optional label content for the table view select item. |
+| singleCardViewTooltipContent(deprecated) | string \| ReactNode | — | Optional tooltip content for single card view button. |
+| singleCardViewLabel | string \| ReactNode | — | Optional label content for the single card view select item. |
+| multiCardsViewTooltipContent(deprecated) | string \| ReactNode | — | Optional tooltip content for multi card view button. |
+| multiCardsViewLabel | string \| ReactNode | — | Optional label content for the multi cards view select item. |
+| disabled | boolean | false | Disables all buttons. This means the buttons cannot be clicked. Used when disabling toolbar buttons during loading state or when the corresponding table is empty. |
+| className | string | — | Optional class names for the wrapper element. |
+
+## TableRowActionsDropdown
+
+Use TableRowActionsDropdown as the standardized overflow trigger for secondary row actions. It keeps the horizontal options icon and button styling consistent across different table implementations.
+
+### Example: Example 4
+
+Workflow
+
+When to use it
+
+Actions
+
+Archived order
+
+Secondary actions in a compact overflow trigger.
+
+Delivery run
+
+Uses the same trigger for consistent row-action menus.
+
+#### React (tsx)
+
+```tsx
+import Notification from '@rio-cloud/rio-uikit/Notification';
+import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
+import TableRowActionsDropdown from '@rio-cloud/rio-uikit/TableRowActionsDropdown';
+
+const rows = [
+    {
+        id: 'archived-order',
+        workflow: 'Archived order',
+        intent: 'Secondary actions in a compact overflow trigger.',
+        items: [
+            {
+                value: 'Share',
+                onSelect: () => Notification.info('Share archived order'),
+            },
+            {
+                value: 'Duplicate',
+                onSelect: () => Notification.info('Duplicate archived order'),
+            },
+            {
+                divider: true,
+            },
+            {
+                value: 'Archive',
+                onSelect: () => Notification.info('Archive archived order'),
+            },
+        ],
+    },
+    {
+        id: 'delivery-run',
+        workflow: 'Delivery run',
+        intent: 'Uses the same trigger for consistent row-action menus.',
+        ariaLabel: 'Delivery run actions',
+        items: [
+            {
+                value: 'Assign',
+                onSelect: () => Notification.info('Assign delivery run'),
+            },
+            {
+                value: 'Reschedule',
+                onSelect: () => Notification.info('Reschedule delivery run'),
+            },
+            {
+                divider: true,
+            },
+            {
+                value: 'Cancel',
+                onSelect: () => Notification.info('Cancel delivery run'),
+            },
+        ],
+    },
+];
+
+const TableRowActionsDropdownDemo = () => (
+    <Table hover>
+        <TableHeader>
+            <TableHeaderColumn columnKey='workflow' width='25%'>
+                Workflow
+            </TableHeaderColumn>
+            <TableHeaderColumn columnKey='intent'>When to use it</TableHeaderColumn>
+            <TableHeaderColumn columnKey='actions' width={120} horizontalAlign='right' className='padding-10'>
+                Actions
+            </TableHeaderColumn>
+        </TableHeader>
+        <TableBody>
+            {rows.map(row => (
+                <TableRow key={row.id} id={row.id}>
+                    <TableColumn>{row.workflow}</TableColumn>
+                    <TableColumn>{row.intent}</TableColumn>
+                    <TableColumn columnKey='actions' horizontalAlign='right' className='padding-10'>
+                        <TableRowActionsDropdown aria-label={row.ariaLabel} items={row.items} />
+                    </TableColumn>
+                </TableRow>
+            ))}
+        </TableBody>
+    </Table>
+);
+
+export default TableRowActionsDropdownDemo;
+```
+
+#### HTML (html)
+
+```html
+<div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: minmax(0, calc(var(--table-width) * 25 / 100)) minmax(50px, 1fr) minmax(0, 120px); --table-areas: &quot;table-col-1 table-col-2 table-col-3&quot;; --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-has-column-divider table-align-left table-vertical-align-middle" data-column="workflow" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / 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">Workflow</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="intent" 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">When to use it</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="table-head-cell table-align-right table-vertical-align-middle padding-10" data-column="actions" 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">Actions</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="table-body" role="rowgroup">
+        <div id="archived-order" class="table-row" data-index="0" data-row-id="0" role="row">
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="workflow" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Archived order</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="intent" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Secondary actions in a compact overflow trigger.</div>
+            </div>
+            <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="mqlkojnyu3" 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>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="delivery-run" class="table-row" data-index="1" data-row-id="1" role="row">
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="workflow" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Delivery run</div>
+            </div>
+            <div class="table-cell table-align-left table-vertical-align-middle" data-column="intent" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
+                <div class="table-cell-content overflow-hidden">Uses the same trigger for consistent row-action menus.</div>
+            </div>
+            <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="Delivery run actions" id="8t0kb8e4cl" 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>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: TableRowActionsDropdown
+
+### TableRowActionsDropdown
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| aria-label | string | 'Row actions' | Accessible label applied to the icon-only trigger button. |