# Table controls

*Category:* Components
*Section:* Table
*Source:* https://uikit.developers.rio.cloud/#/components/tableControls
*Captured:* 2026-04-27T14:58:10.712Z

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">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 rdtToday">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="s4gw9xkqb2" 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="b11cq37jd6f" 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. |