# Common table

*Category:* Templates
*Section:* Tables
*Source:* https://uikit.developers.rio.cloud/#/templates/common-table
*Captured:* 2026-04-27T14:59:26.472Z

## Common table

### Example: Example 1

New Action

‹ April 2026 ›
Su Mo Tu We Th Fr Sa

29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2
3 4 5 6 7 8 9

12:00 AM

Table view
Cards view
List view

Columns

ID

Name

VIN

Status

Duration

Actions

233

Ipsum

WVWZZZ1JZXW000002

Inactive

5h 15m

895

Dolor

WVWZZZ1JZXW000003

Active

8h 45m

2445

Amet

WVWZZZ1JZXW000005

Active

7h 25m

3456

Sit

WVWZZZ1JZXW000004

Maintenance

12h 00m

7354

Lorem

WVWZZZ1JZXW000001

Active

10h 30m

#### React (tsx)

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

import Button from '@rio-cloud/rio-uikit/Button';
import DatePicker from '@rio-cloud/rio-uikit/DatePicker';
import NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';
import Table, {
    TableBody,
    TableColumn,
    TableColumnsDropdown,
    TableHeader,
    TableHeaderColumn,
    TableRow,
} from '@rio-cloud/rio-uikit/Table';
import TableCardsSorting from '@rio-cloud/rio-uikit/TableCardsSorting';
import TableRowActionsDropdown from '@rio-cloud/rio-uikit/TableRowActionsDropdown';
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 useSorting from '@rio-cloud/rio-uikit/useSorting';

type DemoVehicle = {
    id: string;
    name: string;
    vin: string;
    status: 'Active' | 'Inactive' | 'Maintenance';
    duration: string;
};

type DemoColumn = {
    key: keyof DemoVehicle | 'actions';
    label: string;
    visible: boolean;
    sortable?: boolean;
    width?: number;
    horizontalAlign?: 'left' | 'center' | 'right';
};

const vehicles: DemoVehicle[] = [
    { id: '7354', name: 'Lorem', vin: 'WVWZZZ1JZXW000001', status: 'Active', duration: '10h 30m' },
    { id: '233', name: 'Ipsum', vin: 'WVWZZZ1JZXW000002', status: 'Inactive', duration: '5h 15m' },
    { id: '895', name: 'Dolor', vin: 'WVWZZZ1JZXW000003', status: 'Active', duration: '8h 45m' },
    { id: '3456', name: 'Sit', vin: 'WVWZZZ1JZXW000004', status: 'Maintenance', duration: '12h 00m' },
    { id: '2445', name: 'Amet', vin: 'WVWZZZ1JZXW000005', status: 'Active', duration: '7h 25m' },
];

const initialColumns: DemoColumn[] = [
    { key: 'id', label: 'ID', visible: true, sortable: true, width: 90 },
    { key: 'name', label: 'Name', visible: true, sortable: true },
    { key: 'vin', label: 'VIN', visible: true, sortable: true },
    { key: 'status', label: 'Status', visible: true, sortable: true },
    { key: 'duration', label: 'Duration', visible: true, sortable: true, horizontalAlign: 'right' },
    { key: 'actions', label: 'Actions', visible: true, width: 60, horizontalAlign: 'right' },
];

const resolveStatusLabelClassName = (status: DemoVehicle['status']) => {
    switch (status) {
        case 'Active':
            return 'label label-success label-filled label-condensed';
        case 'Inactive':
            return 'label label-warning label-filled label-condensed';
        case 'Maintenance':
            return 'label label-info label-filled label-condensed';
        default:
            return 'label label-muted label-filled label-condensed';
    }
};

