@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

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

@@ -0,0 +1,1111 @@
+# Common table
+
+*Category:* Templates
+*Section:* Tables
+*Source:* https://uikit.developers.rio.cloud/#templates/common-table
+*Captured:* 2025-12-12T14:21:38.777Z
+
+## 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 '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 columns = columnOrder.filter(name => !hiddenColumns.includes(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="vpsj8rypurp" 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="xnq3f9zn1or" 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="s0qbncho0ip" 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="cjhctz5rnlc" 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="5iacsci0yi" 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="qm66xtyznu" 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="0296eztcd15j" 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="0df3rjzvahe" 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="zmays3vrfsr" 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="k9wqezo8n1h" 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>
+```