@rio-cloud/uikit-mcp 1.1.9 → 1.1.10

package/dist/docs/templates/common-table.md

@@ -0,0 +1,814 @@
+# Common table
+
+*Category:* Templates
+*Section:* Tables
+*Source:* https://uikit.developers.rio.cloud/#/templates/common-table
+*Captured:* 2026-04-20T12:55:46.931Z
+
+## 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 rdtToday">20</td>
+                                            <td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
+                                            <td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
+                                            <td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
+                                            <td data-value="24" data-month="3" data-year="2026" class="rdtDay">24</td>
+                                            <td data-value="25" data-month="3" data-year="2026" class="rdtDay">25</td>
+                                        </tr>
+                                        <tr>
+                                            <td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
+                                            <td data-value="27" data-month="3" data-year="2026" class="rdtDay">27</td>
+                                            <td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
+                                            <td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
+                                            <td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
+                                            <td data-value="1" data-month="4" data-year="2026" class="rdtDay rdtNew">1</td>
+                                            <td data-value="2" data-month="4" data-year="2026" class="rdtDay rdtNew">2</td>
+                                        </tr>
+                                        <tr>
+                                            <td data-value="3" data-month="4" data-year="2026" class="rdtDay rdtNew">3</td>
+                                            <td data-value="4" data-month="4" data-year="2026" class="rdtDay rdtNew">4</td>
+                                            <td data-value="5" data-month="4" data-year="2026" class="rdtDay rdtNew">5</td>
+                                            <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtNew">6</td>
+                                            <td data-value="7" data-month="4" data-year="2026" class="rdtDay rdtNew">7</td>
+                                            <td data-value="8" data-month="4" data-year="2026" class="rdtDay rdtNew">8</td>
+                                            <td data-value="9" data-month="4" data-year="2026" class="rdtDay rdtNew">9</td>
+                                        </tr>
+                                    </tbody>
+                                    <tfoot>
+                                        <tr>
+                                            <td colspan="7" class="rdtTimeToggle">12:00 AM</td>
+                                        </tr>
+                                    </tfoot>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <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="p3bept73hr" 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="r5jxpmggl4" 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="s4da9vtbn29" 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="3agz6o8sn26" 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="4ufp29ys8p6" 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="edw0l1gomeh" 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>
+```