const TableCommonDemo = () => {
    const [viewType, setViewType] = useState<TableViewTogglesViewType>('TABLE');
    const [searchValue, setSearchValue] = useState('');
    const [columns, setColumns] = useState<DemoColumn[]>(initialColumns);
    const [activeRowId, setActiveRowId] = useState<string | number | undefined>();

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

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

    const filteredItems = useMemo(() => {
        if (!searchValue) {
            return sortedItems;
        }

        const normalizedSearchValue = searchValue.toLowerCase();

        return sortedItems.filter(
            vehicle =>
                vehicle.id.toLowerCase().includes(normalizedSearchValue) ||
                vehicle.name.toLowerCase().includes(normalizedSearchValue) ||
                vehicle.vin.toLowerCase().includes(normalizedSearchValue) ||
                vehicle.status.toLowerCase().includes(normalizedSearchValue) ||
                vehicle.duration.toLowerCase().includes(normalizedSearchValue)
        );
    }, [searchValue, sortedItems]);

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

    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 keyof DemoVehicle);
                return column ? [column] : [];
            });
        });
    };

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

    const handleColumnsReset = () => {
        setColumns(initialColumns);
    };

    return (
        <div className='padding-20'>
            <TableToolbar>
                <TableToolbarColumn>
                    <div className='btn-toolbar'>
                        <Button bsStyle='primary' iconName='rioglyph-plus'>
                            New
                        </Button>
                        <Button>Action</Button>
                    </div>
                </TableToolbarColumn>
                <TableToolbarColumn className='min-width-150'>
                    <DatePicker inputProps={{ placeholder: 'Select date' }} />
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right' separator>
                    <TableSearch value={searchValue} onChange={setSearchValue} placeholder='Search in table' />
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right'>
                    <div className='display-flex gap-10'>
                        <TableViewToggles
                            viewType={viewType}
                            tableViewLabel='Table view'
                            singleCardViewLabel='List view'
                            multiCardsViewLabel='Cards view'
                            onViewTypeChange={setViewType}
                        />
                        <TableColumnsDropdown
                            columns={columns}
                            label='Columns'
                            onColumnOrderChange={handleColumnOrderChange}
                            onColumnVisibilityChange={handleColumnVisibilityChange}
                            onReset={handleColumnsReset}
                            showResetButton
                            resetLabel='Reset columns'
                        />
                    </div>
                </TableToolbarColumn>
            </TableToolbar>

            {viewType !== 'TABLE' && (
                <TableCardsSorting
                    selectOptions={columns
                        .filter(column => column.sortable)
                        .map(column => ({
                            id: column.key,
                            label: column.label,
                            selected: column.key === sortKey,
                        }))}
                    sortName={String(sortKey)}
                    sortOrder={sortDirection}
                    onSortChange={handleSortChange}
                />
            )}

            <Table
                rowKey='id'
                viewType={viewType}
                hover
                shadow
                activeRowId={activeRowId}
                onActiveRowChange={rowId => setActiveRowId(rowId)}
                sortBy={String(sortKey)}
                sortDirection={sortDirection}
                onSortChange={handleSortChange}
                columnOrder={columns.map(column => column.key)}
                onColumnOrderChange={handleColumnOrderChange}
                noRowsState={
                    <NotFoundState
                        headline='No matching vehicles found'
                        message='Try adjusting your search query or resetting the filters to see more results.'
                        outerClassName='border-none'
                    />
                }
            >
                <TableHeader>
                    {visibleColumns.map(column => (
                        <TableHeaderColumn
                            key={column.key}
                            columnKey={column.key}
                            sortable={column.sortable}
                            width={column.width}
                            horizontalAlign={column.horizontalAlign}
                        >
                            {column.label}
                        </TableHeaderColumn>
                    ))}
                </TableHeader>
                <TableBody>
                    {filteredItems.map(vehicle => (
                        <TableRow key={vehicle.id} id={vehicle.id}>
                            {visibleColumns.map(column => {
                                switch (column.key) {
                                    case 'status':
                                        return (
                                            <TableColumn key={column.key} columnKey={column.key}>
                                                <span className={resolveStatusLabelClassName(vehicle.status)}>
                                                    {vehicle.status}
                                                </span>
                                            </TableColumn>
                                        );
                                    case 'duration':
                                        return (
                                            <TableColumn
                                                key={column.key}
                                                columnKey={column.key}
                                                horizontalAlign='right'
                                            >
                                                {vehicle.duration}
                                            </TableColumn>
                                        );
                                    case 'actions':
                                        return (
                                            <TableColumn
                                                key={column.key}
                                                columnKey={column.key}
                                                horizontalAlign='right'
                                                preventRowClick
                                                className='padding-y-0'
                                            >
                                                <TableRowActionsDropdown
                                                    items={[
                                                        {
                                                            value: (
                                                                <span className='display-flex align-items-center gap-15'>
                                                                    <span className='rioglyph rioglyph-pencil' />
                                                                    <span>Edit</span>
                                                                </span>
                                                            ),
                                                            onSelect: () => {},
                                                        },
                                                        {
                                                            value: (
                                                                <span className='display-flex align-items-center gap-15'>
                                                                    <span className='rioglyph rioglyph-duplicate' />
                                                                    <span>Duplicate</span>
                                                                </span>
                                                            ),
                                                            onSelect: () => {},
                                                        },
                                                        {
                                                            value: (
                                                                <span className='display-flex align-items-center gap-15'>
                                                                    <span className='rioglyph rioglyph-trash' />
                                                                    <span>Delete</span>
                                                                </span>
                                                            ),
                                                            onSelect: () => {},
                                                        },
                                                    ]}
                                                />
                                            </TableColumn>
                                        );
                                    default:
                                        return (
                                            <TableColumn key={column.key} columnKey={column.key}>
                                                {vehicle[column.key]}
                                            </TableColumn>
                                        );
                                }
                            })}
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    );
};

export default TableCommonDemo;
```

#### HTML (html)

```html
<div class="padding-20">
    <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">
                            <span class="rioglyph rioglyph-plus">
                            </span>New</button>
                        <button type="button" class="btn btn-default btn-component" tabindex="0">Action</button>
                    </div>
                </div>
                <div class="table-toolbar-column align-self-end min-width-150">
                    <div class="rdt DatePicker form-group">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                                </span>
                            </span>
                            <div class="ClearableInput input-group">
                                <input type="text" class="form-control" placeholder="Select date" value="">
                            </div>
                        </div>
                        <div class="rdtPicker">
                            <div class="rdtDays">
                                <table>
                                    <thead>
                                        <tr>
                                            <th class="rdtPrev">
                                                <span>‹</span>
                                            </th>
                                            <th class="rdtSwitch" colspan="5" data-value="3">April 2026</th>
                                            <th class="rdtNext">
                                                <span>›</span>
                                            </th>
                                        </tr>
                                        <tr>
                                            <th class="dow">Su</th>
                                            <th class="dow">Mo</th>
                                            <th class="dow">Tu</th>
                                            <th class="dow">We</th>
                                            <th class="dow">Th</th>
                                            <th class="dow">Fr</th>
                                            <th class="dow">Sa</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td data-value="29" data-month="2" data-year="2026" class="rdtDay rdtOld">29</td>
                                            <td data-value="30" data-month="2" data-year="2026" class="rdtDay rdtOld">30</td>
                                            <td data-value="31" data-month="2" data-year="2026" class="rdtDay rdtOld">31</td>
                                            <td data-value="1" data-month="3" data-year="2026" class="rdtDay">1</td>
                                            <td data-value="2" data-month="3" data-year="2026" class="rdtDay">2</td>
                                            <td data-value="3" data-month="3" data-year="2026" class="rdtDay">3</td>
                                            <td data-value="4" data-month="3" data-year="2026" class="rdtDay">4</td>
                                        </tr>
                                        <tr>
                                            <td data-value="5" data-month="3" data-year="2026" class="rdtDay">5</td>
                                            <td data-value="6" data-month="3" data-year="2026" class="rdtDay">6</td>
                                            <td data-value="7" data-month="3" data-year="2026" class="rdtDay">7</td>
                                            <td data-value="8" data-month="3" data-year="2026" class="rdtDay">8</td>
                                            <td data-value="9" data-month="3" data-year="2026" class="rdtDay">9</td>
                                            <td data-value="10" data-month="3" data-year="2026" class="rdtDay">10</td>
                                            <td data-value="11" data-month="3" data-year="2026" class="rdtDay">11</td>
                                        </tr>
                                        <tr>
                                            <td data-value="12" data-month="3" data-year="2026" class="rdtDay">12</td>
                                            <td data-value="13" data-month="3" data-year="2026" class="rdtDay">13</td>
                                            <td data-value="14" data-month="3" data-year="2026" class="rdtDay">14</td>
                                            <td data-value="15" data-month="3" data-year="2026" class="rdtDay">15</td>
                                            <td data-value="16" data-month="3" data-year="2026" class="rdtDay">16</td>
                                            <td data-value="17" data-month="3" data-year="2026" class="rdtDay">17</td>
                                            <td data-value="18" data-month="3" data-year="2026" class="rdtDay">18</td>
                                        </tr>
                                        <tr>
                                            <td data-value="19" data-month="3" data-year="2026" class="rdtDay">19</td>
                                            <td data-value="20" data-month="3" data-year="2026" class="rdtDay">20</td>
                                            <td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
                                            <td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
                                            <td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
                                            <td data-value="24" data-month="3" data-year="2026" class="rdtDay">24</td>
                                            <td data-value="25" data-month="3" data-year="2026" class="rdtDay">25</td>
                                        </tr>
                                        <tr>
                                            <td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
                                            <td data-value="27" data-month="3" data-year="2026" class="rdtDay rdtToday">27</td>
                                            <td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
                                            <td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
                                            <td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
                                            <td data-value="1" data-month="4" data-year="2026" class="rdtDay rdtNew">1</td>
                                            <td data-value="2" data-month="4" data-year="2026" class="rdtDay rdtNew">2</td>
                                        </tr>
                                        <tr>
                                            <td data-value="3" data-month="4" data-year="2026" class="rdtDay rdtNew">3</td>
                                            <td data-value="4" data-month="4" data-year="2026" class="rdtDay rdtNew">4</td>
                                            <td data-value="5" data-month="4" data-year="2026" class="rdtDay rdtNew">5</td>
                                            <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtNew">6</td>
                                            <td data-value="7" data-month="4" data-year="2026" class="rdtDay rdtNew">7</td>
                                            <td data-value="8" data-month="4" data-year="2026" class="rdtDay rdtNew">8</td>
                                            <td data-value="9" data-month="4" data-year="2026" class="rdtDay rdtNew">9</td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="7" class="rdtTimeToggle">12:00 AM</td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-toolbar-group-right">
                <div class="table-toolbar-column align-self-end table-toolbar-column-separator">
                    <div class="table-toolbar-search input-group">
                        <span class="input-group-addon">
                            <span class="rioglyph rioglyph-search">
                            </span>
                        </span>
                        <div class="ClearableInput input-group">
                            <input placeholder="Search in table" class="form-control" type="text" tabindex="0" value="">
                            <span class="clearButton hide">
                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-toolbar-column align-self-end">
                    <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="l1x7jt8mg8" 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 table-hover shadow-default border table-rounded table-has-head" role="table" style="--table-columns: minmax(0, 90px) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr) minmax(0, 60px); --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: 868px;" 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-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-head-cell-sortable table-head-cell-has-column-divider table-align-right table-vertical-align-middle" data-column="duration" role="columnheader" aria-colindex="5" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 5 / 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">Duration</span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-align-right table-vertical-align-middle" data-column="actions" 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">Actions</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-body" role="rowgroup">
            <div id="233" class="table-row table-row-clickable" data-index="0" data-row-id="233" role="row" tabindex="0">
                <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">233</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">WVWZZZ1JZXW000002</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">
                        <span class="label label-warning label-filled label-condensed">Inactive</span>
                    </div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="duration" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">5h 15m</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle padding-y-0" data-column="actions" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <div class="dropdown btn-group">
                            <button type="button" aria-label="Row actions" id="1armyxllhmg" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                                <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="895" class="table-row table-row-clickable" data-index="1" data-row-id="895" role="row" tabindex="0">
                <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">895</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">WVWZZZ1JZXW000003</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">
                        <span class="label label-success label-filled label-condensed">Active</span>
                    </div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="duration" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">8h 45m</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle padding-y-0" data-column="actions" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <div class="dropdown btn-group">
                            <button type="button" aria-label="Row actions" id="cpivhj854sa" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                                <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="2445" class="table-row table-row-clickable" data-index="2" data-row-id="2445" role="row" tabindex="0">
                <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">2445</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">WVWZZZ1JZXW000005</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">
                        <span class="label label-success label-filled label-condensed">Active</span>
                    </div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="duration" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">7h 25m</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle padding-y-0" data-column="actions" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <div class="dropdown btn-group">
                            <button type="button" aria-label="Row actions" id="3q7lf81646t" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                                <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="3456" class="table-row table-row-clickable" data-index="3" data-row-id="3456" role="row" tabindex="0">
                <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">3456</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">WVWZZZ1JZXW000004</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">
                        <span class="label label-info label-filled label-condensed">Maintenance</span>
                    </div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="duration" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">12h 00m</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle padding-y-0" data-column="actions" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <div class="dropdown btn-group">
                            <button type="button" aria-label="Row actions" id="c8g3xywfrnd" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
                                <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="7354" class="table-row table-row-clickable" data-index="4" data-row-id="7354" role="row" tabindex="0">
                <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">7354</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">WVWZZZ1JZXW000001</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">
                        <span class="label label-success label-filled label-condensed">Active</span>
                    </div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle" data-column="duration" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">10h 30m</div>
                </div>
                <div class="table-cell table-align-right table-vertical-align-middle padding-y-0" data-column="actions" role="cell" aria-colindex="6" style="grid-area: 1 / 6 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">
                        <div class="dropdown btn-group">
                            <button type="button" aria-label="Row actions" id="e3te7ypxulr" 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>
```