# Table component

*Category:* Components
*Section:* Table
*Source:* https://uikit.developers.rio.cloud/#/components/table
*Captured:* 2026-04-27T14:59:49.639Z

The new Table component is the preferred approach for building tables in the UIKIT. It provides a declarative API for headers, rows, cells, and footers while keeping table and card views consistent across responsive layouts.

## Table component

Compared to manually composing table markup, it offers built-in support for selection, sorting, expandable rows, virtualization, row states, and shared styling options such as borders, hover, rounded corners, and grid lines.

> See also our HTML table styles, shared table controls, and the HTML table components for helpers built around native <table> markup.

## Basic table

Start with the core building blocks: Table, TableHeader, TableBody, TableRow, and TableColumn.

This keeps the structure easy to understand before adding features such as selection, sorting, sticky behavior, or responsive view switching.

### Example: Example 1

Truck

Route

Status

B-TR 512

Hamburg DC Zurich

On time

KS-F 662

Kassel Hub Prague

Loading

M-RI 2418

Munich South Vienna

Delayed 20 min

#### React (tsx)

```tsx
import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';

type BasicTableRow = {
    id: string;
    truck: string;
    route: {
        destination: string;
        origin: string;
    };
    status: string;
};

const rows: BasicTableRow[] = [
    {
        id: '1',
        truck: 'B-TR 512',
        route: {
            origin: 'Hamburg DC',
            destination: 'Zurich',
        },
        status: 'On time',
    },
    {
        id: '2',
        truck: 'KS-F 662',
        route: {
            origin: 'Kassel Hub',
            destination: 'Prague',
        },
        status: 'Loading',
    },
    {
        id: '3',
        truck: 'M-RI 2418',
        route: {
            origin: 'Munich South',
            destination: 'Vienna',
        },
        status: 'Delayed 20 min',
    },
];

const TableBasicExample = () => (
    <Table rowKey='id' hover>
        <TableHeader>
            <TableHeaderColumn columnKey='truck' width={180}>
                Truck
            </TableHeaderColumn>
            <TableHeaderColumn columnKey='route' width={280}>
                Route
            </TableHeaderColumn>
            <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
        </TableHeader>
        <TableBody>
            {rows.map(row => (
                <TableRow key={row.id} id={row.id}>
                    <TableColumn columnKey='truck'>{row.truck}</TableColumn>
                    <TableColumn columnKey='route'>
                        <div className='display-flex align-items-center gap-5'>
                            <span>{row.route.origin}</span>
                            <span className='rioglyph rioglyph-arrow-right text-color-darker' />
                            <span>{row.route.destination}</span>
                        </div>
                    </TableColumn>
                    <TableColumn columnKey='status'>{row.status}</TableColumn>
                </TableRow>
            ))}
        </TableBody>
    </Table>
);

export default TableBasicExample;
```

#### HTML (html)

```html
<div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: minmax(0, 180px) minmax(0, 280px) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3&quot;; --table-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="truck" 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">Truck</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="route" role="columnheader" aria-colindex="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">Route</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="1" class="table-row" data-index="0" data-row-id="1" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">B-TR 512</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <div class="display-flex align-items-center gap-5">
                        <span>Hamburg DC</span>
                        <span class="rioglyph rioglyph-arrow-right text-color-darker">
                        </span>
                        <span>Zurich</span>
                    </div>
                </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">On time</div>
            </div>
        </div>
        <div id="2" class="table-row" data-index="1" data-row-id="2" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">KS-F 662</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <div class="display-flex align-items-center gap-5">
                        <span>Kassel Hub</span>
                        <span class="rioglyph rioglyph-arrow-right text-color-darker">
                        </span>
                        <span>Prague</span>
                    </div>
                </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">Loading</div>
            </div>
        </div>
        <div id="3" class="table-row" data-index="2" data-row-id="3" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">M-RI 2418</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <div class="display-flex align-items-center gap-5">
                        <span>Munich South</span>
                        <span class="rioglyph rioglyph-arrow-right text-color-darker">
                        </span>
                        <span>Vienna</span>
                    </div>
                </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">Delayed 20 min</div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Percentage column widths

Set explicit percentage widths on the leading columns when they should reserve a fixed share of the available space. Leave the last column without a width so it can consume the remaining horizontal space.

### Example: Example 2

Shipment

Route

Carrier

Remarks

SH-24018

Hamburg to Barcelona

Blue Freight

Temperature-controlled cargo with customs documents already pre-cleared. Apr 12, 14:30

SH-24027

Lyon to Rotterdam

Northlane Logistics

Driver requested an earlier unloading slot if the terminal capacity allows it. Apr 13, 09:15

SH-24031

Verona to Bremen

Cargo Grid

Last column has no explicit width and therefore consumes the remaining horizontal space. Apr 14, 18:05

#### React (tsx)

```tsx
import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';

const rows = [
    {
        shipmentId: 'SH-24018',
        route: 'Hamburg to Barcelona',
        carrier: 'Blue Freight',
        eta: 'Apr 12, 14:30',
        remarks: 'Temperature-controlled cargo with customs documents already pre-cleared.',
    },
    {
        shipmentId: 'SH-24027',
        route: 'Lyon to Rotterdam',
        carrier: 'Northlane Logistics',
        eta: 'Apr 13, 09:15',
        remarks: 'Driver requested an earlier unloading slot if the terminal capacity allows it.',
    },
    {
        shipmentId: 'SH-24031',
        route: 'Verona to Bremen',
        carrier: 'Cargo Grid',
        eta: 'Apr 14, 18:05',
        remarks: 'Last column has no explicit width and therefore consumes the remaining horizontal space.',
    },
];

const TablePercentageWidthsExample = () => (
    <Table>
        <TableHeader>
            <TableHeaderColumn columnKey='shipmentId' width='18%' resizeable>
                Shipment
            </TableHeaderColumn>
            <TableHeaderColumn columnKey='route' width='28%' resizeable>
                Route
            </TableHeaderColumn>
            <TableHeaderColumn columnKey='carrier' width='22%' resizeable>
                Carrier
            </TableHeaderColumn>
            <TableHeaderColumn columnKey='remarks' resizeable>
                Remarks
            </TableHeaderColumn>
        </TableHeader>

        <TableBody>
            {rows.map(row => (
                <TableRow key={row.shipmentId} id={row.shipmentId}>
                    <TableColumn columnKey='shipmentId'>{row.shipmentId}</TableColumn>
                    <TableColumn columnKey='route'>{row.route}</TableColumn>
                    <TableColumn columnKey='carrier'>{row.carrier}</TableColumn>
                    <TableColumn columnKey='remarks'>
                        <div className='display-flex flex-column gap-5'>
                            <span>{row.remarks}</span>
                            <span className='text-muted'>{row.eta}</span>
                        </div>
                    </TableColumn>
                </TableRow>
            ))}
        </TableBody>
    </Table>
);

export default TablePercentageWidthsExample;
```

#### HTML (html)

```html
<div class="table table-view-table border table-rounded table-has-head" role="table" style="--table-columns: minmax(0, calc(var(--table-width) * 18 / 100)) minmax(0, calc(var(--table-width) * 28 / 100)) minmax(0, calc(var(--table-width) * 22 / 100)) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
    <div class="table-head" role="rowgroup">
        <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
            <div class="table-head-cell table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="shipmentId" 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">Shipment</span>
                        </span>
                    </div>
                </div>
                <div class="table-column-resize-handle">
                </div>
            </div>
            <div class="table-head-cell table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="route" role="columnheader" aria-colindex="2" aria-rowindex="1" 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">Route</span>
                        </span>
                    </div>
                </div>
                <div class="table-column-resize-handle">
                </div>
            </div>
            <div class="table-head-cell table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="carrier" 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">Carrier</span>
                        </span>
                    </div>
                </div>
                <div class="table-column-resize-handle">
                </div>
            </div>
            <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="remarks" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Remarks</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table-body" role="rowgroup">
        <div id="SH-24018" 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="shipmentId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">SH-24018</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Hamburg to Barcelona</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="carrier" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Blue Freight</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="remarks" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <div class="display-flex flex-column gap-5">
                        <span>Temperature-controlled cargo with customs documents already pre-cleared.</span>
                        <span class="text-muted">Apr 12, 14:30</span>
                    </div>
                </div>
            </div>
        </div>
        <div id="SH-24027" 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="shipmentId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">SH-24027</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Lyon to Rotterdam</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="carrier" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Northlane Logistics</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="remarks" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <div class="display-flex flex-column gap-5">
                        <span>Driver requested an earlier unloading slot if the terminal capacity allows it.</span>
                        <span class="text-muted">Apr 13, 09:15</span>
                    </div>
                </div>
            </div>
        </div>
        <div id="SH-24031" 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="shipmentId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">SH-24031</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Verona to Bremen</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="carrier" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Cargo Grid</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="remarks" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <div class="display-flex flex-column gap-5">
                        <span>Last column has no explicit width and therefore consumes the remaining horizontal space.</span>
                        <span class="text-muted">Apr 14, 18:05</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Scrollable body with maxHeight

Use maxHeight when only the body rows should scroll inside a fixed-height area.

This keeps the header and footer outside the internal scroll container and is the foundation for patterns such as sticky rows, virtualization, or chunk loading on scroll.

### Example: Example 3

Truck

Cargo

ETA

TRK-2100

Palletized goods

06:15

TRK-2101

Cooling units

07:45

TRK-2102

Spare parts

08:15

TRK-2103

Packaging material

09:45

TRK-2104

Palletized goods

10:15

TRK-2105

Cooling units

11:45

TRK-2106

Spare parts

12:15

TRK-2107

Packaging material

13:45

TRK-2108

Palletized goods

14:15

TRK-2109

Cooling units

15:45

TRK-2110

Spare parts

06:15

TRK-2111

Packaging material

07:45

TRK-2112

Palletized goods

08:15

TRK-2113

Cooling units

09:45

Visible rows area: 14

#### React (tsx)

```tsx
import Table, {
    TableBody,
    TableColumn,
    TableFooter,
    TableHeader,
    TableHeaderColumn,
    TableRow,
} from '@rio-cloud/rio-uikit/Table';

type DemoScrollableBodyRow = {
    cargo: string;
    eta: string;
    id: number;
    truck: string;
};

const rows: DemoScrollableBodyRow[] = Array.from({ length: 14 }, (_, index) => ({
    cargo: ['Palletized goods', 'Cooling units', 'Spare parts', 'Packaging material'][index % 4] ?? 'Palletized goods',
    id: index + 1,
    truck: `TRK-${String(2100 + index)}`,
    eta: `${String(6 + (index % 10)).padStart(2, '0')}:${index % 2 === 0 ? '15' : '45'}`,
}));

const TableBodyMaxHeightExample = () => (
    <Table rowKey='id' hover>
        <TableHeader>
            <TableHeaderColumn columnKey='truck'>Truck</TableHeaderColumn>
            <TableHeaderColumn columnKey='cargo'>Cargo</TableHeaderColumn>
            <TableHeaderColumn columnKey='eta'>ETA</TableHeaderColumn>
        </TableHeader>

        <TableBody maxHeight={260}>
            {rows.map(row => (
                <TableRow key={row.id} id={row.id}>
                    <TableColumn>{row.truck}</TableColumn>
                    <TableColumn>{row.cargo}</TableColumn>
                    <TableColumn>{row.eta}</TableColumn>
                </TableRow>
            ))}
        </TableBody>

        <TableFooter>
            <TableColumn columnKey='truck'>{`Visible rows area: ${rows.length}`}</TableColumn>
            <TableColumn columnKey='cargo' />
            <TableColumn columnKey='eta' />
        </TableFooter>
    </Table>
);

export default TableBodyMaxHeightExample;
```

#### HTML (html)

```html
<div class="table table-view-table table-hover border table-rounded table-has-head table-has-footer" 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="truck" 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">Truck</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="cargo" 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">Cargo</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="eta" 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">ETA</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div role="presentation" class="table-body-scroll-wrapper smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: auto; min-height: 0px; max-height: 260px;">
        <div class="scrollbar-view" style="position: relative; overflow: scroll; margin-right: 0px; margin-bottom: 0px; min-height: 0px; max-height: calc(260px);">
            <div class="scrollbar-content-wrapper">
                <div class="table-body" role="rowgroup">
                    <div id="1" class="table-row" data-index="0" data-row-id="1" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">TRK-2100</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Palletized goods</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">06:15</div>
                        </div>
                    </div>
                    <div id="2" class="table-row" data-index="1" data-row-id="2" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">TRK-2101</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Cooling units</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">07:45</div>
                        </div>
                    </div>
                    <div id="3" class="table-row" data-index="2" data-row-id="3" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">TRK-2102</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Spare parts</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">08:15</div>
                        </div>
                    </div>
                    <div id="4" class="table-row" data-index="3" data-row-id="4" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">TRK-2103</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Packaging material</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">09:45</div>
                        </div>
                    </div>
                    <div id="5" class="table-row" data-index="4" data-row-id="5" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">TRK-2104</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Palletized goods</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">10:15</div>
                        </div>
                    </div>
                    <div id="6" class="table-row" data-index="5" data-row-id="6" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">TRK-2105</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Cooling units</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">11:45</div>
                        </div>
                    </div>
                    <div id="7" class="table-row" data-index="6" data-row-id="7" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">TRK-2106</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Spare parts</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">12:15</div>
                        </div>
                    </div>
                    <div id="8" class="table-row" data-index="7" data-row-id="8" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">TRK-2107</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Packaging material</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">13:45</div>
                        </div>
                    </div>
                    <div id="9" class="table-row" data-index="8" data-row-id="9" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">TRK-2108</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Palletized goods</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">14:15</div>
                        </div>
                    </div>
                    <div id="10" class="table-row" data-index="9" data-row-id="10" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">TRK-2109</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Cooling units</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">15:45</div>
                        </div>
                    </div>
                    <div id="11" class="table-row" data-index="10" data-row-id="11" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">TRK-2110</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Spare parts</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">06:15</div>
                        </div>
                    </div>
                    <div id="12" class="table-row" data-index="11" data-row-id="12" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">TRK-2111</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Packaging material</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">07:45</div>
                        </div>
                    </div>
                    <div id="13" class="table-row" data-index="12" data-row-id="13" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">TRK-2112</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Palletized goods</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">08:15</div>
                        </div>
                    </div>
                    <div id="14" class="table-row" data-index="13" data-row-id="14" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">TRK-2113</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Cooling units</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">09:45</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
            <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
            </div>
        </div>
        <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
            <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
            </div>
        </div>
    </div>
    <div class="table-footer" role="rowgroup">
        <div class="table-row table-row-footer" role="row">
            <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="truck" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Visible rows area: 14</div>
            </div>
            <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                </div>
            </div>
            <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Full-width footer content

When TableFooter contains no TableColumn children, the footer spans the full table width instead of following the horizontally scrollable column grid.

### Example: Example 4

Request

Owner

Destination

Timeframe

Status

REQ-4102

Mila Santos

North checkpoint warehouse entrance

08:00 - 10:30

Open

REQ-4108

Jonas Richter

Central archive handover desk

09:15 - 11:00

In progress

REQ-4116

Noah Weber

South service gate loading ramp

11:30 - 13:00

Blocked

REQ-4124

Nora Klein

West supplier onboarding office

14:00 - 16:00

Ready

REQ-4130

Ava Schneider

Remote inspection coordination room

16:30 - 18:30

Open

5 requests visible This footer stays full width while the table columns above can still scroll horizontally. Export overview

#### React (tsx)

```tsx
import Button from '@rio-cloud/rio-uikit/Button';
import Table, {
    TableBody,
    TableColumn,
    TableFooter,
    TableHeader,
    TableHeaderColumn,
    TableRow,
} from '@rio-cloud/rio-uikit/Table';

type DemoFullWidthFooterRow = {
    id: number;
    request: string;
    owner: string;
    destination: string;
    timeframe: string;
    status: string;
};

const rows: DemoFullWidthFooterRow[] = [
    {
        id: 1,
        request: 'REQ-4102',
        owner: 'Mila Santos',
        destination: 'North checkpoint warehouse entrance',
        timeframe: '08:00 - 10:30',
        status: 'Open',
    },
    {
        id: 2,
        request: 'REQ-4108',
        owner: 'Jonas Richter',
        destination: 'Central archive handover desk',
        timeframe: '09:15 - 11:00',
        status: 'In progress',
    },
    {
        id: 3,
        request: 'REQ-4116',
        owner: 'Noah Weber',
        destination: 'South service gate loading ramp',
        timeframe: '11:30 - 13:00',
        status: 'Blocked',
    },
    {
        id: 4,
        request: 'REQ-4124',
        owner: 'Nora Klein',
        destination: 'West supplier onboarding office',
        timeframe: '14:00 - 16:00',
        status: 'Ready',
    },
    {
        id: 5,
        request: 'REQ-4130',
        owner: 'Ava Schneider',
        destination: 'Remote inspection coordination room',
        timeframe: '16:30 - 18:30',
        status: 'Open',
    },
];

const TableFullWidthFooterExample = () => (
    <Table hover>
        <TableHeader>
            <TableHeaderColumn columnKey='request' width={180}>
                Request
            </TableHeaderColumn>
            <TableHeaderColumn columnKey='owner' width={180}>
                Owner
            </TableHeaderColumn>
            <TableHeaderColumn columnKey='destination' width={320}>
                Destination
            </TableHeaderColumn>
            <TableHeaderColumn columnKey='timeframe' width={220}>
                Timeframe
            </TableHeaderColumn>
            <TableHeaderColumn columnKey='status' width={180}>
                Status
            </TableHeaderColumn>
        </TableHeader>

        <TableBody maxHeight={240}>
            {rows.map(row => (
                <TableRow key={row.id} id={row.id}>
                    <TableColumn>{row.request}</TableColumn>
                    <TableColumn>{row.owner}</TableColumn>
                    <TableColumn>{row.destination}</TableColumn>
                    <TableColumn>{row.timeframe}</TableColumn>
                    <TableColumn>{row.status}</TableColumn>
                </TableRow>
            ))}
        </TableBody>

        <TableFooter>
            <div className='display-flex align-items-center justify-content-between gap-15'>
                <span className='text-medium'>5 requests visible</span>
                <span className='text-color-darker'>
                    This footer stays full width while the table columns above can still scroll horizontally.
                </span>
                <div>
                    <Button bsStyle='primary'>Export overview</Button>
                </div>
            </div>
        </TableFooter>
    </Table>
);

export default TableFullWidthFooterExample;
```

#### HTML (html)

```html
<div class="table table-view-table table-hover border table-rounded table-has-head table-has-footer table-allow-horizontal-overflow table-has-horizontal-scroll-end-offset" role="table" style="--table-columns: minmax(0, 180px) minmax(0, 180px) minmax(0, 320px) minmax(0, 220px) minmax(0, 180px); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4 table-col-5&quot;; --table-column-count: 5; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="5">
    <div class="table-head" role="rowgroup">
        <div class="table-head-grid" role="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="request" 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">Request</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="owner" 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">Owner</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="destination" role="columnheader" aria-colindex="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">Destination</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="timeframe" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Timeframe</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Status</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div role="presentation" class="table-body-scroll-wrapper smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: auto; min-height: 0px; max-height: 240px;">
        <div class="scrollbar-view" style="position: relative; overflow: scroll; margin-right: 0px; margin-bottom: 0px; min-height: 0px; max-height: calc(240px);">
            <div class="scrollbar-content-wrapper">
                <div class="table-body" role="rowgroup">
                    <div id="1" 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="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">REQ-4102</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Mila Santos</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">North checkpoint warehouse entrance</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="timeframe" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">08:00 - 10:30</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Open</div>
                        </div>
                    </div>
                    <div id="2" 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="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">REQ-4108</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Jonas Richter</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Central archive handover desk</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="timeframe" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">09:15 - 11:00</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">In progress</div>
                        </div>
                    </div>
                    <div id="3" 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="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">REQ-4116</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Noah Weber</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">South service gate loading ramp</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="timeframe" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">11:30 - 13:00</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Blocked</div>
                        </div>
                    </div>
                    <div id="4" 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="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">REQ-4124</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Nora Klein</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">West supplier onboarding office</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="timeframe" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">14:00 - 16:00</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Ready</div>
                        </div>
                    </div>
                    <div id="5" class="table-row" data-index="4" data-row-id="4" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">REQ-4130</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Ava Schneider</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Remote inspection coordination room</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="timeframe" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">16:30 - 18:30</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Open</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
            <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
            </div>
        </div>
        <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
            <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
            </div>
        </div>
    </div>
    <div class="table-footer table-footer-full-width" role="rowgroup">
        <div class="table-row table-row-footer" role="row">
            <div class="table-cell table-footer-content" role="cell" aria-colspan="5">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center justify-content-between gap-15">
                        <span class="text-medium">5 requests visible</span>
                        <span class="text-color-darker">This footer stays full width while the table columns above can still scroll horizontally.</span>
                        <div>
                            <button type="button" class="btn btn-primary btn-component" tabindex="0">Export overview</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Resizable and sortable columns

### Example:

Columns

Order

Vehicle

Route

Cargo

Status

ETA

To pick up a draggable item, press the space bar.
While dragging, use the arrow keys to move the item.
Press space again to drop the item in its new position, or press escape to cancel.

ORD-1024

B-RC 2041

Berlin to Hamburg

Parcels

Ready

08:35

ORD-1031

M-RC 1888

Munich to Cologne

Electronics

Delayed

09:10

ORD-1040

L-RC 2204

Nürnberg to Frankfurt

Spare parts

In transit

10:45

ORD-1048

B-RC 1722

Bremen to Stuttgart

Fresh goods

Ready

12:15

#### React (tsx)

```tsx
import { useEffect, useMemo, useState, type ReactNode } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { debounce } from 'es-toolkit/function';

import Button from '@rio-cloud/rio-uikit/Button';
import Table, {
    TableBody,
    TableColumn,
    TableColumnsDropdown,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    useTableSelection,
} from '@rio-cloud/rio-uikit/Table';
import { SortDirection, type SortDirectionType } from '@rio-cloud/rio-uikit/SortUtils';
import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
import { serializeColumnsConfig, serializeSorting, toQueryString } from '@rio-cloud/rio-uikit/routeUtils';
import useSorting from '@rio-cloud/rio-uikit/useSorting';

type DemoResizableSortableRow = {
    id: string;
    orderId: string;
    vehicle: string;
    route: string;
    cargo: string;
    status: string;
    eta: string;
};

type DemoResizableSortableColumn = {
    key: string;
    label: ReactNode;
    icon?: string;
    hideLabel?: boolean;
    sortable?: boolean;
    visible: boolean;
    width?: number | string;
    resizeable?: boolean;
    draggable?: boolean;
    horizontalAlign?: 'left' | 'center' | 'right';
    disabled?: boolean;
};

const rows: DemoResizableSortableRow[] = [
    {
        id: 'row-1',
        orderId: 'ORD-1024',
        vehicle: 'B-RC 2041',
        route: 'Berlin to Hamburg',
        cargo: 'Parcels',
        status: 'Ready',
        eta: '08:35',
    },
    {
        id: 'row-2',
        orderId: 'ORD-1031',
        vehicle: 'M-RC 1888',
        route: 'Munich to Cologne',
        cargo: 'Electronics',
        status: 'Delayed',
        eta: '09:10',
    },
    {
        id: 'row-3',
        orderId: 'ORD-1040',
        vehicle: 'L-RC 2204',
        route: 'Nürnberg to Frankfurt',
        cargo: 'Spare parts',
        status: 'In transit',
        eta: '10:45',
    },
    {
        id: 'row-4',
        orderId: 'ORD-1048',
        vehicle: 'B-RC 1722',
        route: 'Bremen to Stuttgart',
        cargo: 'Fresh goods',
        status: 'Ready',
        eta: '12:15',
    },
];

const initialColumns: DemoResizableSortableColumn[] = [
    {
        key: 'orderId',
        label: 'Order',
        sortable: true,
        visible: true,
        draggable: true,
        resizeable: true,
    },
    {
        key: 'vehicle',
        label: 'Vehicle',
        sortable: true,
        visible: true,
        draggable: true,
        resizeable: true,
    },
    {
        key: 'route',
        label: 'Route',
        icon: 'rioglyph-route',
        sortable: false,
        visible: true,
        draggable: true,
        resizeable: true,
    },
    {
        key: 'cargo',
        label: 'Cargo',
        icon: 'rioglyph-palette',
        sortable: true,
        visible: true,
        draggable: true,
        resizeable: true,
    },
    {
        key: 'status',
        label: 'Status',
        sortable: true,
        visible: true,
        width: 100,
        draggable: true,
        resizeable: true,
    },
    {
        key: 'eta',
        label: 'ETA',
        sortable: true,
        visible: true,
        width: 100,
        draggable: true,
        resizeable: true,
        horizontalAlign: 'right',
    },
    {
        key: 'actions',
        label: 'Actions',
        hideLabel: true,
        visible: true,
        width: 68,
        resizeable: false,
        draggable: false,
        disabled: true,
        horizontalAlign: 'right',
    },
];

const defaultSortState = {
    sortBy: 'orderId',
    sortDir: SortDirection.ASCENDING,
};

const defaultSerializedColumns = serializeColumnsConfig(initialColumns, initialColumns).join(',');

const resolveStatusLabelClassName = (status: DemoResizableSortableRow['status']) => {
    switch (status) {
        case 'Ready':
            return 'label label-success label-filled label-condensed';
        case 'Delayed':
            return 'label label-warning label-filled label-condensed';
        case 'In transit':
            return 'label label-info label-filled label-condensed';
        default:
            return 'label label-muted label-filled label-condensed';
    }
};

const TableResizableSortableExample = () => {
    const [columns, setColumns] = useState(initialColumns);

    const { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection } = useSorting(
        rows,
        defaultSortState.sortBy as keyof DemoResizableSortableRow,
        defaultSortState.sortDir
    );

    const urlStateString = useTableDemoUrlState({
        columns,
        sortBy: String(sortKey),
        sortDirection,
    });
    const visibleColumns = columns.filter(column => column.visible !== false);

    const selection = useTableSelection({
        rows: sortedItems,
        rowKey: 'id',
        initialSelectedRowIds: [rows[1]?.id].filter((rowId): rowId is string => rowId !== undefined),
    });

    const handleSortChange = (columnKey: string, direction: 'asc' | 'desc') => {
        setSortKey(columnKey as keyof DemoResizableSortableRow);
        setSortDirection(direction);
    };

    const handleColumnResize = (columnKey: string, width?: number | string) => {
        setColumns(previousColumns =>
            previousColumns.map(column => {
                if (column.key !== columnKey) {
                    return column;
                }

                if (width === undefined) {
                    const { width: _width, ...columnWithoutWidth } = column;

                    return columnWithoutWidth;
                }

                return { ...column, width };
            })
        );
    };

    const handleColumnOrderChange = (columnOrder: string[]) => {
        setColumns(previousColumns => {
            const columnsByKey = new Map(previousColumns.map(column => [column.key, column]));

            return columnOrder.flatMap(columnKey => {
                const column = columnsByKey.get(columnKey);
                return column ? [column] : [];
            });
        });
    };

    const handleColumnVisibilityChange = (columnKey: string, visible: boolean) => {
        setColumns(previousColumns =>
            previousColumns.map(column => (column.key === columnKey ? { ...column, visible } : column))
        );
    };

    return (
        <div>
            <TableToolbar disableResponsiveCollapse>
                <TableToolbarColumn horizontalAlign='right'>
                    <TableColumnsDropdown
                        columns={columns}
                        label='Columns'
                        onColumnOrderChange={handleColumnOrderChange}
                        onColumnVisibilityChange={handleColumnVisibilityChange}
                    />
                </TableToolbarColumn>
            </TableToolbar>
            <Table
                rowKey='id'
                showSelectionColumn
                hover
                selectedRowIds={selection.selectedRowIds}
                onSelectionChange={selection.setSelectedRowIds}
                sortBy={String(sortKey)}
                sortDirection={sortDirection}
                onSortChange={handleSortChange}
                onColumnResize={handleColumnResize}
                columnOrder={columns.map(column => column.key)}
                onColumnOrderChange={handleColumnOrderChange}
            >
                <TableHeader>
                    {visibleColumns.map(column => (
                        <TableHeaderColumn
                            key={column.key}
                            columnKey={column.key}
                            width={column.width}
                            sortable={column.sortable}
                            resizeable={column.resizeable}
                            draggable={column.draggable}
                            horizontalAlign={column.horizontalAlign}
                            icon={column.icon}
                            hideLabel={column.hideLabel}
                        >
                            {column.label}
                        </TableHeaderColumn>
                    ))}
                </TableHeader>

                <TableBody>
                    {sortedItems.map(row => (
                        <TableRow key={row.id} id={row.id}>
                            {visibleColumns.map(column => {
                                switch (column.key) {
                                    case 'status':
                                        return (
                                            <TableColumn key={column.key} columnKey={column.key}>
                                                <span className={resolveStatusLabelClassName(row.status)}>
                                                    {row.status}
                                                </span>
                                            </TableColumn>
                                        );
                                    case 'eta':
                                        return (
                                            <TableColumn
                                                key={column.key}
                                                columnKey={column.key}
                                                horizontalAlign='right'
                                            >
                                                {row.eta}
                                            </TableColumn>
                                        );
                                    case 'actions':
                                        return (
                                            <TableColumn
                                                key={column.key}
                                                columnKey={column.key}
                                                horizontalAlign='right'
                                            >
                                                <Button bsStyle='default' iconName='rioglyph-pencil' iconOnly />
                                            </TableColumn>
                                        );
                                    case 'orderId':
                                        return (
                                            <TableColumn key={column.key} columnKey={column.key}>
                                                {row.orderId}
                                            </TableColumn>
                                        );
                                    case 'vehicle':
                                        return (
                                            <TableColumn key={column.key} columnKey={column.key}>
                                                {row.vehicle}
                                            </TableColumn>
                                        );
                                    case 'route':
                                        return (
                                            <TableColumn key={column.key} columnKey={column.key}>
                                                {row.route}
                                            </TableColumn>
                                        );
                                    case 'cargo':
                                        return (
                                            <TableColumn key={column.key} columnKey={column.key}>
                                                {row.cargo}
                                            </TableColumn>
                                        );
                                    default:
                                        return null;
                                }
                            })}
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
            {urlStateString && (
                <div className='margin-top-15'>
                    <div className='text-color-gray margin-bottom-5'>URL state</div>
                    <code>{urlStateString}</code>
                </div>
            )}
        </div>
    );
};

export default TableResizableSortableExample;

const useTableDemoUrlState = (params: {
    columns: DemoResizableSortableColumn[];
    sortBy: string;
    sortDirection: SortDirectionType;
}) => {
    const { columns, sortBy, sortDirection } = params;
    const location = useLocation();
    const navigate = useNavigate();

    const urlStateString = useMemo(() => {
        const nextParams = new URLSearchParams();
        const isDefaultSort = sortBy === defaultSortState.sortBy && sortDirection === defaultSortState.sortDir;
        const serializedSort = isDefaultSort ? null : serializeSorting({ sortBy, sortDir: sortDirection });
        const serializedColumns = serializeColumnsConfig(columns, initialColumns).join(',');

        if (serializedSort) {
            nextParams.set('sort', serializedSort);
        }

        if (serializedColumns !== defaultSerializedColumns) {
            nextParams.set('columns', serializedColumns);
        }

        return toQueryString(nextParams, [
            { key: 'sort', selector: () => '', action: () => undefined, defaultValue: '' },
            { key: 'columns', selector: () => [], action: () => undefined, type: 'array', defaultValue: [] },
        ]);
    }, [columns, sortBy, sortDirection]);

    const debouncedNavigate = useMemo(
        () =>
            debounce((nextSearch: string) => {
                navigate({ search: nextSearch }, { replace: true });
            }, 150),
        [navigate]
    );

    useEffect(() => {
        const nextSearch = urlStateString ? `?${urlStateString}` : '';

        if (location.search === nextSearch) {
            return;
        }

        if (nextSearch === '') {
            debouncedNavigate.cancel();
            navigate({ search: '' }, { replace: true });
            return;
        }

        debouncedNavigate(nextSearch);

        return () => debouncedNavigate.cancel();
    }, [debouncedNavigate, location.search, navigate, urlStateString]);

    return urlStateString;
};
```

#### 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="dropdown btn-group">
                        <button type="button" id="1v7a2u5w3ek" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">
                            <span class="display-inline-flex align-items-center gap-5">
                                <span class="rioglyph rioglyph-table-view">
                                </span>
                                <span>Columns</span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(0, 100px) minmax(0, 100px) minmax(0, 68px); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3 table-col-4 table-col-5 table-col-6 table-col-7&quot;; --table-column-count: 8; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="8">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
                <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="indeterminate">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="orderId" role="columnheader" aria-colindex="2" aria-rowindex="1" aria-sort="ascending" style="grid-area: 1 / 2 / span 1 / span 1; transition: transform linear;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button">
                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-0">
                                    <span class="sort-arrows sort-asc">
                                    </span>
                                    <span class="table-head-label">Order</span>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div class="table-column-resize-handle">
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="vehicle" role="columnheader" aria-colindex="3" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 3 / span 1 / span 1; transition: transform linear;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button">
                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-0">
                                    <span class="sort-arrows ">
                                    </span>
                                    <span class="table-head-label">Vehicle</span>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div class="table-column-resize-handle">
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="route" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1; transition: transform linear;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-0">
                                <span class="table-head-label">
                                    <span class="display-flex align-items-center gap-5">
                                        <span class="text-color-dark rioglyph rioglyph-route">
                                        </span>
                                        <span>Route</span>
                                    </span>
                                </span>
                            </span>
                        </div>
                    </div>
                    <div class="table-column-resize-handle">
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="cargo" role="columnheader" aria-colindex="5" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 5 / span 1 / span 1; transition: transform linear;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button">
                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-0">
                                    <span class="sort-arrows ">
                                    </span>
                                    <span class="table-head-label">
                                        <span class="display-flex align-items-center gap-5">
                                            <span class="text-color-dark rioglyph rioglyph-palette">
                                            </span>
                                            <span>Cargo</span>
                                        </span>
                                    </span>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div class="table-column-resize-handle">
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="6" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 6 / span 1 / span 1; transition: transform linear;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button">
                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-0">
                                    <span class="sort-arrows ">
                                    </span>
                                    <span class="table-head-label">Status</span>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div class="table-column-resize-handle">
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider table-align-right table-vertical-align-middle" data-column="eta" role="columnheader" aria-colindex="7" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 7 / span 1 / span 1; transition: transform linear;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button">
                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-0">
                                    <span class="sort-arrows ">
                                    </span>
                                    <span class="table-head-label">ETA</span>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div class="table-column-resize-handle">
                    </div>
                </div>
                <div class="table-head-cell table-align-right table-vertical-align-middle" data-column="actions" role="columnheader" aria-colindex="8" aria-rowindex="1" style="grid-area: 1 / 8 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper" aria-label="Actions">
                            </span>
                        </div>
                    </div>
                </div>
                <div id="DndDescribedBy-0" style="display: none;">
                    To pick up a draggable item, press the space bar.
                    While dragging, use the arrow keys to move the item.
                    Press space again to drop the item in its new position, or press escape to cancel.
                </div>
                <div id="DndLiveRegion-0" role="status" aria-live="assertive" aria-atomic="true" style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%); white-space: nowrap;">
                </div>
            </div>
        </div>
        <div class="table-body" role="rowgroup">
            <div id="row-1" class="table-row" data-index="0" data-row-id="row-1" role="row">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="orderId" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">ORD-1024</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">B-RC 2041</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Berlin to Hamburg</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Parcels</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <span class="label label-success label-filled label-condensed">Ready</span>
                    </div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">08:35</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="8" style="grid-area: 1 / 8 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <button type="button" class="btn btn-default btn-icon-only btn-component" tabindex="0">
                            <span class="rioglyph rioglyph-pencil">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div id="row-2" class="table-row table-row-selected" data-index="1" data-row-id="row-2" role="row">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="" checked="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="orderId" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">ORD-1031</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">M-RC 1888</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Munich to Cologne</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Electronics</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <span class="label label-warning label-filled label-condensed">Delayed</span>
                    </div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">09:10</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="8" style="grid-area: 1 / 8 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <button type="button" class="btn btn-default btn-icon-only btn-component" tabindex="0">
                            <span class="rioglyph rioglyph-pencil">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div id="row-3" class="table-row" data-index="2" data-row-id="row-3" role="row">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="orderId" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">ORD-1040</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">L-RC 2204</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Nürnberg to Frankfurt</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Spare parts</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <span class="label label-info label-filled label-condensed">In transit</span>
                    </div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">10:45</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="8" style="grid-area: 1 / 8 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <button type="button" class="btn btn-default btn-icon-only btn-component" tabindex="0">
                            <span class="rioglyph rioglyph-pencil">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div id="row-4" class="table-row" data-index="3" data-row-id="row-4" role="row">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="orderId" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">ORD-1048</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">B-RC 1722</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Bremen to Stuttgart</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Fresh goods</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <span class="label label-success label-filled label-condensed">Ready</span>
                    </div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">12:15</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="8" style="grid-area: 1 / 8 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <button type="button" class="btn btn-default btn-icon-only btn-component" tabindex="0">
                            <span class="rioglyph rioglyph-pencil">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Row selection

### Example: Example 6

Clear active Clear selection

Route

Cargo

Status

Berlin to Hamburg

Parcels

Ready

Munich to Cologne

Electronics

Delayed

Bremen to Stuttgart

Fresh goods

Ready

Nürnberg to Frankfurt

Spare parts

In transit

Active row: Munich to Cologne
Selected rows: 0

#### React (tsx)

```tsx
import Button from '@rio-cloud/rio-uikit/Button';
import Table, {
    TableBody,
    TableColumn,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    useTableSelection,
} from '@rio-cloud/rio-uikit/Table';
import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';

type DemoSelectionRow = {
    id: number;
    route: string;
    cargo: string;
    status: string;
};

const rows: DemoSelectionRow[] = [
    { id: 101, route: 'Berlin to Hamburg', cargo: 'Parcels', status: 'Ready' },
    { id: 102, route: 'Munich to Cologne', cargo: 'Electronics', status: 'Delayed' },
    { id: 103, route: 'Bremen to Stuttgart', cargo: 'Fresh goods', status: 'Ready' },
    { id: 104, route: 'Nürnberg to Frankfurt', cargo: 'Spare parts', status: 'In transit' },
];

const TableSelectionExample = () => {
    const selection = useTableSelection({
        rows,
        rowKey: 'id',
        initialActiveRowId: rows[1]?.id,
        initialSelectedRowIds: [],
    });

    const activeRow = rows.find(row => row.id === selection.activeRowId);

    return (
        <div>
            <TableToolbar disableResponsiveCollapse>
                <TableToolbarColumn horizontalAlign='right'>
                    <div className='display-flex gap-10 flex-wrap'>
                        <Button bsStyle='default' onClick={() => selection.setActiveRowId(undefined)}>
                            Clear active
                        </Button>
                        <Button bsStyle='default' onClick={selection.clearSelection}>
                            Clear selection
                        </Button>
                    </div>
                </TableToolbarColumn>
            </TableToolbar>

            <Table
                rowKey='id'
                hover
                activeRowId={selection.activeRowId}
                onActiveRowChange={rowId => selection.setActiveRowId(rowId)}
                selectedRowIds={selection.selectedRowIds}
                onSelectionChange={selection.setSelectedRowIds}
                showSelectionColumn
            >
                <TableHeader>
                    <TableHeaderColumn columnKey='route'>Route</TableHeaderColumn>
                    <TableHeaderColumn columnKey='cargo'>Cargo</TableHeaderColumn>
                    <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
                </TableHeader>

                <TableBody>
                    {rows.map(row => (
                        <TableRow key={row.id} id={row.id}>
                            <TableColumn>{row.route}</TableColumn>
                            <TableColumn>{row.cargo}</TableColumn>
                            <TableColumn>{row.status}</TableColumn>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>

            <div className='margin-top-15 padding-x-5'>
                <div>Active row: {activeRow ? activeRow.route : '-'}</div>
                <div>Selected rows: {selection.selectedRowIds.length}</div>
            </div>
        </div>
    );
};

export default TableSelectionExample;
```

#### 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="display-flex gap-10 flex-wrap">
                        <button type="button" class="btn btn-default btn-component" tabindex="0">Clear active</button>
                        <button type="button" class="btn btn-default btn-component" tabindex="0">Clear selection</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
                <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="route" 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">Route</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="cargo" 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">Cargo</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Status</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-body" role="rowgroup">
            <div id="101" class="table-row table-row-clickable" data-index="0" data-row-id="101" role="row" tabindex="0">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Berlin to Hamburg</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Parcels</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ready</div>
                </div>
            </div>
            <div id="102" class="table-row table-row-active table-row-clickable" data-index="1" data-row-id="102" role="row" tabindex="0">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Munich to Cologne</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Electronics</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Delayed</div>
                </div>
            </div>
            <div id="103" class="table-row table-row-clickable" data-index="2" data-row-id="103" role="row" tabindex="0">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Bremen to Stuttgart</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Fresh goods</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ready</div>
                </div>
            </div>
            <div id="104" class="table-row table-row-clickable" data-index="3" data-row-id="104" role="row" tabindex="0">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Nürnberg to Frankfurt</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Spare parts</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">In transit</div>
                </div>
            </div>
        </div>
    </div>
    <div class="margin-top-15 padding-x-5">
        <div>Active row: Munich to Cologne</div>
        <div>Selected rows: 0</div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Row selection for batch operations

### Example: Example 7

Clear active Clear selection

Route

Cargo

Status

Berlin to Hamburg

Parcels

Ready

Munich to Cologne

Electronics

Delayed

Bremen to Stuttgart

Fresh goods

Ready

Nürnberg to Frankfurt

Spare parts

In transit

Active row: -
Selected rows: 0

#### React (tsx)

```tsx
import Button from '@rio-cloud/rio-uikit/Button';
import Notification from '@rio-cloud/rio-uikit/Notification';
import Table, {
    TableBatchDropdown,
    TableBody,
    TableColumn,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    useTableSelection,
} from '@rio-cloud/rio-uikit/Table';
import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';

type DemoSelectionRow = {
    id: number;
    route: string;
    cargo: string;
    status: string;
};

const rows: DemoSelectionRow[] = [
    { id: 101, route: 'Berlin to Hamburg', cargo: 'Parcels', status: 'Ready' },
    { id: 102, route: 'Munich to Cologne', cargo: 'Electronics', status: 'Delayed' },
    { id: 103, route: 'Bremen to Stuttgart', cargo: 'Fresh goods', status: 'Ready' },
    { id: 104, route: 'Nürnberg to Frankfurt', cargo: 'Spare parts', status: 'In transit' },
];

const TableSelectionBatchExample = () => {
    const selection = useTableSelection({
        rows,
        rowKey: 'id',
    });

    const activeRow = rows.find(row => row.id === selection.activeRowId);
    const selectedCount = selection.selectedRowIds.length;

    return (
        <div>
            <TableToolbar disableResponsiveCollapse>
                <TableToolbarColumn horizontalAlign='right'>
                    <div className='display-flex gap-10 flex-wrap'>
                        <Button bsStyle='default' onClick={() => selection.setActiveRowId(undefined)}>
                            Clear active
                        </Button>
                        <Button bsStyle='default' onClick={selection.clearSelection}>
                            Clear selection
                        </Button>
                    </div>
                </TableToolbarColumn>
            </TableToolbar>

            <Table
                rowKey='id'
                hover
                activeRowId={selection.activeRowId}
                onActiveRowChange={rowId => selection.setActiveRowId(rowId)}
                selectedRowIds={selection.selectedRowIds}
                onSelectionChange={selection.setSelectedRowIds}
                showSelectionColumn
                selectionHeaderContent={
                    <TableBatchDropdown
                        items={[
                            {
                                value: (
                                    <div>
                                        <span className='rioglyph rioglyph-cloud-download margin-right-10 text-size-18' />
                                        <span>Download selected items</span>
                                    </div>
                                ),
                                disabled: selectedCount === 0,
                                onSelect: () => Notification.info('Download started'),
                            },
                            {
                                divider: true,
                            },
                            {
                                value: <span>Select all items</span>,
                                onSelect: () => selection.toggleAllSelection(true),
                            },
                            {
                                value: <span>Deselect all items</span>,
                                onSelect: () => selection.toggleAllSelection(false),
                            },
                        ]}
                    />
                }
            >
                <TableHeader>
                    <TableHeaderColumn columnKey='route'>Route</TableHeaderColumn>
                    <TableHeaderColumn columnKey='cargo'>Cargo</TableHeaderColumn>
                    <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
                </TableHeader>

                <TableBody>
                    {rows.map(row => (
                        <TableRow key={row.id} id={row.id}>
                            <TableColumn>{row.route}</TableColumn>
                            <TableColumn>{row.cargo}</TableColumn>
                            <TableColumn>{row.status}</TableColumn>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>

            <div className='margin-top-15 padding-x-5'>
                <div>Active row: {activeRow ? activeRow.route : '-'}</div>
                <div>Selected rows: {selection.selectedRowIds.length}</div>
            </div>
        </div>
    );
};

export default TableSelectionBatchExample;
```

#### 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="display-flex gap-10 flex-wrap">
                        <button type="button" class="btn btn-default btn-component" tabindex="0">Clear active</button>
                        <button type="button" class="btn btn-default btn-component" tabindex="0">Clear selection</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid table-head-grid-custom-selection" role="row" style="grid-template-rows: repeat(1, auto);">
                <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle table-selection-cell-custom-content" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <div class="dropdown btn-group">
                            <button type="button" id="ay1szp5hl5s" class="btn btn-default btn-outline btn-sm btn-icon-only btn-component dropdown-toggle table-batch-dropdown-button no-hover-scale" tabindex="0">
                                <span class="rioglyph rioglyph-checkboxes">
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="route" role="columnheader" aria-colindex="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">Route</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="cargo" 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">Cargo</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Status</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-body" role="rowgroup">
            <div id="101" class="table-row table-row-clickable" data-index="0" data-row-id="101" role="row" tabindex="0">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Berlin to Hamburg</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Parcels</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ready</div>
                </div>
            </div>
            <div id="102" class="table-row table-row-clickable" data-index="1" data-row-id="102" role="row" tabindex="0">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Munich to Cologne</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Electronics</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Delayed</div>
                </div>
            </div>
            <div id="103" class="table-row table-row-clickable" data-index="2" data-row-id="103" role="row" tabindex="0">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Bremen to Stuttgart</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Fresh goods</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ready</div>
                </div>
            </div>
            <div id="104" class="table-row table-row-clickable" data-index="3" data-row-id="104" role="row" tabindex="0">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Nürnberg to Frankfurt</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Spare parts</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">In transit</div>
                </div>
            </div>
        </div>
    </div>
    <div class="margin-top-15 padding-x-5">
        <div>Active row: -</div>
        <div>Selected rows: 0</div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Row selection for footer batch operations

### Example: Example 8

Route

Cargo

Status

Berlin to Hamburg

Parcels

Ready

Munich to Cologne

Electronics

Delayed

Bremen to Stuttgart

Fresh goods

Ready

Nürnberg to Frankfurt

Spare parts

In transit

Select one or more rows

#### React (tsx)

```tsx
import Notification from '@rio-cloud/rio-uikit/Notification';
import Table, {
    TableBatchDropdown,
    TableBody,
    TableColumn,
    TableFooter,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    useTableSelection,
} from '@rio-cloud/rio-uikit/Table';

type DemoSelectionFooterRow = {
    id: number;
    route: string;
    cargo: string;
    status: string;
};

const rows: DemoSelectionFooterRow[] = [
    { id: 201, route: 'Berlin to Hamburg', cargo: 'Parcels', status: 'Ready' },
    { id: 202, route: 'Munich to Cologne', cargo: 'Electronics', status: 'Delayed' },
    { id: 203, route: 'Bremen to Stuttgart', cargo: 'Fresh goods', status: 'Ready' },
    { id: 204, route: 'Nürnberg to Frankfurt', cargo: 'Spare parts', status: 'In transit' },
];

const TableSelectionFooterBatchExample = () => {
    const selection = useTableSelection({
        rows,
        rowKey: 'id',
    });

    const selectedCount = selection.selectedRowIds.length;

    return (
        <Table
            rowKey='id'
            hover
            selectedRowIds={selection.selectedRowIds}
            onSelectionChange={selection.setSelectedRowIds}
            showSelectionColumn
        >
            <TableHeader>
                <TableHeaderColumn columnKey='route'>Route</TableHeaderColumn>
                <TableHeaderColumn columnKey='cargo'>Cargo</TableHeaderColumn>
                <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
            </TableHeader>

            <TableBody>
                {rows.map(row => (
                    <TableRow key={row.id} id={row.id}>
                        <TableColumn>{row.route}</TableColumn>
                        <TableColumn>{row.cargo}</TableColumn>
                        <TableColumn>{row.status}</TableColumn>
                    </TableRow>
                ))}
            </TableBody>

            <TableFooter>
                <div className='display-flex gap-15 align-items-center'>
                    <TableBatchDropdown
                        dropdownClassName='min-width-200'
                        items={[
                            {
                                value: (
                                    <span className='display-flex gap-5'>
                                        <span className='rioglyph rioglyph-cloud-download' />
                                        <span>
                                            Export{' '}
                                            {selectedCount > 0
                                                ? `${selectedCount} selected item${selectedCount === 1 ? '' : 's'}`
                                                : 'selected items'}
                                        </span>
                                    </span>
                                ),
                                disabled: selectedCount === 0,
                                onSelect: () =>
                                    Notification.info(
                                        `${selectedCount} selected item${selectedCount === 1 ? '' : 's'} exported`
                                    ),
                            },
                            {
                                value: (
                                    <span className='display-flex gap-5'>
                                        <span className='rioglyph rioglyph-archive' />
                                        <span>Archive selected items</span>
                                    </span>
                                ),
                                disabled: selectedCount === 0,
                                onSelect: () =>
                                    Notification.info(
                                        `${selectedCount} selected item${selectedCount === 1 ? '' : 's'} archived`
                                    ),
                            },
                            {
                                value: (
                                    <span className='display-flex gap-5'>
                                        <span className='rioglyph rioglyph-unassigned' />
                                        <span>Assign selected items</span>
                                    </span>
                                ),
                                disabled: selectedCount === 0,
                                onSelect: () =>
                                    Notification.info(
                                        `${selectedCount} selected item${selectedCount === 1 ? '' : 's'} assigned`
                                    ),
                            },
                            {
                                divider: true,
                            },
                            {
                                value: <span>Select all items</span>,
                                onSelect: () => selection.toggleAllSelection(true),
                            },
                            {
                                value: <span>Deselect all items</span>,
                                onSelect: () => selection.toggleAllSelection(false),
                            },
                        ]}
                    />
                    <div className='text-medium text-color-darker'>
                        {selectedCount > 0 ? `${selectedCount} items selected` : 'Select one or more rows'}
                    </div>
                </div>
            </TableFooter>
        </Table>
    );
};

export default TableSelectionFooterBatchExample;
```

#### HTML (html)

```html
<div class="table table-view-table table-hover border table-rounded table-has-head table-has-footer" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
    <div class="table-head" role="rowgroup">
        <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
            <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="route" 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">Route</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="cargo" 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">Cargo</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Status</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table-body" role="rowgroup">
        <div id="201" class="table-row" data-index="0" data-row-id="201" role="row">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Berlin to Hamburg</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Parcels</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Ready</div>
            </div>
        </div>
        <div id="202" class="table-row" data-index="1" data-row-id="202" role="row">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Munich to Cologne</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Electronics</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Delayed</div>
            </div>
        </div>
        <div id="203" class="table-row" data-index="2" data-row-id="203" role="row">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Bremen to Stuttgart</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Fresh goods</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Ready</div>
            </div>
        </div>
        <div id="204" class="table-row" data-index="3" data-row-id="204" role="row">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Nürnberg to Frankfurt</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Spare parts</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">In transit</div>
            </div>
        </div>
    </div>
    <div class="table-footer table-footer-full-width" role="rowgroup">
        <div class="table-row table-row-footer" role="row">
            <div class="table-cell table-footer-content" role="cell" aria-colspan="4">
                <div class="table-cell-content">
                    <div class="display-flex gap-15 align-items-center">
                        <div class="dropdown btn-group">
                            <button type="button" id="86ebdxud6lm" class="btn btn-default btn-outline btn-sm btn-icon-only btn-component dropdown-toggle table-batch-dropdown-button no-hover-scale" tabindex="0">
                                <span class="rioglyph rioglyph-checkboxes">
                                </span>
                            </button>
                        </div>
                        <div class="text-medium text-color-darker">Select one or more rows</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Row selection with non-selectable rows for multiselect

Use the selectable={false} prop on TableRow for rows that should stay active and clickable but must be excluded from multiple selection. Optionally set hideSelectionCheckboxesForExcludedRows when excluded rows should not render disabled selection checkboxes.

### Example: Rows 102 and 104 stay clickable but are excluded from selection.

Clear active Clear selection

Route

Cargo

Status

Berlin to Hamburg

Parcels

Ready

Munich to Cologne

Electronics

Delayed · active only

Bremen to Stuttgart

Fresh goods

Ready

Nürnberg to Frankfurt

Spare parts

In transit · active only

Active row: -
Selected rows: 0
Rows 102 and 104 stay clickable but are excluded from selection.

Hide selection checkboxes for excluded rows

#### React (tsx)

```tsx
import { useState } from 'react';

import Button from '@rio-cloud/rio-uikit/Button';
import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
import Table, {
    TableBody,
    TableColumn,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    useTableSelection,
} from '@rio-cloud/rio-uikit/Table';
import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';

type DemoSelectableRow = {
    id: number;
    route: string;
    cargo: string;
    status: string;
};

const rows: DemoSelectableRow[] = [
    { id: 101, route: 'Berlin to Hamburg', cargo: 'Parcels', status: 'Ready' },
    { id: 102, route: 'Munich to Cologne', cargo: 'Electronics', status: 'Delayed' },
    { id: 103, route: 'Bremen to Stuttgart', cargo: 'Fresh goods', status: 'Ready' },
    { id: 104, route: 'Nürnberg to Frankfurt', cargo: 'Spare parts', status: 'In transit' },
];

const nonSelectableRowIds = new Set([102, 104]);

const TableSelectiveRowsExample = () => {
    const [hideSelectionCheckboxesForExcludedRows, setHideSelectionCheckboxesForExcludedRows] = useState(true);

    const isRowSelectable = (row: DemoSelectableRow) => !nonSelectableRowIds.has(row.id);

    const selection = useTableSelection({
        rows,
        rowKey: 'id',
        isRowSelectable,
    });

    const activeRow = rows.find(row => row.id === selection.activeRowId);

    return (
        <div>
            <TableToolbar disableResponsiveCollapse>
                <TableToolbarColumn horizontalAlign='right'>
                    <ButtonToolbar>
                        <Button bsStyle='default' onClick={() => selection.setActiveRowId(undefined)}>
                            Clear active
                        </Button>
                        <Button bsStyle='default' onClick={selection.clearSelection}>
                            Clear selection
                        </Button>
                    </ButtonToolbar>
                </TableToolbarColumn>
            </TableToolbar>

            <Table
                rowKey='id'
                hover
                activeRowId={selection.activeRowId}
                onActiveRowChange={rowId => selection.setActiveRowId(rowId)}
                selectedRowIds={selection.selectedRowIds}
                onSelectionChange={selection.setSelectedRowIds}
                hideSelectionCheckboxesForExcludedRows={hideSelectionCheckboxesForExcludedRows}
                showSelectionColumn
            >
                <TableHeader>
                    <TableHeaderColumn columnKey='route'>Route</TableHeaderColumn>
                    <TableHeaderColumn columnKey='cargo'>Cargo</TableHeaderColumn>
                    <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
                </TableHeader>

                <TableBody>
                    {rows.map(row => (
                        <TableRow key={row.id} id={row.id} selectable={isRowSelectable(row)}>
                            <TableColumn>{row.route}</TableColumn>
                            <TableColumn>{row.cargo}</TableColumn>
                            <TableColumn>
                                {row.status}
                                {!isRowSelectable(row) && <span className='text-color-gray'> · active only</span>}
                            </TableColumn>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>

            <div className='margin-top-15 display-flex justify-content-between padding-x-5'>
                <div>
                    <div>Active row: {activeRow ? activeRow.route : '-'}</div>
                    <div>Selected rows: {selection.selectedRowIds.length}</div>
                    <div className='text-color-dark margin-top-10'>
                        Rows 102 and 104 stay clickable but are excluded from selection.
                    </div>
                </div>
                <Checkbox
                    checked={hideSelectionCheckboxesForExcludedRows}
                    label='Hide selection checkboxes for excluded rows'
                    onChange={() => setHideSelectionCheckboxesForExcludedRows(previousValue => !previousValue)}
                />
            </div>
        </div>
    );
};

export default TableSelectiveRowsExample;
```

#### 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="btn-toolbar">
                        <button type="button" class="btn btn-default btn-component" tabindex="0">Clear active</button>
                        <button type="button" class="btn btn-default btn-component" tabindex="0">Clear selection</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
                <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="route" 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">Route</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="cargo" 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">Cargo</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Status</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-body" role="rowgroup">
            <div id="101" class="table-row table-row-clickable" data-index="0" data-row-id="101" role="row" tabindex="0">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Berlin to Hamburg</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Parcels</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ready</div>
                </div>
            </div>
            <div id="102" class="table-row table-row-clickable" data-index="1" data-row-id="102" role="row" tabindex="0">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Munich to Cologne</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Electronics</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Delayed<span class="text-color-gray"> · active only</span>
                    </div>
                </div>
            </div>
            <div id="103" class="table-row table-row-clickable" data-index="2" data-row-id="103" role="row" tabindex="0">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Bremen to Stuttgart</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Fresh goods</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ready</div>
                </div>
            </div>
            <div id="104" class="table-row table-row-clickable" data-index="3" data-row-id="104" role="row" tabindex="0">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Nürnberg to Frankfurt</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Spare parts</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">In transit<span class="text-color-gray"> · active only</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="margin-top-15 display-flex justify-content-between padding-x-5">
        <div>
            <div>Active row: -</div>
            <div>Selected rows: 0</div>
            <div class="text-color-dark margin-top-10">Rows 102 and 104 stay clickable but are excluded from selection.</div>
        </div>
        <label class="checkbox" tabindex="0">
            <input type="checkbox" class="" checked="">
            <span class="checkbox-text">
                <span>Hide selection checkboxes for excluded rows</span>
            </span>
        </label>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Disabled rows

Use the disabled prop on TableRow to suppress hover, clicks and other pointer interaction for specific data rows.

### Example: Example 10

Checkpoint

Shipment

Status

Note

Berlin hub

TRK-2041

Ready

Clickable row

Nuremberg ramp

TRK-1888

Blocked

Disabled row without hover or click

Munich dispatch

TRK-2204

On time

Clickable row

Selected rows: 1

#### React (tsx)

```tsx
import { useState } from 'react';

import Notification from '@rio-cloud/rio-uikit/Notification';
import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';

type DemoDisabledRow = {
    id: string;
    checkpoint: string;
    shipment: string;
    status: string;
    note: string;
};

const rows: DemoDisabledRow[] = [
    {
        id: 'row-1',
        checkpoint: 'Berlin hub',
        shipment: 'TRK-2041',
        status: 'Ready',
        note: 'Clickable row',
    },
    {
        id: 'row-2',
        checkpoint: 'Nuremberg ramp',
        shipment: 'TRK-1888',
        status: 'Blocked',
        note: 'Disabled row without hover or click',
    },
    {
        id: 'row-3',
        checkpoint: 'Munich dispatch',
        shipment: 'TRK-2204',
        status: 'On time',
        note: 'Clickable row',
    },
];

const disabledRowIds = new Set(['row-2']);

const TableDisabledRowsExample = () => {
    const [selectedRowIds, setSelectedRowIds] = useState<string[]>(['row-1']);

    return (
        <div>
            <Table
                rowKey='id'
                hover
                selectedRowIds={selectedRowIds}
                onSelectionChange={rowIds =>
                    setSelectedRowIds(rowIds.filter((rowId): rowId is string => !disabledRowIds.has(String(rowId))))
                }
                showSelectionColumn
                onRowClick={row => {
                    Notification.info(`Clicked ${row.checkpoint}`);
                }}
            >
                <TableHeader>
                    <TableHeaderColumn columnKey='checkpoint'>Checkpoint</TableHeaderColumn>
                    <TableHeaderColumn columnKey='shipment'>Shipment</TableHeaderColumn>
                    <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
                    <TableHeaderColumn columnKey='note'>Note</TableHeaderColumn>
                </TableHeader>

                <TableBody>
                    {rows.map(row => (
                        <TableRow key={row.id} id={row.id} disabled={disabledRowIds.has(row.id)}>
                            <TableColumn>{row.checkpoint}</TableColumn>
                            <TableColumn>{row.shipment}</TableColumn>
                            <TableColumn>{row.status}</TableColumn>
                            <TableColumn>{row.note}</TableColumn>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>

            <div className='margin-top-15'>Selected rows: {selectedRowIds.length}</div>
        </div>
    );
};

export default TableDisabledRowsExample;
```

#### HTML (html)

```html
<div>
    <div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 5; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="5">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
                <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="indeterminate">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="checkpoint" 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">Checkpoint</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="shipment" 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">Shipment</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Status</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="note" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Note</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-body" role="rowgroup">
            <div id="row-1" class="table-row table-row-selected table-row-clickable" data-index="0" data-row-id="row-1" role="row" tabindex="0">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="" checked="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Berlin hub</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">TRK-2041</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ready</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="note" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Clickable row</div>
                </div>
            </div>
            <div id="row-2" class="table-row table-row-disabled table-row-no-hover" data-index="1" data-row-id="row-2" role="row">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox disabled" tabindex="0">
                            <input type="checkbox" disabled="" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Nuremberg ramp</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">TRK-1888</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Blocked</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="note" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Disabled row without hover or click</div>
                </div>
            </div>
            <div id="row-3" class="table-row table-row-clickable" data-index="2" data-row-id="row-3" role="row" tabindex="0">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Munich dispatch</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">TRK-2204</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">On time</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="note" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Clickable row</div>
                </div>
            </div>
        </div>
    </div>
    <div class="margin-top-15">Selected rows: 1</div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Toolbar layout guideline

A table toolbar should communicate priority through placement. Keep the most important actions and the most context-setting information visually stable, and move secondary controls toward the right. This makes the toolbar easier to scan and keeps the main workflow recognizable even when the layout wraps on smaller screens.

> Important: actions belong on the left because they remain at the top when toolbar items wrap onto a second line. This way, the primary workflow entry point stays visible first instead of being pushed below filters, search, or settings.

Guidelines

Left side

- Use the left side for primary actions such as "Create". The most important action should use a primary button, but avoid placing two primary buttons next to each other.
- Secondary information such as item counts or selected item counts can also live on the left, next to the action buttons.
- Left-side date filters are allowed when they are part of the main working context.

Right side

- On the right side, place filters first, then search, then additional actions such as "Export data" or "Download".
- Separate those additional actions from filters and search, and keep table settings such as view toggles and column controls at the far right.

### Example: Example 11

Create request Import

Status 4/4 Open
Paused
Escalated
Resolved

Export data
Table view
Cards view
List view

Columns

Request

Owner

Status

Created at

Onboarding checklist

Ava

Open

2026-03-22

Security review

Noah

Escalated

2026-03-21

Approval routing

Mila

Paused

2026-03-20

Access request

Luca

Open

2026-03-19

Contract update

Emma

Resolved

2026-03-18

Supplier follow-up

Ben

Paused

2026-03-17

Invoice clarification

Sofia

Escalated

2026-03-16

Document review

Jonas

Resolved

2026-03-15

#### React (tsx)

```tsx
import { useMemo, useRef, useState } from 'react';

import Button from '@rio-cloud/rio-uikit/Button';
import ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';
import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
import Multiselect from '@rio-cloud/rio-uikit/Multiselect';
import MenuItem from '@rio-cloud/rio-uikit/MenuItem';
import NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';
import Notification from '@rio-cloud/rio-uikit/Notification';
import Table, {
    TableBatchDropdown,
    TableBody,
    TableColumn,
    TableColumnsDropdown,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    type TableRowId,
} from '@rio-cloud/rio-uikit/Table';
import TableSearch from '@rio-cloud/rio-uikit/TableSearch';
import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
import TableViewToggles, { type TableViewTogglesViewType } from '@rio-cloud/rio-uikit/TableViewToggles';
import useSearchHighlight from '@rio-cloud/rio-uikit/useSearchHighlight';
import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';

type DemoToolbarLayoutRow = {
    createdAt: string;
    id: string;
    owner: string;
    request: string;
    statusId: 'open' | 'paused' | 'escalated' | 'resolved';
    statusLabel: 'Open' | 'Paused' | 'Escalated' | 'Resolved';
    urgent: boolean;
};

type DemoToolbarLayoutColumn = {
    key: 'request' | 'owner' | 'statusLabel' | 'createdAt';
    label: string;
    visible: boolean;
};

const statusOptions = [
    { id: 'open', label: 'Open' },
    { id: 'paused', label: 'Paused' },
    { id: 'escalated', label: 'Escalated' },
    { id: 'resolved', label: 'Resolved' },
];

const initialColumns: DemoToolbarLayoutColumn[] = [
    { key: 'request', label: 'Request', visible: true },
    { key: 'owner', label: 'Owner', visible: true },
    { key: 'statusLabel', label: 'Status', visible: true },
    { key: 'createdAt', label: 'Created at', visible: true },
];

const rows: DemoToolbarLayoutRow[] = [
    {
        id: 'request-1',
        request: 'Onboarding checklist',
        owner: 'Ava',
        statusId: 'open',
        statusLabel: 'Open',
        createdAt: '2026-03-22',
        urgent: false,
    },
    {
        id: 'request-2',
        request: 'Security review',
        owner: 'Noah',
        statusId: 'escalated',
        statusLabel: 'Escalated',
        createdAt: '2026-03-21',
        urgent: true,
    },
    {
        id: 'request-3',
        request: 'Approval routing',
        owner: 'Mila',
        statusId: 'paused',
        statusLabel: 'Paused',
        createdAt: '2026-03-20',
        urgent: false,
    },
    {
        id: 'request-4',
        request: 'Access request',
        owner: 'Luca',
        statusId: 'open',
        statusLabel: 'Open',
        createdAt: '2026-03-19',
        urgent: true,
    },
    {
        id: 'request-5',
        request: 'Contract update',
        owner: 'Emma',
        statusId: 'resolved',
        statusLabel: 'Resolved',
        createdAt: '2026-03-18',
        urgent: false,
    },
    {
        id: 'request-6',
        request: 'Supplier follow-up',
        owner: 'Ben',
        statusId: 'paused',
        statusLabel: 'Paused',
        createdAt: '2026-03-17',
        urgent: false,
    },
    {
        id: 'request-7',
        request: 'Invoice clarification',
        owner: 'Sofia',
        statusId: 'escalated',
        statusLabel: 'Escalated',
        createdAt: '2026-03-16',
        urgent: true,
    },
    {
        id: 'request-8',
        request: 'Document review',
        owner: 'Jonas',
        statusId: 'resolved',
        statusLabel: 'Resolved',
        createdAt: '2026-03-15',
        urgent: false,
    },
];

const ExtraFilterDropdownContent = ({
    onlyMine,
    onlyUrgent,
    onToggleOnlyMine,
    onToggleOnlyUrgent,
}: {
    onlyMine: boolean;
    onlyUrgent: boolean;
    onToggleOnlyMine: () => void;
    onToggleOnlyUrgent: () => void;
}) => (
    <>
        <MenuItem header value='Additional filters' />
        <li className='padding-x-15 padding-top-5 padding-bottom-15 space-y-10'>
            <Checkbox checked={onlyMine} label='Only my requests' onChange={onToggleOnlyMine} />
            <Checkbox checked={onlyUrgent} label='Only urgent requests' onChange={onToggleOnlyUrgent} />
        </li>
    </>
);

const TableToolbarLayoutGuidelineExample = () => {
    const [columns, setColumns] = useState<DemoToolbarLayoutColumn[]>(initialColumns);
    const [searchValue, setSearchValue] = useState('');
    const [selectedRowIds, setSelectedRowIds] = useState<TableRowId[]>(['request-2', 'request-4']);
    const [selectedStatusIds, setSelectedStatusIds] = useState<string[]>(statusOptions.map(option => option.id));
    const [onlyMine, setOnlyMine] = useState(false);
    const [onlyUrgent, setOnlyUrgent] = useState(false);
    const [viewType, setViewType] = useState<TableViewTogglesViewType>('TABLE');
    const tableRef = useRef<HTMLDivElement>(null);
    const hasActiveExtraFilters = onlyMine || onlyUrgent;

    const filteredRows = useMemo(() => {
        const normalizedSearchValue = searchValue.trim().toLowerCase();

        return rows.filter(row => {
            const matchesStatus = selectedStatusIds.length === 0 || selectedStatusIds.includes(row.statusId);
            const matchesMine = !onlyMine || row.owner === 'Ava';
            const matchesUrgent = !onlyUrgent || row.urgent;
            const matchesSearch =
                normalizedSearchValue.length === 0 ||
                row.request.toLowerCase().includes(normalizedSearchValue) ||
                row.owner.toLowerCase().includes(normalizedSearchValue) ||
                row.statusLabel.toLowerCase().includes(normalizedSearchValue) ||
                row.createdAt.toLowerCase().includes(normalizedSearchValue);

            return matchesStatus && matchesMine && matchesUrgent && matchesSearch;
        });
    }, [onlyMine, onlyUrgent, searchValue, selectedStatusIds]);

    const visibleColumns = columns.filter(column => column.visible !== false);

    const handleColumnOrderChange = (columnOrder: string[]) => {
        setColumns(previousColumns => {
            const columnsByKey = new Map(previousColumns.map(column => [column.key, column]));

            return columnOrder.flatMap(columnKey => {
                const column = columnsByKey.get(columnKey as DemoToolbarLayoutColumn['key']);
                return column ? [column] : [];
            });
        });
    };

    const handleColumnVisibilityChange = (columnKey: string, visible: boolean) => {
        setColumns(previousColumns =>
            previousColumns.map(column => (column.key === columnKey ? { ...column, visible } : column))
        );
    };

    useSearchHighlight({
        ref: tableRef,
        query: searchValue,
        deps: [filteredRows.length, selectedStatusIds.join('|'), onlyMine, onlyUrgent, viewType],
    });

    return (
        <div>
            <TableToolbar responsiveCollapseBreakpoint={620}>
                <TableToolbarColumn>
                    <ButtonToolbar>
                        <Button bsStyle='primary' iconName='rioglyph-plus'>
                            Create request
                        </Button>
                        <Button iconName='rioglyph-upload'>Import</Button>
                    </ButtonToolbar>
                </TableToolbarColumn>

                <TableToolbarColumn horizontalAlign='right' className='min-width-100'>
                    <Multiselect
                        options={statusOptions}
                        value={selectedStatusIds}
                        onChange={setSelectedStatusIds}
                        placeholder='Filter by status'
                        renderCounterMessage={selectedAmount => (
                            <span className='display-flex align-items-center gap-5'>
                                <span>Status</span>
                                <span className='badge badge-muted'>
                                    {selectedAmount}/{statusOptions.length}
                                </span>
                            </span>
                        )}
                    />
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right' separator>
                    <ButtonDropdown
                        title=''
                        iconName={hasActiveExtraFilters ? 'rioglyph-filter-active' : 'rioglyph-filter'}
                        pullRight
                        iconOnly
                        dropdownClassName='width-200 padding-0'
                        noCaret
                        customDropdown={
                            <ExtraFilterDropdownContent
                                onlyMine={onlyMine}
                                onlyUrgent={onlyUrgent}
                                onToggleOnlyMine={() => setOnlyMine(currentValue => !currentValue)}
                                onToggleOnlyUrgent={() => setOnlyUrgent(currentValue => !currentValue)}
                            />
                        }
                    />
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right' className='min-width-200' separator>
                    <TableSearch placeholder='Search requests' value={searchValue} onChange={setSearchValue} />
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right' separator>
                    <Button iconName='rioglyph-download'>Export data</Button>
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right'>
                    <div className='display-flex gap-10'>
                        <TableViewToggles
                            viewType={viewType}
                            onViewTypeChange={setViewType}
                            tableViewLabel='Table view'
                            singleCardViewLabel='List view'
                            multiCardsViewLabel='Cards view'
                        />
                        <TableColumnsDropdown
                            columns={columns}
                            label='Columns'
                            onColumnOrderChange={handleColumnOrderChange}
                            onColumnVisibilityChange={handleColumnVisibilityChange}
                        />
                    </div>
                </TableToolbarColumn>
            </TableToolbar>

            <Table
                ref={tableRef}
                rowKey='id'
                viewType={viewType}
                selectedRowIds={selectedRowIds}
                onSelectionChange={setSelectedRowIds}
                showSelectionColumn
                selectionHeaderContent={
                    <TableBatchDropdown
                        items={[
                            {
                                value: (
                                    <div>
                                        <span className='rioglyph rioglyph-cloud-download margin-right-10 text-size-18' />
                                        <span>Export selected items</span>
                                    </div>
                                ),
                                onSelect: () => Notification.info('Export started'),
                            },
                            {
                                divider: true,
                            },
                            {
                                value: <span>Select all visible items</span>,
                                onSelect: () => setSelectedRowIds(filteredRows.map(row => row.id)),
                            },
                            {
                                value: <span>Deselect all items</span>,
                                onSelect: () => setSelectedRowIds([]),
                            },
                        ]}
                    />
                }
                noRowsState={
                    <NotFoundState
                        headline="We couldn't find any matching requests"
                        message='Try adjusting the toolbar filters or search query to see more results.'
                        outerClassName='border-none'
                    />
                }
            >
                <TableHeader>
                    {visibleColumns.some(column => column.key === 'request') && (
                        <TableHeaderColumn columnKey='request'>Request</TableHeaderColumn>
                    )}
                    {visibleColumns.some(column => column.key === 'owner') && (
                        <TableHeaderColumn columnKey='owner'>Owner</TableHeaderColumn>
                    )}
                    {visibleColumns.some(column => column.key === 'statusLabel') && (
                        <TableHeaderColumn columnKey='statusLabel'>Status</TableHeaderColumn>
                    )}
                    {visibleColumns.some(column => column.key === 'createdAt') && (
                        <TableHeaderColumn columnKey='createdAt'>Created at</TableHeaderColumn>
                    )}
                </TableHeader>

                <TableBody>
                    {filteredRows.map(row => (
                        <TableRow key={row.id} id={row.id}>
                            {visibleColumns.some(column => column.key === 'request') && (
                                <TableColumn>{row.request}</TableColumn>
                            )}
                            {visibleColumns.some(column => column.key === 'owner') && (
                                <TableColumn>{row.owner}</TableColumn>
                            )}
                            {visibleColumns.some(column => column.key === 'statusLabel') && (
                                <TableColumn>{row.statusLabel}</TableColumn>
                            )}
                            {visibleColumns.some(column => column.key === 'createdAt') && (
                                <TableColumn>{row.createdAt}</TableColumn>
                            )}
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    );
};

export default TableToolbarLayoutGuidelineExample;
```

#### HTML (html)

```html
<div>
    <div class="table-toolbar table-toolbar-has-wrap">
        <div class="table-toolbar-container">
            <div class="table-toolbar-group-left">
                <div class="table-toolbar-column align-self-end">
                    <div class="btn-toolbar">
                        <button type="button" class="btn btn-primary btn-component" tabindex="0">
                            <span class="rioglyph rioglyph-plus">
                            </span>Create request</button>
                        <button type="button" class="btn btn-default btn-component" tabindex="0">
                            <span class="rioglyph rioglyph-upload">
                            </span>Import</button>
                    </div>
                </div>
            </div>
            <div class="table-toolbar-group-right">
                <div class="table-toolbar-column align-self-end min-width-100">
                    <div class="select multiselect dropdown dropup">
                        <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                            <span class="display-flex align-items-center gap-5">
                                <span>Status</span>
                                <span class="badge badge-muted">4/4</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" role="menu">
                            <li class="active" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="open" data-item-index="0">
                                    <span class="selected-option-dropdown-item">Open</span>
                                    <input type="hidden" value="open">
                                </a>
                            </li>
                            <li class="active" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="paused" data-item-index="1">
                                    <span class="selected-option-dropdown-item">Paused</span>
                                    <input type="hidden" value="paused">
                                </a>
                            </li>
                            <li class="active" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="escalated" data-item-index="2">
                                    <span class="selected-option-dropdown-item">Escalated</span>
                                    <input type="hidden" value="escalated">
                                </a>
                            </li>
                            <li class="active" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="resolved" data-item-index="3">
                                    <span class="selected-option-dropdown-item">Resolved</span>
                                    <input type="hidden" value="resolved">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="table-toolbar-column align-self-end table-toolbar-column-separator">
                    <div class="dropdown btn-group">
                        <button type="button" id="wse5fxwcik8" class="btn btn-default btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                            <span class="rioglyph rioglyph-filter">
                            </span>
                        </button>
                    </div>
                </div>
                <div class="table-toolbar-column align-self-end table-toolbar-column-separator min-width-200">
                    <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 requests" 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">
                    <button type="button" class="btn btn-default btn-component" tabindex="0">
                        <span class="rioglyph rioglyph-download">
                        </span>Export data</button>
                </div>
                <div class="table-toolbar-column align-self-end">
                    <div class="display-flex gap-10">
                        <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 class="dropdown btn-group">
                            <button type="button" id="29nbi5d6lrx" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">
                                <span class="display-inline-flex align-items-center gap-5">
                                    <span class="rioglyph rioglyph-table-view">
                                    </span>
                                    <span>Columns</span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table table-view-table border table-rounded table-has-head" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 5; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="5">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid table-head-grid-custom-selection" role="row" style="grid-template-rows: repeat(1, auto);">
                <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle table-selection-cell-custom-content" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <div class="dropdown btn-group">
                            <button type="button" id="assr4zbwnn7" class="btn btn-default btn-outline btn-sm btn-icon-only btn-component dropdown-toggle table-batch-dropdown-button no-hover-scale" tabindex="0">
                                <span class="rioglyph rioglyph-checkboxes">
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="request" 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">Request</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="owner" 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">Owner</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="statusLabel" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Status</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="createdAt" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Created at</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-body" role="rowgroup">
            <div id="request-1" class="table-row" data-index="0" data-row-id="request-1" role="row">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Onboarding checklist</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ava</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="statusLabel" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Open</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="createdAt" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">2026-03-22</div>
                </div>
            </div>
            <div id="request-2" class="table-row table-row-selected" data-index="1" data-row-id="request-2" role="row">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="" checked="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Security review</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Noah</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="statusLabel" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Escalated</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="createdAt" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">2026-03-21</div>
                </div>
            </div>
            <div id="request-3" class="table-row" data-index="2" data-row-id="request-3" role="row">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Approval routing</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Mila</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="statusLabel" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Paused</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="createdAt" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">2026-03-20</div>
                </div>
            </div>
            <div id="request-4" class="table-row table-row-selected" data-index="3" data-row-id="request-4" role="row">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="" checked="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Access request</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Luca</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="statusLabel" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Open</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="createdAt" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">2026-03-19</div>
                </div>
            </div>
            <div id="request-5" class="table-row" data-index="4" data-row-id="request-5" role="row">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Contract update</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Emma</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="statusLabel" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Resolved</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="createdAt" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">2026-03-18</div>
                </div>
            </div>
            <div id="request-6" class="table-row" data-index="5" data-row-id="request-6" role="row">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Supplier follow-up</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ben</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="statusLabel" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Paused</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="createdAt" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">2026-03-17</div>
                </div>
            </div>
            <div id="request-7" class="table-row" data-index="6" data-row-id="request-7" role="row">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Invoice clarification</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Sofia</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="statusLabel" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Escalated</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="createdAt" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">2026-03-16</div>
                </div>
            </div>
            <div id="request-8" class="table-row" data-index="7" data-row-id="request-8" role="row">
                <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-selection-control">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Document review</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Jonas</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="statusLabel" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Resolved</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="createdAt" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">2026-03-15</div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Toolbar multiselect filter

Use a Multiselect inside TableToolbar for compact multi-value filtering. Avoid rendering an additional tag list underneath the toolbar, since it overloads the design without making the interaction meaningfully simpler.

### Example: Example 12

Status filter Status selected 2/4 Ready
Delayed
In transit
Blocked

Search

Table view
Cards view
List view

Route

Owner

Status

Berlin to Hamburg

Maya Stein

Ready

Munich to Cologne

Jonas Keller

Delayed

Dresden to Essen

Noah Vogel

Ready

#### React (tsx)

```tsx
import { useMemo, useRef, useState } from 'react';

import Multiselect from '@rio-cloud/rio-uikit/Multiselect';
import NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';
import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
import TableSearch from '@rio-cloud/rio-uikit/TableSearch';
import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
import TableViewToggles, { type TableViewTogglesViewType } from '@rio-cloud/rio-uikit/TableViewToggles';
import useSearchHighlight from '@rio-cloud/rio-uikit/useSearchHighlight';

type DemoToolbarFilterRow = {
    id: string;
    owner: string;
    route: string;
    statusId: string;
    statusLabel: string;
};

const statusOptions = [
    { id: 'ready', label: 'Ready' },
    { id: 'delayed', label: 'Delayed' },
    { id: 'in-transit', label: 'In transit' },
    { id: 'blocked', label: 'Blocked' },
];

const rows: DemoToolbarFilterRow[] = [
    { id: 'row-1', route: 'Berlin to Hamburg', owner: 'Maya Stein', statusId: 'ready', statusLabel: 'Ready' },
    { id: 'row-2', route: 'Munich to Cologne', owner: 'Jonas Keller', statusId: 'delayed', statusLabel: 'Delayed' },
    {
        id: 'row-3',
        route: 'Bremen to Stuttgart',
        owner: 'Sofia Weber',
        statusId: 'in-transit',
        statusLabel: 'In transit',
    },
    { id: 'row-4', route: 'Nürnberg to Frankfurt', owner: 'Luca Braun', statusId: 'blocked', statusLabel: 'Blocked' },
    { id: 'row-5', route: 'Dresden to Essen', owner: 'Noah Vogel', statusId: 'ready', statusLabel: 'Ready' },
];

const TableToolbarMultiselectFilterExample = () => {
    const [selectedStatusIds, setSelectedStatusIds] = useState<string[]>(['ready', 'delayed']);
    const [searchValue, setSearchValue] = useState('');
    const [viewType, setViewType] = useState<TableViewTogglesViewType>('TABLE');
    const tableRef = useRef<HTMLDivElement>(null);

    const filteredRows = useMemo(() => {
        const normalizedSearchValue = searchValue.trim().toLowerCase();

        return rows.filter(row => {
            const matchesStatus = selectedStatusIds.length === 0 || selectedStatusIds.includes(row.statusId);
            const matchesSearch =
                normalizedSearchValue.length === 0 ||
                row.route.toLowerCase().includes(normalizedSearchValue) ||
                row.owner.toLowerCase().includes(normalizedSearchValue) ||
                row.statusLabel.toLowerCase().includes(normalizedSearchValue);

            return matchesStatus && matchesSearch;
        });
    }, [searchValue, selectedStatusIds]);

    useSearchHighlight({
        ref: tableRef,
        query: searchValue,
        deps: [filteredRows.length, viewType],
    });

    return (
        <div>
            <TableToolbar>
                <TableToolbarColumn horizontalAlign='right' label='Status filter' className='min-width-150'>
                    <Multiselect
                        id='table-toolbar-status-filter'
                        options={statusOptions}
                        value={selectedStatusIds}
                        onChange={setSelectedStatusIds}
                        placeholder='Filter by status'
                        renderCounterMessage={selectedAmount => (
                            <span className='display-flex align-items-center gap-5'>
                                <span>Status selected</span>
                                <span className='badge badge-muted'>
                                    {selectedAmount}/{statusOptions.length}
                                </span>
                            </span>
                        )}
                        useFilter
                    />
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right' label='Search' className='min-width-250' separator>
                    <TableSearch
                        placeholder='Search routes'
                        value={searchValue}
                        onChange={newValue => setSearchValue(newValue)}
                    />
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right'>
                    <TableViewToggles
                        viewType={viewType}
                        onViewTypeChange={setViewType}
                        tableViewLabel='Table view'
                        singleCardViewLabel='List view'
                        multiCardsViewLabel='Cards view'
                    />
                </TableToolbarColumn>
            </TableToolbar>

            <Table
                ref={tableRef}
                rowKey='id'
                viewType={viewType}
                noRowsState={
                    <NotFoundState
                        headline="We couldn't find any matching routes"
                        message='Try adjusting your selected statuses or search query to see more results.'
                        outerClassName='border-none'
                    />
                }
            >
                <TableHeader>
                    <TableHeaderColumn columnKey='route'>Route</TableHeaderColumn>
                    <TableHeaderColumn columnKey='owner'>Owner</TableHeaderColumn>
                    <TableHeaderColumn columnKey='statusLabel'>Status</TableHeaderColumn>
                </TableHeader>

                <TableBody>
                    {filteredRows.map(row => (
                        <TableRow key={row.id} id={row.id}>
                            <TableColumn>{row.route}</TableColumn>
                            <TableColumn>{row.owner}</TableColumn>
                            <TableColumn>{row.statusLabel}</TableColumn>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    );
};

export default TableToolbarMultiselectFilterExample;
```

#### 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 min-width-150">
                    <label class="table-toolbar-label">Status filter</label>
                    <div class="select multiselect dropdown dropup">
                        <button type="button" id="table-toolbar-status-filter" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                            <span class="display-flex align-items-center gap-5">
                                <span>Status selected</span>
                                <span class="badge badge-muted">2/4</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" role="menu">
                            <li class="active" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="ready" data-item-index="0">
                                    <span class="selected-option-dropdown-item">Ready</span>
                                    <input type="hidden" value="ready">
                                </a>
                            </li>
                            <li class="active" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="delayed" data-item-index="1">
                                    <span class="selected-option-dropdown-item">Delayed</span>
                                    <input type="hidden" value="delayed">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="in-transit" data-item-index="2">
                                    <span class="selected-option-dropdown-item">In transit</span>
                                    <input type="hidden" value="in-transit">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="blocked" data-item-index="3">
                                    <span class="selected-option-dropdown-item">Blocked</span>
                                    <input type="hidden" value="blocked">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="table-toolbar-column align-self-end table-toolbar-column-separator min-width-250">
                    <label class="table-toolbar-label">Search</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 routes" 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">
                    <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 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="route" 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">Route</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="owner" 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">Owner</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="statusLabel" 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="row-1" class="table-row" data-index="0" data-row-id="row-1" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Berlin to Hamburg</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Maya Stein</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="statusLabel" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ready</div>
                </div>
            </div>
            <div id="row-2" class="table-row" data-index="1" data-row-id="row-2" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Munich to Cologne</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Jonas Keller</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="statusLabel" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Delayed</div>
                </div>
            </div>
            <div id="row-5" class="table-row" data-index="2" data-row-id="row-5" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Dresden to Essen</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Noah Vogel</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="statusLabel" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ready</div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Toolbar view switcher

Use filled condensed nav-pills on the left side of the TableToolbar to switch between mutually exclusive table contexts such as inbox, active work, finished items, and archived entries.

### Example: Example 13

Inbox 4

Archive 3

Status: All All
Needs action
Confirmed
Scheduled
Archived

Reference

Status

From

To

Updated

REQ-20394

Needs action

95423 Bernhard Expressway, Lubbock

14087 Scot Ferry, Moniquecester

Today, 09:20

REQ-20388

Confirmed

8222 Bonnie Station, Kemmer-Danielshire

8040 S 1st Avenue, Gislasontown

Today, 08:05

INB-10214

Confirmed

6175 Memorial Drive, New Carroll

32490 Greenway, Grantborough

Today, 07:42

INB-10197

Needs action

9119 N 6th Street, Dickitown

159 Lime Grove, Larkinfort

Yesterday, 17:30

#### React (tsx)

```tsx
import { useMemo, useRef, useState, type KeyboardEvent } from 'react';
import { faker } from '@faker-js/faker';

import NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';
import Select from '@rio-cloud/rio-uikit/Select';
import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
import TableSearch from '@rio-cloud/rio-uikit/TableSearch';
import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
import useSearchHighlight from '@rio-cloud/rio-uikit/useSearchHighlight';

type DemoToolbarView = 'inbox' | 'archive';

type DemoToolbarViewRow = {
    id: string;
    reference: string;
    view: DemoToolbarView;
    status: 'Needs action' | 'Confirmed' | 'Scheduled' | 'Archived';
    origin: string;
    destination: string;
    updatedAt: string;
};

const viewLabels: Record<DemoToolbarView, string> = {
    inbox: 'Inbox',
    archive: 'Archive',
};

const viewIcons: Record<DemoToolbarView, string> = {
    inbox: 'rioglyph-order',
    archive: 'rioglyph-archive',
};

const statusOptions = [
    { id: 'all', label: 'All' },
    { id: 'Needs action', label: 'Needs action' },
    { id: 'Confirmed', label: 'Confirmed' },
    { id: 'Scheduled', label: 'Scheduled' },
    { id: 'Archived', label: 'Archived' },
];

faker.seed(20260324);

const createAddress = () => `${faker.location.streetAddress()}, ${faker.location.city()}`;

const rows: DemoToolbarViewRow[] = [
    {
        id: 'record-1',
        reference: 'REQ-20394',
        view: 'inbox',
        status: 'Needs action',
        origin: createAddress(),
        destination: createAddress(),
        updatedAt: 'Today, 09:20',
    },
    {
        id: 'record-2',
        reference: 'REQ-20388',
        view: 'inbox',
        status: 'Confirmed',
        origin: createAddress(),
        destination: createAddress(),
        updatedAt: 'Today, 08:05',
    },
    {
        id: 'record-3',
        reference: 'INB-10214',
        view: 'inbox',
        status: 'Confirmed',
        origin: createAddress(),
        destination: createAddress(),
        updatedAt: 'Today, 07:42',
    },
    {
        id: 'record-4',
        reference: 'INB-10197',
        view: 'inbox',
        status: 'Needs action',
        origin: createAddress(),
        destination: createAddress(),
        updatedAt: 'Yesterday, 17:30',
    },
    {
        id: 'record-6',
        reference: 'ARC-4402',
        view: 'archive',
        status: 'Archived',
        origin: createAddress(),
        destination: createAddress(),
        updatedAt: 'Mar 11, 2026',
    },
    {
        id: 'record-7',
        reference: 'ARC-4398',
        view: 'archive',
        status: 'Archived',
        origin: createAddress(),
        destination: createAddress(),
        updatedAt: 'Mar 08, 2026',
    },
    {
        id: 'record-8',
        reference: 'ARC-4384',
        view: 'archive',
        status: 'Archived',
        origin: createAddress(),
        destination: createAddress(),
        updatedAt: 'Mar 02, 2026',
    },
];

const tableViews: DemoToolbarView[] = ['inbox', 'archive'];

const TableToolbarViewsExample = () => {
    const [activeView, setActiveView] = useState<DemoToolbarView>('inbox');
    const [selectedStatus, setSelectedStatus] = useState('all');
    const [searchValue, setSearchValue] = useState('');
    const tableRef = useRef<HTMLDivElement>(null);

    const filteredRows = useMemo(
        () =>
            rows.filter(row => {
                const matchesView = row.view === activeView;
                const matchesStatus = selectedStatus === 'all' || row.status === selectedStatus;
                const normalizedSearchValue = searchValue.trim().toLowerCase();
                const matchesSearch =
                    normalizedSearchValue.length === 0 ||
                    row.reference.toLowerCase().includes(normalizedSearchValue) ||
                    row.status.toLowerCase().includes(normalizedSearchValue) ||
                    row.origin.toLowerCase().includes(normalizedSearchValue) ||
                    row.destination.toLowerCase().includes(normalizedSearchValue);

                return matchesView && matchesStatus && matchesSearch;
            }),
        [activeView, searchValue, selectedStatus]
    );

    const itemCounts = useMemo(() => {
        const counts: Record<DemoToolbarView, number> = { inbox: 0, archive: 0 };

        for (const row of rows) {
            counts[row.view] += 1;
        }

        return counts;
    }, []);

    const handleTabKeyDown = (event: KeyboardEvent<HTMLDivElement>, nextView: DemoToolbarView) => {
        if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            setActiveView(nextView);
        }
    };

    useSearchHighlight({
        ref: tableRef,
        query: searchValue,
        deps: [activeView, filteredRows.length, selectedStatus],
    });

    return (
        <div>
            <TableToolbar>
                <TableToolbarColumn>
                    <ul className='nav nav-pills nav-pills-filled nav-pills-filled-condensed shadow-subtle'>
                        {tableViews.map(view => (
                            <li key={view} className={activeView === view ? 'active' : ''}>
                                <div
                                    role='button'
                                    tabIndex={0}
                                    onClick={() => setActiveView(view)}
                                    onKeyDown={event => handleTabKeyDown(event, view)}
                                    className='display-flex flex-row align-items-center gap-5'
                                >
                                    <span className={`rioglyph ${viewIcons[view]}`} aria-hidden='true' />
                                    <span>{viewLabels[view]}</span>
                                    <span className={`badge ${view === 'inbox' ? 'badge-primary' : 'badge-muted'}`}>
                                        {itemCounts[view]}
                                    </span>
                                </div>
                            </li>
                        ))}
                    </ul>
                </TableToolbarColumn>

                <TableToolbarColumn horizontalAlign='right' className='min-width-150' separator>
                    <Select
                        id='table-toolbar-view-status-filter'
                        label='Status'
                        options={statusOptions}
                        value={[selectedStatus]}
                        onChange={item => setSelectedStatus(item?.id ?? 'all')}
                    />
                </TableToolbarColumn>

                <TableToolbarColumn horizontalAlign='right' className='min-width-250'>
                    <TableSearch placeholder='Search records' value={searchValue} onChange={setSearchValue} />
                </TableToolbarColumn>
            </TableToolbar>

            <Table
                ref={tableRef}
                rowKey='id'
                noRowsState={
                    <NotFoundState
                        headline={`We couldn't find any matching ${viewLabels[activeView].toLowerCase()} items`}
                        message='Try adjusting the current view, status filter, or search query to see more results.'
                        outerClassName='border-none'
                    />
                }
            >
                <TableHeader>
                    <TableHeaderColumn columnKey='reference'>Reference</TableHeaderColumn>
                    <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
                    <TableHeaderColumn columnKey='origin'>From</TableHeaderColumn>
                    <TableHeaderColumn columnKey='destination'>To</TableHeaderColumn>
                    <TableHeaderColumn columnKey='updatedAt'>Updated</TableHeaderColumn>
                </TableHeader>

                <TableBody>
                    {filteredRows.map(row => (
                        <TableRow key={row.id} id={row.id}>
                            <TableColumn>{row.reference}</TableColumn>
                            <TableColumn>{row.status}</TableColumn>
                            <TableColumn>{row.origin}</TableColumn>
                            <TableColumn>{row.destination}</TableColumn>
                            <TableColumn>{row.updatedAt}</TableColumn>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    );
};

export default TableToolbarViewsExample;
```

#### HTML (html)

```html
<div>
    <div class="table-toolbar">
        <div class="table-toolbar-container">
            <div class="table-toolbar-group-left">
                <div class="table-toolbar-column align-self-end">
                    <ul class="nav nav-pills nav-pills-filled nav-pills-filled-condensed shadow-subtle">
                        <li class="active">
                            <div role="button" tabindex="0" class="display-flex flex-row align-items-center gap-5">
                                <span class="rioglyph rioglyph-order" aria-hidden="true">
                                </span>
                                <span>Inbox</span>
                                <span class="badge badge-primary">4</span>
                            </div>
                        </li>
                        <li class="">
                            <div role="button" tabindex="0" class="display-flex flex-row align-items-center gap-5">
                                <span class="rioglyph rioglyph-archive" aria-hidden="true">
                                </span>
                                <span>Archive</span>
                                <span class="badge badge-muted">3</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="table-toolbar-group-right">
                <div class="table-toolbar-column align-self-end table-toolbar-column-separator min-width-150">
                    <div class="select dropdown dropup">
                        <button type="button" id="table-toolbar-view-status-filter" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                            <span class="selected-option-text">
                                <span class="selected-option-text-label">Status:</span>All</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" role="menu">
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="all" data-item-index="0">
                                    <span class="selected-option-dropdown-item">All</span>
                                    <input type="hidden" value="all">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="Needs action" data-item-index="1">
                                    <span class="selected-option-dropdown-item">Needs action</span>
                                    <input type="hidden" value="Needs action">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="Confirmed" data-item-index="2">
                                    <span class="selected-option-dropdown-item">Confirmed</span>
                                    <input type="hidden" value="Confirmed">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="Scheduled" data-item-index="3">
                                    <span class="selected-option-dropdown-item">Scheduled</span>
                                    <input type="hidden" value="Scheduled">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="Archived" data-item-index="4">
                                    <span class="selected-option-dropdown-item">Archived</span>
                                    <input type="hidden" value="Archived">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="table-toolbar-column align-self-end min-width-250">
                    <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 records" 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 border table-rounded table-has-head" role="table" style="--table-columns: minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4 table-col-5&quot;; --table-column-count: 5; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="5">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid" role="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="reference" 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">Reference</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="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">Status</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="origin" 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">From</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="destination" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">To</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Updated</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-body" role="rowgroup">
            <div id="record-1" class="table-row" data-index="0" data-row-id="record-1" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="reference" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">REQ-20394</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Needs action</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="origin" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">95423 Bernhard Expressway, Lubbock</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">14087 Scot Ferry, Moniquecester</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Today, 09:20</div>
                </div>
            </div>
            <div id="record-2" class="table-row" data-index="1" data-row-id="record-2" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="reference" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">REQ-20388</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Confirmed</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="origin" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">8222 Bonnie Station, Kemmer-Danielshire</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">8040 S 1st Avenue, Gislasontown</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Today, 08:05</div>
                </div>
            </div>
            <div id="record-3" class="table-row" data-index="2" data-row-id="record-3" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="reference" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">INB-10214</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Confirmed</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="origin" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">6175 Memorial Drive, New Carroll</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">32490 Greenway, Grantborough</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Today, 07:42</div>
                </div>
            </div>
            <div id="record-4" class="table-row" data-index="3" data-row-id="record-4" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="reference" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">INB-10197</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Needs action</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="origin" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">9119 N 6th Street, Dickitown</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">159 Lime Grove, Larkinfort</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Yesterday, 17:30</div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Toolbar dropdown filter

For lightweight toolbar filters, prefer a custom ButtonDropdown over a separate dialog. This keeps the filtering interaction close to the table and works well for small checkbox-based filter sets.

### Example: Example 14

Showing 8 of 8 requests

Filter

Request

Source

Status

Priority

Owner

Onboarding checklist

Portal

Open

Medium

Jovany

Document review

No source

Paused

Low

Heidi

Supplier follow-up

Email import

Escalated

Critical

Allene

Contract update

No source

Resolved

Backlog

Sharon

Access request

Form

Open

High

Abel

Approval routing

API

Resolved

Medium

Sally

Invoice clarification

Portal

Paused

Low

Ted

Security review

No source

Escalated

Critical

Dawson

#### React (tsx)

```tsx
import { useMemo, useRef, useState } from 'react';
import { faker } from '@faker-js/faker';

import ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';
import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
import MenuItem from '@rio-cloud/rio-uikit/MenuItem';
import NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';
import Select, { type SelectOption } from '@rio-cloud/rio-uikit/Select';
import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
import TableSearch from '@rio-cloud/rio-uikit/TableSearch';
import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
import useSearchHighlight from '@rio-cloud/rio-uikit/useSearchHighlight';

type DemoToolbarFilterRow = {
    country: 'Germany' | 'United States' | 'Netherlands' | 'Spain';
    id: string;
    hasSource: boolean;
    owner: string;
    priorityId: 'critical' | 'high' | 'medium' | 'low' | 'backlog';
    priorityLabel: 'Critical' | 'High' | 'Medium' | 'Low' | 'Backlog';
    request: string;
    sourceLabel: string;
    status: 'Open' | 'Paused' | 'Escalated' | 'Resolved';
};

type FilterDropdownContentProps = {
    countryOptions: SelectOption[];
    onlyWithoutSource: boolean;
    selectedCountryId?: string;
    selectedStatuses: DemoToolbarFilterRow['status'][];
    onCountryChange: (option: SelectOption | undefined) => void;
    onToggleOnlyWithoutSource: () => void;
    onToggleStatus: (status: DemoToolbarFilterRow['status']) => void;
};

const statusOptions: DemoToolbarFilterRow['status'][] = ['Open', 'Paused', 'Escalated', 'Resolved'];

const priorityOptions = [
    {
        id: 'critical',
        label: 'Critical',
        colorClassName: 'text-color-danger',
        icon: <span className='rioglyph rioglyph-sphere text-color-danger' />,
    },
    {
        id: 'high',
        label: 'High',
        colorClassName: 'text-color-warning',
        icon: <span className='rioglyph rioglyph-sphere text-color-warning' />,
    },
    {
        id: 'medium',
        label: 'Medium',
        colorClassName: 'text-color-info',
        icon: <span className='rioglyph rioglyph-sphere text-color-info' />,
    },
    {
        id: 'low',
        label: 'Low',
        colorClassName: 'text-color-success',
        icon: <span className='rioglyph rioglyph-sphere text-color-success' />,
    },
    {
        id: 'backlog',
        label: 'Backlog',
        colorClassName: 'text-color-gray',
        icon: <span className='rioglyph rioglyph-sphere text-color-gray' />,
    },
] as const;

faker.seed(20260324);

const baseRows: Omit<DemoToolbarFilterRow, 'owner'>[] = [
    {
        id: 'request-1',
        request: 'Onboarding checklist',
        sourceLabel: 'Portal',
        hasSource: true,
        country: 'Germany',
        status: 'Open',
        priorityId: 'medium',
        priorityLabel: 'Medium',
    },
    {
        id: 'request-2',
        request: 'Document review',
        sourceLabel: 'No source',
        hasSource: false,
        country: 'United States',
        status: 'Paused',
        priorityId: 'low',
        priorityLabel: 'Low',
    },
    {
        id: 'request-3',
        request: 'Supplier follow-up',
        sourceLabel: 'Email import',
        hasSource: true,
        country: 'Netherlands',
        status: 'Escalated',
        priorityId: 'critical',
        priorityLabel: 'Critical',
    },
    {
        id: 'request-4',
        request: 'Contract update',
        sourceLabel: 'No source',
        hasSource: false,
        country: 'Spain',
        status: 'Resolved',
        priorityId: 'backlog',
        priorityLabel: 'Backlog',
    },
    {
        id: 'request-5',
        request: 'Access request',
        sourceLabel: 'Form',
        hasSource: true,
        country: 'Germany',
        status: 'Open',
        priorityId: 'high',
        priorityLabel: 'High',
    },
    {
        id: 'request-6',
        request: 'Approval routing',
        sourceLabel: 'API',
        hasSource: true,
        country: 'United States',
        status: 'Resolved',
        priorityId: 'medium',
        priorityLabel: 'Medium',
    },
    {
        id: 'request-7',
        request: 'Invoice clarification',
        sourceLabel: 'Portal',
        hasSource: true,
        country: 'Spain',
        status: 'Paused',
        priorityId: 'low',
        priorityLabel: 'Low',
    },
    {
        id: 'request-8',
        request: 'Security review',
        sourceLabel: 'No source',
        hasSource: false,
        country: 'Netherlands',
        status: 'Escalated',
        priorityId: 'critical',
        priorityLabel: 'Critical',
    },
];

const rows: DemoToolbarFilterRow[] = baseRows.map(row => ({
    ...row,
    owner: faker.person.firstName(),
}));

const FilterDropdownContent = ({
    countryOptions,
    onlyWithoutSource,
    selectedCountryId,
    selectedStatuses,
    onCountryChange,
    onToggleOnlyWithoutSource,
    onToggleStatus,
}: FilterDropdownContentProps) => (
    <>
        <MenuItem header value='Request source' />
        <li className='padding-x-15 padding-top-5'>
            <Checkbox
                checked={onlyWithoutSource}
                label='Only show requests without source'
                onChange={onToggleOnlyWithoutSource}
            />
        </li>
        <MenuItem header value='Request status' />
        <li className='padding-x-15 padding-top-5 space-y-5'>
            {statusOptions.map(status => (
                <Checkbox
                    key={status}
                    checked={selectedStatuses.includes(status)}
                    label={status}
                    onChange={() => onToggleStatus(status)}
                />
            ))}
        </li>
        <li className='padding-x-15 padding-top-15 padding-bottom-20 list-style-none'>
            <div className='form-group margin-bottom-0'>
                <label>Country</label>
                <Select
                    placeholder='Select country'
                    options={countryOptions}
                    useClear
                    value={selectedCountryId ? [selectedCountryId] : undefined}
                    onChange={onCountryChange}
                />
            </div>
        </li>
    </>
);

const TableToolbarDropdownFilterExample = () => {
    const [isFilterOpen, setIsFilterOpen] = useState(false);
    const [onlyWithoutSource, setOnlyWithoutSource] = useState(false);
    const [searchValue, setSearchValue] = useState('');
    const [selectedCountryId, setSelectedCountryId] = useState<string>();
    const [selectedStatuses, setSelectedStatuses] = useState<DemoToolbarFilterRow['status'][]>(statusOptions);
    const tableRef = useRef<HTMLDivElement>(null);

    const countryOptions = useMemo<SelectOption[]>(
        () =>
            [...new Set(rows.map(row => row.country))].map(country => ({
                id: country,
                label: country,
            })),
        []
    );

    const filteredRows = useMemo(() => {
        const normalizedSearchValue = searchValue.trim().toLowerCase();

        return rows.filter(row => {
            const matchesSource = !onlyWithoutSource || !row.hasSource;
            const matchesStatus = selectedStatuses.length === 0 || selectedStatuses.includes(row.status);
            const matchesCountry = !selectedCountryId || row.country === selectedCountryId;
            const matchesSearch =
                normalizedSearchValue.length === 0 ||
                row.request.toLowerCase().includes(normalizedSearchValue) ||
                row.sourceLabel.toLowerCase().includes(normalizedSearchValue) ||
                row.status.toLowerCase().includes(normalizedSearchValue) ||
                row.priorityLabel.toLowerCase().includes(normalizedSearchValue) ||
                row.owner.toLowerCase().includes(normalizedSearchValue);

            return matchesSource && matchesStatus && matchesCountry && matchesSearch;
        });
    }, [onlyWithoutSource, searchValue, selectedCountryId, selectedStatuses]);

    const toggleStatus = (status: DemoToolbarFilterRow['status']) => {
        setSelectedStatuses(currentStatuses =>
            currentStatuses.includes(status)
                ? currentStatuses.filter(currentStatus => currentStatus !== status)
                : [...currentStatuses, status]
        );
    };

    const hasActiveFilter =
        onlyWithoutSource || !!selectedCountryId || selectedStatuses.length !== statusOptions.length;

    useSearchHighlight({
        ref: tableRef,
        query: searchValue,
        deps: [filteredRows.length, onlyWithoutSource, selectedCountryId, selectedStatuses.join('|')],
    });

    return (
        <div>
            <TableToolbar>
                <TableToolbarColumn verticalAlign='center'>
                    <div className='text-color-darker'>
                        Showing {filteredRows.length} of {rows.length} requests
                    </div>
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right' separator>
                    <ButtonDropdown
                        title='Filter'
                        iconName={hasActiveFilter ? 'rioglyph-filter-active' : 'rioglyph-filter'}
                        open={isFilterOpen}
                        noCaret
                        pullRight
                        dropdownClassName='width-250 padding-0'
                        onOpen={() => setIsFilterOpen(true)}
                        onClose={() => setIsFilterOpen(false)}
                        customDropdown={
                            <FilterDropdownContent
                                countryOptions={countryOptions}
                                onlyWithoutSource={onlyWithoutSource}
                                selectedCountryId={selectedCountryId}
                                selectedStatuses={selectedStatuses}
                                onCountryChange={option => setSelectedCountryId(option?.id)}
                                onToggleOnlyWithoutSource={() => setOnlyWithoutSource(currentValue => !currentValue)}
                                onToggleStatus={toggleStatus}
                            />
                        }
                    />
                </TableToolbarColumn>

                <TableToolbarColumn horizontalAlign='right' className='min-width-250'>
                    <TableSearch placeholder='Search requests' value={searchValue} onChange={setSearchValue} />
                </TableToolbarColumn>
            </TableToolbar>

            <Table
                ref={tableRef}
                rowKey='id'
                noRowsState={
                    <NotFoundState
                        headline="We couldn't find any matching requests"
                        message='Try adjusting the active filters or search query to see more results.'
                        outerClassName='border-none'
                    />
                }
            >
                <TableHeader>
                    <TableHeaderColumn columnKey='request'>Request</TableHeaderColumn>
                    <TableHeaderColumn columnKey='sourceLabel'>Source</TableHeaderColumn>
                    <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
                    <TableHeaderColumn columnKey='priorityLabel'>Priority</TableHeaderColumn>
                    <TableHeaderColumn columnKey='owner'>Owner</TableHeaderColumn>
                </TableHeader>

                <TableBody>
                    {filteredRows.map(row => (
                        <TableRow key={row.id} id={row.id}>
                            <TableColumn>{row.request}</TableColumn>
                            <TableColumn>{row.sourceLabel}</TableColumn>
                            <TableColumn>{row.status}</TableColumn>
                            <TableColumn>
                                <span className='display-flex align-items-center gap-5'>
                                    <span
                                        className={`rioglyph rioglyph-sphere text-size-16 ${
                                            priorityOptions.find(option => option.id === row.priorityId)
                                                ?.colorClassName ?? 'text-color-gray'
                                        }`}
                                    />
                                    <span>{row.priorityLabel}</span>
                                </span>
                            </TableColumn>
                            <TableColumn>{row.owner}</TableColumn>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    );
};

export default TableToolbarDropdownFilterExample;
```

#### HTML (html)

```html
<div>
    <div class="table-toolbar">
        <div class="table-toolbar-container">
            <div class="table-toolbar-group-left">
                <div class="table-toolbar-column align-self-center">
                    <div class="text-color-darker">Showing 8 of 8 requests</div>
                </div>
            </div>
            <div class="table-toolbar-group-right">
                <div class="table-toolbar-column align-self-end table-toolbar-column-separator">
                    <div class="dropdown btn-group">
                        <button type="button" id="b163ie40yvr" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">
                            <span class="rioglyph rioglyph-filter">
                            </span>Filter</button>
                    </div>
                </div>
                <div class="table-toolbar-column align-self-end min-width-250">
                    <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 requests" 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 border table-rounded table-has-head" role="table" style="--table-columns: minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4 table-col-5&quot;; --table-column-count: 5; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="5">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid" role="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="request" 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">Request</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="sourceLabel" 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">Source</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="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 class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="priorityLabel" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Priority</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="owner" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Owner</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-body" role="rowgroup">
            <div id="request-1" class="table-row" data-index="0" data-row-id="request-1" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Onboarding checklist</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="sourceLabel" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Portal</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">Open</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="priorityLabel" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <span class="display-flex align-items-center gap-5">
                            <span class="rioglyph rioglyph-sphere text-size-16 text-color-info">
                            </span>
                            <span>Medium</span>
                        </span>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Jovany</div>
                </div>
            </div>
            <div id="request-2" class="table-row" data-index="1" data-row-id="request-2" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Document review</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="sourceLabel" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">No source</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">Paused</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="priorityLabel" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <span class="display-flex align-items-center gap-5">
                            <span class="rioglyph rioglyph-sphere text-size-16 text-color-success">
                            </span>
                            <span>Low</span>
                        </span>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Heidi</div>
                </div>
            </div>
            <div id="request-3" class="table-row" data-index="2" data-row-id="request-3" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Supplier follow-up</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="sourceLabel" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Email import</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">Escalated</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="priorityLabel" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <span class="display-flex align-items-center gap-5">
                            <span class="rioglyph rioglyph-sphere text-size-16 text-color-danger">
                            </span>
                            <span>Critical</span>
                        </span>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Allene</div>
                </div>
            </div>
            <div id="request-4" class="table-row" data-index="3" data-row-id="request-4" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Contract update</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="sourceLabel" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">No source</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">Resolved</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="priorityLabel" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <span class="display-flex align-items-center gap-5">
                            <span class="rioglyph rioglyph-sphere text-size-16 text-color-gray">
                            </span>
                            <span>Backlog</span>
                        </span>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Sharon</div>
                </div>
            </div>
            <div id="request-5" class="table-row" data-index="4" data-row-id="request-5" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Access request</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="sourceLabel" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Form</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">Open</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="priorityLabel" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <span class="display-flex align-items-center gap-5">
                            <span class="rioglyph rioglyph-sphere text-size-16 text-color-warning">
                            </span>
                            <span>High</span>
                        </span>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Abel</div>
                </div>
            </div>
            <div id="request-6" class="table-row" data-index="5" data-row-id="request-6" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Approval routing</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="sourceLabel" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">API</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">Resolved</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="priorityLabel" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <span class="display-flex align-items-center gap-5">
                            <span class="rioglyph rioglyph-sphere text-size-16 text-color-info">
                            </span>
                            <span>Medium</span>
                        </span>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Sally</div>
                </div>
            </div>
            <div id="request-7" class="table-row" data-index="6" data-row-id="request-7" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Invoice clarification</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="sourceLabel" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Portal</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">Paused</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="priorityLabel" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <span class="display-flex align-items-center gap-5">
                            <span class="rioglyph rioglyph-sphere text-size-16 text-color-success">
                            </span>
                            <span>Low</span>
                        </span>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ted</div>
                </div>
            </div>
            <div id="request-8" class="table-row" data-index="7" data-row-id="request-8" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Security review</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="sourceLabel" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">No source</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">Escalated</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="priorityLabel" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <span class="display-flex align-items-center gap-5">
                            <span class="rioglyph rioglyph-sphere text-size-16 text-color-danger">
                            </span>
                            <span>Critical</span>
                        </span>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Dawson</div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Toolbar search with advanced filters

When a simple inline filter is not enough, keep the the toolbar and reveal a more complex filter form in a collapsible section directly below it. This keeps the toolbar compact while still allowing richer filter controls.

### Example: Vehicle access handover

Showing 5 of 7 requests

Advanced filters

Status All statuses All statuses
Open
In progress
Blocked
Done

Owner All owners All owners
Mila Santos
Jonas Richter
Nora Klein
David Wolf

Region All regions All regions
Central
North
South
West

Only flagged requests Include archived requests

Request

Owner

Region

Status

REQ-1042 Vehicle access handover

Mila Santos

North

Open

REQ-1187 Dock appointment update

Jonas Richter

West

In progress

REQ-1274 Contract evidence upload

Nora Klein

Central

Blocked

REQ-1398 Supplier onboarding package

David Wolf

Central

Open

REQ-1461 Incident follow-up summary

Jonas Richter

South

In progress

#### React (tsx)

```tsx
import { useMemo, useRef, useState } from 'react';

import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
import Collapse from '@rio-cloud/rio-uikit/Collapse';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
import NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';
import Select, { type SelectOption } from '@rio-cloud/rio-uikit/Select';
import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
import TableSearch from '@rio-cloud/rio-uikit/TableSearch';
import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
import ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';
import useSearchHighlight from '@rio-cloud/rio-uikit/useSearchHighlight';
import Card from '@rio-cloud/rio-uikit/Card';

type DemoAdvancedFilterRow = {
    archived: boolean;
    flagged: boolean;
    id: string;
    owner: string;
    region: 'Central' | 'North' | 'South' | 'West';
    request: string;
    status: 'Blocked' | 'Done' | 'In progress' | 'Open';
};

const rows: DemoAdvancedFilterRow[] = [
    {
        id: 'REQ-1042',
        request: 'Vehicle access handover',
        owner: 'Mila Santos',
        region: 'North',
        status: 'Open',
        flagged: true,
        archived: false,
    },
    {
        id: 'REQ-1187',
        request: 'Dock appointment update',
        owner: 'Jonas Richter',
        region: 'West',
        status: 'In progress',
        flagged: false,
        archived: false,
    },
    {
        id: 'REQ-1274',
        request: 'Contract evidence upload',
        owner: 'Nora Klein',
        region: 'Central',
        status: 'Blocked',
        flagged: true,
        archived: false,
    },
    {
        id: 'REQ-1326',
        request: 'Archive retention review',
        owner: 'Mila Santos',
        region: 'South',
        status: 'Done',
        flagged: false,
        archived: true,
    },
    {
        id: 'REQ-1398',
        request: 'Supplier onboarding package',
        owner: 'David Wolf',
        region: 'Central',
        status: 'Open',
        flagged: false,
        archived: false,
    },
    {
        id: 'REQ-1461',
        request: 'Incident follow-up summary',
        owner: 'Jonas Richter',
        region: 'South',
        status: 'In progress',
        flagged: true,
        archived: false,
    },
    {
        id: 'REQ-1533',
        request: 'Quarterly compliance snapshot',
        owner: 'Nora Klein',
        region: 'West',
        status: 'Done',
        flagged: false,
        archived: true,
    },
];

const statusOptions: SelectOption[] = [
    { id: 'all', label: 'All statuses' },
    { id: 'Open', label: 'Open' },
    { id: 'In progress', label: 'In progress' },
    { id: 'Blocked', label: 'Blocked' },
    { id: 'Done', label: 'Done' },
];

const ownerOptions: SelectOption[] = [
    { id: 'all', label: 'All owners' },
    { id: 'Mila Santos', label: 'Mila Santos' },
    { id: 'Jonas Richter', label: 'Jonas Richter' },
    { id: 'Nora Klein', label: 'Nora Klein' },
    { id: 'David Wolf', label: 'David Wolf' },
];

const regionOptions: SelectOption[] = [
    { id: 'all', label: 'All regions' },
    { id: 'Central', label: 'Central' },
    { id: 'North', label: 'North' },
    { id: 'South', label: 'South' },
    { id: 'West', label: 'West' },
];

const TableToolbarAdvancedFiltersExample = () => {
    const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);
    const [searchValue, setSearchValue] = useState('');
    const [selectedStatus, setSelectedStatus] = useState('all');
    const [selectedOwner, setSelectedOwner] = useState('all');
    const [selectedRegion, setSelectedRegion] = useState('all');
    const [onlyFlagged, setOnlyFlagged] = useState(false);
    const [includeArchived, setIncludeArchived] = useState(false);
    const tableRef = useRef<HTMLDivElement>(null);

    const filteredRows = useMemo(() => {
        const normalizedSearchValue = searchValue.trim().toLowerCase();

        return rows.filter(row => {
            const matchesStatus = selectedStatus === 'all' || row.status === selectedStatus;
            const matchesOwner = selectedOwner === 'all' || row.owner === selectedOwner;
            const matchesRegion = selectedRegion === 'all' || row.region === selectedRegion;
            const matchesFlagged = !onlyFlagged || row.flagged;
            const matchesArchived = includeArchived || !row.archived;
            const matchesSearch =
                normalizedSearchValue.length === 0 ||
                [row.id, row.request, row.owner, row.region, row.status].some(value =>
                    value.toLowerCase().includes(normalizedSearchValue)
                );

            return matchesStatus && matchesOwner && matchesRegion && matchesFlagged && matchesArchived && matchesSearch;
        });
    }, [includeArchived, onlyFlagged, searchValue, selectedOwner, selectedRegion, selectedStatus]);

    useSearchHighlight({
        ref: tableRef,
        query: searchValue,
        deps: [filteredRows.length, selectedStatus, selectedOwner, selectedRegion, onlyFlagged, includeArchived],
    });

    const hasActiveAdvancedFilters =
        selectedStatus !== 'all' ||
        selectedOwner !== 'all' ||
        selectedRegion !== 'all' ||
        onlyFlagged ||
        includeArchived;

    return (
        <div>
            <TableToolbar>
                <TableToolbarColumn verticalAlign='center'>
                    <div className='text-color-darker'>
                        Showing {filteredRows.length} of {rows.length} requests
                    </div>
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right'>
                    <ToggleButton
                        active={showAdvancedFilters}
                        iconName={hasActiveAdvancedFilters ? 'rioglyph-filter-active' : 'rioglyph-filter'}
                        onClick={setShowAdvancedFilters}
                    >
                        Advanced filters
                    </ToggleButton>
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right' className='min-width-250'>
                    <TableSearch placeholder='Search requests' value={searchValue} onChange={setSearchValue} />
                </TableToolbarColumn>
            </TableToolbar>

            <Collapse open={showAdvancedFilters} timeout={220}>
                <Card className='margin-bottom-15'>
                    <div className='display-grid grid-cols-1 grid-cols-3-md gap-15 margin-bottom-15'>
                        <div>
                            <FormLabel htmlFor='advanced-filter-status'>Status</FormLabel>
                            <Select
                                id='advanced-filter-status'
                                options={statusOptions}
                                value={[selectedStatus]}
                                onChange={option => setSelectedStatus(option?.id || 'all')}
                            />
                        </div>
                        <div>
                            <FormLabel htmlFor='advanced-filter-owner'>Owner</FormLabel>
                            <Select
                                id='advanced-filter-owner'
                                options={ownerOptions}
                                value={[selectedOwner]}
                                onChange={option => setSelectedOwner(option?.id || 'all')}
                            />
                        </div>
                        <div>
                            <FormLabel htmlFor='advanced-filter-region'>Region</FormLabel>
                            <Select
                                id='advanced-filter-region'
                                options={regionOptions}
                                value={[selectedRegion]}
                                onChange={option => setSelectedRegion(option?.id || 'all')}
                            />
                        </div>
                    </div>
                    <div className='display-flex gap-15'>
                        <Checkbox
                            checked={onlyFlagged}
                            label='Only flagged requests'
                            onChange={() => setOnlyFlagged(value => !value)}
                        />
                        <Checkbox
                            checked={includeArchived}
                            label='Include archived requests'
                            onChange={() => setIncludeArchived(value => !value)}
                        />
                    </div>
                </Card>
            </Collapse>

            <Table
                ref={tableRef}
                rowKey='id'
                hover
                noRowsState={
                    <NotFoundState
                        headline="We couldn't find any matching requests"
                        message='Try adjusting the search or advanced filters to see more results.'
                        outerClassName='border-none'
                    />
                }
            >
                <TableHeader>
                    <TableHeaderColumn columnKey='id'>Request</TableHeaderColumn>
                    <TableHeaderColumn columnKey='owner'>Owner</TableHeaderColumn>
                    <TableHeaderColumn columnKey='region'>Region</TableHeaderColumn>
                    <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
                </TableHeader>
                <TableBody>
                    {filteredRows.map(row => (
                        <TableRow key={row.id} id={row.id}>
                            <TableColumn columnKey='id'>
                                <div className='display-flex flex-column'>
                                    <span className='text-medium'>{row.id}</span>
                                    <span className='text-color-dark'>{row.request}</span>
                                </div>
                            </TableColumn>
                            <TableColumn columnKey='owner'>{row.owner}</TableColumn>
                            <TableColumn columnKey='region'>{row.region}</TableColumn>
                            <TableColumn columnKey='status'>
                                <div className='display-flex align-items-center gap-5'>
                                    {row.flagged && (
                                        <span className='rioglyph rioglyph-warning-sign text-color-warning' />
                                    )}
                                    <span>{row.status}</span>
                                    {row.archived && <span className='badge badge-muted'>Archived</span>}
                                </div>
                            </TableColumn>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    );
};

export default TableToolbarAdvancedFiltersExample;
```

#### HTML (html)

```html
<div>
    <div class="table-toolbar">
        <div class="table-toolbar-container">
            <div class="table-toolbar-group-left">
                <div class="table-toolbar-column align-self-center">
                    <div class="text-color-darker">Showing 5 of 7 requests</div>
                </div>
            </div>
            <div class="table-toolbar-group-right">
                <div class="table-toolbar-column align-self-end">
                    <button type="button" class="btn btn-default btn-toggle btn-component" tabindex="0">
                        <span class="rioglyph rioglyph-filter">
                        </span>Advanced filters</button>
                </div>
                <div class="table-toolbar-column align-self-end min-width-250">
                    <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 requests" 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="collapse display-block width-100pct" style="opacity: 0; height: 0px;">
        <div class="bg-white rounded border shadow-default padding-15 margin-bottom-15">
            <div class="display-grid grid-cols-1 grid-cols-3-md gap-15 margin-bottom-15">
                <div>
                    <label for="advanced-filter-status" class="display-inline-block">
                        <span>Status</span>
                    </label>
                    <div class="select dropdown dropup">
                        <button type="button" id="advanced-filter-status" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                            <span class="selected-option-text">All statuses</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" role="menu">
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="all" data-item-index="0">
                                    <span class="selected-option-dropdown-item">All statuses</span>
                                    <input type="hidden" value="all">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="Open" data-item-index="1">
                                    <span class="selected-option-dropdown-item">Open</span>
                                    <input type="hidden" value="Open">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="In progress" data-item-index="2">
                                    <span class="selected-option-dropdown-item">In progress</span>
                                    <input type="hidden" value="In progress">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="Blocked" data-item-index="3">
                                    <span class="selected-option-dropdown-item">Blocked</span>
                                    <input type="hidden" value="Blocked">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="Done" data-item-index="4">
                                    <span class="selected-option-dropdown-item">Done</span>
                                    <input type="hidden" value="Done">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div>
                    <label for="advanced-filter-owner" class="display-inline-block">
                        <span>Owner</span>
                    </label>
                    <div class="select dropdown dropup">
                        <button type="button" id="advanced-filter-owner" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                            <span class="selected-option-text">All owners</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" role="menu">
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="all" data-item-index="0">
                                    <span class="selected-option-dropdown-item">All owners</span>
                                    <input type="hidden" value="all">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="Mila Santos" data-item-index="1">
                                    <span class="selected-option-dropdown-item">Mila Santos</span>
                                    <input type="hidden" value="Mila Santos">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="Jonas Richter" data-item-index="2">
                                    <span class="selected-option-dropdown-item">Jonas Richter</span>
                                    <input type="hidden" value="Jonas Richter">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="Nora Klein" data-item-index="3">
                                    <span class="selected-option-dropdown-item">Nora Klein</span>
                                    <input type="hidden" value="Nora Klein">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="David Wolf" data-item-index="4">
                                    <span class="selected-option-dropdown-item">David Wolf</span>
                                    <input type="hidden" value="David Wolf">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div>
                    <label for="advanced-filter-region" class="display-inline-block">
                        <span>Region</span>
                    </label>
                    <div class="select dropdown dropup">
                        <button type="button" id="advanced-filter-region" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                            <span class="selected-option-text">All regions</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" role="menu">
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="all" data-item-index="0">
                                    <span class="selected-option-dropdown-item">All regions</span>
                                    <input type="hidden" value="all">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="Central" data-item-index="1">
                                    <span class="selected-option-dropdown-item">Central</span>
                                    <input type="hidden" value="Central">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="North" data-item-index="2">
                                    <span class="selected-option-dropdown-item">North</span>
                                    <input type="hidden" value="North">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="South" data-item-index="3">
                                    <span class="selected-option-dropdown-item">South</span>
                                    <input type="hidden" value="South">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="West" data-item-index="4">
                                    <span class="selected-option-dropdown-item">West</span>
                                    <input type="hidden" value="West">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="display-flex gap-15">
                <label class="checkbox" tabindex="0">
                    <input type="checkbox" class="">
                    <span class="checkbox-text">
                        <span>Only flagged requests</span>
                    </span>
                </label>
                <label class="checkbox" tabindex="0">
                    <input type="checkbox" class="">
                    <span class="checkbox-text">
                        <span>Include archived requests</span>
                    </span>
                </label>
            </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) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
                <div class="table-head-cell table-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">Request</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="owner" 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">Owner</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="region" 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">Region</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Status</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-body" role="rowgroup">
            <div id="REQ-1042" class="table-row" data-index="0" data-row-id="REQ-1042" 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">
                        <div class="display-flex flex-column">
                            <span class="text-medium">REQ-1042</span>
                            <span class="text-color-dark">Vehicle access handover</span>
                        </div>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Mila Santos</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">North</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <div class="display-flex align-items-center gap-5">
                            <span class="rioglyph rioglyph-warning-sign text-color-warning">
                            </span>
                            <span>Open</span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="REQ-1187" class="table-row" data-index="1" data-row-id="REQ-1187" 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">
                        <div class="display-flex flex-column">
                            <span class="text-medium">REQ-1187</span>
                            <span class="text-color-dark">Dock appointment update</span>
                        </div>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Jonas Richter</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">West</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <div class="display-flex align-items-center gap-5">
                            <span>In progress</span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="REQ-1274" class="table-row" data-index="2" data-row-id="REQ-1274" 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">
                        <div class="display-flex flex-column">
                            <span class="text-medium">REQ-1274</span>
                            <span class="text-color-dark">Contract evidence upload</span>
                        </div>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Nora Klein</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Central</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <div class="display-flex align-items-center gap-5">
                            <span class="rioglyph rioglyph-warning-sign text-color-warning">
                            </span>
                            <span>Blocked</span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="REQ-1398" class="table-row" data-index="3" data-row-id="REQ-1398" 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">
                        <div class="display-flex flex-column">
                            <span class="text-medium">REQ-1398</span>
                            <span class="text-color-dark">Supplier onboarding package</span>
                        </div>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">David Wolf</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Central</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <div class="display-flex align-items-center gap-5">
                            <span>Open</span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="REQ-1461" class="table-row" data-index="4" data-row-id="REQ-1461" 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">
                        <div class="display-flex flex-column">
                            <span class="text-medium">REQ-1461</span>
                            <span class="text-color-dark">Incident follow-up summary</span>
                        </div>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Jonas Richter</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">South</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <div class="display-flex align-items-center gap-5">
                            <span class="rioglyph rioglyph-warning-sign text-color-warning">
                            </span>
                            <span>In progress</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Toolbar search with date range filter

Use a DayPicker range input next to TableSearch when the table needs a direct time-based filter in the toolbar. This works well for scheduled items, reporting ranges, or archive windows without moving the user into a separate filter form.

### Example: Cross-dock badge renewal

Showing 4 of 6 requests

Request

Owner

Scheduled date

Status

REQ-2118 Cross-dock badge renewal

Jonas Richter

Mar 8, 2026

In progress

REQ-2141 Driver document review

Noah Weber

Mar 12, 2026

Blocked

REQ-2160 Repair intake confirmation

Mila Santos

Mar 16, 2026

Done

REQ-2193 Supplier onboarding slot

Nora Klein

Mar 21, 2026

Open

#### React (tsx)

```tsx
import { useMemo, useRef, useState } from 'react';

import DayPicker, { type DateRange } from '@rio-cloud/rio-uikit/DayPicker';
import NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';
import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
import TableSearch from '@rio-cloud/rio-uikit/TableSearch';
import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
import useSearchHighlight from '@rio-cloud/rio-uikit/useSearchHighlight';

type DemoDateRangeFilterRow = {
    id: string;
    owner: string;
    request: string;
    scheduledDate: Date;
    scheduledLabel: string;
    status: 'Blocked' | 'Done' | 'In progress' | 'Open';
};

const rows: DemoDateRangeFilterRow[] = [
    {
        id: 'REQ-2104',
        request: 'Fleet access package',
        owner: 'Mila Santos',
        scheduledDate: new Date(2026, 2, 4),
        scheduledLabel: 'Mar 4, 2026',
        status: 'Open',
    },
    {
        id: 'REQ-2118',
        request: 'Cross-dock badge renewal',
        owner: 'Jonas Richter',
        scheduledDate: new Date(2026, 2, 8),
        scheduledLabel: 'Mar 8, 2026',
        status: 'In progress',
    },
    {
        id: 'REQ-2141',
        request: 'Driver document review',
        owner: 'Noah Weber',
        scheduledDate: new Date(2026, 2, 12),
        scheduledLabel: 'Mar 12, 2026',
        status: 'Blocked',
    },
    {
        id: 'REQ-2160',
        request: 'Repair intake confirmation',
        owner: 'Mila Santos',
        scheduledDate: new Date(2026, 2, 16),
        scheduledLabel: 'Mar 16, 2026',
        status: 'Done',
    },
    {
        id: 'REQ-2193',
        request: 'Supplier onboarding slot',
        owner: 'Nora Klein',
        scheduledDate: new Date(2026, 2, 21),
        scheduledLabel: 'Mar 21, 2026',
        status: 'Open',
    },
    {
        id: 'REQ-2227',
        request: 'Archive retention handoff',
        owner: 'Jonas Richter',
        scheduledDate: new Date(2026, 2, 26),
        scheduledLabel: 'Mar 26, 2026',
        status: 'In progress',
    },
];

const normalizeStartOfDay = (date: Date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();

const normalizeEndOfDay = (date: Date) =>
    new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999).getTime();

const TableToolbarDateRangeFilterExample = () => {
    const [searchValue, setSearchValue] = useState('');
    const [selectedRange, setSelectedRange] = useState<DateRange | undefined>({
        from: new Date(2026, 2, 6),
        to: new Date(2026, 2, 22),
    });

    const tableRef = useRef<HTMLDivElement>(null);

    const filteredRows = useMemo(() => {
        const normalizedSearchValue = searchValue.trim().toLowerCase();
        const rangeStart = selectedRange?.from ? normalizeStartOfDay(selectedRange.from) : undefined;
        const rangeEnd = selectedRange?.to
            ? normalizeEndOfDay(selectedRange.to)
            : selectedRange?.from
              ? normalizeEndOfDay(selectedRange.from)
              : undefined;

        return rows.filter(row => {
            const rowTime = row.scheduledDate.getTime();
            const matchesDateRange =
                (rangeStart === undefined || rowTime >= rangeStart) && (rangeEnd === undefined || rowTime <= rangeEnd);
            const matchesSearch =
                normalizedSearchValue.length === 0 ||
                [row.id, row.request, row.owner, row.status].some(value =>
                    value.toLowerCase().includes(normalizedSearchValue)
                );

            return matchesDateRange && matchesSearch;
        });
    }, [searchValue, selectedRange]);

    useSearchHighlight({
        ref: tableRef,
        query: searchValue,
        deps: [filteredRows.length, selectedRange?.from?.toISOString(), selectedRange?.to?.toISOString()],
    });

    return (
        <div>
            <TableToolbar>
                <TableToolbarColumn verticalAlign='center'>
                    <div className='text-color-darker'>
                        Showing {filteredRows.length} of {rows.length} requests
                    </div>
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right' className='min-width-250'>
                    <DayPicker
                        mode='range'
                        placeholder='Select date range'
                        value={selectedRange}
                        onChange={setSelectedRange}
                        closeOnSelect={false}
                        isClearable
                        className='margin-0'
                    />
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right' className='min-width-250'>
                    <TableSearch placeholder='Search requests' value={searchValue} onChange={setSearchValue} />
                </TableToolbarColumn>
            </TableToolbar>

            <Table
                ref={tableRef}
                rowKey='id'
                hover
                noRowsState={
                    <NotFoundState
                        headline="We couldn't find any matching requests"
                        message='Try adjusting the search or date range to see more results.'
                        outerClassName='border-none'
                    />
                }
            >
                <TableHeader>
                    <TableHeaderColumn columnKey='id'>Request</TableHeaderColumn>
                    <TableHeaderColumn columnKey='owner'>Owner</TableHeaderColumn>
                    <TableHeaderColumn columnKey='scheduledDate'>Scheduled date</TableHeaderColumn>
                    <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
                </TableHeader>
                <TableBody>
                    {filteredRows.map(row => (
                        <TableRow key={row.id} id={row.id}>
                            <TableColumn columnKey='id'>
                                <div className='display-flex flex-column'>
                                    <span className='text-medium'>{row.id}</span>
                                    <span className='text-color-dark'>{row.request}</span>
                                </div>
                            </TableColumn>
                            <TableColumn columnKey='owner'>{row.owner}</TableColumn>
                            <TableColumn columnKey='scheduledDate'>{row.scheduledLabel}</TableColumn>
                            <TableColumn columnKey='status'>{row.status}</TableColumn>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    );
};

export default TableToolbarDateRangeFilterExample;
```

#### HTML (html)

```html
<div>
    <div class="table-toolbar">
        <div class="table-toolbar-container">
            <div class="table-toolbar-group-left">
                <div class="table-toolbar-column align-self-center">
                    <div class="text-color-darker">Showing 4 of 6 requests</div>
                </div>
            </div>
            <div class="table-toolbar-group-right">
                <div class="table-toolbar-column align-self-end min-width-250">
                    <div class="form-group margin-0">
                        <div>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                                    </span>
                                </span>
                                <div class="form-control-feedback-wrapper flex-1-1">
                                    <div class="ClearableInput input-group">
                                        <input placeholder="Select date range" class="form-control bg-white cursor-pointer withClearButton" autocomplete="off" type="text" readonly="" tabindex="0" value="06/03/2026 - 22/03/2026">
                                        <span class="clearButton">
                                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                            </span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-toolbar-column align-self-end min-width-250">
                    <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 requests" 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) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
                <div class="table-head-cell table-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">Request</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="owner" 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">Owner</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="scheduledDate" 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">Scheduled date</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Status</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-body" role="rowgroup">
            <div id="REQ-2118" class="table-row" data-index="0" data-row-id="REQ-2118" 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">
                        <div class="display-flex flex-column">
                            <span class="text-medium">REQ-2118</span>
                            <span class="text-color-dark">Cross-dock badge renewal</span>
                        </div>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Jonas Richter</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="scheduledDate" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Mar 8, 2026</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">In progress</div>
                </div>
            </div>
            <div id="REQ-2141" class="table-row" data-index="1" data-row-id="REQ-2141" 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">
                        <div class="display-flex flex-column">
                            <span class="text-medium">REQ-2141</span>
                            <span class="text-color-dark">Driver document review</span>
                        </div>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Noah Weber</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="scheduledDate" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Mar 12, 2026</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Blocked</div>
                </div>
            </div>
            <div id="REQ-2160" class="table-row" data-index="2" data-row-id="REQ-2160" 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">
                        <div class="display-flex flex-column">
                            <span class="text-medium">REQ-2160</span>
                            <span class="text-color-dark">Repair intake confirmation</span>
                        </div>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Mila Santos</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="scheduledDate" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Mar 16, 2026</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Done</div>
                </div>
            </div>
            <div id="REQ-2193" class="table-row" data-index="3" data-row-id="REQ-2193" 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">
                        <div class="display-flex flex-column">
                            <span class="text-medium">REQ-2193</span>
                            <span class="text-color-dark">Supplier onboarding slot</span>
                        </div>
                    </div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Nora Klein</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="scheduledDate" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Mar 21, 2026</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Open</div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Column filters

Pass a custom filter control via the `filter` prop on TableHeaderColumn. The TableColumnFilter wrapper keeps the dropdown styling and behavior aligned with the table header while leaving the menu content fully customizable.

### Example: Showing 2 of 6 projects

Showing 2 of 6 projects
Project

Project type 2

Stage

Owner

To pick up a draggable item, press the space bar.
While dragging, use the arrow keys to move the item.
Press space again to drop the item in its new position, or press escape to cancel.

Illustrations

New

Review

Mila

Landing remake

Assigned to me

Discovery

Ava

#### React (tsx)

```tsx
import { useMemo, useState } from 'react';

import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
import Table, {
    TableBody,
    TableColumn,
    TableColumnFilter,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    type TableSortDirection,
} from '@rio-cloud/rio-uikit/Table';
import Button from '@rio-cloud/rio-uikit/Button';
import MenuItem from '@rio-cloud/rio-uikit/MenuItem';

type DemoProject = {
    id: number;
    owner: string;
    project: string;
    projectType: 'Assigned to me' | 'Archived' | 'Created by me' | 'New';
    stage: 'Concept' | 'Delivery' | 'Discovery' | 'Review';
};

type FilterDropdownContentProps = {
    onClear: () => void;
    onToggle: (value: string) => void;
    options: string[];
    selectedValues: string[];
    title: string;
};

const rows: DemoProject[] = [
    { id: 101, project: 'Landing remake', projectType: 'Assigned to me', stage: 'Discovery', owner: 'Ava' },
    { id: 102, project: 'Mobile app', projectType: 'Created by me', stage: 'Concept', owner: 'Noah' },
    { id: 103, project: 'Illustrations', projectType: 'New', stage: 'Review', owner: 'Mila' },
    { id: 104, project: 'Dealer portal', projectType: 'Assigned to me', stage: 'Delivery', owner: 'Luca' },
    { id: 105, project: 'Fleet dashboard', projectType: 'Archived', stage: 'Review', owner: 'Emma' },
    { id: 106, project: 'Driver onboarding', projectType: 'Created by me', stage: 'Discovery', owner: 'Ben' },
];

const projectTypeOptions = ['Assigned to me', 'Created by me', 'New', 'Archived'] as const;
const stageOptions = ['Discovery', 'Concept', 'Review', 'Delivery'] as const;

const FilterDropdownContent = ({ onClear, onToggle, options, selectedValues, title }: FilterDropdownContentProps) => (
    <>
        <MenuItem header value={title} />
        <div className='padding-x-15 padding-bottom-15 padding-top-5'>
            <div className='display-flex flex-column gap-10'>
                {options.map(option => (
                    <Checkbox
                        key={option}
                        checked={selectedValues.includes(option)}
                        label={option}
                        onChange={() => onToggle(option)}
                    />
                ))}
            </div>
            <div className='display-flex align-items-center justify-content-between gap-10 margin-top-15'>
                <span className='text-size-12 text-color-dark'>{selectedValues.length} selected</span>
                <Button bsStyle='muted-filled' bsSize='sm' onClick={onClear}>
                    Clear
                </Button>
            </div>
        </div>
    </>
);

const sortProjects = (projects: DemoProject[], sortBy?: keyof DemoProject, direction: TableSortDirection = 'asc') => {
    if (!sortBy) {
        return projects;
    }

    return [...projects].sort((left, right) => {
        const leftValue = String(left[sortBy]);
        const rightValue = String(right[sortBy]);
        const result = leftValue.localeCompare(rightValue);

        return direction === 'asc' ? result : -result;
    });
};

const TableColumnFilterExample = () => {
    const [selectedProjectTypes, setSelectedProjectTypes] = useState<string[]>(['Assigned to me', 'New']);
    const [selectedStages, setSelectedStages] = useState<string[]>(['Discovery', 'Review']);
    const [sortBy, setSortBy] = useState<string>('project');
    const [sortDirection, setSortDirection] = useState<TableSortDirection>('asc');
    const [columnOrder, setColumnOrder] = useState(['project', 'projectType', 'stage', 'owner']);

    const toggleFilterValue = (values: string[], value: string) =>
        values.includes(value) ? values.filter(currentValue => currentValue !== value) : [...values, value];

    const filteredRows = useMemo(
        () =>
            rows.filter(
                row =>
                    (selectedProjectTypes.length === 0 || selectedProjectTypes.includes(row.projectType)) &&
                    (selectedStages.length === 0 || selectedStages.includes(row.stage))
            ),
        [selectedProjectTypes, selectedStages]
    );

    const visibleRows = useMemo(
        () => sortProjects(filteredRows, sortBy as keyof DemoProject, sortDirection),
        [filteredRows, sortBy, sortDirection]
    );

    return (
        <div>
            <div className='margin-bottom-15 text-color-dark'>
                Showing {visibleRows.length} of {rows.length} projects
            </div>

            <Table
                rowKey='id'
                hover
                gridLines
                sortBy={sortBy}
                sortDirection={sortDirection}
                columnOrder={columnOrder}
                onColumnOrderChange={setColumnOrder}
                onSortChange={(columnKey, direction) => {
                    setSortBy(columnKey);
                    setSortDirection(direction);
                }}
            >
                <TableHeader>
                    <TableHeaderColumn columnKey='project' sortable draggable>
                        Project
                    </TableHeaderColumn>
                    <TableHeaderColumn
                        columnKey='projectType'
                        sortable
                        draggable
                        filter={
                            <TableColumnFilter
                                active={selectedProjectTypes.length > 0}
                                activeCount={selectedProjectTypes.length}
                            >
                                <FilterDropdownContent
                                    title='Project type'
                                    options={[...projectTypeOptions]}
                                    selectedValues={selectedProjectTypes}
                                    onToggle={value =>
                                        setSelectedProjectTypes(currentValues =>
                                            toggleFilterValue(currentValues, value)
                                        )
                                    }
                                    onClear={() => setSelectedProjectTypes([])}
                                />
                            </TableColumnFilter>
                        }
                    >
                        Project type
                    </TableHeaderColumn>
                    <TableHeaderColumn
                        columnKey='stage'
                        sortable
                        draggable
                        filter={
                            <TableColumnFilter
                                active={selectedStages.length > 0}
                                // activeCount={selectedStages.length}
                            >
                                <FilterDropdownContent
                                    title='Stage'
                                    options={[...stageOptions]}
                                    selectedValues={selectedStages}
                                    onToggle={value =>
                                        setSelectedStages(currentValues => toggleFilterValue(currentValues, value))
                                    }
                                    onClear={() => setSelectedStages([])}
                                />
                            </TableColumnFilter>
                        }
                    >
                        Stage
                    </TableHeaderColumn>
                    <TableHeaderColumn columnKey='owner' sortable draggable>
                        Owner
                    </TableHeaderColumn>
                </TableHeader>

                <TableBody>
                    {visibleRows.map(row => (
                        <TableRow key={row.id} id={row.id}>
                            <TableColumn columnKey='project'>{row.project}</TableColumn>
                            <TableColumn columnKey='projectType'>{row.projectType}</TableColumn>
                            <TableColumn columnKey='stage'>{row.stage}</TableColumn>
                            <TableColumn columnKey='owner'>{row.owner}</TableColumn>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    );
};

export default TableColumnFilterExample;
```

#### HTML (html)

```html
<div>
    <div class="margin-bottom-15 text-color-dark">Showing 2 of 6 projects</div>
    <div class="table table-view-table table-hover table-grid-lines border table-rounded table-has-head" role="table" style="--table-columns: minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="project" role="columnheader" aria-colindex="1" aria-rowindex="1" aria-sort="ascending" style="grid-area: 1 / 1 / span 1 / span 1; transition: transform linear;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button">
                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-1">
                                    <span class="sort-arrows sort-asc">
                                    </span>
                                    <span class="table-head-label">Project</span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="projectType" role="columnheader" aria-colindex="2" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 2 / span 1 / span 1; transition: transform linear;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button table-head-button-has-filter">
                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-1">
                                    <span class="sort-arrows ">
                                    </span>
                                    <span class="table-head-label">Project type</span>
                                </span>
                            </button>
                            <span class="table-head-filter">
                                <div class="dropdown btn-group">
                                    <button type="button" id="8ecrnok49yf" class="btn btn-default btn-outline btn-xs btn-component dropdown-toggle table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small padding-left-2" tabindex="0">
                                        <span class="display-flex gap-0 align-items-center text-color-dark">
                                            <span class="text-size-16 rioglyph rioglyph-filter-active" aria-hidden="true">
                                            </span>
                                            <span class="text-medium">2</span>
                                        </span>
                                    </button>
                                </div>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="stage" role="columnheader" aria-colindex="3" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 3 / span 1 / span 1; transition: transform linear;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button table-head-button-has-filter">
                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-1">
                                    <span class="sort-arrows ">
                                    </span>
                                    <span class="table-head-label">Stage</span>
                                </span>
                            </button>
                            <span class="table-head-filter">
                                <div class="dropdown btn-group">
                                    <button type="button" id="e83gk738e1v" class="btn btn-default btn-outline btn-xs btn-icon-only btn-component dropdown-toggle table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small" tabindex="0">
                                        <span class="display-flex gap-0 align-items-center text-color-dark">
                                            <span class="text-size-16 rioglyph rioglyph-filter-active" aria-hidden="true">
                                            </span>
                                        </span>
                                    </button>
                                </div>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-align-left table-vertical-align-middle" data-column="owner" role="columnheader" aria-colindex="4" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 4 / span 1 / span 1; transition: transform linear;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button">
                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-1">
                                    <span class="sort-arrows ">
                                    </span>
                                    <span class="table-head-label">Owner</span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
                <div id="DndDescribedBy-1" style="display: none;">
                    To pick up a draggable item, press the space bar.
                    While dragging, use the arrow keys to move the item.
                    Press space again to drop the item in its new position, or press escape to cancel.
                </div>
                <div id="DndLiveRegion-1" role="status" aria-live="assertive" aria-atomic="true" style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%); white-space: nowrap;">
                </div>
            </div>
        </div>
        <div class="table-body" role="rowgroup">
            <div id="103" class="table-row" data-index="0" data-row-id="103" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Illustrations</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="projectType" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">New</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="stage" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Review</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Mila</div>
                </div>
            </div>
            <div id="101" class="table-row" data-index="1" data-row-id="101" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Landing remake</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="projectType" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Assigned to me</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="stage" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Discovery</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ava</div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Header text truncation

Long header labels should truncate consistently both on plain header cells and on header cells that also render a filter control.

### Example:

Very long lifecycle phase name that should truncate with ellipsis

Very long responsible owner label that should also truncate with ellipsis

Flexible details column with automatic width

Discovery and concept alignment

Ava Schneider

Additional content stretches the remaining table width so the first two header cells stay narrow.

Implementation and QA handover

Milan Weber

Additional content stretches the remaining table width so the first two header cells stay narrow.

#### React (tsx)

```tsx
import MenuItem from '@rio-cloud/rio-uikit/MenuItem';
import Table, {
    TableBody,
    TableColumn,
    TableColumnFilter,
    TableHeader,
    TableHeaderColumn,
    TableRow,
} from '@rio-cloud/rio-uikit/Table';

type DemoHeaderTruncationRow = {
    id: number;
    lifecycle: string;
    owner: string;
};

const rows: DemoHeaderTruncationRow[] = [
    { id: 1, lifecycle: 'Discovery and concept alignment', owner: 'Ava Schneider' },
    { id: 2, lifecycle: 'Implementation and QA handover', owner: 'Milan Weber' },
];

const TableHeaderTruncationExample = () => (
    <Table>
        <TableHeader>
            <TableHeaderColumn columnKey='lifecycle' width={180}>
                Very long lifecycle phase name that should truncate with ellipsis
            </TableHeaderColumn>
            <TableHeaderColumn
                columnKey='owner'
                width={180}
                filter={
                    <TableColumnFilter dropdownClassName='width-200'>
                        <MenuItem header value='Filter options' />
                        <div className='padding-x-15 padding-bottom-15 padding-top-5'>
                            Custom dropdown content comes here
                        </div>
                    </TableColumnFilter>
                }
            >
                Very long responsible owner label that should also truncate with ellipsis
            </TableHeaderColumn>
            <TableHeaderColumn columnKey='details'>Flexible details column with automatic width</TableHeaderColumn>
        </TableHeader>

        <TableBody>
            {rows.map(row => (
                <TableRow key={row.id} id={row.id}>
                    <TableColumn>{row.lifecycle}</TableColumn>
                    <TableColumn>{row.owner}</TableColumn>
                    <TableColumn>
                        Additional content stretches the remaining table width so the first two header cells stay
                        narrow.
                    </TableColumn>
                </TableRow>
            ))}
        </TableBody>
    </Table>
);

export default TableHeaderTruncationExample;
```

#### HTML (html)

```html
<div class="table table-view-table border table-rounded table-has-head" role="table" style="--table-columns: minmax(0, 180px) minmax(0, 180px) 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="lifecycle" 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">Very long lifecycle phase name that should truncate with ellipsis</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="owner" 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 table-head-label-wrapper-has-filter">
                            <span class="table-head-label">Very long responsible owner label that should also truncate with ellipsis</span>
                        </span>
                        <span class="table-head-filter">
                            <div class="dropdown btn-group">
                                <button type="button" id="fxqxm82tezf" class="btn btn-default btn-outline btn-xs btn-icon-only btn-component dropdown-toggle table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small" tabindex="0">
                                    <span class="display-flex gap-0 align-items-center text-color-dark">
                                        <span class="text-size-16 rioglyph rioglyph-filter" aria-hidden="true">
                                        </span>
                                    </span>
                                </button>
                            </div>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="details" 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">Flexible details column with automatic width</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table-body" role="rowgroup">
        <div id="1" 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="lifecycle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Discovery and concept alignment</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Ava Schneider</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="details" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Additional content stretches the remaining table width so the first two header cells stay narrow.</div>
            </div>
        </div>
        <div id="2" 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="lifecycle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Implementation and QA handover</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Milan Weber</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="details" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Additional content stretches the remaining table width so the first two header cells stay narrow.</div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Header content variants

Header cells can mix plain text, truncated labels, wrapped text, leading icons, and helper icons with a SimpleTooltip depending on how much context the column needs.

### Example:

Shipment

Long shipment description that truncates

Shipment status description that wraps onto multiple lines instead of truncating

Shipment type

SHP-3021

Outbound shipment reference

Current shipment status and exception handling details

12.4 x 2.55 x 3.90 m

Temperature-controlled shipment

SHP-3057

Inbound shipment manifest

Latest milestone update for delayed arrival handling

13.6 x 2.48 x 4.00 m

ADR documentation required

#### React (tsx)

```tsx
import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';
import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';

type DemoHeaderContentVariantRow = {
    id: number;
    shipment: string;
    truncated: string;
    wrapped: string;
    dimensions: string;
    helper: string;
};

const rows: DemoHeaderContentVariantRow[] = [
    {
        id: 1,
        shipment: 'SHP-3021',
        truncated: 'Outbound shipment reference',
        wrapped: 'Current shipment status and exception handling details',
        dimensions: '12.4 x 2.55 x 3.90 m',
        helper: 'Temperature-controlled shipment',
    },
    {
        id: 2,
        shipment: 'SHP-3057',
        truncated: 'Inbound shipment manifest',
        wrapped: 'Latest milestone update for delayed arrival handling',
        dimensions: '13.6 x 2.48 x 4.00 m',
        helper: 'ADR documentation required',
    },
];

const TableHeaderContentVariantsExample = () => (
    <Table rowKey='id'>
        <TableHeader>
            <TableHeaderColumn columnKey='shipment' width={100}>
                Shipment
            </TableHeaderColumn>
            <TableHeaderColumn columnKey='truncated' width={190}>
                Long shipment description that truncates
            </TableHeaderColumn>
            <TableHeaderColumn columnKey='wrapped' width={250}>
                <div className='white-space-normal line-height-125'>
                    Shipment status description that wraps onto multiple lines instead of truncating
                </div>
            </TableHeaderColumn>
            <TableHeaderColumn
                columnKey='dimensions'
                width={190}
                icon='rioglyph-volume'
                className='text-size-16 margin-top-5'
            />
            <TableHeaderColumn columnKey='helper'>
                <div className='display-flex align-items-center gap-5'>
                    <span>Shipment type</span>
                    <SimpleTooltip
                        content='Additional header explanation shown via SimpleTooltip'
                        placement='top'
                        width={200}
                    >
                        <span className='rioglyph rioglyph-question-sign rioglyph-align-bottom text-color-dark cursor-pointer' />
                    </SimpleTooltip>
                </div>
            </TableHeaderColumn>
        </TableHeader>

        <TableBody>
            {rows.map(row => (
                <TableRow key={row.id} id={row.id}>
                    <TableColumn columnKey='shipment'>{row.shipment}</TableColumn>
                    <TableColumn columnKey='truncated'>{row.truncated}</TableColumn>
                    <TableColumn columnKey='wrapped'>{row.wrapped}</TableColumn>
                    <TableColumn columnKey='dimensions'>{row.dimensions}</TableColumn>
                    <TableColumn columnKey='helper'>{row.helper}</TableColumn>
                </TableRow>
            ))}
        </TableBody>
    </Table>
);

export default TableHeaderContentVariantsExample;
```

#### HTML (html)

```html
<div class="table table-view-table border table-rounded table-has-head" role="table" style="--table-columns: minmax(0, 100px) minmax(0, 190px) minmax(0, 250px) minmax(0, 190px) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4 table-col-5&quot;; --table-column-count: 5; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="5">
    <div class="table-head" role="rowgroup">
        <div class="table-head-grid" role="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="shipment" 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">Shipment</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="truncated" 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">Long shipment description that truncates</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="wrapped" 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">
                                <div class="white-space-normal line-height-125">Shipment status description that wraps onto multiple lines instead of truncating</div>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle text-size-16 margin-top-5" data-column="dimensions" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">
                                <span class="display-flex align-items-center gap-5">
                                    <span class="text-color-dark rioglyph rioglyph-volume">
                                    </span>
                                    <span>
                                    </span>
                                </span>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="helper" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">
                                <div class="display-flex align-items-center gap-5">
                                    <span>Shipment type</span>
                                    <span class="rioglyph rioglyph-question-sign rioglyph-align-bottom text-color-dark cursor-pointer">
                                    </span>
                                </div>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table-body" role="rowgroup">
        <div id="1" class="table-row" data-index="0" data-row-id="1" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">SHP-3021</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="truncated" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Outbound shipment reference</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="wrapped" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Current shipment status and exception handling details</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="dimensions" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">12.4 x 2.55 x 3.90 m</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="helper" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Temperature-controlled shipment</div>
            </div>
        </div>
        <div id="2" class="table-row" data-index="1" data-row-id="2" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">SHP-3057</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="truncated" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Inbound shipment manifest</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="wrapped" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Latest milestone update for delayed arrival handling</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="dimensions" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">13.6 x 2.48 x 4.00 m</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="helper" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">ADR documentation required</div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Custom header content

Header cells can also render richer custom content such as icons and wrapped multi-line text inside your own layout containers.

### Example: Primary contact for the current delivery phase

Processing status

Owner assignment
Primary contact for the current delivery phase

Summary and context
Freeform custom header content wrapped in a div

To pick up a draggable item, press the space bar.
While dragging, use the arrow keys to move the item.
Press space again to drop the item in its new position, or press escape to cancel.

Ready for review

Ava Schneider

Design handoff prepared for delivery

Waiting for input

Milan Weber

Backend requirements still being clarified

#### React (tsx)

```tsx
import { useState } from 'react';

import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';

type DemoCustomHeaderRow = {
    id: number;
    status: string;
    owner: string;
    summary: string;
};

const rows: DemoCustomHeaderRow[] = [
    { id: 1, status: 'Ready for review', owner: 'Ava Schneider', summary: 'Design handoff prepared for delivery' },
    { id: 2, status: 'Waiting for input', owner: 'Milan Weber', summary: 'Backend requirements still being clarified' },
];

const initialColumnOrder = ['status', 'owner', 'summary'];

const TableCustomHeaderContentExample = () => {
    const [columnOrder, setColumnOrder] = useState(initialColumnOrder);

    return (
        <Table rowKey='id' columnOrder={columnOrder} onColumnOrderChange={setColumnOrder}>
            <TableHeader>
                {columnOrder.map(columnKey => {
                    switch (columnKey) {
                        case 'status':
                            return (
                                <TableHeaderColumn key='status' columnKey='status' width={180} draggable>
                                    <div className='display-flex align-items-center gap-5'>
                                        <span className='rioglyph rioglyph-ok-sign text-color-success text-size-18' />
                                        <div className='text-medium'>Processing status</div>
                                    </div>
                                </TableHeaderColumn>
                            );
                        case 'owner':
                            return (
                                <TableHeaderColumn key='owner' columnKey='owner' width={250} draggable>
                                    <div className='display-flex align-items-start gap-5 min-width-0'>
                                        <span className='rioglyph rioglyph-user text-color-gray text-size-18 margin-top-2' />
                                        <div className='min-width-0 line-height-125'>
                                            <div className='text-medium'>Owner assignment</div>
                                            <div className='text-size-12 text-color-dark ellipsis-1'>
                                                Primary contact for the current delivery phase
                                            </div>
                                        </div>
                                    </div>
                                </TableHeaderColumn>
                            );
                        case 'summary':
                            return (
                                <TableHeaderColumn key='summary' columnKey='summary' draggable>
                                    <div className='display-flex flex-column line-height-125'>
                                        <div className='text-medium'>Summary and context</div>
                                        <div className='text-size-12 text-color-dark'>
                                            Freeform custom header content wrapped in a div
                                        </div>
                                    </div>
                                </TableHeaderColumn>
                            );
                        default:
                            return null;
                    }
                })}
            </TableHeader>

            <TableBody>
                {rows.map(row => (
                    <TableRow key={row.id} id={row.id}>
                        <TableColumn columnKey='status'>{row.status}</TableColumn>
                        <TableColumn columnKey='owner'>{row.owner}</TableColumn>
                        <TableColumn columnKey='summary'>{row.summary}</TableColumn>
                    </TableRow>
                ))}
            </TableBody>
        </Table>
    );
};

export default TableCustomHeaderContentExample;
```

#### HTML (html)

```html
<div class="table table-view-table border table-rounded table-has-head" role="table" style="--table-columns: minmax(0, 180px) minmax(0, 250px) 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-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1; transition: transform linear;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-2">
                            <span class="table-head-label">
                                <div class="display-flex align-items-center gap-5">
                                    <span class="rioglyph rioglyph-ok-sign text-color-success text-size-18">
                                    </span>
                                    <div class="text-medium">Processing status</div>
                                </div>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="owner" role="columnheader" aria-colindex="2" aria-rowindex="1" style="grid-area: 1 / 2 / span 1 / span 1; transition: transform linear;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-2">
                            <span class="table-head-label">
                                <div class="display-flex align-items-start gap-5 min-width-0">
                                    <span class="rioglyph rioglyph-user text-color-gray text-size-18 margin-top-2">
                                    </span>
                                    <div class="min-width-0 line-height-125">
                                        <div class="text-medium">Owner assignment</div>
                                        <div class="text-size-12 text-color-dark ellipsis-1">Primary contact for the current delivery phase</div>
                                    </div>
                                </div>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-draggable table-align-left table-vertical-align-middle" data-column="summary" role="columnheader" aria-colindex="3" aria-rowindex="1" style="grid-area: 1 / 3 / span 1 / span 1; transition: transform linear;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-2">
                            <span class="table-head-label">
                                <div class="display-flex flex-column line-height-125">
                                    <div class="text-medium">Summary and context</div>
                                    <div class="text-size-12 text-color-dark">Freeform custom header content wrapped in a div</div>
                                </div>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
            <div id="DndDescribedBy-2" style="display: none;">
                To pick up a draggable item, press the space bar.
                While dragging, use the arrow keys to move the item.
                Press space again to drop the item in its new position, or press escape to cancel.
            </div>
            <div id="DndLiveRegion-2" role="status" aria-live="assertive" aria-atomic="true" style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%); white-space: nowrap;">
            </div>
        </div>
    </div>
    <div class="table-body" role="rowgroup">
        <div id="1" class="table-row" data-index="0" data-row-id="1" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Ready for review</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Ava Schneider</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="summary" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Design handoff prepared for delivery</div>
            </div>
        </div>
        <div id="2" class="table-row" data-index="1" data-row-id="2" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Waiting for input</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Milan Weber</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="summary" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Backend requirements still being clarified</div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Responsive view switch for small sceens

Use responsiveBreakpoint when the table should resolve its view responsively from the current rendered width.

Pass an object such as { cards: '50vw', list: '30vw' }. Thecards value switches to MULTI_CARDS and the list value switches to SINGLE_CARD. You can provide either key on its own or both together.

Manual view changes stay active until resizing crosses into the next responsive breakpoint range. At that point, the table resolves the appropriate responsive view from the current breakpoint settings.

### Example: Example 21

List breakpoint
Cards breakpoint

View Table view
Cards view
List view

Vehicle

Route

Status

ETA

Driver

HH-RI 2048

Hamburg -> Berlin

On schedule

12:10

Lina Hoffmann

M-RI 1187

Munich -> Nuremberg

Delayed

14:45

Emir Yilmaz

K-RI 6621

Cologne -> Essen

Loading

16:05

Sofia Klein

#### React (tsx)

```tsx
import { useState } from 'react';

import { MOBILE_SCREEN, SCREEN_SM } from '@rio-cloud/rio-uikit/DeviceUtils';
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';

type DemoResponsiveBreakpointRow = {
    id: number;
    vehicle: string;
    route: string;
    status: string;
    eta: string;
    driver: string;
};

// Demo-only offset because the playground layout reduces the available width.
const DEMO_PADDING = 40;

const rows: DemoResponsiveBreakpointRow[] = [
    {
        id: 1,
        vehicle: 'HH-RI 2048',
        route: 'Hamburg -> Berlin',
        status: 'On schedule',
        eta: '12:10',
        driver: 'Lina Hoffmann',
    },
    {
        id: 2,
        vehicle: 'M-RI 1187',
        route: 'Munich -> Nuremberg',
        status: 'Delayed',
        eta: '14:45',
        driver: 'Emir Yilmaz',
    },
    {
        id: 3,
        vehicle: 'K-RI 6621',
        route: 'Cologne -> Essen',
        status: 'Loading',
        eta: '16:05',
        driver: 'Sofia Klein',
    },
];

const TableResponsiveViewSwitchExample = () => {
    const [viewType, setViewType] = useState<TableViewTogglesViewType>('TABLE');

    const [responsiveBreakpoint, setResponsiveBreakpoint] = useState({
        list: `${MOBILE_SCREEN}px`,
        cards: `${SCREEN_SM}px`,
    });

    return (
        <div>
            <TableToolbar disableResponsiveCollapse>
                <TableToolbarColumn className='min-width-150' label='List breakpoint'>
                    <input
                        className='form-control'
                        value={responsiveBreakpoint.list}
                        onChange={event =>
                            setResponsiveBreakpoint(previousBreakpoint => ({
                                ...previousBreakpoint,
                                list: event.target.value,
                            }))
                        }
                    />
                </TableToolbarColumn>

                <TableToolbarColumn className='min-width-150' label='Cards breakpoint'>
                    <input
                        className='form-control'
                        value={responsiveBreakpoint.cards}
                        onChange={event =>
                            setResponsiveBreakpoint(previousBreakpoint => ({
                                ...previousBreakpoint,
                                cards: event.target.value,
                            }))
                        }
                    />
                </TableToolbarColumn>

                <TableToolbarColumn horizontalAlign='right' label='View'>
                    <TableViewToggles
                        viewType={viewType}
                        tableViewLabel='Table view'
                        singleCardViewLabel='List view'
                        multiCardsViewLabel='Cards view'
                        onViewTypeChange={setViewType}
                    />
                </TableToolbarColumn>
            </TableToolbar>

            <Table
                rowKey='id'
                viewType={viewType}
                responsiveBreakpoint={{
                    list: `calc(${responsiveBreakpoint.list} - ${DEMO_PADDING}px)`,
                    cards: `calc(${responsiveBreakpoint.cards} - ${DEMO_PADDING}px)`,
                }}
                onViewTypeChange={setViewType}
                cardsStyle={{ minWidth: 200 }}
            >
                <TableHeader>
                    <TableHeaderColumn columnKey='vehicle'>Vehicle</TableHeaderColumn>
                    <TableHeaderColumn columnKey='route'>Route</TableHeaderColumn>
                    <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
                    <TableHeaderColumn columnKey='eta'>ETA</TableHeaderColumn>
                    <TableHeaderColumn columnKey='driver'>Driver</TableHeaderColumn>
                </TableHeader>

                <TableBody>
                    {rows.map(row => (
                        <TableRow key={row.id} id={row.id}>
                            <TableColumn columnKey='vehicle'>{row.vehicle}</TableColumn>
                            <TableColumn columnKey='route'>{row.route}</TableColumn>
                            <TableColumn columnKey='status'>{row.status}</TableColumn>
                            <TableColumn columnKey='eta'>{row.eta}</TableColumn>
                            <TableColumn columnKey='driver'>{row.driver}</TableColumn>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    );
};

export default TableResponsiveViewSwitchExample;
```

#### HTML (html)

```html
<div>
    <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-150">
                    <label class="table-toolbar-label">List breakpoint</label>
                    <input class="form-control" value="480px">
                </div>
                <div class="table-toolbar-column align-self-end min-width-150">
                    <label class="table-toolbar-label">Cards breakpoint</label>
                    <input class="form-control" value="768px">
                </div>
            </div>
            <div class="table-toolbar-group-right">
                <div class="table-toolbar-column align-self-end">
                    <label class="table-toolbar-label">View</label>
                    <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 border table-rounded table-has-head" role="table" style="--table-columns: minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4 table-col-5&quot;; --table-cards-min: 200px; --table-column-count: 5; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 808px;" aria-colcount="5">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="vehicle" 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">Vehicle</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="route" 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">Route</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="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 class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="eta" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">ETA</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="driver" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Driver</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-body" role="rowgroup">
            <div id="1" class="table-row" data-index="0" data-row-id="1" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">HH-RI 2048</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Hamburg -&gt; Berlin</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">On schedule</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">12:10</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Lina Hoffmann</div>
                </div>
            </div>
            <div id="2" class="table-row" data-index="1" data-row-id="2" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">M-RI 1187</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Munich -&gt; Nuremberg</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">Delayed</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">14:45</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Emir Yilmaz</div>
                </div>
            </div>
            <div id="3" class="table-row" data-index="2" data-row-id="3" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">K-RI 6621</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Cologne -&gt; Essen</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">Loading</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">16:05</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Sofia Klein</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="Resizer resize-horizontal resize-right right-0 display-grid place-items-center width-auto height-100pct padding-2 bg-white border border-top-none border-bottom-none">
    <div class="height-20 width-2 bg-gray">
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Cell overflow in body and footer

Use the overflow prop on TableColumn to control how long cell content is handled in both body rows and footer rows.

### Example: Example 22

Hidden

Ellipsis

Ellipsis 2

Ellipsis 3

Visible

Empty

This body cell uses overflow hidden and clips the content inside the cell area.

This body cell uses ellipsis so the content truncates with a visible text overflow hint.

This body cell uses ellipsis over two lines so longer content still stays compact but remains easier to scan.

This body cell uses ellipsis over three lines and is useful when you want slightly more context before clipping the text.

This body cell uses overflow visible so the content may extend beyond the regular cell box.

Footer content with hidden overflow keeps the footer row compact.

Footer content with ellipsis truncates in the same way as body cells.

Footer content with ellipsis over two lines keeps summaries readable without growing indefinitely.

Footer content with ellipsis over three lines allows a bit more detail while still keeping the footer under control.

Footer content with visible overflow can break out of the normal footer cell box.

#### React (tsx)

```tsx
import { useState } from 'react';

import Table, {
    TableBody,
    TableColumn,
    TableFooter,
    TableHeader,
    TableHeaderColumn,
    TableRow,
} from '@rio-cloud/rio-uikit/Table';

const initialColumnWidths = {
    hidden: 150,
    ellipsis: 150,
    'ellipsis-2': 150,
    'ellipsis-3': 150,
} as const;

const TableColumnOverflowExample = () => {
    const [columnWidths, setColumnWidths] = useState<Record<string, number | string>>(initialColumnWidths);

    const handleColumnResize = (columnKey: string, width?: number | string) => {
        setColumnWidths(previousWidths => {
            if (width === undefined) {
                const { [columnKey]: _removedWidth, ...remainingWidths } = previousWidths;
                return remainingWidths;
            }

            return {
                ...previousWidths,
                [columnKey]: width,
            };
        });
    };

    return (
        <Table onColumnResize={handleColumnResize} gridLines>
            <TableHeader>
                <TableHeaderColumn columnKey='hidden' width={columnWidths.hidden} resizeable>
                    Hidden
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='ellipsis' width={columnWidths.ellipsis} resizeable>
                    Ellipsis
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='ellipsis-2' width={columnWidths['ellipsis-2']} resizeable>
                    Ellipsis 2
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='ellipsis-3' width={columnWidths['ellipsis-3']} resizeable>
                    Ellipsis 3
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='visible' width={200}>
                    Visible
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='empty'>Empty</TableHeaderColumn>
            </TableHeader>

            <TableBody>
                <TableRow>
                    <TableColumn columnKey='hidden' overflow='hidden'>
                        <span className='white-space-nowrap'>
                            This body cell uses overflow hidden and clips the content inside the cell area.
                        </span>
                    </TableColumn>
                    <TableColumn columnKey='ellipsis' overflow='ellipsis'>
                        This body cell uses ellipsis so the content truncates with a visible text overflow hint.
                    </TableColumn>
                    <TableColumn columnKey='ellipsis-2' overflow='ellipsis-2'>
                        This body cell uses ellipsis over two lines so longer content still stays compact but remains
                        easier to scan.
                    </TableColumn>
                    <TableColumn columnKey='ellipsis-3' overflow='ellipsis-3'>
                        This body cell uses ellipsis over three lines and is useful when you want slightly more context
                        before clipping the text.
                    </TableColumn>
                    <TableColumn columnKey='visible' overflow='visible'>
                        <span className='white-space-nowrap'>
                            This body cell uses overflow visible so the content may extend beyond the regular cell box.
                        </span>
                    </TableColumn>
                    <TableColumn columnKey='empty' />
                </TableRow>
            </TableBody>

            <TableFooter>
                <TableColumn columnKey='hidden' overflow='hidden' verticalAlign='top'>
                    <span className='white-space-nowrap'>
                        Footer content with hidden overflow keeps the footer row compact.
                    </span>
                </TableColumn>
                <TableColumn columnKey='ellipsis' overflow='ellipsis' verticalAlign='top'>
                    Footer content with ellipsis truncates in the same way as body cells.
                </TableColumn>
                <TableColumn columnKey='ellipsis-2' overflow='ellipsis-2' verticalAlign='top'>
                    Footer content with ellipsis over two lines keeps summaries readable without growing indefinitely.
                </TableColumn>
                <TableColumn columnKey='ellipsis-3' overflow='ellipsis-3' verticalAlign='top'>
                    Footer content with ellipsis over three lines allows a bit more detail while still keeping the
                    footer under control.
                </TableColumn>
                <TableColumn columnKey='visible' overflow='visible' verticalAlign='top'>
                    <span className='white-space-nowrap'>
                        Footer content with visible overflow can break out of the normal footer cell box.
                    </span>
                </TableColumn>
                <TableColumn columnKey='empty' />
            </TableFooter>
        </Table>
    );
};

export default TableColumnOverflowExample;
```

#### HTML (html)

```html
<div class="table table-view-table table-grid-lines border table-rounded table-has-head table-has-footer" role="table" style="--table-columns: minmax(0, 150px) minmax(0, 150px) minmax(0, 150px) minmax(0, 150px) minmax(0, 200px) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4 table-col-5 table-col-6&quot;; --table-column-count: 6; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="6">
    <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-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="hidden" 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">Hidden</span>
                        </span>
                    </div>
                </div>
                <div class="table-column-resize-handle">
                </div>
            </div>
            <div class="table-head-cell table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="ellipsis" 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">Ellipsis</span>
                        </span>
                    </div>
                </div>
                <div class="table-column-resize-handle">
                </div>
            </div>
            <div class="table-head-cell table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="ellipsis-2" 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">Ellipsis 2</span>
                        </span>
                    </div>
                </div>
                <div class="table-column-resize-handle">
                </div>
            </div>
            <div class="table-head-cell table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="ellipsis-3" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Ellipsis 3</span>
                        </span>
                    </div>
                </div>
                <div class="table-column-resize-handle">
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="visible" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Visible</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="empty" role="columnheader" aria-colindex="6" aria-rowindex="1" style="grid-area: 1 / 6 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Empty</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table-body" role="rowgroup">
        <div 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="hidden" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span class="white-space-nowrap">This body cell uses overflow hidden and clips the content inside the cell area.</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="ellipsis" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content ellipsis-1">This body cell uses ellipsis so the content truncates with a visible text overflow hint.</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="ellipsis-2" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content ellipsis-2">This body cell uses ellipsis over two lines so longer content still stays compact but remains easier to scan.</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="ellipsis-3" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content ellipsis-3">This body cell uses ellipsis over three lines and is useful when you want slightly more context before clipping the text.</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="visible" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-visible">
                    <span class="white-space-nowrap">This body cell uses overflow visible so the content may extend beyond the regular cell box.</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="empty" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                </div>
            </div>
        </div>
    </div>
    <div class="table-footer" role="rowgroup">
        <div class="table-row table-row-footer" role="row">
            <div class="table-cell table-footer-cell table-align-left table-vertical-align-top" data-column="hidden" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span class="white-space-nowrap">Footer content with hidden overflow keeps the footer row compact.</span>
                </div>
            </div>
            <div class="table-cell table-footer-cell table-align-left table-vertical-align-top" data-column="ellipsis" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content ellipsis-1">Footer content with ellipsis truncates in the same way as body cells.</div>
            </div>
            <div class="table-cell table-footer-cell table-align-left table-vertical-align-top" data-column="ellipsis-2" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content ellipsis-2">Footer content with ellipsis over two lines keeps summaries readable without growing indefinitely.</div>
            </div>
            <div class="table-cell table-footer-cell table-align-left table-vertical-align-top" data-column="ellipsis-3" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content ellipsis-3">Footer content with ellipsis over three lines allows a bit more detail while still keeping the footer under control.</div>
            </div>
            <div class="table-cell table-footer-cell table-align-left table-vertical-align-top" data-column="visible" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-visible">
                    <span class="white-space-nowrap">Footer content with visible overflow can break out of the normal footer cell box.</span>
                </div>
            </div>
            <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="empty" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Sticky header

Use <TableHeader sticky /> to keep the header visible while the page scrolls. This works without moving the rows into an internally scrollable TableBody.

### Example: Example 23

Request

Owner

Window

Status

Vehicle check-in

Mila Santos

08:00 - 09:00

Open

Dock handover

Jonas Richter

09:00 - 10:00

Ready

Archive pickup

Noah Weber

10:00 - 11:00

In progress

Supplier onboarding

Nora Klein

11:00 - 12:00

Blocked

Inspection slot

Ava Schneider

12:00 - 13:00

Open

Parcel release

Luca Becker

13:00 - 14:00

Ready

Gate access reset

Mila Santos

14:00 - 15:00

In progress

Loading ramp update

Jonas Richter

15:00 - 16:00

Blocked

Vehicle check-in

Noah Weber

08:00 - 09:00

Open

Dock handover

Nora Klein

09:00 - 10:00

Ready

Archive pickup

Ava Schneider

10:00 - 11:00

In progress

Supplier onboarding

Luca Becker

11:00 - 12:00

Blocked

Inspection slot

Mila Santos

12:00 - 13:00

Open

Parcel release

Jonas Richter

13:00 - 14:00

Ready

Gate access reset

Noah Weber

14:00 - 15:00

In progress

Loading ramp update

Nora Klein

15:00 - 16:00

Blocked

Vehicle check-in

Ava Schneider

08:00 - 09:00

Open

Dock handover

Luca Becker

09:00 - 10:00

Ready

Archive pickup

Mila Santos

10:00 - 11:00

In progress

Supplier onboarding

Jonas Richter

11:00 - 12:00

Blocked

Inspection slot

Noah Weber

12:00 - 13:00

Open

Parcel release

Nora Klein

13:00 - 14:00

Ready

Gate access reset

Ava Schneider

14:00 - 15:00

In progress

Loading ramp update

Luca Becker

15:00 - 16:00

Blocked

#### React (tsx)

```tsx
import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';

type DemoStickyHeaderRow = {
    id: string;
    owner: string;
    request: string;
    status: 'Blocked' | 'In progress' | 'Open' | 'Ready';
    window: string;
};

const requests = [
    'Vehicle check-in',
    'Dock handover',
    'Archive pickup',
    'Supplier onboarding',
    'Inspection slot',
    'Parcel release',
    'Gate access reset',
    'Loading ramp update',
];
const owners = ['Mila Santos', 'Jonas Richter', 'Noah Weber', 'Nora Klein', 'Ava Schneider', 'Luca Becker'];
const statuses: DemoStickyHeaderRow['status'][] = ['Open', 'Ready', 'In progress', 'Blocked'];

const rows: DemoStickyHeaderRow[] = Array.from({ length: 24 }, (_, index) => {
    const startHour = 8 + (index % 8);

    return {
        id: `REQ-${4201 + index}`,
        request: requests[index % requests.length] ?? 'Request',
        owner: owners[index % owners.length] ?? 'Owner',
        status: statuses[index % statuses.length] ?? 'Open',
        window: `${String(startHour).padStart(2, '0')}:00 - ${String(startHour + 1).padStart(2, '0')}:00`,
    };
});

const TableStickyHeaderExample = () => (
    <div className='height-300 overflow-y-scroll'>
        <Table rowKey='id' hover stickyReference='container'>
            <TableHeader sticky>
                <TableHeaderColumn columnKey='request' width={260}>
                    Request
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='owner' width={180}>
                    Owner
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='window' width={180}>
                    Window
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
            </TableHeader>

            <TableBody>
                {rows.map(row => (
                    <TableRow key={row.id} id={row.id}>
                        <TableColumn columnKey='request'>{row.request}</TableColumn>
                        <TableColumn columnKey='owner'>{row.owner}</TableColumn>
                        <TableColumn columnKey='window'>{row.window}</TableColumn>
                        <TableColumn columnKey='status'>{row.status}</TableColumn>
                    </TableRow>
                ))}
            </TableBody>
        </Table>
    </div>
);

export default TableStickyHeaderExample;
```

#### HTML (html)

```html
<div class="height-300 overflow-y-scroll">
    <div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: minmax(0, 260px) minmax(0, 180px) minmax(0, 180px) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 4; --table-sticky-reference-top: 0px; --table-width: 908px; --table-sticky-header-height: 43.5px;" aria-colcount="4">
        <div class="table-head table-head-sticky" 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="request" 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">Request</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="owner" 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">Owner</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="window" 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">Window</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Status</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-body" role="rowgroup">
            <div id="REQ-4201" class="table-row" data-index="0" data-row-id="REQ-4201" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Vehicle check-in</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Mila Santos</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">08:00 - 09:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Open</div>
                </div>
            </div>
            <div id="REQ-4202" class="table-row" data-index="1" data-row-id="REQ-4202" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Dock handover</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Jonas Richter</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">09:00 - 10:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ready</div>
                </div>
            </div>
            <div id="REQ-4203" class="table-row" data-index="2" data-row-id="REQ-4203" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Archive pickup</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Noah Weber</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">10:00 - 11:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">In progress</div>
                </div>
            </div>
            <div id="REQ-4204" class="table-row" data-index="3" data-row-id="REQ-4204" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Supplier onboarding</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Nora Klein</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">11:00 - 12:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Blocked</div>
                </div>
            </div>
            <div id="REQ-4205" class="table-row" data-index="4" data-row-id="REQ-4205" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Inspection slot</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ava Schneider</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">12:00 - 13:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Open</div>
                </div>
            </div>
            <div id="REQ-4206" class="table-row" data-index="5" data-row-id="REQ-4206" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Parcel release</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Luca Becker</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">13:00 - 14:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ready</div>
                </div>
            </div>
            <div id="REQ-4207" class="table-row" data-index="6" data-row-id="REQ-4207" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Gate access reset</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Mila Santos</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">14:00 - 15:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">In progress</div>
                </div>
            </div>
            <div id="REQ-4208" class="table-row" data-index="7" data-row-id="REQ-4208" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Loading ramp update</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Jonas Richter</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">15:00 - 16:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Blocked</div>
                </div>
            </div>
            <div id="REQ-4209" class="table-row" data-index="8" data-row-id="REQ-4209" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Vehicle check-in</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Noah Weber</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">08:00 - 09:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Open</div>
                </div>
            </div>
            <div id="REQ-4210" class="table-row" data-index="9" data-row-id="REQ-4210" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Dock handover</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Nora Klein</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">09:00 - 10:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ready</div>
                </div>
            </div>
            <div id="REQ-4211" class="table-row" data-index="10" data-row-id="REQ-4211" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Archive pickup</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ava Schneider</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">10:00 - 11:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">In progress</div>
                </div>
            </div>
            <div id="REQ-4212" class="table-row" data-index="11" data-row-id="REQ-4212" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Supplier onboarding</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Luca Becker</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">11:00 - 12:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Blocked</div>
                </div>
            </div>
            <div id="REQ-4213" class="table-row" data-index="12" data-row-id="REQ-4213" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Inspection slot</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Mila Santos</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">12:00 - 13:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Open</div>
                </div>
            </div>
            <div id="REQ-4214" class="table-row" data-index="13" data-row-id="REQ-4214" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Parcel release</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Jonas Richter</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">13:00 - 14:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ready</div>
                </div>
            </div>
            <div id="REQ-4215" class="table-row" data-index="14" data-row-id="REQ-4215" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Gate access reset</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Noah Weber</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">14:00 - 15:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">In progress</div>
                </div>
            </div>
            <div id="REQ-4216" class="table-row" data-index="15" data-row-id="REQ-4216" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Loading ramp update</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Nora Klein</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">15:00 - 16:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Blocked</div>
                </div>
            </div>
            <div id="REQ-4217" class="table-row" data-index="16" data-row-id="REQ-4217" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Vehicle check-in</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ava Schneider</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">08:00 - 09:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Open</div>
                </div>
            </div>
            <div id="REQ-4218" class="table-row" data-index="17" data-row-id="REQ-4218" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Dock handover</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Luca Becker</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">09:00 - 10:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ready</div>
                </div>
            </div>
            <div id="REQ-4219" class="table-row" data-index="18" data-row-id="REQ-4219" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Archive pickup</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Mila Santos</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">10:00 - 11:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">In progress</div>
                </div>
            </div>
            <div id="REQ-4220" class="table-row" data-index="19" data-row-id="REQ-4220" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Supplier onboarding</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Jonas Richter</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">11:00 - 12:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Blocked</div>
                </div>
            </div>
            <div id="REQ-4221" class="table-row" data-index="20" data-row-id="REQ-4221" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Inspection slot</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Noah Weber</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">12:00 - 13:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Open</div>
                </div>
            </div>
            <div id="REQ-4222" class="table-row" data-index="21" data-row-id="REQ-4222" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Parcel release</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Nora Klein</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">13:00 - 14:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ready</div>
                </div>
            </div>
            <div id="REQ-4223" class="table-row" data-index="22" data-row-id="REQ-4223" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Gate access reset</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Ava Schneider</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">14:00 - 15:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">In progress</div>
                </div>
            </div>
            <div id="REQ-4224" class="table-row" data-index="23" data-row-id="REQ-4224" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Loading ramp update</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Luca Becker</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">15:00 - 16:00</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Blocked</div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Grouped sticky rows

Use TableGroupRow for sticky group headers inside a scrollable table body and TableGroupFooterRow for non-sticky summary rows per group.

### Example: Example 24

Project

Region

Status

Amy Elsner

Landing remake

France

Proposal

Dealer portal

Belgium

Qualified

Fleet rollout

Netherlands

Negotiation

Brand refresh

Spain

Qualified

Service launch

Italy

Proposal

Total projects for Amy Elsner: 5

Anna Fali

Mobile app

Romania

Qualified

Driver onboarding

Slovenia

New

Workshop flow

Croatia

Proposal

Inspection app

Hungary

Negotiation

Logbook sync

Poland

Qualified

Total projects for Anna Fali: 5

Ben Turner

Analytics refresh

Germany

Negotiation

Service dashboard

Austria

Qualified

Spare parts sync

Switzerland

Proposal

Claims portal

Denmark

New

Contract review

Sweden

Qualified

Total projects for Ben Turner: 5

Cleo Hart

Retail campaign

Portugal

Proposal

Partner hub

Ireland

Negotiation

Care flow

Norway

Qualified

Warranty claims

Finland

Proposal

Asset audits

Czech Republic

New

Total projects for Cleo Hart: 5

#### React (tsx)

```tsx
import { faker } from '@faker-js/faker';

import Avatar from '@rio-cloud/rio-uikit/Avatar';
import Table, {
    TableBody,
    TableColumn,
    TableGroupFooterRow,
    TableGroupRow,
    TableHeader,
    TableHeaderColumn,
    TableRow,
} from '@rio-cloud/rio-uikit/Table';

type DemoGroupedRow = {
    assignee: string;
    assigneeAvatar: string;
    id: number;
    project: string;
    region: string;
    status: string;
};

const assigneeAvatars = {
    'Amy Elsner': faker.image.personPortrait(),
    'Anna Fali': faker.image.personPortrait(),
    'Ben Turner': faker.image.personPortrait(),
    'Cleo Hart': faker.image.personPortrait(),
} as const;

const rows: DemoGroupedRow[] = [
    {
        id: 1,
        assignee: 'Amy Elsner',
        assigneeAvatar: assigneeAvatars['Amy Elsner'],
        project: 'Landing remake',
        region: 'France',
        status: 'Proposal',
    },
    {
        id: 2,
        assignee: 'Amy Elsner',
        assigneeAvatar: assigneeAvatars['Amy Elsner'],
        project: 'Dealer portal',
        region: 'Belgium',
        status: 'Qualified',
    },
    {
        id: 3,
        assignee: 'Amy Elsner',
        assigneeAvatar: assigneeAvatars['Amy Elsner'],
        project: 'Fleet rollout',
        region: 'Netherlands',
        status: 'Negotiation',
    },
    {
        id: 4,
        assignee: 'Amy Elsner',
        assigneeAvatar: assigneeAvatars['Amy Elsner'],
        project: 'Brand refresh',
        region: 'Spain',
        status: 'Qualified',
    },
    {
        id: 5,
        assignee: 'Amy Elsner',
        assigneeAvatar: assigneeAvatars['Amy Elsner'],
        project: 'Service launch',
        region: 'Italy',
        status: 'Proposal',
    },
    {
        id: 6,
        assignee: 'Anna Fali',
        assigneeAvatar: assigneeAvatars['Anna Fali'],
        project: 'Mobile app',
        region: 'Romania',
        status: 'Qualified',
    },
    {
        id: 7,
        assignee: 'Anna Fali',
        assigneeAvatar: assigneeAvatars['Anna Fali'],
        project: 'Driver onboarding',
        region: 'Slovenia',
        status: 'New',
    },
    {
        id: 8,
        assignee: 'Anna Fali',
        assigneeAvatar: assigneeAvatars['Anna Fali'],
        project: 'Workshop flow',
        region: 'Croatia',
        status: 'Proposal',
    },
    {
        id: 9,
        assignee: 'Anna Fali',
        assigneeAvatar: assigneeAvatars['Anna Fali'],
        project: 'Inspection app',
        region: 'Hungary',
        status: 'Negotiation',
    },
    {
        id: 10,
        assignee: 'Anna Fali',
        assigneeAvatar: assigneeAvatars['Anna Fali'],
        project: 'Logbook sync',
        region: 'Poland',
        status: 'Qualified',
    },
    {
        id: 11,
        assignee: 'Ben Turner',
        assigneeAvatar: assigneeAvatars['Ben Turner'],
        project: 'Analytics refresh',
        region: 'Germany',
        status: 'Negotiation',
    },
    {
        id: 12,
        assignee: 'Ben Turner',
        assigneeAvatar: assigneeAvatars['Ben Turner'],
        project: 'Service dashboard',
        region: 'Austria',
        status: 'Qualified',
    },
    {
        id: 13,
        assignee: 'Ben Turner',
        assigneeAvatar: assigneeAvatars['Ben Turner'],
        project: 'Spare parts sync',
        region: 'Switzerland',
        status: 'Proposal',
    },
    {
        id: 14,
        assignee: 'Ben Turner',
        assigneeAvatar: assigneeAvatars['Ben Turner'],
        project: 'Claims portal',
        region: 'Denmark',
        status: 'New',
    },
    {
        id: 15,
        assignee: 'Ben Turner',
        assigneeAvatar: assigneeAvatars['Ben Turner'],
        project: 'Contract review',
        region: 'Sweden',
        status: 'Qualified',
    },
    {
        id: 16,
        assignee: 'Cleo Hart',
        assigneeAvatar: assigneeAvatars['Cleo Hart'],
        project: 'Retail campaign',
        region: 'Portugal',
        status: 'Proposal',
    },
    {
        id: 17,
        assignee: 'Cleo Hart',
        assigneeAvatar: assigneeAvatars['Cleo Hart'],
        project: 'Partner hub',
        region: 'Ireland',
        status: 'Negotiation',
    },
    {
        id: 18,
        assignee: 'Cleo Hart',
        assigneeAvatar: assigneeAvatars['Cleo Hart'],
        project: 'Care flow',
        region: 'Norway',
        status: 'Qualified',
    },
    {
        id: 19,
        assignee: 'Cleo Hart',
        assigneeAvatar: assigneeAvatars['Cleo Hart'],
        project: 'Warranty claims',
        region: 'Finland',
        status: 'Proposal',
    },
    {
        id: 20,
        assignee: 'Cleo Hart',
        assigneeAvatar: assigneeAvatars['Cleo Hart'],
        project: 'Asset audits',
        region: 'Czech Republic',
        status: 'New',
    },
];

const groupedRows = rows.reduce<Record<string, DemoGroupedRow[]>>((groups, row) => {
    if (!groups[row.assignee]) {
        groups[row.assignee] = [];
    }

    groups[row.assignee].push(row);
    return groups;
}, {});

const TableGroupedStickyRowsExample = () => (
    <Table rowKey='id' gridLines>
        <TableHeader>
            <TableHeaderColumn columnKey='project'>Project</TableHeaderColumn>
            <TableHeaderColumn columnKey='region'>Region</TableHeaderColumn>
            <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
        </TableHeader>

        <TableBody maxHeight={320}>
            {Object.entries(groupedRows).flatMap(([assignee, groupRows]) => [
                <TableGroupRow key={`group-${assignee}`} sticky>
                    <div className='display-flex align-items-center gap-10'>
                        <Avatar image={groupRows[0]?.assigneeAvatar} name={assignee} size={35} />
                        <span className='text-bold'>{assignee}</span>
                    </div>
                </TableGroupRow>,
                ...groupRows.map(row => (
                    <TableRow key={row.id} id={row.id} data-testid={row.id}>
                        <TableColumn>{row.project}</TableColumn>
                        <TableColumn>{row.region}</TableColumn>
                        <TableColumn>{row.status}</TableColumn>
                    </TableRow>
                )),
                <TableGroupFooterRow key={`group-footer-${assignee}`} className='text-right text-medium'>
                    Total projects for {assignee}: {groupRows.length}
                </TableGroupFooterRow>,
            ])}
        </TableBody>
    </Table>
);

export default TableGroupedStickyRowsExample;
```

#### HTML (html)

```html
<div class="table table-view-table table-grid-lines 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="project" 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">Project</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="region" 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">Region</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 role="presentation" class="table-body-scroll-wrapper smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: auto; min-height: 0px; max-height: 320px;">
        <div class="scrollbar-view" style="position: relative; overflow: scroll; margin-right: 0px; margin-bottom: 0px; min-height: 0px; max-height: calc(320px);">
            <div class="scrollbar-content-wrapper">
                <div class="table-body" role="rowgroup">
                    <div class="table-row table-row-group table-row-group-sticky table-row-sticky-in-container" data-index="0" data-row-id="group-0" role="row">
                        <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                            <div class="table-cell-content">
                                <div class="display-flex align-items-center gap-10">
                                    <div class="Avatar bg-lighter" style="height: 35px;">
                                        <img src="https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait/male/512/31.jpg" alt="Amy Elsner" class="Avatar-image" draggable="false">
                                    </div>
                                    <span class="text-bold">Amy Elsner</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="1" data-testid="1" 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="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Landing remake</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">France</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">Proposal</div>
                        </div>
                    </div>
                    <div id="2" data-testid="2" 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="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Dealer portal</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Belgium</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">Qualified</div>
                        </div>
                    </div>
                    <div id="3" data-testid="3" class="table-row" data-index="3" data-row-id="3" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Fleet rollout</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Netherlands</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">Negotiation</div>
                        </div>
                    </div>
                    <div id="4" data-testid="4" class="table-row" data-index="4" data-row-id="4" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Brand refresh</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Spain</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">Qualified</div>
                        </div>
                    </div>
                    <div id="5" data-testid="5" class="table-row" data-index="5" data-row-id="5" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Service launch</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Italy</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">Proposal</div>
                        </div>
                    </div>
                    <div class="table-row table-row-group-footer text-right text-medium" data-index="6" role="row">
                        <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                            <div class="table-cell-content">Total projects for Amy Elsner: 5</div>
                        </div>
                    </div>
                    <div class="table-row table-row-group table-row-group-sticky table-row-sticky-in-container" data-index="7" data-row-id="group-7" role="row">
                        <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                            <div class="table-cell-content">
                                <div class="display-flex align-items-center gap-10">
                                    <div class="Avatar bg-lighter" style="height: 35px;">
                                        <img src="https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait/male/512/71.jpg" alt="Anna Fali" class="Avatar-image" draggable="false">
                                    </div>
                                    <span class="text-bold">Anna Fali</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="6" data-testid="6" class="table-row" data-index="8" data-row-id="6" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Mobile app</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Romania</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">Qualified</div>
                        </div>
                    </div>
                    <div id="7" data-testid="7" class="table-row" data-index="9" data-row-id="7" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Driver onboarding</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Slovenia</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">New</div>
                        </div>
                    </div>
                    <div id="8" data-testid="8" class="table-row" data-index="10" data-row-id="8" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Workshop flow</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Croatia</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">Proposal</div>
                        </div>
                    </div>
                    <div id="9" data-testid="9" class="table-row" data-index="11" data-row-id="9" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Inspection app</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Hungary</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">Negotiation</div>
                        </div>
                    </div>
                    <div id="10" data-testid="10" class="table-row" data-index="12" data-row-id="10" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Logbook sync</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Poland</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">Qualified</div>
                        </div>
                    </div>
                    <div class="table-row table-row-group-footer text-right text-medium" data-index="13" role="row">
                        <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                            <div class="table-cell-content">Total projects for Anna Fali: 5</div>
                        </div>
                    </div>
                    <div class="table-row table-row-group table-row-group-sticky table-row-sticky-in-container" data-index="14" data-row-id="group-14" role="row">
                        <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                            <div class="table-cell-content">
                                <div class="display-flex align-items-center gap-10">
                                    <div class="Avatar bg-lighter" style="height: 35px;">
                                        <img src="https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait/male/512/54.jpg" alt="Ben Turner" class="Avatar-image" draggable="false">
                                    </div>
                                    <span class="text-bold">Ben Turner</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="11" data-testid="11" class="table-row" data-index="15" data-row-id="11" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Analytics refresh</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Germany</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">Negotiation</div>
                        </div>
                    </div>
                    <div id="12" data-testid="12" class="table-row" data-index="16" data-row-id="12" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Service dashboard</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Austria</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">Qualified</div>
                        </div>
                    </div>
                    <div id="13" data-testid="13" class="table-row" data-index="17" data-row-id="13" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Spare parts sync</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Switzerland</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">Proposal</div>
                        </div>
                    </div>
                    <div id="14" data-testid="14" class="table-row" data-index="18" data-row-id="14" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Claims portal</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Denmark</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">New</div>
                        </div>
                    </div>
                    <div id="15" data-testid="15" class="table-row" data-index="19" data-row-id="15" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Contract review</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Sweden</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">Qualified</div>
                        </div>
                    </div>
                    <div class="table-row table-row-group-footer text-right text-medium" data-index="20" role="row">
                        <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                            <div class="table-cell-content">Total projects for Ben Turner: 5</div>
                        </div>
                    </div>
                    <div class="table-row table-row-group table-row-group-sticky table-row-sticky-in-container" data-index="21" data-row-id="group-21" role="row">
                        <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                            <div class="table-cell-content">
                                <div class="display-flex align-items-center gap-10">
                                    <div class="Avatar bg-lighter" style="height: 35px;">
                                        <img src="https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait/male/512/23.jpg" alt="Cleo Hart" class="Avatar-image" draggable="false">
                                    </div>
                                    <span class="text-bold">Cleo Hart</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="16" data-testid="16" class="table-row" data-index="22" data-row-id="16" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Retail campaign</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Portugal</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">Proposal</div>
                        </div>
                    </div>
                    <div id="17" data-testid="17" class="table-row" data-index="23" data-row-id="17" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Partner hub</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Ireland</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">Negotiation</div>
                        </div>
                    </div>
                    <div id="18" data-testid="18" class="table-row" data-index="24" data-row-id="18" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Care flow</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Norway</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">Qualified</div>
                        </div>
                    </div>
                    <div id="19" data-testid="19" class="table-row" data-index="25" data-row-id="19" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Warranty claims</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Finland</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">Proposal</div>
                        </div>
                    </div>
                    <div id="20" data-testid="20" class="table-row" data-index="26" data-row-id="20" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Asset audits</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Czech Republic</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">New</div>
                        </div>
                    </div>
                    <div class="table-row table-row-group-footer text-right text-medium" data-index="27" role="row">
                        <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                            <div class="table-cell-content">Total projects for Cleo Hart: 5</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
            <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
            </div>
        </div>
        <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
            <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Sticky row

Use <TableRow sticky /> to keep a single row pinned at the top of a scrollable TableBody. This is useful for highlighted or pinned entries that should stay visible while the rest of the body scrolls.

### Example: Example 25

Customer

Issue

Priority

Northwind Fleet

Escalated maintenance case

Pinned

Alpine Logistics

Brake wear alert

Medium

Blue Harbor

Delivery slot conflict

Low

Cargo Rail

Route deviation review

Medium

Delta Mobility

Telematics offline

High

Evergreen Transport

Driver handover

Low

Fastlane Service

Warranty claim

Medium

Global Parts

Replacement ETA

High

Horizon Cargo

Inspection overdue

Medium

Interfleet

Battery health check

Low

Jetway Trucks

Workshop reschedule

Medium

#### React (tsx)

```tsx
import { useState } from 'react';

import Table, {
    TableBody,
    TableColumn,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    TableStickyRowButton,
} from '@rio-cloud/rio-uikit/Table';

type DemoStickyRow = {
    id: number;
    customer: string;
    issue: string;
    priority: string;
};

const stickyRow: DemoStickyRow = {
    id: 101,
    customer: 'Northwind Fleet',
    issue: 'Escalated maintenance case',
    priority: 'Pinned',
};

const rows: DemoStickyRow[] = [
    stickyRow,
    { id: 1, customer: 'Alpine Logistics', issue: 'Brake wear alert', priority: 'Medium' },
    { id: 2, customer: 'Blue Harbor', issue: 'Delivery slot conflict', priority: 'Low' },
    { id: 3, customer: 'Cargo Rail', issue: 'Route deviation review', priority: 'Medium' },
    { id: 4, customer: 'Delta Mobility', issue: 'Telematics offline', priority: 'High' },
    { id: 5, customer: 'Evergreen Transport', issue: 'Driver handover', priority: 'Low' },
    { id: 6, customer: 'Fastlane Service', issue: 'Warranty claim', priority: 'Medium' },
    { id: 7, customer: 'Global Parts', issue: 'Replacement ETA', priority: 'High' },
    { id: 8, customer: 'Horizon Cargo', issue: 'Inspection overdue', priority: 'Medium' },
    { id: 9, customer: 'Interfleet', issue: 'Battery health check', priority: 'Low' },
    { id: 10, customer: 'Jetway Trucks', issue: 'Workshop reschedule', priority: 'Medium' },
];

const TableStickyRowExample = () => {
    const [stickyRowId, setStickyRowId] = useState<number | null>(stickyRow.id);

    return (
        <Table rowKey='id'>
            <TableHeader>
                <TableHeaderColumn columnKey='customer'>Customer</TableHeaderColumn>
                <TableHeaderColumn columnKey='issue'>Issue</TableHeaderColumn>
                <TableHeaderColumn columnKey='priority'>Priority</TableHeaderColumn>
                <TableHeaderColumn columnKey='action' width={100} />
            </TableHeader>

            <TableBody maxHeight={300}>
                {rows.map(row => {
                    const isSticky = stickyRowId === row.id;

                    return (
                        <TableRow
                            key={row.id}
                            sticky={isSticky}
                            id={row.id}
                            className={isSticky ? 'text-medium' : undefined}
                        >
                            <TableColumn>{row.customer}</TableColumn>
                            <TableColumn>{row.issue}</TableColumn>
                            <TableColumn>{row.priority}</TableColumn>
                            <TableColumn>
                                <TableStickyRowButton
                                    active={isSticky}
                                    onClick={() => setStickyRowId(currentId => (currentId === row.id ? null : row.id))}
                                />
                            </TableColumn>
                        </TableRow>
                    );
                })}
            </TableBody>
        </Table>
    );
};

export default TableStickyRowExample;
```

#### HTML (html)

```html
<div class="table table-view-table border table-rounded table-has-head" role="table" style="--table-columns: minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(0, 100px); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
    <div class="table-head" role="rowgroup">
        <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="customer" 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">Customer</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="issue" 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">Issue</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="priority" 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">Priority</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="action" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div role="presentation" class="table-body-scroll-wrapper smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: auto; min-height: 0px; max-height: 300px;">
        <div class="scrollbar-view" style="position: relative; overflow: scroll; margin-right: 0px; margin-bottom: 0px; min-height: 0px; max-height: calc(300px);">
            <div class="scrollbar-content-wrapper">
                <div class="table-body" role="rowgroup">
                    <div id="101" class="table-row table-row-sticky table-row-sticky-in-container text-medium" data-index="0" data-row-id="101" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="customer" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Northwind Fleet</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="issue" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Escalated maintenance case</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="priority" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Pinned</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="action" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <button type="button" class="btn btn-muted btn-sm active btn-icon-only btn-component table-sticky-row-button" tabindex="0">
                                    <span class="rioglyph rioglyph-pushpin transition-all transition-ease-in-out transition-duration-01 transform-origin-center rotate-315">
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="1" 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="customer" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Alpine Logistics</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="issue" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Brake wear alert</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="priority" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Medium</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="action" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component table-sticky-row-button" tabindex="0">
                                    <span class="rioglyph rioglyph-pushpin transition-all transition-ease-in-out transition-duration-01 transform-origin-center rotate-360">
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="2" 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="customer" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Blue Harbor</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="issue" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Delivery slot conflict</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="priority" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Low</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="action" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component table-sticky-row-button" tabindex="0">
                                    <span class="rioglyph rioglyph-pushpin transition-all transition-ease-in-out transition-duration-01 transform-origin-center rotate-360">
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="3" class="table-row" data-index="3" data-row-id="3" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="customer" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Cargo Rail</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="issue" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Route deviation review</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="priority" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Medium</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="action" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component table-sticky-row-button" tabindex="0">
                                    <span class="rioglyph rioglyph-pushpin transition-all transition-ease-in-out transition-duration-01 transform-origin-center rotate-360">
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="4" class="table-row" data-index="4" data-row-id="4" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="customer" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Delta Mobility</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="issue" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Telematics offline</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="priority" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">High</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="action" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component table-sticky-row-button" tabindex="0">
                                    <span class="rioglyph rioglyph-pushpin transition-all transition-ease-in-out transition-duration-01 transform-origin-center rotate-360">
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="5" class="table-row" data-index="5" data-row-id="5" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="customer" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Evergreen Transport</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="issue" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Driver handover</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="priority" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Low</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="action" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component table-sticky-row-button" tabindex="0">
                                    <span class="rioglyph rioglyph-pushpin transition-all transition-ease-in-out transition-duration-01 transform-origin-center rotate-360">
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="6" class="table-row" data-index="6" data-row-id="6" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="customer" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Fastlane Service</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="issue" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Warranty claim</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="priority" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Medium</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="action" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component table-sticky-row-button" tabindex="0">
                                    <span class="rioglyph rioglyph-pushpin transition-all transition-ease-in-out transition-duration-01 transform-origin-center rotate-360">
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="7" class="table-row" data-index="7" data-row-id="7" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="customer" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Global Parts</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="issue" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Replacement ETA</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="priority" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">High</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="action" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component table-sticky-row-button" tabindex="0">
                                    <span class="rioglyph rioglyph-pushpin transition-all transition-ease-in-out transition-duration-01 transform-origin-center rotate-360">
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="8" class="table-row" data-index="8" data-row-id="8" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="customer" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Horizon Cargo</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="issue" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Inspection overdue</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="priority" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Medium</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="action" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component table-sticky-row-button" tabindex="0">
                                    <span class="rioglyph rioglyph-pushpin transition-all transition-ease-in-out transition-duration-01 transform-origin-center rotate-360">
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="9" class="table-row" data-index="9" data-row-id="9" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="customer" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Interfleet</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="issue" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Battery health check</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="priority" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Low</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="action" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component table-sticky-row-button" tabindex="0">
                                    <span class="rioglyph rioglyph-pushpin transition-all transition-ease-in-out transition-duration-01 transform-origin-center rotate-360">
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="10" class="table-row" data-index="10" data-row-id="10" role="row">
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="customer" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Jetway Trucks</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="issue" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Workshop reschedule</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="priority" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Medium</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="action" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component table-sticky-row-button" tabindex="0">
                                    <span class="rioglyph rioglyph-pushpin transition-all transition-ease-in-out transition-duration-01 transform-origin-center rotate-360">
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
            <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
            </div>
        </div>
        <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
            <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Sticky first column

Use stickyColumns={{ left: 1 }} to keep the currently first visible data column fixed on the left in table view. The sticky column follows column reordering, while full-width group rows remain untouched.

> Note: Sticky columns currently work reliably only when no TableBody maxHeight is set.

> Note

Sticky columns currently work reliably only when no TableBody maxHeight is set.

### Example: Vehicle access handover

Request

Owner

Reviewer

Channel

Site

ETA

Status

Priority

To pick up a draggable item, press the space bar.
While dragging, use the arrow keys to move the item.
Press space again to drop the item in its new position, or press escape to cancel.

Morning shift

REQ-3004 Vehicle access handover

Mila Santos

Ava Schneider

Portal

North checkpoint

08:15

Open

High

REQ-3021 Dock appointment update

Jonas Richter

Noah Weber

Email

West loading ramp

09:40

In progress

Medium

2 requests in morning shift

Night shift

REQ-3057 Archive retention review

Noah Weber

Mila Santos

Phone

Central records desk

19:10

Blocked

Low

REQ-3072 Supplier onboarding slot

Nora Klein

Jonas Richter

Walk-in

South service gate

20:30

Done

Medium

2 requests in night shift

Total requests

0 selected

Grouped rows Show multiselect checkboxes Show footer

#### React (tsx)

```tsx
import { useState } from 'react';

import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
import Table, {
    TableBody,
    TableColumn,
    TableFooter,
    TableGroupFooterRow,
    TableGroupRow,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    type TableRowId,
} from '@rio-cloud/rio-uikit/Table';

type DemoStickyFirstColumnRow = {
    channel: 'Email' | 'Phone' | 'Portal' | 'Walk-in';
    eta: string;
    id: string;
    owner: string;
    priority: 'High' | 'Low' | 'Medium';
    request: string;
    reviewer: string;
    segment: 'Morning shift' | 'Night shift';
    site: string;
    status: 'Blocked' | 'Done' | 'In progress' | 'Open';
};

type DemoStickyFirstColumnHeader = {
    key: 'request' | 'owner' | 'reviewer' | 'channel' | 'site' | 'eta' | 'status' | 'priority';
    label: string;
    width: number;
};

const rows: DemoStickyFirstColumnRow[] = [
    {
        id: 'REQ-3004',
        request: 'Vehicle access handover',
        owner: 'Mila Santos',
        reviewer: 'Ava Schneider',
        channel: 'Portal',
        site: 'North checkpoint',
        eta: '08:15',
        status: 'Open',
        priority: 'High',
        segment: 'Morning shift',
    },
    {
        id: 'REQ-3021',
        request: 'Dock appointment update',
        owner: 'Jonas Richter',
        reviewer: 'Noah Weber',
        channel: 'Email',
        site: 'West loading ramp',
        eta: '09:40',
        status: 'In progress',
        priority: 'Medium',
        segment: 'Morning shift',
    },
    {
        id: 'REQ-3057',
        request: 'Archive retention review',
        owner: 'Noah Weber',
        reviewer: 'Mila Santos',
        channel: 'Phone',
        site: 'Central records desk',
        eta: '19:10',
        status: 'Blocked',
        priority: 'Low',
        segment: 'Night shift',
    },
    {
        id: 'REQ-3072',
        request: 'Supplier onboarding slot',
        owner: 'Nora Klein',
        reviewer: 'Jonas Richter',
        channel: 'Walk-in',
        site: 'South service gate',
        eta: '20:30',
        status: 'Done',
        priority: 'Medium',
        segment: 'Night shift',
    },
];

const initialColumns: DemoStickyFirstColumnHeader[] = [
    { key: 'request', label: 'Request', width: 280 },
    { key: 'owner', label: 'Owner', width: 180 },
    { key: 'reviewer', label: 'Reviewer', width: 180 },
    { key: 'channel', label: 'Channel', width: 150 },
    { key: 'site', label: 'Site', width: 240 },
    { key: 'eta', label: 'ETA', width: 120 },
    { key: 'status', label: 'Status', width: 180 },
    { key: 'priority', label: 'Priority', width: 140 },
];

const resolvePriorityBadgeClassName = (priority: DemoStickyFirstColumnRow['priority']) => {
    switch (priority) {
        case 'High':
            return 'badge badge-danger';
        case 'Medium':
            return 'badge badge-warning';
        default:
            return 'badge badge-muted';
    }
};

const TableStickyFirstColumnExample = () => {
    const [grouped, setGrouped] = useState(true);
    const [showSelectionColumn, setShowSelectionColumn] = useState(true);
    const [showFooter, setShowFooter] = useState(true);
    const [selectedRowIds, setSelectedRowIds] = useState<TableRowId[]>([]);

    const groupedRows = [
        {
            segment: 'Morning shift' as const,
            rows: rows.filter(row => row.segment === 'Morning shift'),
        },
        {
            segment: 'Night shift' as const,
            rows: rows.filter(row => row.segment === 'Night shift'),
        },
    ];

    const renderCellContent = (row: DemoStickyFirstColumnRow, columnKey: DemoStickyFirstColumnHeader['key']) => {
        switch (columnKey) {
            case 'request':
                return (
                    <div className='display-flex flex-column'>
                        <span className='text-medium'>{row.id}</span>
                        <span className='text-color-dark'>{row.request}</span>
                    </div>
                );
            case 'owner':
                return row.owner;
            case 'reviewer':
                return row.reviewer;
            case 'channel':
                return row.channel;
            case 'site':
                return row.site;
            case 'eta':
                return row.eta;
            case 'status':
                return row.status;
            case 'priority':
                return <span className={resolvePriorityBadgeClassName(row.priority)}>{row.priority}</span>;
            default:
                return null;
        }
    };

    return (
        <div>
            <Table
                rowKey='id'
                hover
                showSelectionColumn={showSelectionColumn}
                stickyColumns={{ left: 1, footer: true }}
                selectedRowIds={selectedRowIds}
                onSelectionChange={setSelectedRowIds}
            >
                <TableHeader>
                    {initialColumns.map(column => (
                        <TableHeaderColumn key={column.key} columnKey={column.key} width={column.width} draggable>
                            {column.label}
                        </TableHeaderColumn>
                    ))}
                </TableHeader>

                <TableBody>
                    {grouped
                        ? groupedRows.flatMap(group => [
                              <TableGroupRow key={`group-${group.segment}`}>{group.segment}</TableGroupRow>,
                              ...group.rows.map(row => (
                                  <TableRow key={row.id} id={row.id}>
                                      {initialColumns.map(column => (
                                          <TableColumn key={`${row.id}-${column.key}`} columnKey={column.key}>
                                              {renderCellContent(row, column.key)}
                                          </TableColumn>
                                      ))}
                                  </TableRow>
                              )),
                              <TableGroupFooterRow
                                  key={`group-footer-${group.segment}`}
                                  className='text-right text-medium'
                              >
                                  {group.rows.length} requests in {group.segment.toLowerCase()}
                              </TableGroupFooterRow>,
                          ])
                        : rows.map(row => (
                              <TableRow key={row.id} id={row.id}>
                                  {initialColumns.map(column => (
                                      <TableColumn key={`${row.id}-${column.key}`} columnKey={column.key}>
                                          {renderCellContent(row, column.key)}
                                      </TableColumn>
                                  ))}
                              </TableRow>
                          ))}
                </TableBody>

                {showFooter && (
                    <TableFooter>
                        <TableColumn columnKey='request'>Total requests</TableColumn>
                        <TableColumn columnKey='owner'>
                            <span className='text-medium'>{selectedRowIds.length} selected</span>
                        </TableColumn>
                        <TableColumn columnKey='reviewer' />
                        <TableColumn columnKey='channel' />
                        <TableColumn columnKey='site' />
                        <TableColumn columnKey='eta' />
                        <TableColumn columnKey='status' />
                        <TableColumn columnKey='priority' />
                    </TableFooter>
                )}
            </Table>

            <div className='margin-top-15 margin-left-10'>
                <div className='display-flex flex-column gap-10'>
                    <Checkbox
                        checked={grouped}
                        label='Grouped rows'
                        onChange={() => setGrouped(currentValue => !currentValue)}
                    />
                    <Checkbox
                        checked={showSelectionColumn}
                        label='Show multiselect checkboxes'
                        onChange={() => setShowSelectionColumn(currentValue => !currentValue)}
                    />
                    <Checkbox
                        checked={showFooter}
                        label='Show footer'
                        onChange={() => setShowFooter(currentValue => !currentValue)}
                    />
                </div>
            </div>
        </div>
    );
};

export default TableStickyFirstColumnExample;
```

#### HTML (html)

```html
<div>
    <div class="table table-view-table table-hover border table-rounded table-has-head table-has-footer table-allow-horizontal-overflow table-has-horizontal-scroll-end-offset" role="table" style="--table-columns: 50px minmax(0, 280px) minmax(0, 180px) minmax(0, 180px) minmax(0, 150px) minmax(0, 240px) minmax(0, 120px) minmax(0, 180px) minmax(0, 140px); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3 table-col-4 table-col-5 table-col-6 table-col-7 table-col-8&quot;; --table-column-count: 9; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="9">
        <div class="overflow-x-auto" role="presentation">
            <div class="table-scroll-content" role="presentation">
                <div class="table-head" role="rowgroup">
                    <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
                        <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-selection-control">
                                <label class="checkbox" tabindex="0">
                                    <input type="checkbox" class="">
                                    <span class="checkbox-text">
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-draggable table-head-cell-sticky-left-column table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="request" role="columnheader" aria-colindex="2" aria-rowindex="1" style="grid-area: 1 / 2 / span 1 / span 1; transition: transform linear;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-3">
                                        <span class="table-head-label">Request</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="owner" role="columnheader" aria-colindex="3" aria-rowindex="1" style="grid-area: 1 / 3 / span 1 / span 1; transition: transform linear;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-3">
                                        <span class="table-head-label">Owner</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="reviewer" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1; transition: transform linear;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-3">
                                        <span class="table-head-label">Reviewer</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="channel" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1; transition: transform linear;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-3">
                                        <span class="table-head-label">Channel</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="site" role="columnheader" aria-colindex="6" aria-rowindex="1" style="grid-area: 1 / 6 / span 1 / span 1; transition: transform linear;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-3">
                                        <span class="table-head-label">Site</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="eta" role="columnheader" aria-colindex="7" aria-rowindex="1" style="grid-area: 1 / 7 / span 1 / span 1; transition: transform linear;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-3">
                                        <span class="table-head-label">ETA</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="8" aria-rowindex="1" style="grid-area: 1 / 8 / span 1 / span 1; transition: transform linear;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-3">
                                        <span class="table-head-label">Status</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-draggable table-align-left table-vertical-align-middle" data-column="priority" role="columnheader" aria-colindex="9" aria-rowindex="1" style="grid-area: 1 / 9 / span 1 / span 1; transition: transform linear;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-3">
                                        <span class="table-head-label">Priority</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div id="DndDescribedBy-3" style="display: none;">
                            To pick up a draggable item, press the space bar.
                            While dragging, use the arrow keys to move the item.
                            Press space again to drop the item in its new position, or press escape to cancel.
                        </div>
                        <div id="DndLiveRegion-3" role="status" aria-live="assertive" aria-atomic="true" style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%); white-space: nowrap;">
                        </div>
                    </div>
                </div>
                <div class="table-body" role="rowgroup">
                    <div class="table-row table-row-group" data-index="0" data-row-id="group-0" role="row">
                        <div class="table-cell table-group-cell" role="cell" aria-colspan="9">
                            <div class="table-cell-content">Morning shift</div>
                        </div>
                    </div>
                    <div id="REQ-3004" class="table-row" data-index="1" data-row-id="REQ-3004" role="row">
                        <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-selection-control">
                                <label class="checkbox" tabindex="0">
                                    <input type="checkbox" class="">
                                    <span class="checkbox-text">
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div class="table-cell table-cell-sticky-left-column table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <div class="display-flex flex-column">
                                    <span class="text-medium">REQ-3004</span>
                                    <span class="text-color-dark">Vehicle access handover</span>
                                </div>
                            </div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Mila Santos</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="reviewer" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Ava Schneider</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="channel" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Portal</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="site" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">North checkpoint</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">08:15</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="8" style="grid-area: 1 / 8 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Open</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="priority" role="cell" aria-colindex="9" style="grid-area: 1 / 9 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <span class="badge badge-danger">High</span>
                            </div>
                        </div>
                    </div>
                    <div id="REQ-3021" class="table-row" data-index="2" data-row-id="REQ-3021" role="row">
                        <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-selection-control">
                                <label class="checkbox" tabindex="0">
                                    <input type="checkbox" class="">
                                    <span class="checkbox-text">
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div class="table-cell table-cell-sticky-left-column table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <div class="display-flex flex-column">
                                    <span class="text-medium">REQ-3021</span>
                                    <span class="text-color-dark">Dock appointment update</span>
                                </div>
                            </div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Jonas Richter</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="reviewer" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Noah Weber</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="channel" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Email</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="site" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">West loading ramp</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">09:40</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="8" style="grid-area: 1 / 8 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">In progress</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="priority" role="cell" aria-colindex="9" style="grid-area: 1 / 9 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <span class="badge badge-warning">Medium</span>
                            </div>
                        </div>
                    </div>
                    <div class="table-row table-row-group-footer text-right text-medium" data-index="3" role="row">
                        <div class="table-cell table-group-cell" role="cell" aria-colspan="9">
                            <div class="table-cell-content">2 requests in morning shift</div>
                        </div>
                    </div>
                    <div class="table-row table-row-group" data-index="4" data-row-id="group-4" role="row">
                        <div class="table-cell table-group-cell" role="cell" aria-colspan="9">
                            <div class="table-cell-content">Night shift</div>
                        </div>
                    </div>
                    <div id="REQ-3057" class="table-row" data-index="5" data-row-id="REQ-3057" role="row">
                        <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-selection-control">
                                <label class="checkbox" tabindex="0">
                                    <input type="checkbox" class="">
                                    <span class="checkbox-text">
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div class="table-cell table-cell-sticky-left-column table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <div class="display-flex flex-column">
                                    <span class="text-medium">REQ-3057</span>
                                    <span class="text-color-dark">Archive retention review</span>
                                </div>
                            </div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Noah Weber</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="reviewer" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Mila Santos</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="channel" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Phone</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="site" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Central records desk</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">19:10</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="8" style="grid-area: 1 / 8 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Blocked</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="priority" role="cell" aria-colindex="9" style="grid-area: 1 / 9 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <span class="badge badge-muted">Low</span>
                            </div>
                        </div>
                    </div>
                    <div id="REQ-3072" class="table-row" data-index="6" data-row-id="REQ-3072" role="row">
                        <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-selection-control">
                                <label class="checkbox" tabindex="0">
                                    <input type="checkbox" class="">
                                    <span class="checkbox-text">
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div class="table-cell table-cell-sticky-left-column table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <div class="display-flex flex-column">
                                    <span class="text-medium">REQ-3072</span>
                                    <span class="text-color-dark">Supplier onboarding slot</span>
                                </div>
                            </div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Nora Klein</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="reviewer" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Jonas Richter</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="channel" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Walk-in</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="site" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">South service gate</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">20:30</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="8" style="grid-area: 1 / 8 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Done</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="priority" role="cell" aria-colindex="9" style="grid-area: 1 / 9 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <span class="badge badge-warning">Medium</span>
                            </div>
                        </div>
                    </div>
                    <div class="table-row table-row-group-footer text-right text-medium" data-index="7" role="row">
                        <div class="table-cell table-group-cell" role="cell" aria-colspan="9">
                            <div class="table-cell-content">2 requests in night shift</div>
                        </div>
                    </div>
                </div>
                <div class="table-footer" role="rowgroup">
                    <div class="table-row table-row-footer" role="row">
                        <div class="table-cell table-footer-cell table-footer-cell-sticky-left-column table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Total requests</div>
                        </div>
                        <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <span class="text-medium">0 selected</span>
                            </div>
                        </div>
                        <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="reviewer" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                            </div>
                        </div>
                        <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="channel" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                            </div>
                        </div>
                        <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="site" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                            </div>
                        </div>
                        <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                            </div>
                        </div>
                        <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="8" style="grid-area: 1 / 8 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                            </div>
                        </div>
                        <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="priority" role="cell" aria-colindex="9" style="grid-area: 1 / 9 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="margin-top-15 margin-left-10">
        <div class="display-flex flex-column gap-10">
            <label class="checkbox" tabindex="0">
                <input type="checkbox" class="" checked="">
                <span class="checkbox-text">
                    <span>Grouped rows</span>
                </span>
            </label>
            <label class="checkbox" tabindex="0">
                <input type="checkbox" class="" checked="">
                <span class="checkbox-text">
                    <span>Show multiselect checkboxes</span>
                </span>
            </label>
            <label class="checkbox" tabindex="0">
                <input type="checkbox" class="" checked="">
                <span class="checkbox-text">
                    <span>Show footer</span>
                </span>
            </label>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Sticky last column

Use stickyColumns={{ right: 1 }} to keep the currently last visible data column fixed on the right in table view. This is useful for row actions, because the action buttons remain visible even when the user scrolls horizontally, and the selection column does not affect which data column stays sticky.

> Note: Sticky columns currently work reliably only when no TableBody maxHeight is set.

> Note

Sticky columns currently work reliably only when no TableBody maxHeight is set.

### Example: Vehicle access handover

Request

Owner

Reviewer

Channel

Site

ETA

Status

Actions

To pick up a draggable item, press the space bar.
While dragging, use the arrow keys to move the item.
Press space again to drop the item in its new position, or press escape to cancel.

Morning shift

REQ-3004 Vehicle access handover

Mila Santos

Ava Schneider

Portal

North checkpoint

08:15

Open

Open

REQ-3021 Dock appointment update

Jonas Richter

Noah Weber

Email

West loading ramp

09:40

In progress

Open

2 requests in morning shift

Night shift

REQ-3057 Archive retention review

Noah Weber

Mila Santos

Phone

Central records desk

19:10

Blocked

Open

REQ-3072 Supplier onboarding slot

Nora Klein

Jonas Richter

Walk-in

South service gate

20:30

Done

Open

2 requests in night shift

Total requests

0 selected

Export

Grouped rows Show multiselect checkboxes Show footer

#### React (tsx)

```tsx
import { useState } from 'react';

import Button from '@rio-cloud/rio-uikit/Button';
import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
import Table, {
    TableBody,
    TableColumn,
    TableFooter,
    TableGroupFooterRow,
    TableGroupRow,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    type TableRowId,
} from '@rio-cloud/rio-uikit/Table';

type DemoStickyLastColumnRow = {
    channel: 'Email' | 'Phone' | 'Portal' | 'Walk-in';
    eta: string;
    id: string;
    owner: string;
    request: string;
    reviewer: string;
    segment: 'Morning shift' | 'Night shift';
    site: string;
    status: 'Blocked' | 'Done' | 'In progress' | 'Open';
};

type DemoStickyLastColumnHeader = {
    key: 'request' | 'owner' | 'reviewer' | 'channel' | 'site' | 'eta' | 'status' | 'actions';
    label: string;
    width: number;
};

const rows: DemoStickyLastColumnRow[] = [
    {
        id: 'REQ-3004',
        request: 'Vehicle access handover',
        owner: 'Mila Santos',
        reviewer: 'Ava Schneider',
        channel: 'Portal',
        site: 'North checkpoint',
        eta: '08:15',
        status: 'Open',
        segment: 'Morning shift',
    },
    {
        id: 'REQ-3021',
        request: 'Dock appointment update',
        owner: 'Jonas Richter',
        reviewer: 'Noah Weber',
        channel: 'Email',
        site: 'West loading ramp',
        eta: '09:40',
        status: 'In progress',
        segment: 'Morning shift',
    },
    {
        id: 'REQ-3057',
        request: 'Archive retention review',
        owner: 'Noah Weber',
        reviewer: 'Mila Santos',
        channel: 'Phone',
        site: 'Central records desk',
        eta: '19:10',
        status: 'Blocked',
        segment: 'Night shift',
    },
    {
        id: 'REQ-3072',
        request: 'Supplier onboarding slot',
        owner: 'Nora Klein',
        reviewer: 'Jonas Richter',
        channel: 'Walk-in',
        site: 'South service gate',
        eta: '20:30',
        status: 'Done',
        segment: 'Night shift',
    },
];

const initialColumns: DemoStickyLastColumnHeader[] = [
    { key: 'request', label: 'Request', width: 280 },
    { key: 'owner', label: 'Owner', width: 180 },
    { key: 'reviewer', label: 'Reviewer', width: 180 },
    { key: 'channel', label: 'Channel', width: 150 },
    { key: 'site', label: 'Site', width: 240 },
    { key: 'eta', label: 'ETA', width: 120 },
    { key: 'status', label: 'Status', width: 180 },
    { key: 'actions', label: 'Actions', width: 140 },
];

const TableStickyLastColumnExample = () => {
    const [grouped, setGrouped] = useState(true);
    const [showSelectionColumn, setShowSelectionColumn] = useState(true);
    const [showFooter, setShowFooter] = useState(true);
    const [selectedRowIds, setSelectedRowIds] = useState<TableRowId[]>([]);

    const groupedRows = [
        {
            segment: 'Morning shift' as const,
            rows: rows.filter(row => row.segment === 'Morning shift'),
        },
        {
            segment: 'Night shift' as const,
            rows: rows.filter(row => row.segment === 'Night shift'),
        },
    ];

    const renderCellContent = (row: DemoStickyLastColumnRow, columnKey: DemoStickyLastColumnHeader['key']) => {
        switch (columnKey) {
            case 'request':
                return (
                    <div className='display-flex flex-column'>
                        <span className='text-medium'>{row.id}</span>
                        <span className='text-color-dark'>{row.request}</span>
                    </div>
                );
            case 'owner':
                return row.owner;
            case 'reviewer':
                return row.reviewer;
            case 'channel':
                return row.channel;
            case 'site':
                return row.site;
            case 'eta':
                return row.eta;
            case 'status':
                return row.status;
            case 'actions':
                return (
                    <ButtonToolbar alignment='right'>
                        <Button bsStyle='primary' bsSize='sm'>
                            Open
                        </Button>
                        <Button
                            bsStyle='default'
                            bsSize='sm'
                            iconName='rioglyph-pencil'
                            iconOnly
                            title='Edit request'
                        />
                    </ButtonToolbar>
                );
            default:
                return null;
        }
    };

    return (
        <div>
            <Table
                rowKey='id'
                hover
                showSelectionColumn={showSelectionColumn}
                stickyColumns={{ right: 1, footer: true }}
                selectedRowIds={selectedRowIds}
                onSelectionChange={setSelectedRowIds}
            >
                <TableHeader>
                    {initialColumns.map(column => (
                        <TableHeaderColumn
                            key={column.key}
                            columnKey={column.key}
                            width={column.width}
                            draggable
                            horizontalAlign={column.key === 'actions' ? 'right' : undefined}
                        >
                            {column.label}
                        </TableHeaderColumn>
                    ))}
                </TableHeader>

                <TableBody>
                    {grouped
                        ? groupedRows.flatMap(group => [
                              <TableGroupRow key={`group-${group.segment}`}>{group.segment}</TableGroupRow>,
                              ...group.rows.map(row => (
                                  <TableRow key={row.id} id={row.id}>
                                      {initialColumns.map(column => (
                                          <TableColumn
                                              key={`${row.id}-${column.key}`}
                                              columnKey={column.key}
                                              horizontalAlign={column.key === 'actions' ? 'right' : undefined}
                                              preventRowClick={column.key === 'actions'}
                                          >
                                              {renderCellContent(row, column.key)}
                                          </TableColumn>
                                      ))}
                                  </TableRow>
                              )),
                              <TableGroupFooterRow
                                  key={`group-footer-${group.segment}`}
                                  className='text-right text-medium'
                              >
                                  {group.rows.length} requests in {group.segment.toLowerCase()}
                              </TableGroupFooterRow>,
                          ])
                        : rows.map(row => (
                              <TableRow key={row.id} id={row.id}>
                                  {initialColumns.map(column => (
                                      <TableColumn
                                          key={`${row.id}-${column.key}`}
                                          columnKey={column.key}
                                          horizontalAlign={column.key === 'actions' ? 'right' : undefined}
                                          preventRowClick={column.key === 'actions'}
                                      >
                                          {renderCellContent(row, column.key)}
                                      </TableColumn>
                                  ))}
                              </TableRow>
                          ))}
                </TableBody>

                {showFooter && (
                    <TableFooter>
                        <TableColumn columnKey='request'>Total requests</TableColumn>
                        <TableColumn columnKey='owner'>
                            <span className='text-medium'>{selectedRowIds.length} selected</span>
                        </TableColumn>
                        <TableColumn columnKey='reviewer' />
                        <TableColumn columnKey='channel' />
                        <TableColumn columnKey='site' />
                        <TableColumn columnKey='eta' />
                        <TableColumn columnKey='status' />
                        <TableColumn columnKey='actions' horizontalAlign='right'>
                            <Button bsStyle='primary' bsSize='sm' iconName='rioglyph-download'>
                                Export
                            </Button>
                        </TableColumn>
                    </TableFooter>
                )}
            </Table>

            <div className='margin-top-15 margin-left-10'>
                <div className='display-flex flex-column gap-10'>
                    <Checkbox
                        checked={grouped}
                        label='Grouped rows'
                        onChange={() => setGrouped(currentValue => !currentValue)}
                    />
                    <Checkbox
                        checked={showSelectionColumn}
                        label='Show multiselect checkboxes'
                        onChange={() => setShowSelectionColumn(currentValue => !currentValue)}
                    />
                    <Checkbox
                        checked={showFooter}
                        label='Show footer'
                        onChange={() => setShowFooter(currentValue => !currentValue)}
                    />
                </div>
            </div>
        </div>
    );
};

export default TableStickyLastColumnExample;
```

#### HTML (html)

```html
<div>
    <div class="table table-view-table table-hover border table-rounded table-has-head table-has-footer table-allow-horizontal-overflow table-has-horizontal-scroll-end-offset" role="table" style="--table-columns: 50px minmax(0, 280px) minmax(0, 180px) minmax(0, 180px) minmax(0, 150px) minmax(0, 240px) minmax(0, 120px) minmax(0, 180px) minmax(0, 140px); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3 table-col-4 table-col-5 table-col-6 table-col-7 table-col-8&quot;; --table-column-count: 9; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="9">
        <div class="overflow-x-auto" role="presentation">
            <div class="table-scroll-content" role="presentation">
                <div class="table-head" role="rowgroup">
                    <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
                        <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-selection-control">
                                <label class="checkbox" tabindex="0">
                                    <input type="checkbox" class="">
                                    <span class="checkbox-text">
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="request" role="columnheader" aria-colindex="2" aria-rowindex="1" style="grid-area: 1 / 2 / span 1 / span 1; transition: transform linear;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-4">
                                        <span class="table-head-label">Request</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="owner" role="columnheader" aria-colindex="3" aria-rowindex="1" style="grid-area: 1 / 3 / span 1 / span 1; transition: transform linear;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-4">
                                        <span class="table-head-label">Owner</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="reviewer" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1; transition: transform linear;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-4">
                                        <span class="table-head-label">Reviewer</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="channel" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1; transition: transform linear;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-4">
                                        <span class="table-head-label">Channel</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="site" role="columnheader" aria-colindex="6" aria-rowindex="1" style="grid-area: 1 / 6 / span 1 / span 1; transition: transform linear;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-4">
                                        <span class="table-head-label">Site</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="eta" role="columnheader" aria-colindex="7" aria-rowindex="1" style="grid-area: 1 / 7 / span 1 / span 1; transition: transform linear;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-4">
                                        <span class="table-head-label">ETA</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="8" aria-rowindex="1" style="grid-area: 1 / 8 / span 1 / span 1; transition: transform linear;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-4">
                                        <span class="table-head-label">Status</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-draggable table-head-cell-sticky-right-column table-align-right table-vertical-align-middle" data-column="actions" role="columnheader" aria-colindex="9" aria-rowindex="1" style="grid-area: 1 / 9 / span 1 / span 1; transition: transform linear;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-4">
                                        <span class="table-head-label">Actions</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div id="DndDescribedBy-4" style="display: none;">
                            To pick up a draggable item, press the space bar.
                            While dragging, use the arrow keys to move the item.
                            Press space again to drop the item in its new position, or press escape to cancel.
                        </div>
                        <div id="DndLiveRegion-4" role="status" aria-live="assertive" aria-atomic="true" style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%); white-space: nowrap;">
                        </div>
                    </div>
                </div>
                <div class="table-body" role="rowgroup">
                    <div class="table-row table-row-group" data-index="0" data-row-id="group-0" role="row">
                        <div class="table-cell table-group-cell" role="cell" aria-colspan="9">
                            <div class="table-cell-content">Morning shift</div>
                        </div>
                    </div>
                    <div id="REQ-3004" class="table-row" data-index="1" data-row-id="REQ-3004" role="row">
                        <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-selection-control">
                                <label class="checkbox" tabindex="0">
                                    <input type="checkbox" class="">
                                    <span class="checkbox-text">
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <div class="display-flex flex-column">
                                    <span class="text-medium">REQ-3004</span>
                                    <span class="text-color-dark">Vehicle access handover</span>
                                </div>
                            </div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Mila Santos</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="reviewer" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Ava Schneider</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="channel" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Portal</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="site" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">North checkpoint</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">08:15</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="8" style="grid-area: 1 / 8 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Open</div>
                        </div>
                        <div class="table-cell table-cell-sticky-right-column table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="9" style="grid-area: 1 / 9 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <div class="btn-toolbar justify-content-end">
                                    <button type="button" class="btn btn-primary btn-sm btn-component" tabindex="0">Open</button>
                                    <button type="button" title="Edit request" class="btn btn-default btn-sm btn-icon-only btn-component" tabindex="0">
                                        <span class="rioglyph rioglyph-pencil">
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="REQ-3021" class="table-row" data-index="2" data-row-id="REQ-3021" role="row">
                        <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-selection-control">
                                <label class="checkbox" tabindex="0">
                                    <input type="checkbox" class="">
                                    <span class="checkbox-text">
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <div class="display-flex flex-column">
                                    <span class="text-medium">REQ-3021</span>
                                    <span class="text-color-dark">Dock appointment update</span>
                                </div>
                            </div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Jonas Richter</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="reviewer" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Noah Weber</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="channel" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Email</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="site" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">West loading ramp</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">09:40</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="8" style="grid-area: 1 / 8 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">In progress</div>
                        </div>
                        <div class="table-cell table-cell-sticky-right-column table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="9" style="grid-area: 1 / 9 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <div class="btn-toolbar justify-content-end">
                                    <button type="button" class="btn btn-primary btn-sm btn-component" tabindex="0">Open</button>
                                    <button type="button" title="Edit request" class="btn btn-default btn-sm btn-icon-only btn-component" tabindex="0">
                                        <span class="rioglyph rioglyph-pencil">
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table-row table-row-group-footer text-right text-medium" data-index="3" role="row">
                        <div class="table-cell table-group-cell" role="cell" aria-colspan="9">
                            <div class="table-cell-content">2 requests in morning shift</div>
                        </div>
                    </div>
                    <div class="table-row table-row-group" data-index="4" data-row-id="group-4" role="row">
                        <div class="table-cell table-group-cell" role="cell" aria-colspan="9">
                            <div class="table-cell-content">Night shift</div>
                        </div>
                    </div>
                    <div id="REQ-3057" class="table-row" data-index="5" data-row-id="REQ-3057" role="row">
                        <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-selection-control">
                                <label class="checkbox" tabindex="0">
                                    <input type="checkbox" class="">
                                    <span class="checkbox-text">
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <div class="display-flex flex-column">
                                    <span class="text-medium">REQ-3057</span>
                                    <span class="text-color-dark">Archive retention review</span>
                                </div>
                            </div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Noah Weber</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="reviewer" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Mila Santos</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="channel" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Phone</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="site" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Central records desk</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">19:10</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="8" style="grid-area: 1 / 8 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Blocked</div>
                        </div>
                        <div class="table-cell table-cell-sticky-right-column table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="9" style="grid-area: 1 / 9 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <div class="btn-toolbar justify-content-end">
                                    <button type="button" class="btn btn-primary btn-sm btn-component" tabindex="0">Open</button>
                                    <button type="button" title="Edit request" class="btn btn-default btn-sm btn-icon-only btn-component" tabindex="0">
                                        <span class="rioglyph rioglyph-pencil">
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="REQ-3072" class="table-row" data-index="6" data-row-id="REQ-3072" role="row">
                        <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-selection-control">
                                <label class="checkbox" tabindex="0">
                                    <input type="checkbox" class="">
                                    <span class="checkbox-text">
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <div class="display-flex flex-column">
                                    <span class="text-medium">REQ-3072</span>
                                    <span class="text-color-dark">Supplier onboarding slot</span>
                                </div>
                            </div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Nora Klein</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="reviewer" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Jonas Richter</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="channel" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Walk-in</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="site" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">South service gate</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">20:30</div>
                        </div>
                        <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="8" style="grid-area: 1 / 8 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Done</div>
                        </div>
                        <div class="table-cell table-cell-sticky-right-column table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="9" style="grid-area: 1 / 9 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <div class="btn-toolbar justify-content-end">
                                    <button type="button" class="btn btn-primary btn-sm btn-component" tabindex="0">Open</button>
                                    <button type="button" title="Edit request" class="btn btn-default btn-sm btn-icon-only btn-component" tabindex="0">
                                        <span class="rioglyph rioglyph-pencil">
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table-row table-row-group-footer text-right text-medium" data-index="7" role="row">
                        <div class="table-cell table-group-cell" role="cell" aria-colspan="9">
                            <div class="table-cell-content">2 requests in night shift</div>
                        </div>
                    </div>
                </div>
                <div class="table-footer" role="rowgroup">
                    <div class="table-row table-row-footer" role="row">
                        <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="request" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">Total requests</div>
                        </div>
                        <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <span class="text-medium">0 selected</span>
                            </div>
                        </div>
                        <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="reviewer" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                            </div>
                        </div>
                        <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="channel" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                            </div>
                        </div>
                        <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="site" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                            </div>
                        </div>
                        <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                            </div>
                        </div>
                        <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="8" style="grid-area: 1 / 8 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                            </div>
                        </div>
                        <div class="table-cell table-footer-cell table-footer-cell-sticky-right-column table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="9" style="grid-area: 1 / 9 / span 1 / span 1;">
                            <div class="table-cell-content overflow-hidden">
                                <button type="button" class="btn btn-primary btn-sm btn-component" tabindex="0">
                                    <span class="rioglyph rioglyph-download">
                                    </span>Export</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="margin-top-15 margin-left-10">
        <div class="display-flex flex-column gap-10">
            <label class="checkbox" tabindex="0">
                <input type="checkbox" class="" checked="">
                <span class="checkbox-text">
                    <span>Grouped rows</span>
                </span>
            </label>
            <label class="checkbox" tabindex="0">
                <input type="checkbox" class="" checked="">
                <span class="checkbox-text">
                    <span>Show multiselect checkboxes</span>
                </span>
            </label>
            <label class="checkbox" tabindex="0">
                <input type="checkbox" class="" checked="">
                <span class="checkbox-text">
                    <span>Show footer</span>
                </span>
            </label>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Spacer rows

### Example: Example 28

Checkpoint

Shipment

Window

Status

Berlin hub

TRK-2041

08:00 - 09:30

On time

Nürnberg ramp

TRK-1888

09:15 - 10:00

Delayed

Halle cross-dock

TRK-1752

10:00 - 11:00

On time

Munich dispatch

TRK-2204

13:00 - 14:00

Ready

Nürnberg depot

TRK-2310

14:15 - 15:00

On hold

#### React (tsx)

```tsx
import Table, {
    TableBody,
    TableColumn,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    TableSpacerRow,
} from '@rio-cloud/rio-uikit/Table';

type DemoSpacerRow = {
    id: string;
    checkpoint: string;
    shipment: string;
    window: string;
    status: string;
};

const rows: DemoSpacerRow[] = [
    {
        id: 'inbound-1',
        checkpoint: 'Berlin hub',
        shipment: 'TRK-2041',
        window: '08:00 - 09:30',
        status: 'On time',
    },
    {
        id: 'inbound-2',
        checkpoint: 'Nürnberg ramp',
        shipment: 'TRK-1888',
        window: '09:15 - 10:00',
        status: 'Delayed',
    },
    {
        id: 'inbound-3',
        checkpoint: 'Halle cross-dock',
        shipment: 'TRK-1752',
        window: '10:00 - 11:00',
        status: 'On time',
    },
    {
        id: 'outbound-1',
        checkpoint: 'Munich dispatch',
        shipment: 'TRK-2204',
        window: '13:00 - 14:00',
        status: 'Ready',
    },
    {
        id: 'outbound-2',
        checkpoint: 'Nürnberg depot',
        shipment: 'TRK-2310',
        window: '14:15 - 15:00',
        status: 'On hold',
    },
];

const TableRowKindsExample = () => (
    <Table rowKey='id' hover>
        <TableHeader>
            <TableHeaderColumn columnKey='checkpoint'>Checkpoint</TableHeaderColumn>
            <TableHeaderColumn columnKey='shipment'>Shipment</TableHeaderColumn>
            <TableHeaderColumn resizeable columnKey='window'>
                Window
            </TableHeaderColumn>
            <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
        </TableHeader>

        <TableBody>
            {rows.slice(0, 2).map(row => (
                <TableRow key={row.id} id={row.id}>
                    <TableColumn>{row.checkpoint}</TableColumn>
                    <TableColumn>{row.shipment}</TableColumn>
                    <TableColumn>{row.window}</TableColumn>
                    <TableColumn>{row.status}</TableColumn>
                </TableRow>
            ))}

            <TableSpacerRow />

            {rows.slice(2, 4).map(row => (
                <TableRow key={row.id} id={row.id}>
                    <TableColumn>{row.checkpoint}</TableColumn>
                    <TableColumn>{row.shipment}</TableColumn>
                    <TableColumn>{row.window}</TableColumn>
                    <TableColumn>{row.status}</TableColumn>
                </TableRow>
            ))}

            <TableSpacerRow />

            {rows.slice(4).map(row => (
                <TableRow key={row.id} id={row.id}>
                    <TableColumn>{row.checkpoint}</TableColumn>
                    <TableColumn>{row.shipment}</TableColumn>
                    <TableColumn>{row.window}</TableColumn>
                    <TableColumn>{row.status}</TableColumn>
                </TableRow>
            ))}
        </TableBody>
    </Table>
);

export default TableRowKindsExample;
```

#### HTML (html)

```html
<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) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
    <div class="table-head" role="rowgroup">
        <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="checkpoint" 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">Checkpoint</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="shipment" 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">Shipment</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="window" 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">Window</span>
                        </span>
                    </div>
                </div>
                <div class="table-column-resize-handle">
                </div>
            </div>
            <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Status</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table-body" role="rowgroup">
        <div id="inbound-1" class="table-row" data-index="0" data-row-id="inbound-1" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Berlin hub</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">TRK-2041</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">08:00 - 09:30</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">On time</div>
            </div>
        </div>
        <div id="inbound-2" class="table-row" data-index="1" data-row-id="inbound-2" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Nürnberg ramp</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">TRK-1888</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">09:15 - 10:00</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Delayed</div>
            </div>
        </div>
        <div class="table-row table-row-spacer" data-index="2" role="presentation">
            <div class="table-cell table-spacer-cell" role="presentation">
            </div>
        </div>
        <div id="inbound-3" class="table-row" data-index="3" data-row-id="inbound-3" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Halle cross-dock</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">TRK-1752</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">10:00 - 11:00</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">On time</div>
            </div>
        </div>
        <div id="outbound-1" class="table-row" data-index="4" data-row-id="outbound-1" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Munich dispatch</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">TRK-2204</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">13:00 - 14:00</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Ready</div>
            </div>
        </div>
        <div class="table-row table-row-spacer" data-index="5" role="presentation">
            <div class="table-cell table-spacer-cell" role="presentation">
            </div>
        </div>
        <div id="outbound-2" class="table-row" data-index="6" data-row-id="outbound-2" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Nürnberg depot</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">TRK-2310</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">14:15 - 15:00</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">On hold</div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Multi-row header

### Example: Example 29

Product

Metric

Years

2023

2024

2025

Product 1

Income

50

70

80

Product 1

Profit

13

7

10

Product 2

Income

50

67

79

Product 2

Profit

17

-3

19

Total Profit

30

4

29

#### React (tsx)

```tsx
import Table, {
    TableBody,
    TableColumn,
    TableFooter,
    TableHeader,
    TableHeaderColumn,
    TableHeaderRow,
    TableRow,
    TableSpacerRow,
} from '@rio-cloud/rio-uikit/Table';
import { Fragment } from 'react';

type DemoFinancialRow = {
    id: string;
    product: string;
    metric: string;
    year2023: string;
    year2024: string;
    year2025: string;
};

const tableStyle = {
    border: true,
    gridLines: true,
    rounded: true,
};

const rows: DemoFinancialRow[] = [
    { id: '1', product: 'Product 1', metric: 'Income', year2023: '50', year2024: '70', year2025: '80' },
    { id: '2', product: 'Product 1', metric: 'Profit', year2023: '13', year2024: '7', year2025: '10' },
    { id: '3', product: 'Product 2', metric: 'Income', year2023: '50', year2024: '67', year2025: '79' },
    { id: '4', product: 'Product 2', metric: 'Profit', year2023: '17', year2024: '-3', year2025: '19' },
];

const totalProfit = rows
    .filter(row => row.metric === 'Profit')
    .reduce(
        (totals, row) => ({
            year2023: totals.year2023 + Number(row.year2023),
            year2024: totals.year2024 + Number(row.year2024),
            year2025: totals.year2025 + Number(row.year2025),
        }),
        { year2023: 0, year2024: 0, year2025: 0 }
    );

const TableMultiRowHeaderExample = () => (
    <div>
        <Table rowKey='id' {...tableStyle}>
            <TableHeader>
                <TableHeaderRow>
                    <TableHeaderColumn columnKey='product' rowSpan={2} verticalAlign='bottom'>
                        Product
                    </TableHeaderColumn>
                    <TableHeaderColumn columnKey='metric' rowSpan={2} verticalAlign='bottom'>
                        Metric
                    </TableHeaderColumn>
                    <TableHeaderColumn colSpan={3} horizontalAlign='center'>
                        Years
                    </TableHeaderColumn>
                </TableHeaderRow>
                <TableHeaderRow>
                    <TableHeaderColumn columnKey='year2023' horizontalAlign='right'>
                        2023
                    </TableHeaderColumn>
                    <TableHeaderColumn columnKey='year2024' horizontalAlign='right'>
                        2024
                    </TableHeaderColumn>
                    <TableHeaderColumn columnKey='year2025' horizontalAlign='right'>
                        2025
                    </TableHeaderColumn>
                </TableHeaderRow>
            </TableHeader>

            <TableBody>
                {rows.map((row, index) => (
                    <Fragment key={row.id}>
                        {index === 2 && <TableSpacerRow key='product-spacer' />}
                        <TableRow key={row.id} id={row.id}>
                            <TableColumn>{row.product}</TableColumn>
                            <TableColumn>{row.metric}</TableColumn>
                            <TableColumn horizontalAlign='right'>{row.year2023}</TableColumn>
                            <TableColumn horizontalAlign='right'>{row.year2024}</TableColumn>
                            <TableColumn horizontalAlign='right'>{row.year2025}</TableColumn>
                        </TableRow>
                    </Fragment>
                ))}
            </TableBody>

            <TableFooter className='bg-white text-bold'>
                <TableColumn colSpan={2}>Total Profit</TableColumn>
                <TableColumn horizontalAlign='right'>{totalProfit.year2023}</TableColumn>
                <TableColumn horizontalAlign='right'>{totalProfit.year2024}</TableColumn>
                <TableColumn horizontalAlign='right'>{totalProfit.year2025}</TableColumn>
            </TableFooter>
        </Table>
    </div>
);

export default TableMultiRowHeaderExample;
```

#### HTML (html)

```html
<div>
    <div class="table table-view-table table-grid-lines border table-rounded table-has-head table-has-footer" role="table" style="--table-columns: minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4 table-col-5&quot;; --table-column-count: 5; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="5">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid" role="presentation" style="grid-template-rows: repeat(2, auto);">
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-bottom" data-column="product" role="columnheader" aria-colindex="1" aria-rowindex="1" aria-rowspan="2" style="grid-area: 1 / 1 / span 2 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Product</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-bottom" data-column="metric" role="columnheader" aria-colindex="2" aria-rowindex="1" aria-rowspan="2" style="grid-area: 1 / 2 / span 2 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Metric</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-row-divider table-align-center table-vertical-align-middle" data-column=":r3s:" role="columnheader" aria-colindex="3" aria-colspan="3" aria-rowindex="1" style="grid-area: 1 / 3 / span 1 / span 3;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Years</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-right table-vertical-align-middle" data-column="year2023" role="columnheader" aria-colindex="3" aria-rowindex="2" style="grid-area: 2 / 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">2023</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-right table-vertical-align-middle" data-column="year2024" role="columnheader" aria-colindex="4" aria-rowindex="2" style="grid-area: 2 / 4 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">2024</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-align-right table-vertical-align-middle" data-column="year2025" role="columnheader" aria-colindex="5" aria-rowindex="2" style="grid-area: 2 / 5 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">2025</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-body" role="rowgroup">
            <div id="1" class="table-row" data-index="0" data-row-id="1" role="row">
                <div class="table-cell table-align-left table-vertical-align-bottom" data-column="product" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Product 1</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-bottom" data-column="metric" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Income</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="year2023" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">50</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="year2024" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">70</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="year2025" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">80</div>
                </div>
            </div>
            <div id="2" class="table-row" data-index="1" data-row-id="2" role="row">
                <div class="table-cell table-align-left table-vertical-align-bottom" data-column="product" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Product 1</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-bottom" data-column="metric" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Profit</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="year2023" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">13</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="year2024" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">7</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="year2025" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">10</div>
                </div>
            </div>
            <div class="table-row table-row-spacer" data-index="2" role="presentation">
                <div class="table-cell table-spacer-cell" role="presentation">
                </div>
            </div>
            <div id="3" class="table-row" data-index="3" data-row-id="3" role="row">
                <div class="table-cell table-align-left table-vertical-align-bottom" data-column="product" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Product 2</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-bottom" data-column="metric" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Income</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="year2023" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">50</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="year2024" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">67</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="year2025" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">79</div>
                </div>
            </div>
            <div id="4" class="table-row" data-index="4" data-row-id="4" role="row">
                <div class="table-cell table-align-left table-vertical-align-bottom" data-column="product" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Product 2</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-bottom" data-column="metric" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Profit</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="year2023" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">17</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="year2024" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">-3</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="year2025" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">19</div>
                </div>
            </div>
        </div>
        <div class="table-footer" role="rowgroup">
            <div class="table-row table-row-footer bg-white text-bold" role="row">
                <div class="table-cell table-footer-cell table-align-left table-vertical-align-bottom" data-column="product" role="cell" aria-colindex="1" aria-colspan="2" style="grid-area: 1 / 1 / span 1 / span 2;">
                    <div class="table-cell-content overflow-hidden">Total Profit</div>
                </div>
                <div class="table-cell table-footer-cell table-align-right table-vertical-align-middle" data-column="year2023" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">30</div>
                </div>
                <div class="table-cell table-footer-cell table-align-right table-vertical-align-middle" data-column="year2024" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">4</div>
                </div>
                <div class="table-cell table-footer-cell table-align-right table-vertical-align-middle" data-column="year2025" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">29</div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Table row states

### Example: Example 30

Head column

Head column

Head column

Head column

Column

Column

Column

Column

Column

Column

Column

info

Column

Column

Column

success

Column

Column

Column

danger

Column

Column

Column

warning

Column

Column

Column

Column

#### React (tsx)

```tsx
import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';

const rows = [
    { id: '1' },
    { id: '2', className: 'info' },
    { id: '3', className: 'success' },
    { id: '4', className: 'danger' },
    { id: '5', className: 'warning' },
    { id: '6' },
];

const tableColumns = ['Head column', 'Head column', 'Head column', 'Head column'];

const TableRowStatesDemo = () => (
    <Table hover>
        <TableHeader>
            {tableColumns.map((columnLabel, index) => (
                <TableHeaderColumn key={`${columnLabel}-${index}`} columnKey={`column-${index + 1}`}>
                    {columnLabel}
                </TableHeaderColumn>
            ))}
        </TableHeader>

        <TableBody>
            {rows.map(row => (
                <TableRow key={row.id} id={row.id} className={row.className}>
                    <TableColumn>
                        <span>Column</span>
                    </TableColumn>
                    <TableColumn>
                        <span>Column</span>
                    </TableColumn>
                    <TableColumn>
                        <span>Column</span>
                    </TableColumn>
                    <TableColumn>
                        <span>{row.className ?? 'Column'}</span>
                    </TableColumn>
                </TableRow>
            ))}
        </TableBody>
    </Table>
);

export default TableRowStatesDemo;
```

#### HTML (html)

```html
<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) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
    <div class="table-head" role="rowgroup">
        <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="column-1" 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">Head column</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="column-2" 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">Head column</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="column-3" 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">Head column</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="column-4" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Head column</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table-body" role="rowgroup">
        <div id="1" 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="column-1" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-2" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-3" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-4" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
        </div>
        <div id="2" class="table-row info" data-index="1" data-row-id="1" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-1" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-2" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-3" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-4" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>info</span>
                </div>
            </div>
        </div>
        <div id="3" class="table-row success" data-index="2" data-row-id="2" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-1" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-2" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-3" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-4" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>success</span>
                </div>
            </div>
        </div>
        <div id="4" class="table-row danger" data-index="3" data-row-id="3" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-1" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-2" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-3" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-4" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>danger</span>
                </div>
            </div>
        </div>
        <div id="5" class="table-row warning" data-index="4" data-row-id="4" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-1" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-2" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-3" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-4" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>warning</span>
                </div>
            </div>
        </div>
        <div id="6" class="table-row" data-index="5" data-row-id="5" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-1" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-2" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-3" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="column-4" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span>Column</span>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Virtualized rows

### Example: Synagoga patruus armarium armarium adsum usitas paulatim suggero accusator volubilis.

500 rows with internal body scrolling and virtualization
Checkpoint

Shipment

Window

Status

Berlin hub
Cold storage
Synagoga patruus armarium armarium adsum usitas paulatim suggero accusator volubilis.

TRK-2000

06:00 - 07:15

Ready
Benevolentia attonbitus auctus cognomen esse custodia clamo perspiciatis apud.

Nürnberg ramp
Cold storage
Territo aveho doloribus omnis adipiscor pectus.

TRK-2001

07:30 - 08:45

Delayed
No additional issues reported

Munich dispatch
North gate
Vociferor titulus cogo alter stella decerno animus deputo adeo verbera.

TRK-2002

08:00 - 09:15

On time
No additional issues reported

Hamburg dock
Cold storage
Color eius incidunt audacia volubilis terga vigor varius.

TRK-2003

09:30 - 10:45

Blocked
No additional issues reported

Cologne gate
Oversize cargo lane
Autus adipisci comparo. Cernuus tribuo consuasor cicuta illo aqua.

TRK-2004

10:00 - 11:15

Ready
Aestas vos ter avarus abscido tot suffragium suspendo tepidus.

Berlin hub
North gate
Urbanus qui comptus. Colo communis suspendo.

TRK-2005

11:30 - 12:45

Delayed
Valens demens animadverto summisse temptatio laudantium tepidus depulso. Cursus acies amita addo repellat comburo dolor.

Nürnberg ramp
Customs inspection
Cunae temeritas calco aestus.

TRK-2006

12:00 - 13:15

On time
No additional issues reported

Munich dispatch
Cold storage
Titulus recusandae ut thymbra audentia vapulus fugit timor vel cometes.

TRK-2007

13:30 - 14:45

Blocked
No additional issues reported

Hamburg dock
North gate
Toties undique absconditus dolorem cur brevis.

TRK-2008

14:00 - 15:15

Ready
Confero vilitas commodi.

Cologne gate
Oversize cargo lane
Convoco volup vivo caste derideo coerceo cinis adfectus.

TRK-2009

15:30 - 16:45

Delayed
No additional issues reported

Berlin hub
Oversize cargo lane
Cibo ver capto. Deporto voro carbo spectaculum.

TRK-2010

06:00 - 07:15

On time
Capio suscipit corona ratione recusandae facilis alioqui truculenter commemoro. Adhaero officiis spiculum acceptus.

Nürnberg ramp
Oversize cargo lane
Ater studio crepusculum video apto confugo amplitudo vesper.

TRK-2011

07:30 - 08:45

Blocked
No additional issues reported

Munich dispatch
Customs inspection
Solutio totidem itaque ex carbo.

TRK-2012

08:00 - 09:15

Ready
Velit velut recusandae.

Hamburg dock
Cold storage
Velit valens termes sapiente ago arx velociter pecto.

TRK-2013

09:30 - 10:45

Delayed
No additional issues reported

Cologne gate
North gate
Abscido arto inflammatio stultus solio caelestis summa capio.

TRK-2014

10:00 - 11:15

On time
No additional issues reported

Berlin hub
Cold storage
Sodalitas ulciscor solum minus aliquid corona celo careo.

TRK-2015

11:30 - 12:45

Blocked
Crudelis vapulus quos theatrum desolo neque depromo autus suppono cicuta. Similique atqui vilicus.

Nürnberg ramp
Customs inspection
Accendo vestrum cursus voco vix. Claustrum creo ullus comes assentator iusto video subito molestiae.

TRK-2016

12:00 - 13:15

Ready
Possimus vulariter apud.

Munich dispatch
Oversize cargo lane
Subiungo subvenio contigo claudeo tolero tollo usque vereor. Desipio theologus sol subvenio theatrum validus confero. Aliquid nesciunt adeptio deleniti illo cito.

TRK-2017

13:30 - 14:45

Delayed
No additional issues reported

Hamburg dock
Oversize cargo lane
Adfero traho contigo.

TRK-2018

14:00 - 15:15

On time
No additional issues reported

#### React (tsx)

```tsx
import { faker } from '@faker-js/faker';

import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';

type DemoVirtualizedRow = {
    id: number;
    checkpoint: string;
    checkpointMeta: string;
    note: string;
    shipment: string;
    window: string;
    status: string;
    statusDetail: string;
};

faker.seed(42);

const checkpointNames = ['Berlin hub', 'Nürnberg ramp', 'Munich dispatch', 'Hamburg dock', 'Cologne gate'];
const statusValues = ['Ready', 'Delayed', 'On time', 'Blocked'];

const rows: DemoVirtualizedRow[] = Array.from({ length: 500 }, (_, index) => ({
    id: index + 1,
    checkpoint: checkpointNames[index % checkpointNames.length] ?? 'Checkpoint',
    checkpointMeta: faker.helpers.arrayElement([
        'North gate',
        'Cold storage',
        'Oversize cargo lane',
        'Customs inspection',
    ]),
    note: faker.lorem.lines({ min: 1, max: (index % 3) + 1 }).replaceAll('\n', ' '),
    shipment: `TRK-${String(2000 + index)}`,
    window: `${String(6 + (index % 10)).padStart(2, '0')}:${index % 2 === 0 ? '00' : '30'} - ${String(
        7 + (index % 10)
    ).padStart(2, '0')}:${index % 2 === 0 ? '15' : '45'}`,
    status: statusValues[index % statusValues.length] ?? 'Ready',
    statusDetail:
        index % 4 === 0
            ? faker.lorem.sentence()
            : index % 5 === 0
              ? faker.lorem.sentences(2)
              : 'No additional issues reported',
}));

const TableVirtualizedRowsExample = () => (
    <div>
        <div className='margin-bottom-15 text-color-darker'>
            500 rows with internal body scrolling and virtualization
        </div>

        <Table rowKey='id' hover virtualizedRows>
            <TableHeader>
                <TableHeaderColumn width={300} columnKey='checkpoint'>
                    Checkpoint
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='shipment'>Shipment</TableHeaderColumn>
                <TableHeaderColumn columnKey='window'>Window</TableHeaderColumn>
                <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
            </TableHeader>

            <TableBody maxHeight={400}>
                {rows.map(row => (
                    <TableRow key={row.id} id={row.id}>
                        <TableColumn>
                            <div className='display-grid gap-5'>
                                <div className='text-bold'>{row.checkpoint}</div>
                                <div className='text-color-gray text-size-90pct'>{row.checkpointMeta}</div>
                                <div className='text-color-dark line-height-125rel'>{row.note}</div>
                            </div>
                        </TableColumn>
                        <TableColumn>{row.shipment}</TableColumn>
                        <TableColumn>{row.window}</TableColumn>
                        <TableColumn>
                            <div className='display-grid gap-5'>
                                <div className='text-bold'>{row.status}</div>
                                <div className='text-color-gray line-height-125rel'>{row.statusDetail}</div>
                            </div>
                        </TableColumn>
                    </TableRow>
                ))}
            </TableBody>
        </Table>
    </div>
);

export default TableVirtualizedRowsExample;
```

#### HTML (html)

```html
<div>
    <div class="margin-bottom-15 text-color-darker">500 rows with internal body scrolling and virtualization</div>
    <div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: minmax(0, 300px) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="checkpoint" 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">Checkpoint</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="shipment" 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">Shipment</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="window" 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">Window</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Status</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div role="presentation" class="table-body-scroll-wrapper smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: auto; min-height: 0px; max-height: 400px;">
            <div class="scrollbar-view" style="position: relative; overflow: scroll; margin-right: 0px; margin-bottom: 0px; min-height: 0px; max-height: calc(400px);">
                <div class="scrollbar-content-wrapper">
                    <div class="table-body" role="rowgroup">
                        <div id="1" class="table-row" data-index="0" data-row-id="1" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Berlin hub</div>
                                        <div class="text-color-gray text-size-90pct">Cold storage</div>
                                        <div class="text-color-dark line-height-125rel">Synagoga patruus armarium armarium adsum usitas paulatim suggero accusator volubilis.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-2000</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">06:00 - 07:15</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Ready</div>
                                        <div class="text-color-gray line-height-125rel">Benevolentia attonbitus auctus cognomen esse custodia clamo perspiciatis apud.</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="2" class="table-row" data-index="1" data-row-id="2" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Nürnberg ramp</div>
                                        <div class="text-color-gray text-size-90pct">Cold storage</div>
                                        <div class="text-color-dark line-height-125rel">Territo aveho doloribus omnis adipiscor pectus.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-2001</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">07:30 - 08:45</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Delayed</div>
                                        <div class="text-color-gray line-height-125rel">No additional issues reported</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="3" class="table-row" data-index="2" data-row-id="3" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Munich dispatch</div>
                                        <div class="text-color-gray text-size-90pct">North gate</div>
                                        <div class="text-color-dark line-height-125rel">Vociferor titulus cogo alter stella decerno animus deputo adeo verbera.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-2002</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">08:00 - 09:15</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">On time</div>
                                        <div class="text-color-gray line-height-125rel">No additional issues reported</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="4" class="table-row" data-index="3" data-row-id="4" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Hamburg dock</div>
                                        <div class="text-color-gray text-size-90pct">Cold storage</div>
                                        <div class="text-color-dark line-height-125rel">Color eius incidunt audacia volubilis terga vigor varius.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-2003</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">09:30 - 10:45</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Blocked</div>
                                        <div class="text-color-gray line-height-125rel">No additional issues reported</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="5" class="table-row" data-index="4" data-row-id="5" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Cologne gate</div>
                                        <div class="text-color-gray text-size-90pct">Oversize cargo lane</div>
                                        <div class="text-color-dark line-height-125rel">Autus adipisci comparo. Cernuus tribuo consuasor cicuta illo aqua.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-2004</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">10:00 - 11:15</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Ready</div>
                                        <div class="text-color-gray line-height-125rel">Aestas vos ter avarus abscido tot suffragium suspendo tepidus.</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="6" class="table-row" data-index="5" data-row-id="6" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Berlin hub</div>
                                        <div class="text-color-gray text-size-90pct">North gate</div>
                                        <div class="text-color-dark line-height-125rel">Urbanus qui comptus. Colo communis suspendo.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-2005</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">11:30 - 12:45</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Delayed</div>
                                        <div class="text-color-gray line-height-125rel">Valens demens animadverto summisse temptatio laudantium tepidus depulso. Cursus acies amita addo repellat comburo dolor.</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="7" class="table-row" data-index="6" data-row-id="7" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Nürnberg ramp</div>
                                        <div class="text-color-gray text-size-90pct">Customs inspection</div>
                                        <div class="text-color-dark line-height-125rel">Cunae temeritas calco aestus.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-2006</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">12:00 - 13:15</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">On time</div>
                                        <div class="text-color-gray line-height-125rel">No additional issues reported</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="8" class="table-row" data-index="7" data-row-id="8" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Munich dispatch</div>
                                        <div class="text-color-gray text-size-90pct">Cold storage</div>
                                        <div class="text-color-dark line-height-125rel">Titulus recusandae ut thymbra audentia vapulus fugit timor vel cometes.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-2007</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">13:30 - 14:45</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Blocked</div>
                                        <div class="text-color-gray line-height-125rel">No additional issues reported</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="9" class="table-row" data-index="8" data-row-id="9" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Hamburg dock</div>
                                        <div class="text-color-gray text-size-90pct">North gate</div>
                                        <div class="text-color-dark line-height-125rel">Toties undique absconditus dolorem cur brevis.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-2008</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">14:00 - 15:15</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Ready</div>
                                        <div class="text-color-gray line-height-125rel">Confero vilitas commodi.</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="10" class="table-row" data-index="9" data-row-id="10" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Cologne gate</div>
                                        <div class="text-color-gray text-size-90pct">Oversize cargo lane</div>
                                        <div class="text-color-dark line-height-125rel">Convoco volup vivo caste derideo coerceo cinis adfectus.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-2009</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">15:30 - 16:45</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Delayed</div>
                                        <div class="text-color-gray line-height-125rel">No additional issues reported</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="11" class="table-row" data-index="10" data-row-id="11" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Berlin hub</div>
                                        <div class="text-color-gray text-size-90pct">Oversize cargo lane</div>
                                        <div class="text-color-dark line-height-125rel">Cibo ver capto. Deporto voro carbo spectaculum.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-2010</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">06:00 - 07:15</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">On time</div>
                                        <div class="text-color-gray line-height-125rel">Capio suscipit corona ratione recusandae facilis alioqui truculenter commemoro. Adhaero officiis spiculum acceptus.</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="12" class="table-row" data-index="11" data-row-id="12" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Nürnberg ramp</div>
                                        <div class="text-color-gray text-size-90pct">Oversize cargo lane</div>
                                        <div class="text-color-dark line-height-125rel">Ater studio crepusculum video apto confugo amplitudo vesper.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-2011</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">07:30 - 08:45</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Blocked</div>
                                        <div class="text-color-gray line-height-125rel">No additional issues reported</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="13" class="table-row" data-index="12" data-row-id="13" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Munich dispatch</div>
                                        <div class="text-color-gray text-size-90pct">Customs inspection</div>
                                        <div class="text-color-dark line-height-125rel">Solutio totidem itaque ex carbo.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-2012</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">08:00 - 09:15</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Ready</div>
                                        <div class="text-color-gray line-height-125rel">Velit velut recusandae.</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="14" class="table-row" data-index="13" data-row-id="14" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Hamburg dock</div>
                                        <div class="text-color-gray text-size-90pct">Cold storage</div>
                                        <div class="text-color-dark line-height-125rel">Velit valens termes sapiente ago arx velociter pecto.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-2013</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">09:30 - 10:45</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="display-grid gap-5">
                                        <div class="text-bold">Delayed</div>
                                        <div class="text-color-gray line-height-125rel">No additional issues reported</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div aria-hidden="true" class="table-body-virtual-spacer" style="height: 53229.3px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
                <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
                </div>
            </div>
            <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
                <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Automatic chunk loading on scroll

For large but still DOM-rendered result sets, you can keep the table inside a fixed-height container and append the next chunk when the body scroll reaches the bottom. This is a good fit when you want progressive loading behavior without switching to virtualization.

### Example: Example 32

The fixed-height container loads 20 additional rows whenever you scroll to the bottom.
Reset loaded chunks
Vehicle

Route

Status

Updated

TRK-4100

Berlin to Hamburg

Ready

06:00

TRK-4101

Munich to Cologne

In transit

07:30

TRK-4102

Bremen to Stuttgart

Delayed

08:00

TRK-4103

Leipzig to Frankfurt

Queued

09:30

TRK-4104

Berlin to Hamburg

Ready

10:00

TRK-4105

Munich to Cologne

In transit

11:30

TRK-4106

Bremen to Stuttgart

Delayed

12:00

TRK-4107

Leipzig to Frankfurt

Queued

13:30

TRK-4108

Berlin to Hamburg

Ready

14:00

TRK-4109

Munich to Cologne

In transit

15:30

TRK-4110

Bremen to Stuttgart

Delayed

06:00

TRK-4111

Leipzig to Frankfurt

Queued

07:30

TRK-4112

Berlin to Hamburg

Ready

08:00

TRK-4113

Munich to Cologne

In transit

09:30

TRK-4114

Bremen to Stuttgart

Delayed

10:00

TRK-4115

Leipzig to Frankfurt

Queued

11:30

TRK-4116

Berlin to Hamburg

Ready

12:00

TRK-4117

Munich to Cologne

In transit

13:30

TRK-4118

Bremen to Stuttgart

Delayed

14:00

TRK-4119

Leipzig to Frankfurt

Queued

15:30

Loaded 20 of 120 rows

#### React (tsx)

```tsx
import { chunk } from 'es-toolkit/compat';
import { useCallback, useMemo, useRef, useState } from 'react';

import Button from '@rio-cloud/rio-uikit/Button';
import Table, {
    TableBody,
    TableColumn,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    type TableBodyHandle,
} from '@rio-cloud/rio-uikit/Table';

type DemoAutoLoadRow = {
    id: number;
    vehicle: string;
    route: string;
    status: string;
    updatedAt: string;
};

const AUTO_LOAD_MORE_THRESHOLD_PX = 24;
const ROW_CHUNK_SIZE = 20;

const rows: DemoAutoLoadRow[] = Array.from({ length: 120 }, (_, index) => ({
    id: index + 1,
    vehicle: `TRK-${String(4100 + index)}`,
    route:
        ['Berlin to Hamburg', 'Munich to Cologne', 'Bremen to Stuttgart', 'Leipzig to Frankfurt'][index % 4] ??
        'Berlin to Hamburg',
    status: ['Ready', 'In transit', 'Delayed', 'Queued'][index % 4] ?? 'Ready',
    updatedAt: `${String(6 + (index % 10)).padStart(2, '0')}:${index % 2 === 0 ? '00' : '30'}`,
}));

const TableAutoLoadMoreOnScrollExample = () => {
    const tableBodyRef = useRef<TableBodyHandle>(null);
    const [chunks, setChunks] = useState(1);

    const chunkedRows = useMemo(() => chunk(rows, ROW_CHUNK_SIZE), []);
    const visibleRows = useMemo(() => chunkedRows.slice(0, chunks).flat(), [chunkedRows, chunks]);
    const hasMoreChunks = chunks < chunkedRows.length;

    const resetChunks = useCallback(() => {
        tableBodyRef.current?.scrollToTop();
        setChunks(1);
    }, []);

    const handleLoadNextChunk = useCallback(() => {
        if (!hasMoreChunks) {
            return;
        }

        setChunks(previousChunks => Math.min(previousChunks + 1, chunkedRows.length));
    }, [chunkedRows.length, hasMoreChunks]);

    return (
        <div>
            <div className='margin-bottom-15 display-flex align-items-center justify-content-between gap-15 flex-wrap'>
                <div className='text-color-darker'>
                    The fixed-height container loads 20 additional rows whenever you scroll to the bottom.
                </div>
                <Button bsStyle='default' onClick={resetChunks}>
                    Reset loaded chunks
                </Button>
            </div>

            <Table rowKey='id' hover>
                <TableHeader>
                    <TableHeaderColumn columnKey='vehicle'>Vehicle</TableHeaderColumn>
                    <TableHeaderColumn columnKey='route'>Route</TableHeaderColumn>
                    <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
                    <TableHeaderColumn columnKey='updatedAt'>Updated</TableHeaderColumn>
                </TableHeader>

                <TableBody
                    ref={tableBodyRef}
                    maxHeight={300}
                    onScrollBottom={handleLoadNextChunk}
                    scrollBottomOffset={AUTO_LOAD_MORE_THRESHOLD_PX}
                >
                    {visibleRows.map(row => (
                        <TableRow key={row.id} id={row.id}>
                            <TableColumn>{row.vehicle}</TableColumn>
                            <TableColumn>{row.route}</TableColumn>
                            <TableColumn>{row.status}</TableColumn>
                            <TableColumn>{row.updatedAt}</TableColumn>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>

            <div className='margin-top-15'>
                Loaded {visibleRows.length} of {rows.length} rows
            </div>
        </div>
    );
};

export default TableAutoLoadMoreOnScrollExample;
```

#### HTML (html)

```html
<div>
    <div class="margin-bottom-15 display-flex align-items-center justify-content-between gap-15 flex-wrap">
        <div class="text-color-darker">The fixed-height container loads 20 additional rows whenever you scroll to the bottom.</div>
        <button type="button" class="btn btn-default btn-component" tabindex="0">Reset loaded chunks</button>
    </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) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="vehicle" 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">Vehicle</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="route" 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">Route</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="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 class="table-head-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper">
                                <span class="table-head-label">Updated</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div role="presentation" class="table-body-scroll-wrapper smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: auto; min-height: 0px; max-height: 300px;">
            <div class="scrollbar-view" style="position: relative; overflow: scroll; margin-right: 0px; margin-bottom: 0px; min-height: 0px; max-height: calc(300px);">
                <div class="scrollbar-content-wrapper">
                    <div class="table-body" role="rowgroup">
                        <div id="1" class="table-row" data-index="0" data-row-id="1" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4100</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Berlin to Hamburg</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">Ready</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">06:00</div>
                            </div>
                        </div>
                        <div id="2" class="table-row" data-index="1" data-row-id="2" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4101</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Munich to Cologne</div>
                            </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">In transit</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">07:30</div>
                            </div>
                        </div>
                        <div id="3" class="table-row" data-index="2" data-row-id="3" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4102</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Bremen to Stuttgart</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">Delayed</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">08:00</div>
                            </div>
                        </div>
                        <div id="4" class="table-row" data-index="3" data-row-id="4" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4103</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Leipzig to Frankfurt</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">Queued</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">09:30</div>
                            </div>
                        </div>
                        <div id="5" class="table-row" data-index="4" data-row-id="5" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4104</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Berlin to Hamburg</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">Ready</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">10:00</div>
                            </div>
                        </div>
                        <div id="6" class="table-row" data-index="5" data-row-id="6" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4105</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Munich to Cologne</div>
                            </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">In transit</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">11:30</div>
                            </div>
                        </div>
                        <div id="7" class="table-row" data-index="6" data-row-id="7" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4106</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Bremen to Stuttgart</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">Delayed</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">12:00</div>
                            </div>
                        </div>
                        <div id="8" class="table-row" data-index="7" data-row-id="8" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4107</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Leipzig to Frankfurt</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">Queued</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">13:30</div>
                            </div>
                        </div>
                        <div id="9" class="table-row" data-index="8" data-row-id="9" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4108</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Berlin to Hamburg</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">Ready</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">14:00</div>
                            </div>
                        </div>
                        <div id="10" class="table-row" data-index="9" data-row-id="10" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4109</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Munich to Cologne</div>
                            </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">In transit</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">15:30</div>
                            </div>
                        </div>
                        <div id="11" class="table-row" data-index="10" data-row-id="11" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4110</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Bremen to Stuttgart</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">Delayed</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">06:00</div>
                            </div>
                        </div>
                        <div id="12" class="table-row" data-index="11" data-row-id="12" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4111</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Leipzig to Frankfurt</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">Queued</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">07:30</div>
                            </div>
                        </div>
                        <div id="13" class="table-row" data-index="12" data-row-id="13" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4112</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Berlin to Hamburg</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">Ready</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">08:00</div>
                            </div>
                        </div>
                        <div id="14" class="table-row" data-index="13" data-row-id="14" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4113</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Munich to Cologne</div>
                            </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">In transit</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">09:30</div>
                            </div>
                        </div>
                        <div id="15" class="table-row" data-index="14" data-row-id="15" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4114</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Bremen to Stuttgart</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">Delayed</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">10:00</div>
                            </div>
                        </div>
                        <div id="16" class="table-row" data-index="15" data-row-id="16" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4115</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Leipzig to Frankfurt</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">Queued</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">11:30</div>
                            </div>
                        </div>
                        <div id="17" class="table-row" data-index="16" data-row-id="17" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4116</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Berlin to Hamburg</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">Ready</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">12:00</div>
                            </div>
                        </div>
                        <div id="18" class="table-row" data-index="17" data-row-id="18" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4117</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Munich to Cologne</div>
                            </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">In transit</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">13:30</div>
                            </div>
                        </div>
                        <div id="19" class="table-row" data-index="18" data-row-id="19" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4118</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Bremen to Stuttgart</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">Delayed</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">14:00</div>
                            </div>
                        </div>
                        <div id="20" class="table-row" data-index="19" data-row-id="20" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">TRK-4119</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">Leipzig to Frankfurt</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">Queued</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="updatedAt" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">15:30</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
                <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
                </div>
            </div>
            <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
                <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
                </div>
            </div>
        </div>
    </div>
    <div class="margin-top-15">Loaded 20 of 120 rows</div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Wrapped table components

Header sections, body rows, and footer content can be factored into separate domain components. This example wraps the table parts into their own components, including a row component with a React hook.

### Example: Example 33

Route

Owner

Status

ETA

Berlin to Hamburg TRK-4201

Maya Stein

Ready Waiting for release

08:45

Munich to Cologne TRK-4208

Jonas Keller

Delayed Needs attention

10:20

Bremen to Stuttgart TRK-4213

Ava Schneider

In transit Currently moving

12:10

Leipzig to Frankfurt TRK-4219

Noah Weber

Blocked Issue unresolved

14:35

4 shipments Header, body, row, and footer are all rendered through wrapper components. 1 delayed shipment

#### React (tsx)

```tsx
import Table, {
    TableBody,
    TableColumn,
    TableFooter,
    TableHeader,
    TableHeaderColumn,
    TableRow,
} from '@rio-cloud/rio-uikit/Table';
import { useMemo } from 'react';

type DemoWrappedComponentsRow = {
    id: string;
    route: string;
    owner: string;
    status: 'Ready' | 'Delayed' | 'Blocked' | 'In transit';
    eta: string;
};

const rows: DemoWrappedComponentsRow[] = [
    {
        id: 'TRK-4201',
        route: 'Berlin to Hamburg',
        owner: 'Maya Stein',
        status: 'Ready',
        eta: '08:45',
    },
    {
        id: 'TRK-4208',
        route: 'Munich to Cologne',
        owner: 'Jonas Keller',
        status: 'Delayed',
        eta: '10:20',
    },
    {
        id: 'TRK-4213',
        route: 'Bremen to Stuttgart',
        owner: 'Ava Schneider',
        status: 'In transit',
        eta: '12:10',
    },
    {
        id: 'TRK-4219',
        route: 'Leipzig to Frankfurt',
        owner: 'Noah Weber',
        status: 'Blocked',
        eta: '14:35',
    },
];

const RouteHeaderColumn = () => <TableHeaderColumn columnKey='route'>Route</TableHeaderColumn>;

const OwnerHeaderColumn = () => <TableHeaderColumn columnKey='owner'>Owner</TableHeaderColumn>;

const StatusHeaderColumn = () => <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>;

const EtaHeaderColumn = () => (
    <TableHeaderColumn columnKey='eta' width={120} horizontalAlign='right'>
        ETA
    </TableHeaderColumn>
);

const WrappedShipmentsHeader = () => (
    <TableHeader>
        <RouteHeaderColumn />
        <OwnerHeaderColumn />
        <StatusHeaderColumn />
        <EtaHeaderColumn />
    </TableHeader>
);

const WrappedShipmentRow = ({ row }: { row: DemoWrappedComponentsRow }) => {
    const statusMeta = useMemo(() => {
        switch (row.status) {
            case 'Ready':
                return { helper: 'Waiting for release', className: 'label label-condensed label-primary' };
            case 'Delayed':
                return { helper: 'Needs attention', className: 'label label-condensed label-warning' };
            case 'Blocked':
                return { helper: 'Issue unresolved', className: 'label label-condensed label-danger' };
            default:
                return { helper: 'Currently moving', className: 'label label-condensed label-info' };
        }
    }, [row.status]);

    return (
        <TableRow id={row.id}>
            <TableColumn columnKey='route'>
                <div className='display-flex flex-column'>
                    <span className='text-bold'>{row.route}</span>
                    <span className='text-color-gray'>{row.id}</span>
                </div>
            </TableColumn>
            <TableColumn columnKey='owner'>{row.owner}</TableColumn>
            <TableColumn columnKey='status'>
                <div className='display-flex flex-column gap-3'>
                    <span>
                        <span className={statusMeta.className}>{row.status}</span>
                    </span>
                    <span className='text-color-gray'>{statusMeta.helper}</span>
                </div>
            </TableColumn>
            <TableColumn columnKey='eta' horizontalAlign='right'>
                {row.eta}
            </TableColumn>
        </TableRow>
    );
};

const WrappedShipmentsBody = ({ rows }: { rows: DemoWrappedComponentsRow[] }) => (
    <TableBody>
        {rows.map(row => (
            <WrappedShipmentRow key={row.id} row={row} />
        ))}
    </TableBody>
);

const WrappedShipmentsFooter = ({ rows }: { rows: DemoWrappedComponentsRow[] }) => {
    const delayedCount = rows.filter(row => row.status === 'Delayed').length;

    return (
        <TableFooter>
            <div className='display-flex align-items-center justify-content-between gap-15'>
                <span className='text-medium'>{rows.length} shipments</span>
                <span className='text-color-darker'>
                    Header, body, row, and footer are all rendered through wrapper components.
                </span>
                <span className='text-color-gray'>{delayedCount} delayed shipment</span>
            </div>
        </TableFooter>
    );
};

const TableWrappedComponentsExample = () => (
    <Table rowKey='id' hover>
        <WrappedShipmentsHeader />
        <WrappedShipmentsBody rows={rows} />
        <WrappedShipmentsFooter rows={rows} />
    </Table>
);

export default TableWrappedComponentsExample;
```

#### HTML (html)

```html
<div class="table table-view-table table-hover border table-rounded table-has-head table-has-footer" role="table" style="--table-columns: minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(0, 120px); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
    <div class="table-head" role="rowgroup">
        <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="route" 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">Route</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="owner" 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">Owner</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="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 class="table-head-cell table-align-right table-vertical-align-middle" data-column="eta" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">ETA</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table-body" role="rowgroup">
        <div id="TRK-4201" class="table-row" data-index="0" data-row-id="TRK-4201" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <div class="display-flex flex-column">
                        <span class="text-bold">Berlin to Hamburg</span>
                        <span class="text-color-gray">TRK-4201</span>
                    </div>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Maya Stein</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">
                    <div class="display-flex flex-column gap-3">
                        <span>
                            <span class="label label-condensed label-primary">Ready</span>
                        </span>
                        <span class="text-color-gray">Waiting for release</span>
                    </div>
                </div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">08:45</div>
            </div>
        </div>
        <div id="TRK-4208" class="table-row" data-index="1" data-row-id="TRK-4208" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <div class="display-flex flex-column">
                        <span class="text-bold">Munich to Cologne</span>
                        <span class="text-color-gray">TRK-4208</span>
                    </div>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Jonas Keller</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">
                    <div class="display-flex flex-column gap-3">
                        <span>
                            <span class="label label-condensed label-warning">Delayed</span>
                        </span>
                        <span class="text-color-gray">Needs attention</span>
                    </div>
                </div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">10:20</div>
            </div>
        </div>
        <div id="TRK-4213" class="table-row" data-index="2" data-row-id="TRK-4213" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <div class="display-flex flex-column">
                        <span class="text-bold">Bremen to Stuttgart</span>
                        <span class="text-color-gray">TRK-4213</span>
                    </div>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Ava Schneider</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">
                    <div class="display-flex flex-column gap-3">
                        <span>
                            <span class="label label-condensed label-info">In transit</span>
                        </span>
                        <span class="text-color-gray">Currently moving</span>
                    </div>
                </div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">12:10</div>
            </div>
        </div>
        <div id="TRK-4219" class="table-row" data-index="3" data-row-id="TRK-4219" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <div class="display-flex flex-column">
                        <span class="text-bold">Leipzig to Frankfurt</span>
                        <span class="text-color-gray">TRK-4219</span>
                    </div>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Noah Weber</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">
                    <div class="display-flex flex-column gap-3">
                        <span>
                            <span class="label label-condensed label-danger">Blocked</span>
                        </span>
                        <span class="text-color-gray">Issue unresolved</span>
                    </div>
                </div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">14:35</div>
            </div>
        </div>
    </div>
    <div class="table-footer table-footer-full-width" role="rowgroup">
        <div class="table-row table-row-footer" role="row">
            <div class="table-cell table-footer-content" role="cell" aria-colspan="4">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center justify-content-between gap-15">
                        <span class="text-medium">4 shipments</span>
                        <span class="text-color-darker">Header, body, row, and footer are all rendered through wrapper components.</span>
                        <span class="text-color-gray">1 delayed shipment</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Custom row separator width

Use rowSeparatorWidth to make the separators between regular body rows visually stronger without changing group rows, footer rows, or full-width expanded rows.

### Example: Example 34

Name

Role

Status

Maya Chen

Operations Lead

Active

Jonas Meyer

Project Owner

In review

Sofia Romano

Service Manager

Planned

#### React (tsx)

```tsx
import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';

const TableRowSeparatorWidthExample = () => (
    <Table hover rowSeparatorWidth={2} border={false}>
        <TableHeader>
            <TableHeaderColumn columnKey='name'>Name</TableHeaderColumn>
            <TableHeaderColumn columnKey='role'>Role</TableHeaderColumn>
            <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
        </TableHeader>

        <TableBody>
            <TableRow id='row-1'>
                <TableColumn columnKey='name'>Maya Chen</TableColumn>
                <TableColumn columnKey='role'>Operations Lead</TableColumn>
                <TableColumn columnKey='status'>Active</TableColumn>
            </TableRow>

            <TableRow id='row-2'>
                <TableColumn columnKey='name'>Jonas Meyer</TableColumn>
                <TableColumn columnKey='role'>Project Owner</TableColumn>
                <TableColumn columnKey='status'>In review</TableColumn>
            </TableRow>

            <TableRow id='row-3'>
                <TableColumn columnKey='name'>Sofia Romano</TableColumn>
                <TableColumn columnKey='role'>Service Manager</TableColumn>
                <TableColumn columnKey='status'>Planned</TableColumn>
            </TableRow>
        </TableBody>
    </Table>
);

export default TableRowSeparatorWidthExample;
```

#### HTML (html)

```html
<div class="table table-view-table table-hover 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-row-separator-width: 2px; --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="name" 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">Name</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="role" 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">Role</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="row-1" 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="name" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Maya Chen</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="role" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Operations Lead</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">Active</div>
            </div>
        </div>
        <div id="row-2" 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="name" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Jonas Meyer</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="role" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Project Owner</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">In review</div>
            </div>
        </div>
        <div id="row-3" 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="name" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Sofia Romano</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="role" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Service Manager</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">Planned</div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Row action buttons

Use row actions with a clear priority and keep the action column visually compact.

Guidelines

- Use named buttons for the primary row action when the label must stay explicit, such asApprove, or Assign.
- Use icon-only buttons only for a single, common action with an unambiguous icon, such as edit, open in new window, or delete in tightly constrained layouts.
- Use a option dropdown for multiple secondary, infrequent, or destructive actions so the row stays scannable. Another pattern is one named action plus the overflow menu for the rest.
- Use a horizontal option button when the actions apply to a single row. This should generally be the default choice for row-level actions. Prefer TableRowActionsDropdown for this pattern so the trigger icon and styling stay consistent across tables.
- Use a vertical option button when providing a “more” menu for multiple rows or when the actions apply to a list as a whole.
- The orientation of the option button should reflect the scope of the actions. Horizontal buttons indicate actions along a single row, while vertical buttons represent actions that span across multiple rows or apply to a broader context.
- Reduce the cell padding in action columns when using muted buttons so the column stays compact.
- Avoid stretching action buttons to fill the full column width. This can lead to layout issues when columns are resized or content changes, and may also create misleading click areas or inconsistent alignment across rows.
- Align action buttons to the right side of the column. This keeps a clear visual separation from the previous column, improves readability, and ensures consistent scanning patterns across the table.
- Combine icons with named buttons where appropriate to reinforce meaning and support faster visual scanning, especially in dense layouts. Only add icons when they are clear and commonly understood — otherwise they can add noise instead of clarity.

### Example: Example 35

Workflow

When to use it

Actions

Invoice review

Clear primary action that should stay visible in every row.

Approve

Driver note

One compact, well-known action where the icon meaning stays obvious.

Archived order

Several secondary actions that should not permanently occupy column width.

Delivery run

One main action plus additional secondary actions.

Assign

#### React (tsx)

```tsx
import Button from '@rio-cloud/rio-uikit/Button';
import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
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 createOverflowItems = (workflow: string) => [
    {
        value: 'Share',
        onSelect: () => Notification.info(`Share ${workflow}`),
    },
    {
        value: 'Duplicate',
        onSelect: () => Notification.info(`Duplicate ${workflow}`),
    },
    {
        divider: true,
    },
    {
        value: 'Archive',
        onSelect: () => Notification.info(`Archive ${workflow}`),
    },
];

const TableRowActionsExample = () => (
    <Table hover>
        <TableHeader>
            <TableHeaderColumn columnKey='workflow' width='20%'>
                Workflow
            </TableHeaderColumn>
            <TableHeaderColumn columnKey='intent'>When to use it</TableHeaderColumn>
            <TableHeaderColumn columnKey='actions' width={180} horizontalAlign='right' className='padding-10'>
                Actions
            </TableHeaderColumn>
        </TableHeader>

        <TableBody>
            <TableRow>
                <TableColumn>Invoice review</TableColumn>
                <TableColumn>Clear primary action that should stay visible in every row.</TableColumn>
                <TableColumn columnKey='actions' horizontalAlign='right' className='padding-10'>
                    <Button
                        bsStyle='primary'
                        iconName='rioglyph-user-ok'
                        onClick={() => Notification.info('Approve invoice review')}
                    >
                        Approve
                    </Button>
                </TableColumn>
            </TableRow>

            <TableRow>
                <TableColumn>Driver note</TableColumn>
                <TableColumn>One compact, well-known action where the icon meaning stays obvious.</TableColumn>
                <TableColumn columnKey='actions' horizontalAlign='right' className='padding-10'>
                    <Button
                        bsStyle='muted'
                        iconName='rioglyph-pencil'
                        iconOnly
                        title='Edit note'
                        onClick={() => Notification.info('Edit driver note')}
                    />
                </TableColumn>
            </TableRow>

            <TableRow>
                <TableColumn>Archived order</TableColumn>
                <TableColumn>Several secondary actions that should not permanently occupy column width.</TableColumn>
                <TableColumn columnKey='actions' horizontalAlign='right' className='padding-10'>
                    <TableRowActionsDropdown items={createOverflowItems('Archived order')} />
                </TableColumn>
            </TableRow>

            <TableRow>
                <TableColumn>Delivery run</TableColumn>
                <TableColumn>One main action plus additional secondary actions.</TableColumn>
                <TableColumn columnKey='actions' horizontalAlign='right' className='padding-10'>
                    <ButtonToolbar alignment='right'>
                        <Button iconName='rioglyph-unassigned' onClick={() => Notification.info('Assign delivery run')}>
                            Assign
                        </Button>
                        <TableRowActionsDropdown items={createOverflowItems('Delivery run')} />
                    </ButtonToolbar>
                </TableColumn>
            </TableRow>
        </TableBody>
    </Table>
);

export default TableRowActionsExample;
```

#### 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) * 20 / 100)) minmax(50px, 1fr) minmax(0, 180px); --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 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">Invoice review</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">Clear primary action that should stay visible in every row.</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">
                    <button type="button" class="btn btn-primary btn-component" tabindex="0">
                        <span class="rioglyph rioglyph-user-ok">
                        </span>Approve</button>
                </div>
            </div>
        </div>
        <div 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">Driver note</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">One compact, well-known action where the icon meaning stays obvious.</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">
                    <button type="button" title="Edit note" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
                        <span class="rioglyph rioglyph-pencil">
                        </span>
                    </button>
                </div>
            </div>
        </div>
        <div 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="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">Several secondary actions that should not permanently occupy column width.</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="5g7klr0140u" 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 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="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">One main action plus additional secondary actions.</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="btn-toolbar justify-content-end">
                        <button type="button" class="btn btn-default btn-component" tabindex="0">
                            <span class="rioglyph rioglyph-unassigned">
                            </span>Assign</button>
                        <div class="dropdown btn-group">
                            <button type="button" aria-label="Row actions" id="ij8ss0aqq7q" 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>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Editable cells

For inline editing, render EditableContent directly inside a table cell and update the corresponding row state on save.

### Example: Example 36

Checkpoint

Owner

Note

Inbound hub

Maya Stein

Needs dock coordination

Cross-dock ramp

Jonas Keller

Waiting for customs release

Outbound dispatch

Sofia Weber

Ready for outbound handover

#### React (tsx)

```tsx
import { useState } from 'react';

import EditableContent from '@rio-cloud/rio-uikit/EditableContent';
import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';

type DemoEditableRow = {
    id: string;
    checkpoint: string;
    owner: string;
    note: string;
};

const initialRows: DemoEditableRow[] = [
    {
        id: 'row-1',
        checkpoint: 'Inbound hub',
        owner: 'Maya Stein',
        note: 'Needs dock coordination',
    },
    {
        id: 'row-2',
        checkpoint: 'Cross-dock ramp',
        owner: 'Jonas Keller',
        note: 'Waiting for customs release',
    },
    {
        id: 'row-3',
        checkpoint: 'Outbound dispatch',
        owner: 'Sofia Weber',
        note: 'Ready for outbound handover',
    },
];

type EditableCellProps = {
    value: string;
    onSave: (value: string) => void;
    inputClassName?: string;
};

const EditableCell = ({ value, onSave, inputClassName }: EditableCellProps) => (
    <EditableContent onSave={onSave} inputClassName={inputClassName}>
        <span className='display-inline-block max-width-100pct border border-bottom-only border-color-gray hover-border-color-darkest border-style-dotted text-truncate'>
            {value || <i>&nbsp;&nbsp;&nbsp;&nbsp;</i>}
        </span>
    </EditableContent>
);

const TableEditableCellsExample = () => {
    const [rows, setRows] = useState(initialRows);

    const updateRowValue = (rowId: string, field: 'owner' | 'note', value: string) => {
        setRows(previousRows => previousRows.map(row => (row.id === rowId ? { ...row, [field]: value } : row)));
    };

    return (
        <Table rowKey='id' hover gridLines>
            <TableHeader>
                <TableHeaderColumn columnKey='checkpoint' width='25%'>
                    Checkpoint
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='owner' width='20%'>
                    Owner
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='note'>Note</TableHeaderColumn>
            </TableHeader>

            <TableBody>
                {rows.map(row => (
                    <TableRow key={row.id} id={row.id}>
                        <TableColumn>{row.checkpoint}</TableColumn>
                        <TableColumn>
                            <EditableCell value={row.owner} onSave={value => updateRowValue(row.id, 'owner', value)} />
                        </TableColumn>
                        <TableColumn>
                            <EditableCell
                                value={row.note}
                                onSave={value => updateRowValue(row.id, 'note', value)}
                                inputClassName='width-300'
                            />
                        </TableColumn>
                    </TableRow>
                ))}
            </TableBody>
        </Table>
    );
};

export default TableEditableCellsExample;
```

#### HTML (html)

```html
<div class="table table-view-table table-hover table-grid-lines border table-rounded table-has-head" role="table" style="--table-columns: minmax(0, calc(var(--table-width) * 25 / 100)) minmax(0, calc(var(--table-width) * 20 / 100)) 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="checkpoint" 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">Checkpoint</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="owner" 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">Owner</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="note" 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">Note</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table-body" role="rowgroup">
        <div id="row-1" class="table-row" data-index="0" data-row-id="row-1" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Inbound hub</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span class="">
                        <span class="display-inline-block max-width-100pct border border-bottom-only border-color-gray hover-border-color-darkest border-style-dotted text-truncate">Maya Stein</span>
                    </span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="note" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span class="">
                        <span class="display-inline-block max-width-100pct border border-bottom-only border-color-gray hover-border-color-darkest border-style-dotted text-truncate">Needs dock coordination</span>
                    </span>
                </div>
            </div>
        </div>
        <div id="row-2" class="table-row" data-index="1" data-row-id="row-2" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Cross-dock ramp</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span class="">
                        <span class="display-inline-block max-width-100pct border border-bottom-only border-color-gray hover-border-color-darkest border-style-dotted text-truncate">Jonas Keller</span>
                    </span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="note" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span class="">
                        <span class="display-inline-block max-width-100pct border border-bottom-only border-color-gray hover-border-color-darkest border-style-dotted text-truncate">Waiting for customs release</span>
                    </span>
                </div>
            </div>
        </div>
        <div id="row-3" class="table-row" data-index="2" data-row-id="row-3" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Outbound dispatch</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="owner" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span class="">
                        <span class="display-inline-block max-width-100pct border border-bottom-only border-color-gray hover-border-color-darkest border-style-dotted text-truncate">Sofia Weber</span>
                    </span>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="note" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <span class="">
                        <span class="display-inline-block max-width-100pct border border-bottom-only border-color-gray hover-border-color-darkest border-style-dotted text-truncate">Ready for outbound handover</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Expandable rows

### Example: Prepared parcels

Checkpoint

Shipment

Window

Status

Berlin hub

TRK-2041

08:00 - 09:30

On time

Munich dispatch

TRK-2204

13:00 - 14:00

Ready

Prepared parcels
246 units

Nürnberg ramp

TRK-1888

09:15 - 10:00

Delayed

#### React (tsx)

```tsx
import { Fragment, useState } from 'react';

import Table, {
    TableBody,
    TableColumn,
    TableExpanderButton,
    TableExpandedContentRow,
    TableHeader,
    TableHeaderColumn,
    TableRow,
} from '@rio-cloud/rio-uikit/Table';
import useSorting from '@rio-cloud/rio-uikit/useSorting';

type DemoExpandableRow = {
    id: string;
    checkpoint: string;
    shipment: string;
    window: string;
    status: string;
    expandedLabel: string;
    expandedValue: string;
};

const rows: DemoExpandableRow[] = [
    {
        id: 'inbound-1',
        checkpoint: 'Berlin hub',
        shipment: 'TRK-2041',
        window: '08:00 - 09:30',
        status: 'On time',
        expandedLabel: 'Total inventory',
        expandedValue: '985 units',
    },
    {
        id: 'inbound-2',
        checkpoint: 'Nürnberg ramp',
        shipment: 'TRK-1888',
        window: '09:15 - 10:00',
        status: 'Delayed',
        expandedLabel: 'Blocked shipments',
        expandedValue: '12 units',
    },
    {
        id: 'outbound-1',
        checkpoint: 'Munich dispatch',
        shipment: 'TRK-2204',
        window: '13:00 - 14:00',
        status: 'Ready',
        expandedLabel: 'Prepared parcels',
        expandedValue: '246 units',
    },
];

const TableExpandedRowsExample = () => {
    const [expandedRowIds, setExpandedRowIds] = useState<string[]>(['outbound-1']);

    const { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection } = useSorting(rows, 'checkpoint');

    const toggleRow = (rowId: string) => {
        setExpandedRowIds(previousExpandedRows =>
            previousExpandedRows.includes(rowId)
                ? previousExpandedRows.filter(expandedRowId => expandedRowId !== rowId)
                : [...previousExpandedRows, rowId]
        );
    };

    const handleSortChange = (columnKey: string, direction: 'asc' | 'desc') => {
        setSortKey(columnKey as keyof DemoExpandableRow);
        setSortDirection(direction);
    };

    return (
        <Table rowKey='id' hover sortBy={String(sortKey)} sortDirection={sortDirection} onSortChange={handleSortChange}>
            <TableHeader>
                <TableHeaderColumn columnKey='checkpoint' sortable>
                    Checkpoint
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='shipment' sortable>
                    Shipment
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='window' sortable>
                    Window
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='status' sortable>
                    Status
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='actions' width={56} />
            </TableHeader>

            <TableBody>
                {sortedItems.map(row => {
                    const isExpanded = expandedRowIds.includes(row.id);

                    return (
                        <Fragment key={row.id}>
                            <TableRow id={row.id}>
                                <TableColumn>{row.checkpoint}</TableColumn>
                                <TableColumn>{row.shipment}</TableColumn>
                                <TableColumn>{row.window}</TableColumn>
                                <TableColumn>{row.status}</TableColumn>
                                <TableColumn horizontalAlign='right' className='padding-y-0' preventRowClick>
                                    <TableExpanderButton expanded={isExpanded} onClick={() => toggleRow(row.id)} />
                                </TableColumn>
                            </TableRow>

                            {isExpanded && (
                                <TableExpandedContentRow parentKey={row.id} noHover>
                                    <div className='flex-1-1 display-flex gap-15 padding-20'>
                                        <div className='height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14'>
                                            <span className='rioglyph rioglyph-parcel text-size-200pct text-color-darker' />
                                        </div>
                                        <div>
                                            <div className='text-color-dark'>{row.expandedLabel}</div>
                                            <div className='text-size-h3 text-color-darkest line-height-125rel'>
                                                {row.expandedValue}
                                            </div>
                                        </div>
                                    </div>
                                </TableExpandedContentRow>
                            )}
                        </Fragment>
                    );
                })}
            </TableBody>
        </Table>
    );
};

export default TableExpandedRowsExample;
```

#### HTML (html)

```html
<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) minmax(50px, 1fr) minmax(0, 56px); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4 table-col-5&quot;; --table-column-count: 5; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="5">
    <div class="table-head" role="rowgroup">
        <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
            <div class="table-head-cell table-head-cell-sortable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="checkpoint" role="columnheader" aria-colindex="1" aria-rowindex="1" aria-sort="ascending" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <button type="button" class="table-head-button">
                            <span class="table-head-button-label">
                                <span class="sort-arrows sort-asc">
                                </span>
                                <span class="table-head-label">Checkpoint</span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-sortable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="shipment" role="columnheader" aria-colindex="2" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <button type="button" class="table-head-button">
                            <span class="table-head-button-label">
                                <span class="sort-arrows ">
                                </span>
                                <span class="table-head-label">Shipment</span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-sortable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="window" role="columnheader" aria-colindex="3" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <button type="button" class="table-head-button">
                            <span class="table-head-button-label">
                                <span class="sort-arrows ">
                                </span>
                                <span class="table-head-label">Window</span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-sortable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="4" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <button type="button" class="table-head-button">
                            <span class="table-head-button-label">
                                <span class="sort-arrows ">
                                </span>
                                <span class="table-head-label">Status</span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="actions" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table-body" role="rowgroup">
        <div id="inbound-1" class="table-row" data-index="0" data-row-id="inbound-1" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Berlin hub</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">TRK-2041</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">08:00 - 09:30</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">On time</div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle padding-y-0" data-column="actions" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
                        <span class="rioglyph rioglyph-chevron-down">
                        </span>
                    </button>
                </div>
            </div>
        </div>
        <div id="outbound-1" class="table-row" data-index="1" data-row-id="outbound-1" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Munich dispatch</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">TRK-2204</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">13:00 - 14:00</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Ready</div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle padding-y-0" data-column="actions" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button table-expander-button-expanded" tabindex="0">
                        <span class="rioglyph rioglyph-chevron-down">
                        </span>
                    </button>
                </div>
            </div>
        </div>
        <div class="table-row table-row-expanded-full-width table-row-no-hover" data-index="2" data-parent-row-id="outbound-1" role="row" style="overflow: hidden; height: auto;">
            <div class="table-cell table-expanded-cell" role="cell" aria-colspan="5">
                <div class="table-cell-content" style="opacity: 1;">
                    <div class="flex-1-1 display-flex gap-15 padding-20">
                        <div class="height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14">
                            <span class="rioglyph rioglyph-parcel text-size-200pct text-color-darker">
                            </span>
                        </div>
                        <div>
                            <div class="text-color-dark">Prepared parcels</div>
                            <div class="text-size-h3 text-color-darkest line-height-125rel">246 units</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="inbound-2" class="table-row" data-index="3" data-row-id="inbound-2" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Nürnberg ramp</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">TRK-1888</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">09:15 - 10:00</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Delayed</div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle padding-y-0" data-column="actions" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
                        <span class="rioglyph rioglyph-chevron-down">
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Expandable child rows with shared columns

### Example: Example 38

Checkpoint

Shipment

Window

Status

Berlin hub

TRK-2041

08:00 - 09:30

2 follow-up stops

└ Warehouse 12

TRK-2041-A

09:45 - 10:15

Ready for unloading

└ Retail park north

TRK-2041-B

10:30 - 11:00

Awaiting dock slot

Nürnberg ramp

TRK-1888

09:15 - 10:00

1 follow-up stop

Munich dispatch

TRK-2204

13:00 - 14:00

No follow-up stops

#### React (tsx)

```tsx
import { Fragment, useState } from 'react';

import Table, {
    TableBody,
    TableColumn,
    TableExpanderButton,
    TableExpandedRow,
    TableHeader,
    TableHeaderColumn,
    TableRow,
} from '@rio-cloud/rio-uikit/Table';

type ShipmentStop = {
    id: string;
    checkpoint: string;
    shipment: string;
    window: string;
    status: string;
};

type ExpandableShipment = ShipmentStop & {
    children: ShipmentStop[];
};

const rows: ExpandableShipment[] = [
    {
        id: 'tour-berlin',
        checkpoint: 'Berlin hub',
        shipment: 'TRK-2041',
        window: '08:00 - 09:30',
        status: '2 follow-up stops',
        children: [
            {
                id: 'tour-berlin-stop-1',
                checkpoint: 'Warehouse 12',
                shipment: 'TRK-2041-A',
                window: '09:45 - 10:15',
                status: 'Ready for unloading',
            },
            {
                id: 'tour-berlin-stop-2',
                checkpoint: 'Retail park north',
                shipment: 'TRK-2041-B',
                window: '10:30 - 11:00',
                status: 'Awaiting dock slot',
            },
        ],
    },
    {
        id: 'tour-leipzig',
        checkpoint: 'Nürnberg ramp',
        shipment: 'TRK-1888',
        window: '09:15 - 10:00',
        status: '1 follow-up stop',
        children: [
            {
                id: 'tour-leipzig-stop-1',
                checkpoint: 'Cross-dock west',
                shipment: 'TRK-1888-A',
                window: '10:20 - 11:10',
                status: 'Delayed by traffic',
            },
        ],
    },
    {
        id: 'tour-munich',
        checkpoint: 'Munich dispatch',
        shipment: 'TRK-2204',
        window: '13:00 - 14:00',
        status: 'No follow-up stops',
        children: [],
    },
];

const TableExpandedChildRowsExample = () => {
    const [expandedRowIds, setExpandedRowIds] = useState<string[]>(['tour-berlin']);

    const toggleRow = (rowId: string) => {
        setExpandedRowIds(previousExpandedRows =>
            previousExpandedRows.includes(rowId)
                ? previousExpandedRows.filter(expandedRowId => expandedRowId !== rowId)
                : [...previousExpandedRows, rowId]
        );
    };

    // Note: provide a stable rowKey so the table does not fall back to row indexes.
    // Otherwise, expanding or collapsing a group can cause already expanded rows below
    // to be treated as changed rows and animate again.
    return (
        <Table rowKey='id' hover>
            <TableHeader>
                <TableHeaderColumn columnKey='checkpoint' width='32%'>
                    Checkpoint
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='shipment' width='20%'>
                    Shipment
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='window' width='18%'>
                    Window
                </TableHeaderColumn>
                <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
                <TableHeaderColumn columnKey='actions' width={56} />
            </TableHeader>

            <TableBody>
                {rows.map(row => {
                    const isExpanded = expandedRowIds.includes(row.id);
                    const hasChildren = row.children.length > 0;

                    return (
                        <Fragment key={row.id}>
                            <TableRow id={row.id}>
                                <TableColumn columnKey='checkpoint'>{row.checkpoint}</TableColumn>
                                <TableColumn columnKey='shipment'>{row.shipment}</TableColumn>
                                <TableColumn columnKey='window'>{row.window}</TableColumn>
                                <TableColumn columnKey='status'>{row.status}</TableColumn>
                                <TableColumn
                                    columnKey='actions'
                                    horizontalAlign='right'
                                    className='padding-y-0'
                                    preventRowClick
                                >
                                    {hasChildren ? (
                                        <TableExpanderButton expanded={isExpanded} onClick={() => toggleRow(row.id)} />
                                    ) : null}
                                </TableColumn>
                            </TableRow>

                            {isExpanded &&
                                row.children.map(childRow => (
                                    <TableExpandedRow key={childRow.id} id={childRow.id} parentKey={row.id}>
                                        <TableColumn columnKey='checkpoint'>
                                            <div className='display-flex align-items-center gap-5'>
                                                <span aria-hidden className='width-15'>
                                                    └
                                                </span>
                                                <span>{childRow.checkpoint}</span>
                                            </div>
                                        </TableColumn>
                                        <TableColumn columnKey='shipment'>{childRow.shipment}</TableColumn>
                                        <TableColumn columnKey='window'>{childRow.window}</TableColumn>
                                        <TableColumn columnKey='status'>{childRow.status}</TableColumn>
                                        <TableColumn columnKey='actions' />
                                    </TableExpandedRow>
                                ))}
                        </Fragment>
                    );
                })}
            </TableBody>
        </Table>
    );
};

export default TableExpandedChildRowsExample;
```

#### 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) * 32 / 100)) minmax(0, calc(var(--table-width) * 20 / 100)) minmax(0, calc(var(--table-width) * 18 / 100)) minmax(50px, 1fr) minmax(0, 56px); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4 table-col-5&quot;; --table-column-count: 5; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="5">
    <div class="table-head" role="rowgroup">
        <div class="table-head-grid" role="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="checkpoint" 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">Checkpoint</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="shipment" 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">Shipment</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="window" 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">Window</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Status</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="actions" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table-body" role="rowgroup">
        <div id="tour-berlin" class="table-row" data-index="0" data-row-id="tour-berlin" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Berlin hub</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">TRK-2041</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">08:00 - 09:30</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">2 follow-up stops</div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle padding-y-0" data-column="actions" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button table-expander-button-expanded" tabindex="0">
                        <span class="rioglyph rioglyph-chevron-down">
                        </span>
                    </button>
                </div>
            </div>
        </div>
        <div id="tour-berlin-stop-1" class="table-row table-row-expanded-data" data-index="1" data-row-id="tour-berlin-stop-1" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <div class="display-flex align-items-center gap-5">
                        <span aria-hidden="true" class="width-15">└</span>
                        <span>Warehouse 12</span>
                    </div>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">TRK-2041-A</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">09:45 - 10:15</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Ready for unloading</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                </div>
            </div>
        </div>
        <div id="tour-berlin-stop-2" class="table-row table-row-expanded-data" data-index="2" data-row-id="tour-berlin-stop-2" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <div class="display-flex align-items-center gap-5">
                        <span aria-hidden="true" class="width-15">└</span>
                        <span>Retail park north</span>
                    </div>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">TRK-2041-B</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">10:30 - 11:00</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Awaiting dock slot</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                </div>
            </div>
        </div>
        <div id="tour-leipzig" class="table-row" data-index="3" data-row-id="tour-leipzig" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Nürnberg ramp</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">TRK-1888</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">09:15 - 10:00</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">1 follow-up stop</div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle padding-y-0" data-column="actions" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                    <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
                        <span class="rioglyph rioglyph-chevron-down">
                        </span>
                    </button>
                </div>
            </div>
        </div>
        <div id="tour-munich" class="table-row" data-index="4" data-row-id="tour-munich" role="row">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="checkpoint" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Munich dispatch</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="shipment" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">TRK-2204</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="window" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">13:00 - 14:00</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">No follow-up stops</div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle padding-y-0" data-column="actions" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Expandable row groups

This example shows a purely declarative consumer-side pattern with TableGroupRow as the group header, a TableExpanderButton inside the header content, grouped TableExpandedRow children, and a matching TableGroupFooterRow.

### Example: Example 39

Disable expand animation
Project

Region

Status

To pick up a draggable item, press the space bar.
While dragging, use the arrow keys to move the item.
Press space again to drop the item in its new position, or press escape to cancel.

Amy Elsner

Brand refresh

Spain

Qualified

Dealer portal

Belgium

Qualified

Fleet rollout

Netherlands

Negotiation

Landing remake

France

Proposal

Total projects for Amy Elsner: 4

Anna Fali

Ben Turner

Cleo Hart

#### React (tsx)

```tsx
import { useMemo, useState, type ReactNode } from 'react';
import { faker } from '@faker-js/faker';

import Avatar from '@rio-cloud/rio-uikit/Avatar';
import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
import Table, {
    TableBody,
    TableColumn,
    TableExpandedRow,
    TableExpanderButton,
    TableGroupFooterRow,
    TableGroupRow,
    TableHeader,
    TableHeaderColumn,
} from '@rio-cloud/rio-uikit/Table';

type DemoExpandableGroupRow = {
    assignee: string;
    assigneeAvatar: string;
    id: number;
    project: string;
    region: string;
    status: string;
};

type DemoExpandableGroupColumn = {
    key: keyof Pick<DemoExpandableGroupRow, 'project' | 'region' | 'status'>;
    label: ReactNode;
    sortable?: boolean;
    width?: number | string;
    resizeable?: boolean;
    draggable?: boolean;
};

const assigneeAvatars = {
    'Amy Elsner': faker.image.personPortrait(),
    'Anna Fali': faker.image.personPortrait(),
    'Ben Turner': faker.image.personPortrait(),
    'Cleo Hart': faker.image.personPortrait(),
} as const;

const rows: DemoExpandableGroupRow[] = [
    {
        id: 1,
        assignee: 'Amy Elsner',
        assigneeAvatar: assigneeAvatars['Amy Elsner'],
        project: 'Landing remake',
        region: 'France',
        status: 'Proposal',
    },
    {
        id: 2,
        assignee: 'Amy Elsner',
        assigneeAvatar: assigneeAvatars['Amy Elsner'],
        project: 'Dealer portal',
        region: 'Belgium',
        status: 'Qualified',
    },
    {
        id: 3,
        assignee: 'Amy Elsner',
        assigneeAvatar: assigneeAvatars['Amy Elsner'],
        project: 'Fleet rollout',
        region: 'Netherlands',
        status: 'Negotiation',
    },
    {
        id: 4,
        assignee: 'Amy Elsner',
        assigneeAvatar: assigneeAvatars['Amy Elsner'],
        project: 'Brand refresh',
        region: 'Spain',
        status: 'Qualified',
    },
    {
        id: 5,
        assignee: 'Anna Fali',
        assigneeAvatar: assigneeAvatars['Anna Fali'],
        project: 'Mobile app',
        region: 'Romania',
        status: 'Qualified',
    },
    {
        id: 6,
        assignee: 'Anna Fali',
        assigneeAvatar: assigneeAvatars['Anna Fali'],
        project: 'Driver onboarding',
        region: 'Slovenia',
        status: 'New',
    },
    {
        id: 7,
        assignee: 'Anna Fali',
        assigneeAvatar: assigneeAvatars['Anna Fali'],
        project: 'Workshop flow',
        region: 'Croatia',
        status: 'Proposal',
    },
    {
        id: 8,
        assignee: 'Ben Turner',
        assigneeAvatar: assigneeAvatars['Ben Turner'],
        project: 'Analytics refresh',
        region: 'Germany',
        status: 'Negotiation',
    },
    {
        id: 9,
        assignee: 'Ben Turner',
        assigneeAvatar: assigneeAvatars['Ben Turner'],
        project: 'Service dashboard',
        region: 'Austria',
        status: 'Qualified',
    },
    {
        id: 10,
        assignee: 'Ben Turner',
        assigneeAvatar: assigneeAvatars['Ben Turner'],
        project: 'Claims portal',
        region: 'Denmark',
        status: 'New',
    },
    {
        id: 11,
        assignee: 'Cleo Hart',
        assigneeAvatar: assigneeAvatars['Cleo Hart'],
        project: 'Retail campaign',
        region: 'Portugal',
        status: 'Proposal',
    },
    {
        id: 12,
        assignee: 'Cleo Hart',
        assigneeAvatar: assigneeAvatars['Cleo Hart'],
        project: 'Partner hub',
        region: 'Ireland',
        status: 'Negotiation',
    },
    {
        id: 13,
        assignee: 'Cleo Hart',
        assigneeAvatar: assigneeAvatars['Cleo Hart'],
        project: 'Care flow',
        region: 'Norway',
        status: 'Qualified',
    },
];

const initialColumns: DemoExpandableGroupColumn[] = [
    {
        key: 'project',
        label: 'Project',
        sortable: true,
        draggable: true,
        width: 260,
        resizeable: true,
    },
    {
        key: 'region',
        label: 'Region',
        sortable: true,
        draggable: true,
        width: 180,
        resizeable: true,
    },
    {
        key: 'status',
        label: 'Status',
        sortable: true,
        draggable: true,
        resizeable: true,
    },
];

const TableExpandableGroupRowsExample = () => {
    const [columns, setColumns] = useState(initialColumns);
    const [sortKey, setSortKey] = useState<DemoExpandableGroupColumn['key']>('project');
    const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
    const [disableAnimation, setDisableAnimation] = useState(false);

    const groupedRows = useMemo(
        () =>
            Object.fromEntries(
                Object.entries(
                    rows.reduce<Record<string, DemoExpandableGroupRow[]>>((groups, row) => {
                        if (!groups[row.assignee]) {
                            groups[row.assignee] = [];
                        }

                        groups[row.assignee].push(row);
                        return groups;
                    }, {})
                ).map(([assignee, groupRows]) => [
                    assignee,
                    [...groupRows].sort((leftRow, rightRow) => {
                        const leftValue = String(leftRow[sortKey]).toLowerCase();
                        const rightValue = String(rightRow[sortKey]).toLowerCase();

                        if (leftValue === rightValue) {
                            return 0;
                        }

                        const result = leftValue.localeCompare(rightValue);
                        return sortDirection === 'asc' ? result : -result;
                    }),
                ])
            ),
        [sortDirection, sortKey]
    );

    const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>(initialExpandedState);

    const orderedColumns = useMemo(() => {
        const columnsByKey = new Map(columns.map(column => [column.key, column]));
        return columns.flatMap(column => {
            const resolvedColumn = columnsByKey.get(column.key);
            return resolvedColumn ? [resolvedColumn] : [];
        });
    }, [columns]);

    const toggleGroup = (assignee: string) => {
        setExpandedGroups(current => ({
            ...current,
            [assignee]: !current[assignee],
        }));
    };

    const handleSortChange = (columnKey: string, direction: 'asc' | 'desc') => {
        setSortKey(columnKey as DemoExpandableGroupColumn['key']);
        setSortDirection(direction);
    };

    const handleColumnResize = (columnKey: string, width?: number | string) => {
        setColumns(previousColumns =>
            previousColumns.map(column => {
                if (column.key !== columnKey) {
                    return column;
                }

                if (width === undefined) {
                    const { width: _width, ...columnWithoutWidth } = column;
                    return columnWithoutWidth;
                }

                return { ...column, width };
            })
        );
    };

    const handleColumnOrderChange = (columnOrder: string[]) => {
        setColumns(previousColumns => {
            const columnsByKey = new Map(previousColumns.map(column => [column.key, column]));

            return columnOrder.flatMap(columnKey => {
                const column = columnsByKey.get(columnKey as DemoExpandableGroupColumn['key']);
                return column ? [column] : [];
            });
        });
    };

    const renderCellContent = (row: DemoExpandableGroupRow, columnKey: DemoExpandableGroupColumn['key']) => {
        switch (columnKey) {
            case 'project':
                return row.project;
            case 'region':
                return row.region;
            case 'status':
                return row.status;
            default:
                return null;
        }
    };

    // Note: provide a stable rowKey so the table does not fall back to row indexes.
    // Otherwise, expanding or collapsing a group can cause already expanded rows below
    // to be treated as changed rows and animate again.
    return (
        <>
            <div className='margin-bottom-15'>
                <Checkbox
                    checked={disableAnimation}
                    label='Disable expand animation'
                    onChange={() => setDisableAnimation(currentValue => !currentValue)}
                />
            </div>
            <Table
                rowKey='id'
                hover
                sortBy={String(sortKey)}
                sortDirection={sortDirection}
                onSortChange={handleSortChange}
                onColumnResize={handleColumnResize}
                columnOrder={columns.map(column => column.key)}
                onColumnOrderChange={handleColumnOrderChange}
                expandedRowAnimation={disableAnimation ? false : { duration: 0.05 }}
            >
                <TableHeader>
                    {orderedColumns.map(column => (
                        <TableHeaderColumn
                            key={column.key}
                            columnKey={column.key}
                            sortable={column.sortable}
                            width={column.width}
                            resizeable={column.resizeable}
                            draggable={column.draggable}
                        >
                            {column.label}
                        </TableHeaderColumn>
                    ))}
                </TableHeader>

                <TableBody>
                    {Object.entries(groupedRows).flatMap(([assignee, groupRows]) => {
                        const isExpanded = expandedGroups[assignee] ?? false;

                        return [
                            <TableGroupRow key={`group-${assignee}`}>
                                <div className='display-flex align-items-center gap-10'>
                                    <TableExpanderButton expanded={isExpanded} onClick={() => toggleGroup(assignee)} />
                                    <Avatar image={groupRows[0]?.assigneeAvatar} name={assignee} size={35} />
                                    <span className='text-bold'>{assignee}</span>
                                </div>
                            </TableGroupRow>,
                            ...(isExpanded
                                ? [
                                      ...groupRows.map(row => (
                                          <TableExpandedRow
                                              key={`group-row-${row.id}`}
                                              id={row.id}
                                              parentKey={assignee}
                                              className='bg-white'
                                          >
                                              {orderedColumns.map(column => (
                                                  <TableColumn key={`${row.id}-${column.key}`} columnKey={column.key}>
                                                      {renderCellContent(row, column.key)}
                                                  </TableColumn>
                                              ))}
                                          </TableExpandedRow>
                                      )),
                                      <TableGroupFooterRow
                                          key={`group-footer-${assignee}`}
                                          className='text-right text-medium'
                                      >
                                          Total projects for {assignee}: {groupRows.length}
                                      </TableGroupFooterRow>,
                                  ]
                                : []),
                        ];
                    })}
                </TableBody>
            </Table>
        </>
    );
};

const initialExpandedState = Object.fromEntries(
    [...new Set(rows.map(row => row.assignee))].map((assignee, index) => [assignee, index === 0])
) as Record<string, boolean>;

export default TableExpandableGroupRowsExample;
```

#### HTML (html)

```html
<div class="margin-bottom-15">
    <label class="checkbox" tabindex="0">
        <input type="checkbox" class="">
        <span class="checkbox-text">
            <span>Disable expand animation</span>
        </span>
    </label>
</div>
<div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: minmax(0, 260px) minmax(0, 180px) 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-sortable table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="project" role="columnheader" aria-colindex="1" aria-rowindex="1" aria-sort="ascending" style="grid-area: 1 / 1 / span 1 / span 1; transition: transform linear;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <button type="button" class="table-head-button">
                            <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-5">
                                <span class="sort-arrows sort-asc">
                                </span>
                                <span class="table-head-label">Project</span>
                            </span>
                        </button>
                    </div>
                </div>
                <div class="table-column-resize-handle">
                </div>
            </div>
            <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="region" role="columnheader" aria-colindex="2" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 2 / span 1 / span 1; transition: transform linear;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <button type="button" class="table-head-button">
                            <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-5">
                                <span class="sort-arrows ">
                                </span>
                                <span class="table-head-label">Region</span>
                            </span>
                        </button>
                    </div>
                </div>
                <div class="table-column-resize-handle">
                </div>
            </div>
            <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="3" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 3 / span 1 / span 1; transition: transform linear;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <button type="button" class="table-head-button">
                            <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-5">
                                <span class="sort-arrows ">
                                </span>
                                <span class="table-head-label">Status</span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div id="DndDescribedBy-5" style="display: none;">
                To pick up a draggable item, press the space bar.
                While dragging, use the arrow keys to move the item.
                Press space again to drop the item in its new position, or press escape to cancel.
            </div>
            <div id="DndLiveRegion-5" role="status" aria-live="assertive" aria-atomic="true" style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%); white-space: nowrap;">
            </div>
        </div>
    </div>
    <div class="table-body" role="rowgroup">
        <div class="table-row table-row-group" data-index="0" data-row-id="group-0" role="row">
            <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center gap-10">
                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button table-expander-button-expanded" tabindex="0">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </button>
                        <div class="Avatar bg-lighter" style="height: 35px;">
                            <img src="https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait/female/512/21.jpg" alt="Amy Elsner" class="Avatar-image" draggable="false">
                        </div>
                        <span class="text-bold">Amy Elsner</span>
                    </div>
                </div>
            </div>
        </div>
        <div id="4" class="table-row table-row-expanded-data bg-white" data-index="1" data-row-id="4" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Brand refresh</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Spain</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">Qualified</div>
            </div>
        </div>
        <div id="2" class="table-row table-row-expanded-data bg-white" data-index="2" data-row-id="2" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Dealer portal</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Belgium</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">Qualified</div>
            </div>
        </div>
        <div id="3" class="table-row table-row-expanded-data bg-white" data-index="3" data-row-id="3" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Fleet rollout</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Netherlands</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">Negotiation</div>
            </div>
        </div>
        <div id="1" class="table-row table-row-expanded-data bg-white" data-index="4" data-row-id="1" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="project" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Landing remake</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="region" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">France</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">Proposal</div>
            </div>
        </div>
        <div class="table-row table-row-group-footer text-right text-medium" data-index="5" role="row">
            <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                <div class="table-cell-content">Total projects for Amy Elsner: 4</div>
            </div>
        </div>
        <div class="table-row table-row-group" data-index="6" data-row-id="group-6" role="row">
            <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center gap-10">
                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </button>
                        <div class="Avatar bg-lighter" style="height: 35px;">
                            <img src="https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait/female/512/13.jpg" alt="Anna Fali" class="Avatar-image" draggable="false">
                        </div>
                        <span class="text-bold">Anna Fali</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-row table-row-group" data-index="7" data-row-id="group-7" role="row">
            <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center gap-10">
                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </button>
                        <div class="Avatar bg-lighter" style="height: 35px;">
                            <img src="https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait/female/512/11.jpg" alt="Ben Turner" class="Avatar-image" draggable="false">
                        </div>
                        <span class="text-bold">Ben Turner</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-row table-row-group" data-index="8" data-row-id="group-8" role="row">
            <div class="table-cell table-group-cell" role="cell" aria-colspan="3">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center gap-10">
                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </button>
                        <div class="Avatar bg-lighter" style="height: 35px;">
                            <img src="https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait/male/512/70.jpg" alt="Cleo Hart" class="Avatar-image" draggable="false">
                        </div>
                        <span class="text-bold">Cleo Hart</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Grouped rows with selection

Group rows can control which rows are shown while the expanded data rows still render against the table columns. Keep multi-selection controlled on Table with selectedRowIds, onSelectionChange, and showSelectionColumn.

### Example: 5 of 33 departures

Vehicle

Driver

Route

ETA

Status

Berlin Hub 5 of 33 departures

R-2041

Lena Vogt

Berlin - Hamburg

08:40

Ready

R-2042

Milan Weber

Berlin - Leipzig

09:10

Loading

R-2043

Eva Kruger

Berlin - Dresden

09:35

Ready

R-2044

Jonas Brandt

Berlin - Rostock

10:05

Delayed

R-2045

Nora Seidel

Berlin - Bremen

10:30

Ready

Hamburg Yard 6 of 33 departures

Munich Depot 5 of 33 departures

Cologne Crossdock 6 of 33 departures

Frankfurt Gate 5 of 33 departures

Stuttgart Terminal 6 of 33 departures

#### React (tsx)

```tsx
import { Fragment, useMemo, useState } from 'react';

import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
import Table, {
    TableBody,
    TableColumn,
    TableExpandAllGroupsButton,
    TableExpandedRow,
    TableExpanderButton,
    TableGroupRow,
    TableHeader,
    TableHeaderColumn,
    type TableRowId,
} from '@rio-cloud/rio-uikit/Table';

type DemoGroupedRowsSelectionRow = {
    id: string;
    groupId: string;
    vehicle: string;
    driver: string;
    route: string;
    eta: string;
    status: string;
};

type DemoGroupedRowsSelectionGroup = {
    id: string;
    terminal: string;
};

const groups: DemoGroupedRowsSelectionGroup[] = [
    { id: 'berlin', terminal: 'Berlin Hub' },
    { id: 'hamburg', terminal: 'Hamburg Yard' },
    { id: 'munich', terminal: 'Munich Depot' },
    { id: 'cologne', terminal: 'Cologne Crossdock' },
    { id: 'frankfurt', terminal: 'Frankfurt Gate' },
    { id: 'stuttgart', terminal: 'Stuttgart Terminal' },
];

const groupIds = groups.map(group => group.id);

const rows: DemoGroupedRowsSelectionRow[] = [
    {
        id: 'berlin-1',
        groupId: 'berlin',
        vehicle: 'R-2041',
        driver: 'Lena Vogt',
        route: 'Berlin - Hamburg',
        eta: '08:40',
        status: 'Ready',
    },
    {
        id: 'berlin-2',
        groupId: 'berlin',
        vehicle: 'R-2042',
        driver: 'Milan Weber',
        route: 'Berlin - Leipzig',
        eta: '09:10',
        status: 'Loading',
    },
    {
        id: 'berlin-3',
        groupId: 'berlin',
        vehicle: 'R-2043',
        driver: 'Eva Kruger',
        route: 'Berlin - Dresden',
        eta: '09:35',
        status: 'Ready',
    },
    {
        id: 'berlin-4',
        groupId: 'berlin',
        vehicle: 'R-2044',
        driver: 'Jonas Brandt',
        route: 'Berlin - Rostock',
        eta: '10:05',
        status: 'Delayed',
    },
    {
        id: 'berlin-5',
        groupId: 'berlin',
        vehicle: 'R-2045',
        driver: 'Nora Seidel',
        route: 'Berlin - Bremen',
        eta: '10:30',
        status: 'Ready',
    },
    {
        id: 'hamburg-1',
        groupId: 'hamburg',
        vehicle: 'H-1180',
        driver: 'Oskar Klein',
        route: 'Hamburg - Kiel',
        eta: '08:55',
        status: 'In transit',
    },
    {
        id: 'hamburg-2',
        groupId: 'hamburg',
        vehicle: 'H-1181',
        driver: 'Mara Stein',
        route: 'Hamburg - Bremen',
        eta: '09:20',
        status: 'Ready',
    },
    {
        id: 'hamburg-3',
        groupId: 'hamburg',
        vehicle: 'H-1182',
        driver: 'Timo Wolf',
        route: 'Hamburg - Lubeck',
        eta: '09:45',
        status: 'Loading',
    },
    {
        id: 'hamburg-4',
        groupId: 'hamburg',
        vehicle: 'H-1183',
        driver: 'Sina Roth',
        route: 'Hamburg - Hannover',
        eta: '10:15',
        status: 'Ready',
    },
    {
        id: 'hamburg-5',
        groupId: 'hamburg',
        vehicle: 'H-1184',
        driver: 'Felix Graf',
        route: 'Hamburg - Schwerin',
        eta: '10:50',
        status: 'Delayed',
    },
    {
        id: 'hamburg-6',
        groupId: 'hamburg',
        vehicle: 'H-1185',
        driver: 'Iris Lind',
        route: 'Hamburg - Flensburg',
        eta: '11:10',
        status: 'Ready',
    },
    {
        id: 'munich-1',
        groupId: 'munich',
        vehicle: 'M-3301',
        driver: 'Anja Hofmann',
        route: 'Munich - Augsburg',
        eta: '08:25',
        status: 'Ready',
    },
    {
        id: 'munich-2',
        groupId: 'munich',
        vehicle: 'M-3302',
        driver: 'David Lang',
        route: 'Munich - Salzburg',
        eta: '09:05',
        status: 'In transit',
    },
    {
        id: 'munich-3',
        groupId: 'munich',
        vehicle: 'M-3303',
        driver: 'Clara Beck',
        route: 'Munich - Regensburg',
        eta: '09:40',
        status: 'Ready',
    },
    {
        id: 'munich-4',
        groupId: 'munich',
        vehicle: 'M-3304',
        driver: 'Erik Hahn',
        route: 'Munich - Ulm',
        eta: '10:20',
        status: 'Loading',
    },
    {
        id: 'munich-5',
        groupId: 'munich',
        vehicle: 'M-3305',
        driver: 'Paula Rehm',
        route: 'Munich - Passau',
        eta: '11:00',
        status: 'Ready',
    },
    {
        id: 'cologne-1',
        groupId: 'cologne',
        vehicle: 'C-7101',
        driver: 'Ben Keller',
        route: 'Cologne - Bonn',
        eta: '08:45',
        status: 'Ready',
    },
    {
        id: 'cologne-2',
        groupId: 'cologne',
        vehicle: 'C-7102',
        driver: 'Lea Sommer',
        route: 'Cologne - Essen',
        eta: '09:25',
        status: 'Delayed',
    },
    {
        id: 'cologne-3',
        groupId: 'cologne',
        vehicle: 'C-7103',
        driver: 'Noah Frey',
        route: 'Cologne - Dortmund',
        eta: '09:55',
        status: 'Loading',
    },
    {
        id: 'cologne-4',
        groupId: 'cologne',
        vehicle: 'C-7104',
        driver: 'Mia Busch',
        route: 'Cologne - Aachen',
        eta: '10:35',
        status: 'Ready',
    },
    {
        id: 'cologne-5',
        groupId: 'cologne',
        vehicle: 'C-7105',
        driver: 'Lars Kunz',
        route: 'Cologne - Koblenz',
        eta: '11:05',
        status: 'Ready',
    },
    {
        id: 'cologne-6',
        groupId: 'cologne',
        vehicle: 'C-7106',
        driver: 'Rosa Dietz',
        route: 'Cologne - Mainz',
        eta: '11:35',
        status: 'In transit',
    },
    {
        id: 'frankfurt-1',
        groupId: 'frankfurt',
        vehicle: 'F-5201',
        driver: 'Klara May',
        route: 'Frankfurt - Kassel',
        eta: '08:35',
        status: 'Ready',
    },
    {
        id: 'frankfurt-2',
        groupId: 'frankfurt',
        vehicle: 'F-5202',
        driver: 'Jan Otto',
        route: 'Frankfurt - Wurzburg',
        eta: '09:15',
        status: 'Loading',
    },
    {
        id: 'frankfurt-3',
        groupId: 'frankfurt',
        vehicle: 'F-5203',
        driver: 'Sarah Blum',
        route: 'Frankfurt - Mannheim',
        eta: '09:50',
        status: 'Ready',
    },
    {
        id: 'frankfurt-4',
        groupId: 'frankfurt',
        vehicle: 'F-5204',
        driver: 'Tom Ritter',
        route: 'Frankfurt - Trier',
        eta: '10:40',
        status: 'In transit',
    },
    {
        id: 'frankfurt-5',
        groupId: 'frankfurt',
        vehicle: 'F-5205',
        driver: 'Nina Adler',
        route: 'Frankfurt - Fulda',
        eta: '11:20',
        status: 'Delayed',
    },
    {
        id: 'stuttgart-1',
        groupId: 'stuttgart',
        vehicle: 'S-4101',
        driver: 'Luis Horn',
        route: 'Stuttgart - Karlsruhe',
        eta: '08:50',
        status: 'Ready',
    },
    {
        id: 'stuttgart-2',
        groupId: 'stuttgart',
        vehicle: 'S-4102',
        driver: 'Greta Vogler',
        route: 'Stuttgart - Freiburg',
        eta: '09:30',
        status: 'Loading',
    },
    {
        id: 'stuttgart-3',
        groupId: 'stuttgart',
        vehicle: 'S-4103',
        driver: 'Aron Weiss',
        route: 'Stuttgart - Ulm',
        eta: '10:00',
        status: 'Ready',
    },
    {
        id: 'stuttgart-4',
        groupId: 'stuttgart',
        vehicle: 'S-4104',
        driver: 'Lina Fuchs',
        route: 'Stuttgart - Tubingen',
        eta: '10:45',
        status: 'In transit',
    },
    {
        id: 'stuttgart-5',
        groupId: 'stuttgart',
        vehicle: 'S-4105',
        driver: 'Theo Bach',
        route: 'Stuttgart - Heilbronn',
        eta: '11:25',
        status: 'Ready',
    },
    {
        id: 'stuttgart-6',
        groupId: 'stuttgart',
        vehicle: 'S-4106',
        driver: 'Emma Koch',
        route: 'Stuttgart - Singen',
        eta: '12:00',
        status: 'Delayed',
    },
];

const TableGroupedRowsSelectionExample = () => {
    const [expandedGroups, setExpandedGroups] = useState<string[]>(['berlin']);
    const [selectedRowIds, setSelectedRowIds] = useState<TableRowId[]>([]);

    const rowsByGroupId = useMemo(() => Map.groupBy(rows, row => row.groupId), []);
    const rowIds = useMemo(() => rows.map(row => row.id), []);
    const areAllGroupsExpanded = groupIds.every(groupId => expandedGroups.includes(groupId));
    const areAllRowsSelected = rowIds.every(rowId => selectedRowIds.includes(rowId));
    const areSomeRowsSelected = selectedRowIds.some(rowId => rowIds.includes(String(rowId)));

    const toggleGroup = (groupId: string) => {
        setExpandedGroups(currentExpandedGroups =>
            currentExpandedGroups.includes(groupId)
                ? currentExpandedGroups.filter(expandedGroupId => expandedGroupId !== groupId)
                : [...currentExpandedGroups, groupId]
        );
    };

    const toggleAllGroups = () => {
        setExpandedGroups(currentExpandedGroups =>
            groupIds.every(groupId => currentExpandedGroups.includes(groupId)) ? [] : groupIds
        );
    };

    const toggleAllRowsSelection = () => {
        setSelectedRowIds(areAllRowsSelected ? [] : rowIds);
    };

    return (
        <Table
            rowKey='id'
            hover
            selectedRowIds={selectedRowIds}
            onSelectionChange={setSelectedRowIds}
            showSelectionColumn
            selectionHeaderContent={
                <Checkbox
                    checked={areAllRowsSelected}
                    indeterminate={!areAllRowsSelected && areSomeRowsSelected}
                    onChange={toggleAllRowsSelection}
                />
            }
        >
            <TableHeader>
                <TableHeaderColumn columnKey='vehicle'>Vehicle</TableHeaderColumn>
                <TableHeaderColumn columnKey='driver'>Driver</TableHeaderColumn>
                <TableHeaderColumn columnKey='route'>Route</TableHeaderColumn>
                <TableHeaderColumn columnKey='eta'>ETA</TableHeaderColumn>
                <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
                <TableHeaderColumn columnKey='actions' horizontalAlign='right' className='padding-y-0'>
                    <TableExpandAllGroupsButton expanded={areAllGroupsExpanded} onClick={toggleAllGroups} />
                </TableHeaderColumn>
            </TableHeader>

            <TableBody>
                {groups.map(group => {
                    const isExpanded = expandedGroups.includes(group.id);
                    const groupRows = rowsByGroupId.get(group.id) ?? [];

                    return (
                        <Fragment key={group.id}>
                            <TableGroupRow noHover>
                                <div className='display-flex align-items-center justify-content-between gap-15 width-100pct'>
                                    <div className='display-flex align-items-center gap-10'>
                                        <span className='text-bold'>{group.terminal}</span>
                                        <span className='text-color-dark'>
                                            {groupRows.length} of {rows.length} departures
                                        </span>
                                    </div>
                                    <TableExpanderButton expanded={isExpanded} onClick={() => toggleGroup(group.id)} />
                                </div>
                            </TableGroupRow>

                            {isExpanded &&
                                groupRows.map(row => (
                                    <TableExpandedRow key={row.id} parentKey={group.id} className='bg-white' {...row}>
                                        <TableColumn columnKey='vehicle'>{row.vehicle}</TableColumn>
                                        <TableColumn columnKey='driver'>{row.driver}</TableColumn>
                                        <TableColumn columnKey='route'>{row.route}</TableColumn>
                                        <TableColumn columnKey='eta'>{row.eta}</TableColumn>
                                        <TableColumn columnKey='status'>{row.status}</TableColumn>
                                        <TableColumn columnKey='actions' />
                                    </TableExpandedRow>
                                ))}
                        </Fragment>
                    );
                })}
            </TableBody>
        </Table>
    );
};

export default TableGroupedRowsSelectionExample;
```

#### HTML (html)

```html
<div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3 table-col-4 table-col-5 table-col-6&quot;; --table-column-count: 7; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="7">
    <div class="table-head" role="rowgroup">
        <div class="table-head-grid table-head-grid-custom-selection" role="row" style="grid-template-rows: repeat(1, auto);">
            <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle table-selection-cell-custom-content" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="vehicle" role="columnheader" aria-colindex="2" aria-rowindex="1" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Vehicle</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="driver" role="columnheader" aria-colindex="3" aria-rowindex="1" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Driver</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="route" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Route</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="eta" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">ETA</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="6" aria-rowindex="1" style="grid-area: 1 / 6 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Status</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-align-right table-vertical-align-middle padding-y-0" data-column="actions" role="columnheader" aria-colindex="7" aria-rowindex="1" style="grid-area: 1 / 7 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">
                                <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component table-expand-all-groups-button" tabindex="0">
                                    <span class="rioglyph rioglyph-angle-double-down text-size-16">
                                    </span>
                                </button>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table-body" role="rowgroup">
        <div class="table-row table-row-group table-row-no-hover" data-index="0" data-row-id="group-0" role="row">
            <div class="table-cell table-group-cell" role="cell" aria-colspan="7">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
                        <div class="display-flex align-items-center gap-10">
                            <span class="text-bold">Berlin Hub</span>
                            <span class="text-color-dark">5 of 33 departures</span>
                        </div>
                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button table-expander-button-expanded" tabindex="0">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div id="berlin-1" class="table-row table-row-expanded-data bg-white" data-index="1" data-row-id="berlin-1" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">R-2041</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Lena Vogt</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Berlin - Hamburg</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">08:40</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Ready</div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                </div>
            </div>
        </div>
        <div id="berlin-2" class="table-row table-row-expanded-data bg-white" data-index="2" data-row-id="berlin-2" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">R-2042</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Milan Weber</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Berlin - Leipzig</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">09:10</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Loading</div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                </div>
            </div>
        </div>
        <div id="berlin-3" class="table-row table-row-expanded-data bg-white" data-index="3" data-row-id="berlin-3" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">R-2043</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Eva Kruger</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Berlin - Dresden</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">09:35</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Ready</div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                </div>
            </div>
        </div>
        <div id="berlin-4" class="table-row table-row-expanded-data bg-white" data-index="4" data-row-id="berlin-4" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">R-2044</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Jonas Brandt</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Berlin - Rostock</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">10:05</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Delayed</div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                </div>
            </div>
        </div>
        <div id="berlin-5" class="table-row table-row-expanded-data bg-white" data-index="5" data-row-id="berlin-5" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">R-2045</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Nora Seidel</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Berlin - Bremen</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="eta" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">10:30</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Ready</div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                </div>
            </div>
        </div>
        <div class="table-row table-row-group table-row-no-hover" data-index="6" data-row-id="group-6" role="row">
            <div class="table-cell table-group-cell" role="cell" aria-colspan="7">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
                        <div class="display-flex align-items-center gap-10">
                            <span class="text-bold">Hamburg Yard</span>
                            <span class="text-color-dark">6 of 33 departures</span>
                        </div>
                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-row table-row-group table-row-no-hover" data-index="7" data-row-id="group-7" role="row">
            <div class="table-cell table-group-cell" role="cell" aria-colspan="7">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
                        <div class="display-flex align-items-center gap-10">
                            <span class="text-bold">Munich Depot</span>
                            <span class="text-color-dark">5 of 33 departures</span>
                        </div>
                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-row table-row-group table-row-no-hover" data-index="8" data-row-id="group-8" role="row">
            <div class="table-cell table-group-cell" role="cell" aria-colspan="7">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
                        <div class="display-flex align-items-center gap-10">
                            <span class="text-bold">Cologne Crossdock</span>
                            <span class="text-color-dark">6 of 33 departures</span>
                        </div>
                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-row table-row-group table-row-no-hover" data-index="9" data-row-id="group-9" role="row">
            <div class="table-cell table-group-cell" role="cell" aria-colspan="7">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
                        <div class="display-flex align-items-center gap-10">
                            <span class="text-bold">Frankfurt Gate</span>
                            <span class="text-color-dark">5 of 33 departures</span>
                        </div>
                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-row table-row-group table-row-no-hover" data-index="10" data-row-id="group-10" role="row">
            <div class="table-cell table-group-cell" role="cell" aria-colspan="7">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
                        <div class="display-flex align-items-center gap-10">
                            <span class="text-bold">Stuttgart Terminal</span>
                            <span class="text-color-dark">6 of 33 departures</span>
                        </div>
                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Selectable groups with expanded rows

When selection should apply to groups instead of expanded data rows, enable the table selection column and make only the TableGroupRow selectable. Expanded rows can opt out with selectable={false} and hide their empty selection controls via hideSelectionCheckboxesForExcludedRows.

### Example: 5 departures

Vehicle

Driver

Destination

Departure

Status

North region 5 departures

N-1041

Lena Vogt

Hamburg

08:00

Ready

N-1042

Milan Weber

Kiel

08:25

Loading

N-1043

Eva Kruger

Bremen

08:50

Ready

N-1044

Jonas Brandt

Lubeck

09:15

Delayed

N-1045

Nora Seidel

Rostock

09:40

Ready

East region 6 departures

South region 5 departures

West region 6 departures

Central region 5 departures

Southwest region 6 departures

#### React (tsx)

```tsx
import { Fragment, useMemo, useState } from 'react';

import Table, {
    TableBody,
    TableColumn,
    TableExpandAllGroupsButton,
    TableExpandedRow,
    TableExpanderButton,
    TableGroupRow,
    TableHeader,
    TableHeaderColumn,
    type TableRowId,
} from '@rio-cloud/rio-uikit/Table';

type DemoSelectableGroupRow = {
    id: string;
    groupId: string;
    vehicle: string;
    driver: string;
    destination: string;
    departure: string;
    status: string;
};

type DemoSelectableGroup = {
    id: string;
    name: string;
};

const groups: DemoSelectableGroup[] = [
    { id: 'north', name: 'North region' },
    { id: 'east', name: 'East region' },
    { id: 'south', name: 'South region' },
    { id: 'west', name: 'West region' },
    { id: 'central', name: 'Central region' },
    { id: 'southwest', name: 'Southwest region' },
];

const groupIds = groups.map(group => group.id);

const rows: DemoSelectableGroupRow[] = [
    {
        id: 'north-1',
        groupId: 'north',
        vehicle: 'N-1041',
        driver: 'Lena Vogt',
        destination: 'Hamburg',
        departure: '08:00',
        status: 'Ready',
    },
    {
        id: 'north-2',
        groupId: 'north',
        vehicle: 'N-1042',
        driver: 'Milan Weber',
        destination: 'Kiel',
        departure: '08:25',
        status: 'Loading',
    },
    {
        id: 'north-3',
        groupId: 'north',
        vehicle: 'N-1043',
        driver: 'Eva Kruger',
        destination: 'Bremen',
        departure: '08:50',
        status: 'Ready',
    },
    {
        id: 'north-4',
        groupId: 'north',
        vehicle: 'N-1044',
        driver: 'Jonas Brandt',
        destination: 'Lubeck',
        departure: '09:15',
        status: 'Delayed',
    },
    {
        id: 'north-5',
        groupId: 'north',
        vehicle: 'N-1045',
        driver: 'Nora Seidel',
        destination: 'Rostock',
        departure: '09:40',
        status: 'Ready',
    },
    {
        id: 'east-1',
        groupId: 'east',
        vehicle: 'E-2081',
        driver: 'Oskar Klein',
        destination: 'Leipzig',
        departure: '08:10',
        status: 'Ready',
    },
    {
        id: 'east-2',
        groupId: 'east',
        vehicle: 'E-2082',
        driver: 'Mara Stein',
        destination: 'Dresden',
        departure: '08:35',
        status: 'Loading',
    },
    {
        id: 'east-3',
        groupId: 'east',
        vehicle: 'E-2083',
        driver: 'Timo Wolf',
        destination: 'Potsdam',
        departure: '09:05',
        status: 'In transit',
    },
    {
        id: 'east-4',
        groupId: 'east',
        vehicle: 'E-2084',
        driver: 'Sina Roth',
        destination: 'Cottbus',
        departure: '09:30',
        status: 'Ready',
    },
    {
        id: 'east-5',
        groupId: 'east',
        vehicle: 'E-2085',
        driver: 'Felix Graf',
        destination: 'Erfurt',
        departure: '10:00',
        status: 'Ready',
    },
    {
        id: 'east-6',
        groupId: 'east',
        vehicle: 'E-2086',
        driver: 'Iris Lind',
        destination: 'Jena',
        departure: '10:25',
        status: 'Delayed',
    },
    {
        id: 'south-1',
        groupId: 'south',
        vehicle: 'S-3301',
        driver: 'Anja Hofmann',
        destination: 'Munich',
        departure: '08:15',
        status: 'Ready',
    },
    {
        id: 'south-2',
        groupId: 'south',
        vehicle: 'S-3302',
        driver: 'David Lang',
        destination: 'Augsburg',
        departure: '08:45',
        status: 'In transit',
    },
    {
        id: 'south-3',
        groupId: 'south',
        vehicle: 'S-3303',
        driver: 'Clara Beck',
        destination: 'Ulm',
        departure: '09:10',
        status: 'Ready',
    },
    {
        id: 'south-4',
        groupId: 'south',
        vehicle: 'S-3304',
        driver: 'Erik Hahn',
        destination: 'Passau',
        departure: '09:50',
        status: 'Loading',
    },
    {
        id: 'south-5',
        groupId: 'south',
        vehicle: 'S-3305',
        driver: 'Paula Rehm',
        destination: 'Regensburg',
        departure: '10:20',
        status: 'Ready',
    },
    {
        id: 'west-1',
        groupId: 'west',
        vehicle: 'W-4101',
        driver: 'Ben Keller',
        destination: 'Cologne',
        departure: '08:05',
        status: 'Ready',
    },
    {
        id: 'west-2',
        groupId: 'west',
        vehicle: 'W-4102',
        driver: 'Lea Sommer',
        destination: 'Dortmund',
        departure: '08:30',
        status: 'Delayed',
    },
    {
        id: 'west-3',
        groupId: 'west',
        vehicle: 'W-4103',
        driver: 'Noah Frey',
        destination: 'Essen',
        departure: '09:00',
        status: 'Loading',
    },
    {
        id: 'west-4',
        groupId: 'west',
        vehicle: 'W-4104',
        driver: 'Mia Busch',
        destination: 'Aachen',
        departure: '09:35',
        status: 'Ready',
    },
    {
        id: 'west-5',
        groupId: 'west',
        vehicle: 'W-4105',
        driver: 'Lars Kunz',
        destination: 'Bonn',
        departure: '10:05',
        status: 'Ready',
    },
    {
        id: 'west-6',
        groupId: 'west',
        vehicle: 'W-4106',
        driver: 'Rosa Dietz',
        destination: 'Koblenz',
        departure: '10:35',
        status: 'In transit',
    },
    {
        id: 'central-1',
        groupId: 'central',
        vehicle: 'C-5201',
        driver: 'Klara May',
        destination: 'Frankfurt',
        departure: '08:20',
        status: 'Ready',
    },
    {
        id: 'central-2',
        groupId: 'central',
        vehicle: 'C-5202',
        driver: 'Jan Otto',
        destination: 'Kassel',
        departure: '08:55',
        status: 'Loading',
    },
    {
        id: 'central-3',
        groupId: 'central',
        vehicle: 'C-5203',
        driver: 'Sarah Blum',
        destination: 'Mannheim',
        departure: '09:25',
        status: 'Ready',
    },
    {
        id: 'central-4',
        groupId: 'central',
        vehicle: 'C-5204',
        driver: 'Tom Ritter',
        destination: 'Mainz',
        departure: '09:55',
        status: 'In transit',
    },
    {
        id: 'central-5',
        groupId: 'central',
        vehicle: 'C-5205',
        driver: 'Nina Adler',
        destination: 'Fulda',
        departure: '10:30',
        status: 'Delayed',
    },
    {
        id: 'southwest-1',
        groupId: 'southwest',
        vehicle: 'SW-6101',
        driver: 'Luis Horn',
        destination: 'Stuttgart',
        departure: '08:30',
        status: 'Ready',
    },
    {
        id: 'southwest-2',
        groupId: 'southwest',
        vehicle: 'SW-6102',
        driver: 'Greta Vogler',
        destination: 'Freiburg',
        departure: '09:00',
        status: 'Loading',
    },
    {
        id: 'southwest-3',
        groupId: 'southwest',
        vehicle: 'SW-6103',
        driver: 'Aron Weiss',
        destination: 'Karlsruhe',
        departure: '09:30',
        status: 'Ready',
    },
    {
        id: 'southwest-4',
        groupId: 'southwest',
        vehicle: 'SW-6104',
        driver: 'Lina Fuchs',
        destination: 'Tubingen',
        departure: '10:10',
        status: 'In transit',
    },
    {
        id: 'southwest-5',
        groupId: 'southwest',
        vehicle: 'SW-6105',
        driver: 'Theo Bach',
        destination: 'Heilbronn',
        departure: '10:45',
        status: 'Ready',
    },
    {
        id: 'southwest-6',
        groupId: 'southwest',
        vehicle: 'SW-6106',
        driver: 'Emma Koch',
        destination: 'Singen',
        departure: '11:15',
        status: 'Delayed',
    },
];

const TableSelectableGroupRowsExample = () => {
    const [expandedGroups, setExpandedGroups] = useState<string[]>(['north']);
    const [selectedGroupIds, setSelectedGroupIds] = useState<TableRowId[]>([]);

    const rowsByGroupId = useMemo(() => Map.groupBy(rows, row => row.groupId), []);
    const areAllGroupsExpanded = groupIds.every(groupId => expandedGroups.includes(groupId));

    const toggleGroup = (groupId: string) => {
        setExpandedGroups(currentExpandedGroups =>
            currentExpandedGroups.includes(groupId)
                ? currentExpandedGroups.filter(expandedGroupId => expandedGroupId !== groupId)
                : [...currentExpandedGroups, groupId]
        );
    };

    const toggleAllGroups = () => {
        setExpandedGroups(currentExpandedGroups =>
            groupIds.every(groupId => currentExpandedGroups.includes(groupId)) ? [] : groupIds
        );
    };

    return (
        <Table
            rowKey='id'
            hover
            selectedRowIds={selectedGroupIds}
            onSelectionChange={setSelectedGroupIds}
            showSelectionColumn
            hideSelectionCheckboxesForExcludedRows
        >
            <TableHeader>
                <TableHeaderColumn columnKey='vehicle'>Vehicle</TableHeaderColumn>
                <TableHeaderColumn columnKey='driver'>Driver</TableHeaderColumn>
                <TableHeaderColumn columnKey='destination'>Destination</TableHeaderColumn>
                <TableHeaderColumn columnKey='departure'>Departure</TableHeaderColumn>
                <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
                <TableHeaderColumn columnKey='actions' horizontalAlign='right' className='padding-y-0'>
                    <TableExpandAllGroupsButton expanded={areAllGroupsExpanded} onClick={toggleAllGroups} />
                </TableHeaderColumn>
            </TableHeader>

            <TableBody>
                {groups.map(group => {
                    const isExpanded = expandedGroups.includes(group.id);
                    const groupRows = rowsByGroupId.get(group.id) ?? [];

                    return (
                        <Fragment key={group.id}>
                            <TableGroupRow id={group.id} selectable noHover>
                                <div className='display-flex align-items-center justify-content-between gap-15 width-100pct'>
                                    <div className='display-flex align-items-center gap-10'>
                                        <span className='text-bold'>{group.name}</span>
                                        <span className='text-color-dark'>{groupRows.length} departures</span>
                                    </div>
                                    <TableExpanderButton expanded={isExpanded} onClick={() => toggleGroup(group.id)} />
                                </div>
                            </TableGroupRow>

                            {isExpanded &&
                                groupRows.map(row => (
                                    <TableExpandedRow
                                        key={row.id}
                                        parentKey={group.id}
                                        selectable={false}
                                        className='bg-white'
                                        {...row}
                                    >
                                        <TableColumn columnKey='vehicle'>{row.vehicle}</TableColumn>
                                        <TableColumn columnKey='driver'>{row.driver}</TableColumn>
                                        <TableColumn columnKey='destination'>{row.destination}</TableColumn>
                                        <TableColumn columnKey='departure'>{row.departure}</TableColumn>
                                        <TableColumn columnKey='status'>{row.status}</TableColumn>
                                        <TableColumn columnKey='actions' />
                                    </TableExpandedRow>
                                ))}
                        </Fragment>
                    );
                })}
            </TableBody>
        </Table>
    );
};

export default TableSelectableGroupRowsExample;
```

#### HTML (html)

```html
<div class="table table-view-table table-hover border table-rounded table-has-head" role="table" style="--table-columns: 50px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-selection table-col-1 table-col-2 table-col-3 table-col-4 table-col-5 table-col-6&quot;; --table-column-count: 7; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="7">
    <div class="table-head" role="rowgroup">
        <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
            <div class="table-head-cell table-selection-cell table-align-center table-vertical-align-middle" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="vehicle" role="columnheader" aria-colindex="2" aria-rowindex="1" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Vehicle</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="driver" role="columnheader" aria-colindex="3" aria-rowindex="1" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Driver</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="destination" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Destination</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="departure" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Departure</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="6" aria-rowindex="1" style="grid-area: 1 / 6 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">Status</span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="table-head-cell table-align-right table-vertical-align-middle padding-y-0" data-column="actions" role="columnheader" aria-colindex="7" aria-rowindex="1" style="grid-area: 1 / 7 / span 1 / span 1;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper">
                            <span class="table-head-label">
                                <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component table-expand-all-groups-button" tabindex="0">
                                    <span class="rioglyph rioglyph-angle-double-down text-size-16">
                                    </span>
                                </button>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table-body" role="rowgroup">
        <div class="table-row table-row-group table-row-group-selectable table-row-no-hover" data-index="0" data-row-id="north" role="row">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-cell table-group-cell" role="cell" aria-colspan="6">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
                        <div class="display-flex align-items-center gap-10">
                            <span class="text-bold">North region</span>
                            <span class="text-color-dark">5 departures</span>
                        </div>
                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button table-expander-button-expanded" tabindex="0">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div id="north-1" class="table-row table-row-expanded-data bg-white" data-index="1" data-row-id="north-1" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">N-1041</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Lena Vogt</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Hamburg</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="departure" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">08:00</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Ready</div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                </div>
            </div>
        </div>
        <div id="north-2" class="table-row table-row-expanded-data bg-white" data-index="2" data-row-id="north-2" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">N-1042</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Milan Weber</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Kiel</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="departure" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">08:25</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Loading</div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                </div>
            </div>
        </div>
        <div id="north-3" class="table-row table-row-expanded-data bg-white" data-index="3" data-row-id="north-3" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">N-1043</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Eva Kruger</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Bremen</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="departure" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">08:50</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Ready</div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                </div>
            </div>
        </div>
        <div id="north-4" class="table-row table-row-expanded-data bg-white" data-index="4" data-row-id="north-4" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">N-1044</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Jonas Brandt</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Lubeck</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="departure" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">09:15</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Delayed</div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                </div>
            </div>
        </div>
        <div id="north-5" class="table-row table-row-expanded-data bg-white" data-index="5" data-row-id="north-5" role="row" style="overflow: hidden; opacity: 1; height: auto; transform: none;">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="vehicle" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">N-1045</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="driver" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Nora Seidel</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="destination" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Rostock</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="departure" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">09:40</div>
            </div>
            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">Ready</div>
            </div>
            <div class="table-cell table-align-right table-vertical-align-middle" data-column="actions" role="cell" aria-colindex="7" style="grid-area: 1 / 7 / span 1 / span 1;">
                <div class="table-cell-content overflow-hidden">
                </div>
            </div>
        </div>
        <div class="table-row table-row-group table-row-group-selectable table-row-no-hover" data-index="6" data-row-id="east" role="row">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-cell table-group-cell" role="cell" aria-colspan="6">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
                        <div class="display-flex align-items-center gap-10">
                            <span class="text-bold">East region</span>
                            <span class="text-color-dark">6 departures</span>
                        </div>
                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-row table-row-group table-row-group-selectable table-row-no-hover" data-index="7" data-row-id="south" role="row">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-cell table-group-cell" role="cell" aria-colspan="6">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
                        <div class="display-flex align-items-center gap-10">
                            <span class="text-bold">South region</span>
                            <span class="text-color-dark">5 departures</span>
                        </div>
                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-row table-row-group table-row-group-selectable table-row-no-hover" data-index="8" data-row-id="west" role="row">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-cell table-group-cell" role="cell" aria-colspan="6">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
                        <div class="display-flex align-items-center gap-10">
                            <span class="text-bold">West region</span>
                            <span class="text-color-dark">6 departures</span>
                        </div>
                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-row table-row-group table-row-group-selectable table-row-no-hover" data-index="9" data-row-id="central" role="row">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-cell table-group-cell" role="cell" aria-colspan="6">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
                        <div class="display-flex align-items-center gap-10">
                            <span class="text-bold">Central region</span>
                            <span class="text-color-dark">5 departures</span>
                        </div>
                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-row table-row-group table-row-group-selectable table-row-no-hover" data-index="10" data-row-id="southwest" role="row">
            <div class="table-cell table-selection-cell table-vertical-align-middle" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                <div class="table-selection-control">
                    <label class="checkbox" tabindex="0">
                        <input type="checkbox" class="">
                        <span class="checkbox-text">
                        </span>
                    </label>
                </div>
            </div>
            <div class="table-cell table-group-cell" role="cell" aria-colspan="6">
                <div class="table-cell-content">
                    <div class="display-flex align-items-center justify-content-between gap-15 width-100pct">
                        <div class="display-flex align-items-center gap-10">
                            <span class="text-bold">Southwest region</span>
                            <span class="text-color-dark">6 departures</span>
                        </div>
                        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component table-expander-button" tabindex="0">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Row animation

### Example: Example 42

Remove row Reset table

Id

Name

VIN

Status

1

Lorem

7354

Active

2

Ipsum

456457

Inactive

3

Dolor

895

Active

4

Sit

3456

Active

5

Amet

2445

Active

6

Consectetur

878

Active

#### React (tsx)

```tsx
import { useState } from 'react';

import Button from '@rio-cloud/rio-uikit/Button';
import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
import useSorting from '@rio-cloud/rio-uikit/useSorting';

type TableRowAnimationItem = {
    id: number;
    name: string;
    vin: string;
    status: string;
};

const tableData: TableRowAnimationItem[] = [
    {
        id: 1,
        name: 'Lorem',
        vin: '7354',
        status: 'Active',
    },
    {
        id: 2,
        name: 'Ipsum',
        vin: '456457',
        status: 'Inactive',
    },
    {
        id: 3,
        name: 'Dolor',
        vin: '895',
        status: 'Active',
    },
    {
        id: 4,
        name: 'Sit',
        vin: '3456',
        status: 'Active',
    },
    {
        id: 5,
        name: 'Amet',
        vin: '2445',
        status: 'Active',
    },
    {
        id: 6,
        name: 'Consectetur',
        vin: '878',
        status: 'Active',
    },
];

const TableRowAnimationExample = () => {
    const [data, setData] = useState(tableData);

    const { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection } = useSorting(data, 'id');

    const handleRemoveRow = (fatalRow: number) => {
        setData(previousData => previousData.filter(item => item.id !== fatalRow));
    };

    const handleReset = () => setData(tableData);

    const handleSortChange = (columnKey: string, direction: 'asc' | 'desc') => {
        setSortKey(columnKey as keyof TableRowAnimationItem);
        setSortDirection(direction);
    };

    return (
        <div>
            <TableToolbar disableResponsiveCollapse>
                <TableToolbarColumn>
                    <div className='btn-toolbar'>
                        <Button bsStyle={Button.PRIMARY} onClick={() => handleRemoveRow(3)}>
                            Remove row
                        </Button>
                        <Button onClick={handleReset}>Reset table</Button>
                    </div>
                </TableToolbarColumn>
            </TableToolbar>

            <Table
                rowKey='id'
                className='width-100pct'
                sortBy={String(sortKey)}
                sortDirection={sortDirection}
                onSortChange={handleSortChange}
                rowAnimationProps={{
                    initial: { opacity: 0, x: 24 },
                    animate: { opacity: 1, x: 0 },
                    exit: { opacity: 0, x: 120, transition: { duration: 0.3, ease: 'easeIn' } },
                    transition: { duration: 0.2, ease: 'easeOut' },
                }}
            >
                <TableHeader>
                    <TableHeaderColumn columnKey='id' sortable width={80}>
                        Id
                    </TableHeaderColumn>
                    <TableHeaderColumn columnKey='name' sortable>
                        Name
                    </TableHeaderColumn>
                    <TableHeaderColumn columnKey='vin' sortable>
                        VIN
                    </TableHeaderColumn>
                    <TableHeaderColumn columnKey='status' sortable>
                        Status
                    </TableHeaderColumn>
                    <TableHeaderColumn columnKey='action' width={50} hideLabel>
                        Actions
                    </TableHeaderColumn>
                </TableHeader>
                <TableBody>
                    {sortedItems.map(item => (
                        <TableRow key={item.id} id={item.id}>
                            <TableColumn columnKey='id'>{item.id}</TableColumn>
                            <TableColumn columnKey='name'>{item.name}</TableColumn>
                            <TableColumn columnKey='vin'>{item.vin}</TableColumn>
                            <TableColumn columnKey='status'>{item.status}</TableColumn>
                            <TableColumn className='padding-5' horizontalAlign='center' preventRowClick>
                                <Button
                                    iconOnly
                                    bsStyle='muted'
                                    iconName='rioglyph-trash'
                                    onClick={() => handleRemoveRow(item.id)}
                                />
                            </TableColumn>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    );
};

export default TableRowAnimationExample;
```

#### HTML (html)

```html
<div>
    <div class="table-toolbar">
        <div class="table-toolbar-container">
            <div class="table-toolbar-group-left">
                <div class="table-toolbar-column align-self-end">
                    <div class="btn-toolbar">
                        <button type="button" class="btn btn-primary btn-component" tabindex="0">Remove row</button>
                        <button type="button" class="btn btn-default btn-component" tabindex="0">Reset table</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table table-view-table border table-rounded table-has-head width-100pct" role="table" style="--table-columns: minmax(0, 80px) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(0, 50px); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4 table-col-5&quot;; --table-column-count: 5; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="5">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
                <div class="table-head-cell table-head-cell-sortable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="id" role="columnheader" aria-colindex="1" aria-rowindex="1" aria-sort="ascending" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button">
                                <span class="table-head-button-label">
                                    <span class="sort-arrows sort-asc">
                                    </span>
                                    <span class="table-head-label">Id</span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-sortable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="name" role="columnheader" aria-colindex="2" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button">
                                <span class="table-head-button-label">
                                    <span class="sort-arrows ">
                                    </span>
                                    <span class="table-head-label">Name</span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-sortable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="vin" role="columnheader" aria-colindex="3" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button">
                                <span class="table-head-button-label">
                                    <span class="sort-arrows ">
                                    </span>
                                    <span class="table-head-label">VIN</span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-sortable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="4" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button">
                                <span class="table-head-button-label">
                                    <span class="sort-arrows ">
                                    </span>
                                    <span class="table-head-label">Status</span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="action" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper" aria-label="Actions">
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-body" role="rowgroup">
            <div id="1" class="table-row" data-index="0" data-row-id="1" role="row" style="opacity: 1; transform: none;">
                <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">1</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">Lorem</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="vin" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">7354</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Active</div>
                </div>
                <div class="table-cell table-align-center table-vertical-align-middle padding-5" data-column="action" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
                            <span class="rioglyph rioglyph-trash">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div id="2" class="table-row" data-index="1" data-row-id="2" role="row" style="opacity: 1; transform: none;">
                <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">2</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">Ipsum</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="vin" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">456457</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Inactive</div>
                </div>
                <div class="table-cell table-align-center table-vertical-align-middle padding-5" data-column="action" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
                            <span class="rioglyph rioglyph-trash">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div id="3" class="table-row" data-index="2" data-row-id="3" role="row" style="opacity: 1; transform: none;">
                <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">3</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">Dolor</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="vin" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">895</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Active</div>
                </div>
                <div class="table-cell table-align-center table-vertical-align-middle padding-5" data-column="action" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
                            <span class="rioglyph rioglyph-trash">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div id="4" class="table-row" data-index="3" data-row-id="4" role="row" style="opacity: 1; transform: none;">
                <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">4</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">Sit</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="vin" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">3456</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Active</div>
                </div>
                <div class="table-cell table-align-center table-vertical-align-middle padding-5" data-column="action" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
                            <span class="rioglyph rioglyph-trash">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div id="5" class="table-row" data-index="4" data-row-id="5" role="row" style="opacity: 1; transform: none;">
                <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">5</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">Amet</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="vin" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">2445</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Active</div>
                </div>
                <div class="table-cell table-align-center table-vertical-align-middle padding-5" data-column="action" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
                            <span class="rioglyph rioglyph-trash">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div id="6" class="table-row" data-index="5" data-row-id="6" role="row" style="opacity: 1; transform: none;">
                <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">6</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">Consectetur</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="vin" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">878</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Active</div>
                </div>
                <div class="table-cell table-align-center table-vertical-align-middle padding-5" data-column="action" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
                            <span class="rioglyph rioglyph-trash">
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Empty state in table

Pass an EmptyState via `noRowsState` when there are no entries yet and the table has not been populated.

### Example: No tracked events for this order

Date

Checkpoint

Status

Actor

Notes

To pick up a draggable item, press the space bar.
While dragging, use the arrow keys to move the item.
Press space again to drop the item in its new position, or press escape to cancel.

No tracked events for this order
Events appear when the order is shared with other users and the order state is active.
Learn how to start tracking order events

#### React (tsx)

```tsx
import EmptyState from '@rio-cloud/rio-uikit/EmptyState';
import Table, { TableBody, TableHeader, TableHeaderColumn } from '@rio-cloud/rio-uikit/Table';

const TableEmptyStateExample = () => (
    <Table
        noRowsState={
            <EmptyState
                headline='No tracked events for this order'
                message='Events appear when the order is shared with other users and the order state is active.'
                outerClassName='border-none'
                buttons={[
                    {
                        text: 'Learn how to start tracking order events',
                        href: '#',
                    },
                ]}
            />
        }
    >
        <TableHeader>
            <TableHeaderColumn resizeable draggable columnKey='date'>
                Date
            </TableHeaderColumn>
            <TableHeaderColumn resizeable draggable columnKey='checkpoint'>
                Checkpoint
            </TableHeaderColumn>
            <TableHeaderColumn resizeable draggable columnKey='status'>
                Status
            </TableHeaderColumn>
            <TableHeaderColumn resizeable draggable columnKey='actor'>
                Actor
            </TableHeaderColumn>
            <TableHeaderColumn resizeable draggable columnKey='notes'>
                Notes
            </TableHeaderColumn>
        </TableHeader>
        <TableBody />
    </Table>
);

export default TableEmptyStateExample;
```

#### HTML (html)

```html
<div class="table table-view-table border table-rounded table-has-head" role="table" style="--table-columns: minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4 table-col-5&quot;; --table-column-count: 5; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="5">
    <div class="table-head" role="rowgroup">
        <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
            <div class="table-head-cell table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="date" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1; transition: transform linear;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-6">
                            <span class="table-head-label">Date</span>
                        </span>
                    </div>
                </div>
                <div class="table-column-resize-handle">
                </div>
            </div>
            <div class="table-head-cell table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="checkpoint" role="columnheader" aria-colindex="2" aria-rowindex="1" style="grid-area: 1 / 2 / span 1 / span 1; transition: transform linear;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-6">
                            <span class="table-head-label">Checkpoint</span>
                        </span>
                    </div>
                </div>
                <div class="table-column-resize-handle">
                </div>
            </div>
            <div class="table-head-cell table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider 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; transition: transform linear;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-6">
                            <span class="table-head-label">Status</span>
                        </span>
                    </div>
                </div>
                <div class="table-column-resize-handle">
                </div>
            </div>
            <div class="table-head-cell table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="actor" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1; transition: transform linear;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-6">
                            <span class="table-head-label">Actor</span>
                        </span>
                    </div>
                </div>
                <div class="table-column-resize-handle">
                </div>
            </div>
            <div class="table-head-cell table-head-cell-draggable table-align-left table-vertical-align-middle" data-column="notes" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1; transition: transform linear;">
                <div class="table-head-cell-content">
                    <div class="table-head-cell-content-row">
                        <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-6">
                            <span class="table-head-label">Notes</span>
                        </span>
                    </div>
                </div>
            </div>
            <div id="DndDescribedBy-6" style="display: none;">
                To pick up a draggable item, press the space bar.
                While dragging, use the arrow keys to move the item.
                Press space again to drop the item in its new position, or press escape to cancel.
            </div>
            <div id="DndLiveRegion-6" role="status" aria-live="assertive" aria-atomic="true" style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%); white-space: nowrap;">
            </div>
        </div>
    </div>
    <div class="table-body" role="rowgroup">
        <div class="table-row table-row-empty table-row-no-hover" role="row">
            <div class="table-cell table-empty" role="cell" aria-colspan="5">
                <div class="table-cell-content">
                    <div class="display-flex justify-content-center max-width-100pct">
                        <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15 border-none">
                            <div class="display-flex flex-column align-items-center text-center padding-25">
                                <div class="text-size-h2 margin-bottom-20">
                                    <span class="rioglyph rioglyph-empty text-color-light text-size-300pct">
                                    </span>
                                </div>
                                <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">No tracked events for this order</div>
                                <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">Events appear when the order is shared with other users and the order state is active.</div>
                                <div class="btn-toolbar margin-top-20">
                                    <a class="margin-top-15" href="#">Learn how to start tracking order events</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Not found state in table

Pass a NotFoundState via `noRowsState` when search or filters are active and no rows match the current criteria.

### Example: We couldn't find any matching deliveries

Order

Checkpoint

Status

We couldn't find any matching deliveries
Try refining your search or resetting the filters to see more results.

#### React (tsx)

```tsx
import { useRef, useState } from 'react';

import NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';
import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
import TableSearch from '@rio-cloud/rio-uikit/TableSearch';
import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
import useSearchHighlight from '@rio-cloud/rio-uikit/useSearchHighlight';

type Delivery = {
    id: number;
    order: string;
    checkpoint: string;
    status: string;
};

const deliveries: Delivery[] = [
    { id: 1, order: 'ORD-1034', checkpoint: 'Berlin Hub', status: 'On route' },
    { id: 2, order: 'ORD-2048', checkpoint: 'Hamburg Port', status: 'Delivered' },
    { id: 3, order: 'ORD-3021', checkpoint: 'Munich Depot', status: 'Delayed' },
];

const TableNotFoundStateExample = () => {
    const [searchTerm, setSearchTerm] = useState('foobar');
    const tableRef = useRef<HTMLDivElement>(null);

    const normalizedSearchTerm = searchTerm.trim().toLowerCase();
    const filteredDeliveries = deliveries.filter(delivery =>
        [delivery.order, delivery.checkpoint, delivery.status].some(value =>
            value.toLowerCase().includes(normalizedSearchTerm)
        )
    );

    useSearchHighlight({
        ref: tableRef,
        query: searchTerm,
        deps: [filteredDeliveries.length],
    });

    return (
        <div>
            <TableToolbar>
                <TableToolbarColumn horizontalAlign='right'>
                    <TableSearch value={searchTerm} onChange={setSearchTerm} placeholder='Search deliveries' />
                </TableToolbarColumn>
            </TableToolbar>

            <Table
                ref={tableRef}
                rowKey='id'
                noRowsState={
                    <NotFoundState
                        headline="We couldn't find any matching deliveries"
                        message='Try refining your search or resetting the filters to see more results.'
                        outerClassName='border-none'
                    />
                }
            >
                <TableHeader>
                    <TableHeaderColumn columnKey='order'>Order</TableHeaderColumn>
                    <TableHeaderColumn columnKey='checkpoint'>Checkpoint</TableHeaderColumn>
                    <TableHeaderColumn columnKey='status'>Status</TableHeaderColumn>
                </TableHeader>
                <TableBody>
                    {filteredDeliveries.map(delivery => (
                        <TableRow key={delivery.id} id={delivery.id}>
                            <TableColumn columnKey='order'>{delivery.order}</TableColumn>
                            <TableColumn columnKey='checkpoint'>{delivery.checkpoint}</TableColumn>
                            <TableColumn columnKey='status'>{delivery.status}</TableColumn>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    );
};

export default TableNotFoundStateExample;
```

#### 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 deliveries" class="form-control withClearButton" type="text" tabindex="0" value="foobar">
                            <span class="clearButton">
                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table table-view-table 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="order" 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">Order</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="checkpoint" 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">Checkpoint</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 class="table-row table-row-empty table-row-no-hover" role="row">
                <div class="table-cell table-empty" role="cell" aria-colspan="3">
                    <div class="table-cell-content">
                        <div class="display-flex justify-content-center max-width-100pct">
                            <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15 border-none">
                                <div class="display-flex flex-column align-items-center text-center padding-25">
                                    <div class="text-size-h2 margin-bottom-20">
                                        <span class="rioglyph rioglyph-looking-glass-man text-color-light text-size-300pct">
                                        </span>
                                    </div>
                                    <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">We couldn't find any matching deliveries</div>
                                    <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">Try refining your search or resetting the filters to see more results.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```

## Feature playground

This playground combines multiple advanced table features in one place so their interaction can be tested together.

### Example:

Table styling 3 Styles selected Condensed
Striped
Hover
Shadow
Border
Rounded
Grid lines

Max height

View Table view
Cards view
List view

Columns

Truck

Route

Comment

To pick up a draggable item, press the space bar.
While dragging, use the arrow keys to move the item.
Press space again to drop the item in its new position, or press escape to cancel.

B-TR 512

Hamburg DC -> Zurich
863 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 24 pallets, 8.5 t gross

B-TR 512

Bremen Yard -> Zurich
881 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 21 pallets, 9.5 t gross

B-TR 512

Kassel Hub -> Zurich
899 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 18 pallets, 10.5 t gross

B-TR 512

Leipzig Crossdock -> Zurich
917 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 24 pallets, 11.5 t gross

B-TR 512

Munich South -> Zurich
935 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 21 pallets, 7.5 t gross

HB-G 118

Bremen Yard -> Cologne
318 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 20 pallets, 9.5 t gross

HB-G 118

Kassel Hub -> Cologne
336 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 26 pallets, 10.5 t gross

HB-G 118

Leipzig Crossdock -> Cologne
354 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 23 pallets, 11.5 t gross

HB-G 118

Munich South -> Cologne
372 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 20 pallets, 7.5 t gross

HB-G 118

Hamburg DC -> Cologne
390 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 26 pallets, 8.5 t gross

KS-F 662

Kassel Hub -> Prague
437 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 21 pallets, 10.5 t gross

KS-F 662

Leipzig Crossdock -> Prague
455 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 18 pallets, 11.5 t gross

KS-F 662

Munich South -> Prague
473 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 24 pallets, 7.5 t gross

KS-F 662

Hamburg DC -> Prague
491 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 21 pallets, 8.5 t gross

KS-F 662

Bremen Yard -> Prague
509 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 18 pallets, 9.5 t gross

L-RM 904

Leipzig Crossdock -> Rotterdam
623 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 22 pallets, 11.5 t gross

L-RM 904

Munich South -> Rotterdam
641 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 19 pallets, 7.5 t gross

L-RM 904

Hamburg DC -> Rotterdam
659 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 25 pallets, 8.5 t gross

L-RM 904

Bremen Yard -> Rotterdam
677 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 22 pallets, 9.5 t gross

L-RM 904

Kassel Hub -> Rotterdam
695 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 19 pallets, 10.5 t gross

M-RI 2418

Hamburg DC -> Berlin
292 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 19 pallets, 8.5 t gross

M-RI 2418

Bremen Yard -> Berlin
310 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 25 pallets, 9.5 t gross

M-RI 2418

Kassel Hub -> Berlin
328 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 22 pallets, 10.5 t gross

M-RI 2418

Leipzig Crossdock -> Berlin
346 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 19 pallets, 11.5 t gross

M-RI 2418

Munich South -> Berlin
364 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 25 pallets, 7.5 t gross

M-TL 357

Munich South -> Vienna
749 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 23 pallets, 7.5 t gross

M-TL 357

Hamburg DC -> Vienna
767 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 20 pallets, 8.5 t gross

M-TL 357

Bremen Yard -> Vienna
785 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 26 pallets, 9.5 t gross

M-TL 357

Kassel Hub -> Vienna
803 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 23 pallets, 10.5 t gross

M-TL 357

Leipzig Crossdock -> Vienna
821 km

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 20 pallets, 11.5 t gross

Trucks: 30

Total: 17490 km

Customize the table columns
Change column settings such as width, visibility, and alignment to explore how the table updates. Combine that with the flags in the settings grid to test selection, virtualization, and a sticky third row together.
Column:
Truck

Width

px px
%

Horizontal align left left
center
right

Vertical align top top
middle
bottom

Column:
Route

Width

px px
%

Horizontal align left left
center
right

Vertical align top top
middle
bottom

Column:
Comment

Width

px px
%

Horizontal align left left
center
right

Vertical align top top
middle
bottom

Table flags

Selection column Selection checkbox top aligned Virtualized 3rd row sticky

#### React (tsx)

```tsx
import { useEffect, useState } from 'react';

import Table, {
    TableBody,
    TableColumn,
    TableColumnsDropdown,
    TableFooter,
    TableHeader,
    TableHeaderColumn,
    TableRow,
} from '@rio-cloud/rio-uikit/Table';
import LicensePlate from '@rio-cloud/rio-uikit/LicensePlate';
import Multiselect from '@rio-cloud/rio-uikit/Multiselect';
import NumberControl from '@rio-cloud/rio-uikit/NumberControl';
import TableCardsSorting from '@rio-cloud/rio-uikit/TableCardsSorting';
import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
import TableViewToggles, { type TableViewTogglesViewType } from '@rio-cloud/rio-uikit/TableViewToggles';
import useSorting from '@rio-cloud/rio-uikit/useSorting';

import {
    demoTableCardsStyle,
    demoTableColumnsForComponents,
    demoTableRows,
    demoTableStyle,
    type DemoTableColumn,
    type DemoTableRow,
    type DemoTableStyle,
} from './tableWithSettingsDemoData';
import TableWithSettingsArea from './TableWithSettingsArea';

const styleToggles: { key: keyof DemoTableStyle; label: string }[] = [
    { key: 'condensed', label: 'Condensed' },
    { key: 'striped', label: 'Striped' },
    { key: 'hover', label: 'Hover' },
    { key: 'shadow', label: 'Shadow' },
    { key: 'border', label: 'Border' },
    { key: 'rounded', label: 'Rounded' },
    { key: 'gridLines', label: 'Grid lines' },
];

type DemoTableFlags = {
    showSelectionColumn: boolean;
    selectionCheckboxVerticalAlignmentTop: boolean;
    virtualizedRows: boolean;
    stickyThirdRow: boolean;
};

const defaultTableFlags: DemoTableFlags = {
    showSelectionColumn: false,
    selectionCheckboxVerticalAlignmentTop: false,
    virtualizedRows: false,
    stickyThirdRow: false,
};

const TableWithSettingsExample = () => {
    const [viewType, setViewType] = useState<TableViewTogglesViewType>('TABLE');
    const [tableStyle, setTableStyle] = useState<DemoTableStyle>({ ...demoTableStyle });
    const [tableFlags, setTableFlags] = useState<DemoTableFlags>(defaultTableFlags);
    const [bodyMaxHeight, setBodyMaxHeight] = useState<number | undefined>(300);
    const [columns, setColumns] = useState<DemoTableColumn[]>(() => demoTableColumnsForComponents);

    const { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection } = useSorting(
        demoTableRows,
        'licensePlate'
    );

    useEffect(() => {
        setColumns(previousColumns =>
            demoTableColumnsForComponents.map(defaultColumn => {
                const currentColumn = previousColumns.find(column => column.key === defaultColumn.key);

                return currentColumn ? { ...defaultColumn, ...currentColumn } : defaultColumn;
            })
        );
    }, []);

    const handleBodyMaxHeightChange = (value: number | undefined) => setBodyMaxHeight(value === 0 ? undefined : value);

    const handleStyleSelectionChange = (selectedStyleKeys: string[]) => {
        const selectedStyleKeySet = new Set(selectedStyleKeys);
        const nextTableStyle: DemoTableStyle = { ...demoTableStyle };

        styleToggles.forEach(styleToggle => {
            nextTableStyle[styleToggle.key] = selectedStyleKeySet.has(styleToggle.key);
        });

        setTableStyle(nextTableStyle);
    };

    const handleFlagToggle = (flagKey: keyof DemoTableFlags) => {
        setTableFlags(currentFlags => ({
            ...currentFlags,
            [flagKey]: !currentFlags[flagKey],
        }));
    };

    const columnsWithDefaults = columns.map(column => ({
        ...column,
        sortable: column.sortable ?? true,
        visible: column.visible ?? true,
    }));
    const visibleColumns = columnsWithDefaults.filter(column => column.visible !== false);
    const sortableColumns = columnsWithDefaults.filter(column => column.sortable);

    const displayedSortKey = sortKey === 'routeName' ? 'route' : sortKey;
    const isTableView = viewType === 'TABLE';

    const totalRouteDistanceKm = sortedItems.reduce((totalDistance, row) => totalDistance + row.routeDistanceKm, 0);

    const handleSortChange = (columnKey: string, direction: 'asc' | 'desc') => {
        setSortKey((columnKey === 'route' ? 'routeName' : columnKey) as keyof DemoTableRow);
        setSortDirection(direction);
    };

    const handleColumnResize = (columnKey: string, width?: number | string) => {
        setColumns(previousColumns =>
            previousColumns.map(column => {
                if (column.key !== columnKey) {
                    return column;
                }

                if (width === undefined) {
                    const { width: _width, ...columnWithoutWidth } = column;
                    return columnWithoutWidth;
                }

                return { ...column, width };
            })
        );
    };

    const handleColumnOrderChange = (columnOrder: string[]) => {
        setColumns(previousColumns => {
            const columnsByKey = new Map(previousColumns.map(column => [column.key, column]));

            return columnOrder.flatMap(columnKey => {
                const column = columnsByKey.get(columnKey);
                return column ? [column] : [];
            });
        });
    };

    const handleColumnVisibilityChange = (columnKey: string, visible: boolean) => {
        setColumns(previousColumns =>
            previousColumns.map(column => (column.key === columnKey ? { ...column, visible } : column))
        );
    };

    const handleColumnReset = () => {
        setColumns(demoTableColumnsForComponents.map(column => ({ ...column })));
    };

    const flagToggles: { key: keyof DemoTableFlags; label: string; disabled?: boolean }[] = [
        { key: 'showSelectionColumn', label: 'Selection column' },
        {
            key: 'selectionCheckboxVerticalAlignmentTop',
            label: 'Selection checkbox top aligned',
            disabled: !tableFlags.showSelectionColumn,
        },
        { key: 'virtualizedRows', label: 'Virtualized' },
        { key: 'stickyThirdRow', label: '3rd row sticky' },
    ];

    const cardSortingSelectOptions = sortableColumns.map(column => ({
        id: column.key,
        label: column.label,
        selected: column.key === displayedSortKey,
    }));

    return (
        <div>
            <TableToolbar>
                <TableToolbarColumn label='Table styling'>
                    <Multiselect
                        value={styleToggles
                            .filter(styleToggle => tableStyle[styleToggle.key])
                            .map(styleToggle => styleToggle.key)}
                        options={styleToggles.map(styleToggle => ({
                            id: styleToggle.key,
                            label: styleToggle.label,
                        }))}
                        placeholder='Select styles'
                        counterMessage={{ one: 'Style selected', many: 'Styles selected' }}
                        onChange={handleStyleSelectionChange}
                        className='min-width-150'
                        dropdownClassName='max-height-none'
                    />
                </TableToolbarColumn>
                <TableToolbarColumn label='Max height' className='width-100'>
                    <NumberControl
                        min={0}
                        max={1000}
                        step={50}
                        value={bodyMaxHeight ?? 0}
                        onChange={handleBodyMaxHeightChange}
                    />
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right' label='View'>
                    <div className='display-flex gap-15'>
                        <TableViewToggles
                            viewType={viewType}
                            tableViewLabel='Table view'
                            singleCardViewLabel='List view'
                            multiCardsViewLabel='Cards view'
                            onViewTypeChange={setViewType}
                        />
                        <TableColumnsDropdown
                            columns={columnsWithDefaults}
                            label='Columns'
                            onColumnOrderChange={handleColumnOrderChange}
                            onColumnVisibilityChange={handleColumnVisibilityChange}
                            onReset={handleColumnReset}
                            showResetButton
                            resetLabel='Reset columns'
                        />
                    </div>
                </TableToolbarColumn>
            </TableToolbar>
            {viewType !== 'TABLE' && (
                <TableCardsSorting
                    selectOptions={cardSortingSelectOptions}
                    sortName={String(sortKey)}
                    sortOrder={sortDirection}
                    onSortChange={handleSortChange}
                />
            )}

            <Table
                rowKey='id'
                viewType={viewType}
                cardsStyle={demoTableCardsStyle}
                {...tableStyle}
                showSelectionColumn={tableFlags.showSelectionColumn}
                selectionCheckboxVerticalAlignment={tableFlags.selectionCheckboxVerticalAlignmentTop ? 'top' : 'middle'}
                virtualizedRows={isTableView && tableFlags.virtualizedRows}
                sortBy={String(displayedSortKey)}
                sortDirection={sortDirection}
                onColumnResize={handleColumnResize}
                columnOrder={columnsWithDefaults.map(column => column.key)}
                onColumnOrderChange={handleColumnOrderChange}
                onSortChange={handleSortChange}
            >
                <TableHeader>
                    {visibleColumns.map(column => (
                        <TableHeaderColumn
                            key={column.key}
                            columnKey={column.key}
                            horizontalAlign={column.horizontalAlign}
                            width={column.width}
                            sortable={column.sortable}
                            draggable={column.draggable}
                            icon={column.icon}
                            resizeable
                            minResizeWidth={100}
                            maxResizeWidth={500}
                        >
                            {column.label}
                        </TableHeaderColumn>
                    ))}
                </TableHeader>

                <TableBody maxHeight={bodyMaxHeight}>
                    {sortedItems.map((row, rowIndex) => (
                        <TableRow
                            key={row.id}
                            id={row.id}
                            sticky={isTableView && tableFlags.stickyThirdRow && rowIndex === 2}
                            className={tableFlags.stickyThirdRow && rowIndex === 2 ? 'text-medium' : undefined}
                        >
                            {visibleColumns.map(column => {
                                if (column.key === 'licensePlate') {
                                    return (
                                        <TableColumn
                                            key={column.key}
                                            columnKey={column.key}
                                            horizontalAlign={column.horizontalAlign}
                                            verticalAlign={column.verticalAlign}
                                        >
                                            <div className='max-width-100'>
                                                <LicensePlate>{row.licensePlate}</LicensePlate>
                                            </div>
                                        </TableColumn>
                                    );
                                }

                                if (column.key === 'route') {
                                    return (
                                        <TableColumn
                                            key={column.key}
                                            columnKey={column.key}
                                            horizontalAlign={column.horizontalAlign}
                                            verticalAlign={column.verticalAlign}
                                        >
                                            <div className='margin-bottom-3'>{row.route.name}</div>
                                            <div>
                                                <span className='rioglyph rioglyph-route margin-right-3 margin-top--2' />
                                                {row.route.distance}
                                            </div>
                                        </TableColumn>
                                    );
                                }

                                if (column.key === 'cargo') {
                                    return (
                                        <TableColumn
                                            key={column.key}
                                            columnKey={column.key}
                                            horizontalAlign={column.horizontalAlign}
                                            verticalAlign={column.verticalAlign}
                                        >
                                            <div>{row.cargo}</div>
                                        </TableColumn>
                                    );
                                }

                                return null;
                            })}
                        </TableRow>
                    ))}
                </TableBody>

                <TableFooter>
                    {visibleColumns.some(column => column.key === 'licensePlate') && (
                        <TableColumn columnKey='licensePlate'>{`Trucks: ${sortedItems.length}`}</TableColumn>
                    )}
                    {visibleColumns.some(column => column.key === 'route') && (
                        <TableColumn columnKey='route'>{`Total: ${totalRouteDistanceKm} km`}</TableColumn>
                    )}
                </TableFooter>
            </Table>

            <div className='margin-top-50'>
                <div className='text-size-16 text-medium margin-bottom-0'>Customize the table columns</div>
                <p className='margin-top-0'>
                    Change column settings such as width, visibility, and alignment to explore how the table updates.
                    Combine that with the flags in the settings grid to test selection, virtualization, and a sticky
                    third row together.
                </p>
                <TableWithSettingsArea
                    columns={columns}
                    flagToggles={flagToggles}
                    flags={tableFlags}
                    onColumnsChange={setColumns}
                    onFlagToggle={flagKey => handleFlagToggle(flagKey as keyof DemoTableFlags)}
                />
            </div>
        </div>
    );
};

export default TableWithSettingsExample;
```

#### HTML (html)

```html
<div>
    <div class="table-toolbar">
        <div class="table-toolbar-container">
            <div class="table-toolbar-group-left">
                <div class="table-toolbar-column align-self-end">
                    <label class="table-toolbar-label">Table styling</label>
                    <div class="select multiselect dropdown min-width-150 dropup">
                        <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                            <span>
                                <span class="option-counter margin-right-1">3</span>
                                <span class="counter-message margin-left-1">Styles selected</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 max-height-none" role="menu">
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="condensed" data-item-index="0">
                                    <span class="selected-option-dropdown-item">Condensed</span>
                                    <input type="hidden" value="condensed">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="striped" data-item-index="1">
                                    <span class="selected-option-dropdown-item">Striped</span>
                                    <input type="hidden" value="striped">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="hover" data-item-index="2">
                                    <span class="selected-option-dropdown-item">Hover</span>
                                    <input type="hidden" value="hover">
                                </a>
                            </li>
                            <li class="active" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="shadow" data-item-index="3">
                                    <span class="selected-option-dropdown-item">Shadow</span>
                                    <input type="hidden" value="shadow">
                                </a>
                            </li>
                            <li class="active" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="border" data-item-index="4">
                                    <span class="selected-option-dropdown-item">Border</span>
                                    <input type="hidden" value="border">
                                </a>
                            </li>
                            <li class="active" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="rounded" data-item-index="5">
                                    <span class="selected-option-dropdown-item">Rounded</span>
                                    <input type="hidden" value="rounded">
                                </a>
                            </li>
                            <li class="" role="listitem">
                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="gridLines" data-item-index="6">
                                    <span class="selected-option-dropdown-item">Grid lines</span>
                                    <input type="hidden" value="gridLines">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="table-toolbar-column align-self-end width-100">
                    <label class="table-toolbar-label">Max height</label>
                    <div class="NumberControl">
                        <div class="input-group">
                            <div class="form-control-feedback-wrapper">
                                <input type="number" step="50" min="0" max="1000" class="form-control no-controls padding-right-5" aria-label="number-input" value="300">
                            </div>
                            <div class="input-group-addon ">
                                <div class="display-flex padding-left-10">
                                    <div role="button" aria-label="decrement-button" class="decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer">
                                        <div class="rioglyph rioglyph-minus scale-90">
                                        </div>
                                    </div>
                                    <div role="button" aria-label="increment-button" class="incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5">
                                        <div class="rioglyph rioglyph-plus scale-90">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-toolbar-group-right">
                <div class="table-toolbar-column align-self-end">
                    <label class="table-toolbar-label">View</label>
                    <div class="display-flex gap-15">
                        <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 class="dropdown btn-group">
                            <button type="button" id="zzmmptrau4n" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">
                                <span class="display-inline-flex align-items-center gap-5">
                                    <span class="rioglyph rioglyph-table-view">
                                    </span>
                                    <span>Columns</span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="table table-view-table shadow-default border table-rounded table-has-head table-has-footer" role="table" style="--table-columns: minmax(0, 180px) minmax(0, 280px) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3&quot;; --table-cards-min: 280px; --table-cards-max: 380px; --table-column-count: 3; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="3">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="licensePlate" role="columnheader" aria-colindex="1" aria-rowindex="1" aria-sort="ascending" style="grid-area: 1 / 1 / span 1 / span 1; transition: transform linear;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button">
                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-7">
                                    <span class="sort-arrows sort-asc">
                                    </span>
                                    <span class="table-head-label">Truck</span>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div class="table-column-resize-handle">
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-resizable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="route" role="columnheader" aria-colindex="2" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 2 / span 1 / span 1; transition: transform linear;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button">
                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-7">
                                    <span class="sort-arrows ">
                                    </span>
                                    <span class="table-head-label">Route</span>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div class="table-column-resize-handle">
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-draggable table-align-left table-vertical-align-middle" data-column="cargo" role="columnheader" aria-colindex="3" aria-rowindex="1" style="grid-area: 1 / 3 / span 1 / span 1; transition: transform linear;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <span class="table-head-label-wrapper table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-7">
                                <span class="table-head-label">
                                    <span class="display-flex align-items-center gap-5">
                                        <span class="text-color-dark rioglyph rioglyph-comment">
                                        </span>
                                        <span>Comment</span>
                                    </span>
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
                <div id="DndDescribedBy-7" style="display: none;">
                    To pick up a draggable item, press the space bar.
                    While dragging, use the arrow keys to move the item.
                    Press space again to drop the item in its new position, or press escape to cancel.
                </div>
                <div id="DndLiveRegion-7" role="status" aria-live="assertive" aria-atomic="true" style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%); white-space: nowrap;">
                </div>
            </div>
        </div>
        <div role="presentation" class="table-body-scroll-wrapper smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: auto; min-height: 0px; max-height: 300px;">
            <div class="scrollbar-view" style="position: relative; overflow: scroll; margin-right: 0px; margin-bottom: 0px; min-height: 0px; max-height: calc(300px);">
                <div class="scrollbar-content-wrapper">
                    <div class="table-body" role="rowgroup">
                        <div id="6" class="table-row" data-index="0" data-row-id="6" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">B-TR 512</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Hamburg DC -&gt; Zurich</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>863 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 24 pallets, 8.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="12" class="table-row" data-index="1" data-row-id="12" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">B-TR 512</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Bremen Yard -&gt; Zurich</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>881 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 21 pallets, 9.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="18" class="table-row" data-index="2" data-row-id="18" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">B-TR 512</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Kassel Hub -&gt; Zurich</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>899 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 18 pallets, 10.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="24" class="table-row" data-index="3" data-row-id="24" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">B-TR 512</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Leipzig Crossdock -&gt; Zurich</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>917 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 24 pallets, 11.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="30" class="table-row" data-index="4" data-row-id="30" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">B-TR 512</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Munich South -&gt; Zurich</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>935 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 21 pallets, 7.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="2" class="table-row" data-index="5" data-row-id="2" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">HB-G 118</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Bremen Yard -&gt; Cologne</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>318 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 20 pallets, 9.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="8" class="table-row" data-index="6" data-row-id="8" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">HB-G 118</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Kassel Hub -&gt; Cologne</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>336 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 26 pallets, 10.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="14" class="table-row" data-index="7" data-row-id="14" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">HB-G 118</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Leipzig Crossdock -&gt; Cologne</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>354 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 23 pallets, 11.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="20" class="table-row" data-index="8" data-row-id="20" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">HB-G 118</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Munich South -&gt; Cologne</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>372 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 20 pallets, 7.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="26" class="table-row" data-index="9" data-row-id="26" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">HB-G 118</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Hamburg DC -&gt; Cologne</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>390 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 26 pallets, 8.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="3" class="table-row" data-index="10" data-row-id="3" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">KS-F 662</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Kassel Hub -&gt; Prague</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>437 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 21 pallets, 10.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="9" class="table-row" data-index="11" data-row-id="9" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">KS-F 662</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Leipzig Crossdock -&gt; Prague</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>455 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 18 pallets, 11.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="15" class="table-row" data-index="12" data-row-id="15" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">KS-F 662</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Munich South -&gt; Prague</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>473 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 24 pallets, 7.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="21" class="table-row" data-index="13" data-row-id="21" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">KS-F 662</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Hamburg DC -&gt; Prague</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>491 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 21 pallets, 8.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="27" class="table-row" data-index="14" data-row-id="27" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">KS-F 662</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Bremen Yard -&gt; Prague</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>509 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 18 pallets, 9.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="4" class="table-row" data-index="15" data-row-id="4" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">L-RM 904</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Leipzig Crossdock -&gt; Rotterdam</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>623 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 22 pallets, 11.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="10" class="table-row" data-index="16" data-row-id="10" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">L-RM 904</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Munich South -&gt; Rotterdam</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>641 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 19 pallets, 7.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="16" class="table-row" data-index="17" data-row-id="16" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">L-RM 904</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Hamburg DC -&gt; Rotterdam</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>659 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 25 pallets, 8.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="22" class="table-row" data-index="18" data-row-id="22" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">L-RM 904</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Bremen Yard -&gt; Rotterdam</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>677 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 22 pallets, 9.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="28" class="table-row" data-index="19" data-row-id="28" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">L-RM 904</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Kassel Hub -&gt; Rotterdam</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>695 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 19 pallets, 10.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="1" class="table-row" data-index="20" data-row-id="1" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">M-RI 2418</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Hamburg DC -&gt; Berlin</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>292 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 19 pallets, 8.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="7" class="table-row" data-index="21" data-row-id="7" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">M-RI 2418</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Bremen Yard -&gt; Berlin</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>310 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 25 pallets, 9.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="13" class="table-row" data-index="22" data-row-id="13" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">M-RI 2418</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Kassel Hub -&gt; Berlin</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>328 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 22 pallets, 10.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="19" class="table-row" data-index="23" data-row-id="19" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">M-RI 2418</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Leipzig Crossdock -&gt; Berlin</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>346 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 19 pallets, 11.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="25" class="table-row" data-index="24" data-row-id="25" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">M-RI 2418</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Munich South -&gt; Berlin</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>364 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 25 pallets, 7.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="5" class="table-row" data-index="25" data-row-id="5" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">M-TL 357</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Munich South -&gt; Vienna</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>749 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 23 pallets, 7.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="11" class="table-row" data-index="26" data-row-id="11" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">M-TL 357</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Hamburg DC -&gt; Vienna</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>767 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 20 pallets, 8.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="17" class="table-row" data-index="27" data-row-id="17" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">M-TL 357</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Bremen Yard -&gt; Vienna</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>785 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 26 pallets, 9.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="23" class="table-row" data-index="28" data-row-id="23" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">M-TL 357</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Kassel Hub -&gt; Vienna</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>803 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 23 pallets, 10.5 t gross</div>
                                </div>
                            </div>
                        </div>
                        <div id="29" class="table-row" data-index="29" data-row-id="29" role="row">
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="max-width-100">
                                        <div class="license-plate ">
                                            <div class="plate-content">
                                                <div class="plate-number">M-TL 357</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div class="margin-bottom-3">Leipzig Crossdock -&gt; Vienna</div>
                                    <div>
                                        <span class="rioglyph rioglyph-route margin-right-3 margin-top--2">
                                        </span>821 km
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-top" data-column="cargo" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit., 20 pallets, 11.5 t gross</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
                <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
                </div>
            </div>
            <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
                <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
                </div>
            </div>
        </div>
        <div class="table-footer" role="rowgroup">
            <div class="table-row table-row-footer" role="row">
                <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="licensePlate" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Trucks: 30</div>
                </div>
                <div class="table-cell table-footer-cell table-align-left table-vertical-align-middle" data-column="route" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Total: 17490 km</div>
                </div>
            </div>
        </div>
    </div>
    <div class="margin-top-50">
        <div class="text-size-16 text-medium margin-bottom-0">Customize the table columns</div>
        <p class="margin-top-0">Change column settings such as width, visibility, and alignment to explore how the table updates. Combine that with the flags in the settings grid to test selection, virtualization, and a sticky third row together.</p>
        <div>
            <div class="display-grid grid-cols-1-xs grid-cols-2-ls grid-cols-3-md gap-15">
                <div class="border rounded padding-15 bg-white">
                    <div class="margin-bottom-10 display-flex gap-5">
                        <div>Column:</div>
                        <div class="text-medium">Truck</div>
                    </div>
                    <div class="cq-container display-flex flex-column gap-5">
                        <div class="display-grid grid-cols-1 gap-10">
                            <div class="flex-1-1-0">
                                <label for="licensePlate-width" class="display-inline-block">
                                    <span>Width</span>
                                </label>
                                <div class="display-flex gap-5 align-items-end">
                                    <div class="flex-1-1-0">
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <label class="checkbox margin-top--3" tabindex="0">
                                                    <input type="checkbox" class="margin-top--3" checked="">
                                                    <span class="checkbox-text">
                                                    </span>
                                                </label>
                                            </div>
                                            <input id="licensePlate-width" class="form-control no-controls" min="0" max="1000" step="10" type="number" value="180">
                                        </div>
                                    </div>
                                    <div class="select dropdown width-70 dropup">
                                        <button type="button" id="licensePlate-width-unit" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                                            <span class="selected-option-text">px</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" role="menu">
                                            <li class="" role="listitem">
                                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="px" data-item-index="0">
                                                    <span class="selected-option-dropdown-item">px</span>
                                                    <input type="hidden" value="px">
                                                </a>
                                            </li>
                                            <li class="" role="listitem">
                                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="%" data-item-index="1">
                                                    <span class="selected-option-dropdown-item">%</span>
                                                    <input type="hidden" value="%">
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="display-grid cq-300:grid-cols-2 grid-cols-1 gap-10">
                            <div class="flex-1-1-0">
                                <label for="licensePlate-horizontal-align" class="display-inline-block">
                                    <span>Horizontal align</span>
                                </label>
                                <div class="select dropdown dropup">
                                    <button type="button" id="licensePlate-horizontal-align" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                                        <span class="selected-option-text">left</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" role="menu">
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="left" data-item-index="0">
                                                <span class="selected-option-dropdown-item">left</span>
                                                <input type="hidden" value="left">
                                            </a>
                                        </li>
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="center" data-item-index="1">
                                                <span class="selected-option-dropdown-item">center</span>
                                                <input type="hidden" value="center">
                                            </a>
                                        </li>
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="right" data-item-index="2">
                                                <span class="selected-option-dropdown-item">right</span>
                                                <input type="hidden" value="right">
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="flex-1-1-0">
                                <label for="licensePlate-vertical-align" class="display-inline-block">
                                    <span>Vertical align</span>
                                </label>
                                <div class="select dropdown dropup">
                                    <button type="button" id="licensePlate-vertical-align" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                                        <span class="selected-option-text">top</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" role="menu">
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="top" data-item-index="0">
                                                <span class="selected-option-dropdown-item">top</span>
                                                <input type="hidden" value="top">
                                            </a>
                                        </li>
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="middle" data-item-index="1">
                                                <span class="selected-option-dropdown-item">middle</span>
                                                <input type="hidden" value="middle">
                                            </a>
                                        </li>
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="bottom" data-item-index="2">
                                                <span class="selected-option-dropdown-item">bottom</span>
                                                <input type="hidden" value="bottom">
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="border rounded padding-15 bg-white">
                    <div class="margin-bottom-10 display-flex gap-5">
                        <div>Column:</div>
                        <div class="text-medium">Route</div>
                    </div>
                    <div class="cq-container display-flex flex-column gap-5">
                        <div class="display-grid grid-cols-1 gap-10">
                            <div class="flex-1-1-0">
                                <label for="route-width" class="display-inline-block">
                                    <span>Width</span>
                                </label>
                                <div class="display-flex gap-5 align-items-end">
                                    <div class="flex-1-1-0">
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <label class="checkbox margin-top--3" tabindex="0">
                                                    <input type="checkbox" class="margin-top--3" checked="">
                                                    <span class="checkbox-text">
                                                    </span>
                                                </label>
                                            </div>
                                            <input id="route-width" class="form-control no-controls" min="0" max="1000" step="10" type="number" value="280">
                                        </div>
                                    </div>
                                    <div class="select dropdown width-70 dropup">
                                        <button type="button" id="route-width-unit" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                                            <span class="selected-option-text">px</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" role="menu">
                                            <li class="" role="listitem">
                                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="px" data-item-index="0">
                                                    <span class="selected-option-dropdown-item">px</span>
                                                    <input type="hidden" value="px">
                                                </a>
                                            </li>
                                            <li class="" role="listitem">
                                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="%" data-item-index="1">
                                                    <span class="selected-option-dropdown-item">%</span>
                                                    <input type="hidden" value="%">
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="display-grid cq-300:grid-cols-2 grid-cols-1 gap-10">
                            <div class="flex-1-1-0">
                                <label for="route-horizontal-align" class="display-inline-block">
                                    <span>Horizontal align</span>
                                </label>
                                <div class="select dropdown dropup">
                                    <button type="button" id="route-horizontal-align" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                                        <span class="selected-option-text">left</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" role="menu">
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="left" data-item-index="0">
                                                <span class="selected-option-dropdown-item">left</span>
                                                <input type="hidden" value="left">
                                            </a>
                                        </li>
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="center" data-item-index="1">
                                                <span class="selected-option-dropdown-item">center</span>
                                                <input type="hidden" value="center">
                                            </a>
                                        </li>
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="right" data-item-index="2">
                                                <span class="selected-option-dropdown-item">right</span>
                                                <input type="hidden" value="right">
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="flex-1-1-0">
                                <label for="route-vertical-align" class="display-inline-block">
                                    <span>Vertical align</span>
                                </label>
                                <div class="select dropdown dropup">
                                    <button type="button" id="route-vertical-align" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                                        <span class="selected-option-text">top</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" role="menu">
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="top" data-item-index="0">
                                                <span class="selected-option-dropdown-item">top</span>
                                                <input type="hidden" value="top">
                                            </a>
                                        </li>
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="middle" data-item-index="1">
                                                <span class="selected-option-dropdown-item">middle</span>
                                                <input type="hidden" value="middle">
                                            </a>
                                        </li>
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="bottom" data-item-index="2">
                                                <span class="selected-option-dropdown-item">bottom</span>
                                                <input type="hidden" value="bottom">
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="border rounded padding-15 bg-white">
                    <div class="margin-bottom-10 display-flex gap-5">
                        <div>Column:</div>
                        <div class="text-medium">Comment</div>
                    </div>
                    <div class="cq-container display-flex flex-column gap-5">
                        <div class="display-grid grid-cols-1 gap-10">
                            <div class="flex-1-1-0">
                                <label for="cargo-width" class="display-inline-block">
                                    <span>Width</span>
                                </label>
                                <div class="display-flex gap-5 align-items-end">
                                    <div class="flex-1-1-0">
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <label class="checkbox margin-top--3" tabindex="0">
                                                    <input type="checkbox" class="margin-top--3">
                                                    <span class="checkbox-text">
                                                    </span>
                                                </label>
                                            </div>
                                            <input id="cargo-width" class="form-control no-controls" disabled="" min="0" max="1000" step="10" type="number" value="">
                                        </div>
                                    </div>
                                    <div class="select dropdown width-70 dropup">
                                        <button type="button" id="cargo-width-unit" class="dropdown-toggle form-control text-left disabled" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                                            <span class="selected-option-text">px</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" role="menu">
                                            <li class="" role="listitem">
                                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="px" data-item-index="0">
                                                    <span class="selected-option-dropdown-item">px</span>
                                                    <input type="hidden" value="px">
                                                </a>
                                            </li>
                                            <li class="" role="listitem">
                                                <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="%" data-item-index="1">
                                                    <span class="selected-option-dropdown-item">%</span>
                                                    <input type="hidden" value="%">
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="display-grid cq-300:grid-cols-2 grid-cols-1 gap-10">
                            <div class="flex-1-1-0">
                                <label for="cargo-horizontal-align" class="display-inline-block">
                                    <span>Horizontal align</span>
                                </label>
                                <div class="select dropdown dropup">
                                    <button type="button" id="cargo-horizontal-align" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                                        <span class="selected-option-text">left</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" role="menu">
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="left" data-item-index="0">
                                                <span class="selected-option-dropdown-item">left</span>
                                                <input type="hidden" value="left">
                                            </a>
                                        </li>
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="center" data-item-index="1">
                                                <span class="selected-option-dropdown-item">center</span>
                                                <input type="hidden" value="center">
                                            </a>
                                        </li>
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="right" data-item-index="2">
                                                <span class="selected-option-dropdown-item">right</span>
                                                <input type="hidden" value="right">
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="flex-1-1-0">
                                <label for="cargo-vertical-align" class="display-inline-block">
                                    <span>Vertical align</span>
                                </label>
                                <div class="select dropdown dropup">
                                    <button type="button" id="cargo-vertical-align" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                                        <span class="selected-option-text">top</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" role="menu">
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="top" data-item-index="0">
                                                <span class="selected-option-dropdown-item">top</span>
                                                <input type="hidden" value="top">
                                            </a>
                                        </li>
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="middle" data-item-index="1">
                                                <span class="selected-option-dropdown-item">middle</span>
                                                <input type="hidden" value="middle">
                                            </a>
                                        </li>
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="bottom" data-item-index="2">
                                                <span class="selected-option-dropdown-item">bottom</span>
                                                <input type="hidden" value="bottom">
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="border rounded padding-15 bg-white">
                    <div class="margin-bottom-10 display-flex gap-5">
                        <div class="text-medium">Table flags</div>
                    </div>
                    <div class="display-flex flex-column gap-10">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                                <span>Selection column</span>
                            </span>
                        </label>
                        <label class="checkbox disabled" tabindex="0">
                            <input type="checkbox" disabled="" class="">
                            <span class="checkbox-text">
                                <span>Selection checkbox top aligned</span>
                            </span>
                        </label>
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                                <span>Virtualized</span>
                            </span>
                        </label>
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                                <span>3rd row sticky</span>
                            </span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props (json)

```json
rowClassName={(row) => (row.disabled ? 'my-class-name' : '')}
```