@rio-cloud/uikit-mcp 1.1.7 → 1.1.9

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

@@ -1,1112 +0,0 @@
-# Common table
-
-*Category:* Templates
-*Section:* Tables
-*Source:* https://uikit.developers.rio.cloud/#/templates/common-table
-*Captured:* 2026-02-23T15:49:41.008Z
-
-## Common table
-
-### Example: Label
-
-NewButton
-
-Filter
-
-Label
-
-IdNameVINStatusDuration
-
-233IpsumNo dataInactive5h 15m
-
-456No data456Active4h 55m
-
-878No data878Active9h 10m
-
-895No data895Active8h 45m
-
-978IpsumNo dataInactive6h 35m
-
-2345Lorem2345Active11h 50m
-
-2445No data2445Active7h 25m
-
-3456No data3456Active12h 00m
-
-4567No data4567Active10h 20m
-
-7354Lorem7354Active10h 30m
-
-70/100
-
-Load more
-
-#### Summary
-
-NewButton
-
-Filter
-
-Label
-
-IdNameVINStatusDuration
-
-233IpsumNo dataInactive5h 15m
-
-456No data456Active4h 55m
-
-878No data878Active9h 10m
-
-895No data895Active8h 45m
-
-978IpsumNo dataInactive6h 35m
-
-2345Lorem2345Active11h 50m
-
-2445No data2445Active7h 25m
-
-3456No data3456Active12h 00m
-
-4567No data4567Active10h 20m
-
-7354Lorem7354Active10h 30m
-
-70/100
-
-Load more
-
-#### React (tsx)
-
-```tsx
-import { useEffect, useMemo, useState } from 'react';
-import { isEmpty, omit } from 'es-toolkit/compat';
-
-import classNames from '@rio-cloud/rio-uikit/classNames';
-import TableToolbar from '@rio-cloud/rio-uikit/TableToolbar';
-import TableViewToggles, { type TableViewTogglesViewType } from '@rio-cloud/rio-uikit/TableViewToggles';
-import TableSearch from '@rio-cloud/rio-uikit/TableSearch';
-import TableCardsSorting from '@rio-cloud/rio-uikit/TableCardsSorting';
-import TableSettingsDialog from '@rio-cloud/rio-uikit/TableSettingsDialog';
-import type { SortDirectionType } from '@rio-cloud/rio-uikit/SortDirection';
-import ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';
-import NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';
-import NoData from '@rio-cloud/rio-uikit/NoData';
-import Button from '@rio-cloud/rio-uikit/Button';
-import useSorting from '@rio-cloud/rio-uikit/useSorting';
-import useTableSelection from '@rio-cloud/rio-uikit/useTableSelection';
-import TableCol from '@rio-cloud/rio-uikit/TableCol';
-import TableHead from '@rio-cloud/rio-uikit/TableHead';
-import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
-import LoadMoreButton from '@rio-cloud/rio-uikit/LoadMoreButton';
-import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
-import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
-import Dialog from '@rio-cloud/rio-uikit/Dialog';
-
-const defaultColumnOrder = ['vehicleId', 'name', 'vin', 'status', 'duration'];
-const disabledColumns = ['vin'];
-
-type ColumnLabel = { [key: string]: string };
-
-const columnLabels: ColumnLabel = {
-    vehicleId: 'Id',
-    name: 'Name',
-    vin: 'VIN',
-    status: 'Status',
-    duration: 'Duration',
-};
-
-type ColumnDetails = {
-    [key: string]: number;
-};
-
-type ColumnDetailsMap = {
-    [key: string]: ColumnDetails;
-};
-
-const demoColumnsDetails: ColumnDetailsMap = {
-    vehicleId: {
-        width: 60,
-        defaultWidth: 60,
-        maxWidth: 300,
-    },
-    name: {
-        width: 200,
-        defaultWidth: 200,
-        maxWidth: 350,
-    },
-    // Note: 0 means auto width
-    vin: {
-        width: 0,
-        defaultWidth: 0,
-        maxWidth: 350,
-    },
-    status: {
-        // Not defined as it will be defined when its used
-        // width: 350,
-        // defaultWidth: 0,
-    },
-};
-
-type Vehicle = {
-    vehicleId: number;
-    name: string | null;
-    vin: string | null;
-    status: string;
-    duration: string;
-};
-
-const vehicleList: Vehicle[] = [
-    {
-        vehicleId: 7354,
-        name: 'Lorem',
-        vin: '7354',
-        status: 'Active',
-        duration: '10h 30m',
-    },
-    {
-        vehicleId: 233,
-        name: 'Ipsum',
-        vin: null,
-        status: 'Inactive',
-        duration: '5h 15m',
-    },
-    {
-        vehicleId: 895,
-        name: null,
-        vin: '895',
-        status: 'Active',
-        duration: '8h 45m',
-    },
-    {
-        vehicleId: 3456,
-        name: null,
-        vin: '3456',
-        status: 'Active',
-        duration: '12h 00m',
-    },
-    {
-        vehicleId: 2445,
-        name: null,
-        vin: '2445',
-        status: 'Active',
-        duration: '7h 25m',
-    },
-    {
-        vehicleId: 878,
-        name: null,
-        vin: '878',
-        status: 'Active',
-        duration: '9h 10m',
-    },
-    {
-        vehicleId: 2345,
-        name: 'Lorem',
-        vin: '2345',
-        status: 'Active',
-        duration: '11h 50m',
-    },
-    {
-        vehicleId: 978,
-        name: 'Ipsum',
-        vin: null,
-        status: 'Inactive',
-        duration: '6h 35m',
-    },
-    {
-        vehicleId: 456,
-        name: null,
-        vin: '456',
-        status: 'Active',
-        duration: '4h 55m',
-    },
-    {
-        vehicleId: 4567,
-        name: null,
-        vin: '4567',
-        status: 'Active',
-        duration: '10h 20m',
-    },
-];
-
-const dummyActionOptions = [
-    { value: 'Option 1', onSelect: () => {} },
-    { value: 'Option 2', onSelect: () => {} },
-    { value: 'Option 3', onSelect: () => {} },
-    { divider: true },
-    { value: 'Option 4', onSelect: () => {}, disabled: true },
-];
-
-export type TableCommonDemoProps = {
-    viewType: TableViewTogglesViewType;
-};
-
-const TableCommonDemo = (props: TableCommonDemoProps) => {
-    const { viewType: externalViewType } = props;
-
-    const [searchValue, setSearchValue] = useState('');
-    const [showTableSettingsDialog, setShowTableSettingsDialog] = useState(false);
-
-    const [showFilterDialog, setShowFilterDialog] = useState(false);
-    const [filter, setFilter] = useState<TableFilterKey[]>([]);
-
-    const [columnOrder, setColumnOrder] = useState<string[]>(defaultColumnOrder);
-    const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);
-    const [columnsDetails, setColumnsDetails] = useState(demoColumnsDetails);
-
-    const [viewType, setViewType] = useState(externalViewType || TableViewToggles.VIEW_TYPE_TABLE);
-
-    const { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection, toggleDirection } = useSorting(
-        vehicleList,
-        'vehicleId'
-    );
-
-    const { tableRef, updateRowSelection, activeRowId, onActiveRowChange } = useTableSelection<Vehicle>({
-        tableData: vehicleList,
-        idKey: 'vehicleId' as keyof Vehicle, // Specify the unique identifier key
-    });
-
-    // console.log({ activeRowId });
-
-    // When the search value changes and hence the rendered rows, update the highlighting and selection
-    useEffect(() => updateRowSelection(), [searchValue]);
-
-    const handleToggleTableSettingsDialog = () => setShowTableSettingsDialog(!showTableSettingsDialog);
-    const handleViewTypeChange = (newViewType: TableViewTogglesViewType) => setViewType(newViewType);
-    const handleSearchValueChange = (newSearchValue: string) => setSearchValue(newSearchValue);
-
-    const handleColumnChange = (
-        newColumnOrder: string[],
-        newHiddenColumns: string[],
-        newColumnsDetails = columnsDetails
-    ) => {
-        setColumnOrder(newColumnOrder);
-        setHiddenColumns(newHiddenColumns);
-        setColumnsDetails(newColumnsDetails);
-    };
-
-    // For immediate effect
-    const handleColumnDetailsChange = (column: string, newColumnDetails: ColumnDetails) => {
-        const updatedColumnsDetails = { ...columnsDetails };
-        updatedColumnsDetails[column] = newColumnDetails;
-        setColumnsDetails(updatedColumnsDetails);
-    };
-
-    const handleSortChange = (event: React.MouseEvent<HTMLTableCellElement>) => {
-        const newSortBy = event.currentTarget.getAttribute('data-sortby');
-        if (newSortBy) {
-            setSortKey(newSortBy as keyof Vehicle);
-        }
-        if (newSortBy === sortKey) {
-            toggleDirection();
-        }
-    };
-
-    const handleCardSortChange = (newSortBy: string, newSortDir: SortDirectionType) => {
-        setSortKey(newSortBy as keyof Vehicle);
-        setSortDirection(newSortDir);
-    };
-
-    // Filter for hidden columns
-    const hiddenColumnsSet = new Set(hiddenColumns);
-    const columns = columnOrder.filter(name => !hiddenColumnsSet.has(name));
-
-    // Filter data to omit hidden columns
-    const filteredRows = sortedItems.map(vehicle => omit(vehicle, hiddenColumns)) as Vehicle[];
-
-    // In case a search value is given, filter the data accordingly
-    const searchResult = useMemo(() => {
-        if (!searchValue) {
-            return filteredRows;
-        }
-        return filteredRows.filter((row: Partial<Vehicle>) =>
-            columns.some(col => {
-                const value = row[col as keyof Vehicle];
-                if (value == null) {
-                    return false;
-                }
-                return String(value).toLowerCase().includes(searchValue.toLowerCase());
-            })
-        );
-    }, [searchValue, filteredRows, columns]);
-
-    // Filter according to filter dialog settings
-    const rows = useMemo(() => applyFilter(searchResult, filter), [searchResult, filter]);
-
-    const tableClassNames = classNames(
-        'table',
-        'table-layout-fixed',
-        'table-column-overflow-hidden',
-        'table-bordered',
-        'table-sticky',
-        'table-head-filled',
-        viewType === TableViewToggles.VIEW_TYPE_SINGLE_CARD && 'table-cards table-single-card',
-        viewType === TableViewToggles.VIEW_TYPE_MULTI_CARDS && 'table-cards table-multi-cards'
-    );
-
-    const isViewTypeTable = viewType === TableViewToggles.VIEW_TYPE_TABLE;
-
-    const cardSortingSelectOptions = columns.map(column => {
-        return {
-            id: column,
-            label: columnLabels[column],
-            selected: column === sortKey,
-            disabled: false,
-        };
-    });
-
-    return (
-        <div>
-            <TableToolbar>
-                <div className='table-toolbar-container'>
-                    <div className='table-toolbar-group-left'>
-                        <div className='table-toolbar-column'>
-                            <ButtonToolbar className='display-grid grid-cols-3 display-flex-ls'>
-                                <Button bsStyle={Button.PRIMARY} iconName='rioglyph-plus'>
-                                    New
-                                </Button>
-                                <ButtonDropdown id='myActionButton' title='Button' items={dummyActionOptions} />
-                            </ButtonToolbar>
-                        </div>
-                    </div>
-                    <div className='table-toolbar-group-right'>
-                        <div className='table-toolbar-column'>
-                            <Button
-                                iconName={isEmpty(filter) ? 'rioglyph-filter' : 'rioglyph-filter-active'}
-                                onClick={() => setShowFilterDialog(true)}
-                            >
-                                Filter
-                            </Button>
-                            <TableFilterDialog
-                                show={showFilterDialog}
-                                onClose={() => setShowFilterDialog(false)}
-                                filter={filter}
-                                onSetFilter={setFilter}
-                            />
-                        </div>
-                        <div className='table-toolbar-column table-toolbar-column-spacer'>
-                            <TableSearch
-                                value={searchValue}
-                                onChange={handleSearchValueChange}
-                                placeholder='Search in table'
-                            />
-                        </div>
-                        <div className='table-toolbar-column display-flex flex-row align-items-end gap-15'>
-                            <div>
-                                <FormLabel className='table-toolbar-label'>Label</FormLabel>
-                                <TableViewToggles
-                                    initialViewType={viewType}
-                                    onViewTypeChange={handleViewTypeChange}
-                                    tableViewTooltipContent='Table view'
-                                    singleCardViewTooltipContent='List view'
-                                    multiCardsViewTooltipContent='Cards view'
-                                />
-                            </div>
-                            <Button iconOnly iconName='rioglyph-settings' onClick={handleToggleTableSettingsDialog} />
-                        </div>
-                    </div>
-                    {showTableSettingsDialog && (
-                        <TableSettingsDialog
-                            show={showTableSettingsDialog}
-                            title='Table settings'
-                            onHide={handleToggleTableSettingsDialog}
-                            onColumnChange={handleColumnChange}
-                            defaultColumnOrder={defaultColumnOrder}
-                            defaultHiddenColumns={[]}
-                            columnOrder={columnOrder}
-                            hiddenColumns={hiddenColumns}
-                            columnLabels={columnLabels}
-                            disabledColumns={disabledColumns}
-                            closeButtonText='Close'
-                            resetButtonText='Reset to default'
-                            searchPlaceholder='Search by column name'
-                            notFoundMessage='No column found for this search value'
-                            columnsDetails={columnsDetails}
-                            autoLabel='Auto'
-                            onColumnDetailsChange={handleColumnDetailsChange}
-                            onSearchChange={(val: string) => console.log(val)}
-                            immediateChange
-                        />
-                    )}
-                </div>
-            </TableToolbar>
-            {sortKey && !isViewTypeTable && (
-                <TableCardsSorting
-                    selectOptions={cardSortingSelectOptions}
-                    sortName={sortKey as string}
-                    sortOrder={sortDirection}
-                    onSortChange={handleCardSortChange}
-                />
-            )}
-            <div className='table-responsive'>
-                {isEmpty(rows) && !isViewTypeTable && (
-                    <NotFoundState headline='Nothing found' message='Please refine your search' />
-                )}
-                <table ref={tableRef} className={tableClassNames}>
-                    <colgroup>
-                        {columns.map(column => (
-                            <TableCol key={column} columnDetails={columnsDetails[column]} />
-                        ))}
-                        <TableCol className='table-action' />
-                    </colgroup>
-                    <thead>
-                        <tr>
-                            {columns.map(column => (
-                                <TableHead
-                                    key={column}
-                                    label={columnLabels[column]}
-                                    column={column}
-                                    sortBy={sortKey as string}
-                                    sortDir={sortDirection}
-                                    onClick={handleSortChange}
-                                />
-                            ))}
-                            <TableHead className='table-action' />
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {isEmpty(rows) && isViewTypeTable && (
-                            <tr>
-                                <td colSpan={columns.length + 1}>
-                                    <NotFoundState
-                                        outerClassName='border-none'
-                                        headline='Nothing found'
-                                        message='Please refine your search'
-                                    />
-                                </td>
-                            </tr>
-                        )}
-                        {rows.map(row => (
-                            <tr
-                                key={row.vehicleId}
-                                data-id={row.vehicleId}
-                                onClick={onActiveRowChange}
-                                className='cursor-pointer'
-                            >
-                                {columns.map(col => {
-                                    const item = row[col as keyof Vehicle] ?? <NoData text='No data' />;
-                                    return (
-                                        <td key={col} data-field={columnLabels[col]}>
-                                            <span>{item}</span>
-                                        </td>
-                                    );
-                                })}
-                                <td className='table-action'>
-                                    <DummyRowDropdown />
-                                </td>
-                            </tr>
-                        ))}
-                        {/* Placeholder workaround for equal with cards of the last row */}
-                        <tr className='table-card-placeholder' />
-                        <tr className='table-card-placeholder' />
-                        <tr className='table-card-placeholder' />
-                        <tr className='table-card-placeholder' />
-                        <tr className='table-card-placeholder' />
-                        <tr className='table-card-placeholder' />
-                        <tr className='table-card-placeholder' />
-                        <tr className='table-card-placeholder' />
-                        <tr className='table-card-placeholder' />
-                        <tr className='table-card-placeholder' />
-                    </tbody>
-                </table>
-            </div>
-            <LoadMoreButton
-                loaded={70}
-                total={100}
-                onLoadMore={() => {}}
-                loadMoreMessage='Load more'
-                noMoreMessage='Everything loaded'
-            />
-        </div>
-    );
-};
-
-const DummyRowDropdown = () => (
-    <span>
-        <ButtonDropdown
-            title={<span className='rioglyph rioglyph-option-vertical' />}
-            variant='link'
-            iconOnly
-            items={[
-                {
-                    value: (
-                        <div className='display-flex align-items-center gap-10'>
-                            <span className='rioglyph rioglyph-pencil' />
-                            <span>Edit</span>
-                        </div>
-                    ),
-                },
-                {
-                    value: (
-                        <div className='display-flex align-items-center gap-10'>
-                            <span className='rioglyph rioglyph-duplicate' />
-                            <span>Duplicate</span>
-                        </div>
-                    ),
-                },
-                {
-                    value: (
-                        <div className='display-flex align-items-center gap-10'>
-                            <span className='rioglyph rioglyph-trash' />
-                            <span>Delete</span>
-                        </div>
-                    ),
-                },
-            ]}
-        />
-    </span>
-);
-
-const FILTER_KAY_MISSING_VIN = 'missingVin';
-type TableFilterKey = typeof FILTER_KAY_MISSING_VIN;
-
-const TABLE_FILTERS: Record<TableFilterKey, { label: string }> = {
-    missingVin: { label: 'Hide items without VIN' },
-};
-
-const applyFilter = (items: Vehicle[], filter: string[]) => {
-    const filterSet = new Set(filter);
-
-    return items.filter(item => {
-        // If 'missingVin' is in the filter set, keep only items with a VIN (!!item.vin is true).
-        // If 'missingVin' is NOT in the filter set, this specific condition doesn't remove the item.
-        if (filterSet.has(FILTER_KAY_MISSING_VIN) && !item.vin) {
-            return false; // Hide items without VIN if filter is active
-        }
-        // Add more filter conditions here as needed.
-        // If no active filter criteria cause the item to be excluded, keep it.
-        return true;
-    });
-};
-
-const TableFilterDialog = (props: {
-    show: boolean;
-    onClose: VoidFunction;
-    filter: TableFilterKey[];
-    onSetFilter: (filter: TableFilterKey[]) => void;
-}) => {
-    const { show, onClose, filter, onSetFilter } = props;
-
-    const filterSet = new Set(filter);
-
-    const toggleFilter = (key: TableFilterKey) => {
-        const newFilter = new Set(filter);
-        if (newFilter.has(key)) {
-            newFilter.delete(key);
-        } else {
-            newFilter.add(key);
-        }
-        onSetFilter(Array.from(newFilter));
-    };
-
-    return (
-        <Dialog
-            show={show}
-            bsSize='sm'
-            onClose={onClose}
-            title='Table filter'
-            body={
-                <div>
-                    <fieldset className='margin-bottom-25'>
-                        <legend>Vehicle properties</legend>
-                        <div className='display-flex flex-column gap-10'>
-                            {Object.entries(TABLE_FILTERS).map(([key, { label }]) => (
-                                <Checkbox
-                                    key={key}
-                                    checked={filterSet.has(key as TableFilterKey)}
-                                    onChange={() => toggleFilter(key as TableFilterKey)}
-                                    className='user-select-none'
-                                >
-                                    {label}
-                                </Checkbox>
-                            ))}
-                            <Checkbox disabled>Lorem ipsum dolor</Checkbox>
-                            <Checkbox disabled>Dolor sit amet</Checkbox>
-                        </div>
-                    </fieldset>
-                    <fieldset>
-                        <legend>More filter options</legend>
-                        <div className='display-flex flex-column gap-10'>
-                            <Checkbox disabled>Lorem ipsum dolor</Checkbox>
-                            <Checkbox disabled>Dolor sit amet</Checkbox>
-                        </div>
-                    </fieldset>
-                </div>
-            }
-            footer={
-                <div className='btn-toolbar'>
-                    <Button onClick={onClose}>
-                        <span>Close</span>
-                    </Button>
-                </div>
-            }
-        />
-    );
-};
-
-export default TableCommonDemo;
-```
-
-#### HTML (html)
-
-```html
-<div>
-    <div class="table-toolbar">
-        <div class="table-toolbar-container">
-            <div class="table-toolbar-group-left">
-                <div class="table-toolbar-column">
-                    <div class="display-grid grid-cols-3 display-flex-ls btn-toolbar">
-                        <button type="button" class="btn btn-primary btn-component" tabindex="0">
-                            <span class="rioglyph rioglyph-plus">
-                            </span>New</button>
-                        <div class="dropdown btn-group">
-                            <button type="button" id="myActionButton" class="btn btn-default btn-md btn-component dropdown-toggle" tabindex="0">Button<span class="caret">
-                                </span>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="table-toolbar-group-right">
-                <div class="table-toolbar-column">
-                    <button type="button" class="btn btn-default btn-component" tabindex="0">
-                        <span class="rioglyph rioglyph-filter">
-                        </span>Filter</button>
-                </div>
-                <div class="table-toolbar-column table-toolbar-column-spacer">
-                    <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 display-flex flex-row align-items-end gap-15">
-                    <div>
-                        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 table-toolbar-label">Label</div>
-                        <div class="TableViewToggles btn-group display-flex flex-row">
-                            <button class="btn btn-default btn-icon-only active" type="button">
-                                <span class="rioglyph rioglyph-table-view">
-                                </span>
-                            </button>
-                            <button class="btn btn-default btn-icon-only" type="button">
-                                <span class="rioglyph rioglyph-th-list">
-                                </span>
-                            </button>
-                            <button class="btn btn-default btn-icon-only" type="button">
-                                <span class="rioglyph rioglyph-split-view">
-                                </span>
-                            </button>
-                        </div>
-                    </div>
-                    <button type="button" class="btn btn-default btn-icon-only btn-component" tabindex="0">
-                        <span class="rioglyph rioglyph-settings">
-                        </span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="table-responsive">
-        <table class="table table-layout-fixed table-column-overflow-hidden table-bordered table-sticky table-head-filled">
-            <colgroup>
-                <col class="" style="min-width: 60px; width: 60px;">
-                <col class="" style="min-width: 200px; width: 200px;">
-                <col class="">
-                <col class="">
-                <col class="">
-                <col class="table-action">
-            </colgroup>
-            <thead>
-                <tr>
-                    <th class="user-select-none sort-column" data-field="vehicleId" data-sortby="vehicleId" title="Id">
-                        <span>
-                            <span class="sort-arrows sort-asc">
-                            </span>
-                            <span>Id</span>
-                        </span>
-                    </th>
-                    <th class="user-select-none sort-column" data-field="name" data-sortby="name" title="Name">
-                        <span>
-                            <span class="sort-arrows ">
-                            </span>
-                            <span>Name</span>
-                        </span>
-                    </th>
-                    <th class="user-select-none sort-column" data-field="vin" data-sortby="vin" title="VIN">
-                        <span>
-                            <span class="sort-arrows ">
-                            </span>
-                            <span>VIN</span>
-                        </span>
-                    </th>
-                    <th class="user-select-none sort-column" data-field="status" data-sortby="status" title="Status">
-                        <span>
-                            <span class="sort-arrows ">
-                            </span>
-                            <span>Status</span>
-                        </span>
-                    </th>
-                    <th class="user-select-none sort-column" data-field="duration" data-sortby="duration" title="Duration">
-                        <span>
-                            <span class="sort-arrows ">
-                            </span>
-                            <span>Duration</span>
-                        </span>
-                    </th>
-                    <th class="user-select-none sort-column table-action" title="">
-                    </th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr data-id="233" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>233</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>Ipsum</span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>
-                            <span class="NoData">
-                                <span class="pointer-events-none user-select-none">No data</span>
-                            </span>
-                        </span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Inactive</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>5h 15m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="tt7amh4ncm" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
-                                    <span class="rioglyph rioglyph-option-vertical">
-                                    </span>
-                                </button>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="456" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>456</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>
-                            <span class="NoData">
-                                <span class="pointer-events-none user-select-none">No data</span>
-                            </span>
-                        </span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>456</span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Active</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>4h 55m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="6q48z5xy6uu" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
-                                    <span class="rioglyph rioglyph-option-vertical">
-                                    </span>
-                                </button>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="878" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>878</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>
-                            <span class="NoData">
-                                <span class="pointer-events-none user-select-none">No data</span>
-                            </span>
-                        </span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>878</span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Active</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>9h 10m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="zsdhts8n5g" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
-                                    <span class="rioglyph rioglyph-option-vertical">
-                                    </span>
-                                </button>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="895" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>895</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>
-                            <span class="NoData">
-                                <span class="pointer-events-none user-select-none">No data</span>
-                            </span>
-                        </span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>895</span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Active</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>8h 45m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="6rvj7fp1fr9" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
-                                    <span class="rioglyph rioglyph-option-vertical">
-                                    </span>
-                                </button>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="978" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>978</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>Ipsum</span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>
-                            <span class="NoData">
-                                <span class="pointer-events-none user-select-none">No data</span>
-                            </span>
-                        </span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Inactive</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>6h 35m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="bpw8bismz8n" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
-                                    <span class="rioglyph rioglyph-option-vertical">
-                                    </span>
-                                </button>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="2345" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>2345</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>Lorem</span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>2345</span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Active</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>11h 50m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="tioncbd131" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
-                                    <span class="rioglyph rioglyph-option-vertical">
-                                    </span>
-                                </button>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="2445" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>2445</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>
-                            <span class="NoData">
-                                <span class="pointer-events-none user-select-none">No data</span>
-                            </span>
-                        </span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>2445</span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Active</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>7h 25m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="1re6dmpq3j8" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
-                                    <span class="rioglyph rioglyph-option-vertical">
-                                    </span>
-                                </button>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="3456" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>3456</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>
-                            <span class="NoData">
-                                <span class="pointer-events-none user-select-none">No data</span>
-                            </span>
-                        </span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>3456</span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Active</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>12h 00m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="6hsw746njhy" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
-                                    <span class="rioglyph rioglyph-option-vertical">
-                                    </span>
-                                </button>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="4567" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>4567</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>
-                            <span class="NoData">
-                                <span class="pointer-events-none user-select-none">No data</span>
-                            </span>
-                        </span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>4567</span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Active</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>10h 20m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="bg7yaoxc7oo" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
-                                    <span class="rioglyph rioglyph-option-vertical">
-                                    </span>
-                                </button>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr data-id="7354" class="cursor-pointer">
-                    <td data-field="Id">
-                        <span>7354</span>
-                    </td>
-                    <td data-field="Name">
-                        <span>Lorem</span>
-                    </td>
-                    <td data-field="VIN">
-                        <span>7354</span>
-                    </td>
-                    <td data-field="Status">
-                        <span>Active</span>
-                    </td>
-                    <td data-field="Duration">
-                        <span>10h 30m</span>
-                    </td>
-                    <td class="table-action">
-                        <span>
-                            <div class="dropdown btn-group">
-                                <button type="button" id="atfm8lhvq9u" class="btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
-                                    <span class="rioglyph rioglyph-option-vertical">
-                                    </span>
-                                </button>
-                            </div>
-                        </span>
-                    </td>
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-                <tr class="table-card-placeholder">
-                </tr>
-            </tbody>
-        </table>
-    </div>
-    <div class="LoadMoreButton align-items-center display-flex justify-content-center margin-top-25 margin-bottom-25 non-printable">
-        <div class="min-width-150">
-            <div class="text-center margin-bottom-3">
-                <span class="text-medium">70</span>
-                <span class="margin-left-5 margin-right-5">/</span>
-                <span class="text-medium">100</span>
-            </div>
-            <div class="progress height-2 margin-bottom-10 bg-white">
-                <div class="progress-bar" style="width: 70%;">
-                </div>
-            </div>
-            <div class="display-flex justify-content-center">
-                <button class="btn btn-link padding-right-20 margin-top--5" type="button">
-                    <span class="rioglyph rioglyph-arrow-down">
-                    </span>Load more</button>
-            </div>
-        </div>
-    </div>
-</div>
-```