# HTML table

*Category:* Components
*Section:* Table
*Source:* https://uikit.developers.rio.cloud/#/components/htmlTable
*Captured:* 2026-04-27T14:58:22.988Z

These helpers are intended for table implementations that render native <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements.

## HTML table

> Info: In order to have proper alignment of table cell content for list and cards view, it is required to wrap the content in a <span> tag.

> Info

> See also our table controls for shared toolbar and search components, and Table component for the grid-based table component and related demos.

## Table

## Common table style

### Example: Example 1

Label 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

Label Table view
Cards view
List view

Head column Head column Head column Head column

Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column

#### HTML (html)

```html
<div>
    <div class="table-toolbar">
        <div class="table-toolbar-container">
            <div class="table-toolbar-group-left">
                <div class="table-toolbar-column align-self-end">
                    <label class="table-toolbar-label">Label</label>
                    <div class="btn-toolbar table-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-200">
                    <div class="rdt DatePicker form-group">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="rioglyph rioglyph-calendar" aria-hidden="true">
                                </span>
                            </span>
                            <div class="ClearableInput input-group">
                                <input type="text" class="form-control" placeholder="Select date" value="">
                            </div>
                        </div>
                        <div class="rdtPicker">
                            <div class="rdtDays">
                                <table>
                                    <thead>
                                        <tr>
                                            <th class="rdtPrev">
                                                <span>‹</span>
                                            </th>
                                            <th class="rdtSwitch" colspan="5" data-value="3">April 2026</th>
                                            <th class="rdtNext">
                                                <span>›</span>
                                            </th>
                                        </tr>
                                        <tr>
                                            <th class="dow">Su</th>
                                            <th class="dow">Mo</th>
                                            <th class="dow">Tu</th>
                                            <th class="dow">We</th>
                                            <th class="dow">Th</th>
                                            <th class="dow">Fr</th>
                                            <th class="dow">Sa</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td data-value="29" data-month="2" data-year="2026" class="rdtDay rdtOld">29</td>
                                            <td data-value="30" data-month="2" data-year="2026" class="rdtDay rdtOld">30</td>
                                            <td data-value="31" data-month="2" data-year="2026" class="rdtDay rdtOld">31</td>
                                            <td data-value="1" data-month="3" data-year="2026" class="rdtDay">1</td>
                                            <td data-value="2" data-month="3" data-year="2026" class="rdtDay">2</td>
                                            <td data-value="3" data-month="3" data-year="2026" class="rdtDay">3</td>
                                            <td data-value="4" data-month="3" data-year="2026" class="rdtDay">4</td>
                                        </tr>
                                        <tr>
                                            <td data-value="5" data-month="3" data-year="2026" class="rdtDay">5</td>
                                            <td data-value="6" data-month="3" data-year="2026" class="rdtDay">6</td>
                                            <td data-value="7" data-month="3" data-year="2026" class="rdtDay">7</td>
                                            <td data-value="8" data-month="3" data-year="2026" class="rdtDay">8</td>
                                            <td data-value="9" data-month="3" data-year="2026" class="rdtDay">9</td>
                                            <td data-value="10" data-month="3" data-year="2026" class="rdtDay">10</td>
                                            <td data-value="11" data-month="3" data-year="2026" class="rdtDay">11</td>
                                        </tr>
                                        <tr>
                                            <td data-value="12" data-month="3" data-year="2026" class="rdtDay">12</td>
                                            <td data-value="13" data-month="3" data-year="2026" class="rdtDay">13</td>
                                            <td data-value="14" data-month="3" data-year="2026" class="rdtDay">14</td>
                                            <td data-value="15" data-month="3" data-year="2026" class="rdtDay">15</td>
                                            <td data-value="16" data-month="3" data-year="2026" class="rdtDay">16</td>
                                            <td data-value="17" data-month="3" data-year="2026" class="rdtDay">17</td>
                                            <td data-value="18" data-month="3" data-year="2026" class="rdtDay">18</td>
                                        </tr>
                                        <tr>
                                            <td data-value="19" data-month="3" data-year="2026" class="rdtDay">19</td>
                                            <td data-value="20" data-month="3" data-year="2026" class="rdtDay">20</td>
                                            <td data-value="21" data-month="3" data-year="2026" class="rdtDay">21</td>
                                            <td data-value="22" data-month="3" data-year="2026" class="rdtDay">22</td>
                                            <td data-value="23" data-month="3" data-year="2026" class="rdtDay">23</td>
                                            <td data-value="24" data-month="3" data-year="2026" class="rdtDay">24</td>
                                            <td data-value="25" data-month="3" data-year="2026" class="rdtDay">25</td>
                                        </tr>
                                        <tr>
                                            <td data-value="26" data-month="3" data-year="2026" class="rdtDay">26</td>
                                            <td data-value="27" data-month="3" data-year="2026" class="rdtDay rdtToday">27</td>
                                            <td data-value="28" data-month="3" data-year="2026" class="rdtDay">28</td>
                                            <td data-value="29" data-month="3" data-year="2026" class="rdtDay">29</td>
                                            <td data-value="30" data-month="3" data-year="2026" class="rdtDay">30</td>
                                            <td data-value="1" data-month="4" data-year="2026" class="rdtDay rdtNew">1</td>
                                            <td data-value="2" data-month="4" data-year="2026" class="rdtDay rdtNew">2</td>
                                        </tr>
                                        <tr>
                                            <td data-value="3" data-month="4" data-year="2026" class="rdtDay rdtNew">3</td>
                                            <td data-value="4" data-month="4" data-year="2026" class="rdtDay rdtNew">4</td>
                                            <td data-value="5" data-month="4" data-year="2026" class="rdtDay rdtNew">5</td>
                                            <td data-value="6" data-month="4" data-year="2026" class="rdtDay rdtNew">6</td>
                                            <td data-value="7" data-month="4" data-year="2026" class="rdtDay rdtNew">7</td>
                                            <td data-value="8" data-month="4" data-year="2026" class="rdtDay rdtNew">8</td>
                                            <td data-value="9" data-month="4" data-year="2026" class="rdtDay rdtNew">9</td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="7" class="rdtTimeToggle">12:00 AM</td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-toolbar-group-right">
                <div class="table-toolbar-column align-self-end">
                    <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..." class="form-control" type="text" tabindex="0" value="">
                            <span class="clearButton hide">
                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="table-toolbar-column align-self-end table-toolbar-column-separator">
                    <label class="table-toolbar-label">Label</label>
                    <div class="TableViewToggles">
                        <div class="form-group margin-bottom-0">
                            <div class="select dropdown">
                                <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                                    <span class="selected-option-text">
                                        <span>
                                            <span class="rioglyph rioglyph-table-view">
                                            </span>
                                        </span>
                                    </span>
                                    <span class="select-toggle-actions">
                                        <span class="clearButton hide pointer-events-none">
                                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                            </span>
                                        </span>
                                        <span class="caret">
                                        </span>
                                    </span>
                                </button>
                                <ul class="dropdown-menu pull-right" role="menu">
                                    <li class="" role="listitem">
                                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="TABLE" data-item-index="0">
                                            <span class="selected-option-dropdown-item">
                                                <span class="rioglyph rioglyph-table-view">
                                                </span>Table view</span>
                                            <input type="hidden" value="TABLE">
                                        </a>
                                    </li>
                                    <li class="" role="listitem">
                                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="MULTI_CARDS" data-item-index="1">
                                            <span class="selected-option-dropdown-item">
                                                <span class="rioglyph rioglyph-split-view">
                                                </span>Cards view</span>
                                            <input type="hidden" value="MULTI_CARDS">
                                        </a>
                                    </li>
                                    <li class="" role="listitem">
                                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="SINGLE_CARD" data-item-index="2">
                                            <span class="selected-option-dropdown-item">
                                                <span class="rioglyph rioglyph-th-list">
                                                </span>List view</span>
                                            <input type="hidden" value="SINGLE_CARD">
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-toolbar-column align-self-end">
                    <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-hover table-head-filled table-bordered">
            <thead>
                <tr>
                    <th class="user-select-none sort-column" title="">Head column</th>
                    <th class="user-select-none sort-column" title="">Head column</th>
                    <th class="user-select-none sort-column" title="">Head column</th>
                    <th class="user-select-none sort-column" title="">Head column</th>
                </tr>
            </thead>
            <tbody>
                <tr class="active">
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
                <tr>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
                <tr>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
                <tr>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
                <tr class="info">
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
                <tr class="success">
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
                <tr class="danger">
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
                <tr class="warning">
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
                <tr>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
```

#### Classes (css)

```css
table
```

## Table head

### Example: Default table head style

Default table head style

Column head Column head Column head Column head

Column Column Column Column

Alternative table head

Column head Column head Column head Column head

Column Column Column Column

#### HTML (html)

```html
<div class="margin-bottom-20">
    <div class="description-headline">
        <h4 class="margin-top-0">Default table head style</h4>
    </div>
</div>
<div class="table-responsive margin-bottom-50">
    <table class="table table-head-filled">
        <thead>
            <tr>
                <th>Column head</th>
                <th>Column head</th>
                <th>Column head</th>
                <th>Column head</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="margin-bottom-20">
    <div class="description-headline">
        <h4 class="">Alternative table head</h4>
    </div>
</div>
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>Column head</th>
                <th>Column head</th>
                <th>Column head</th>
                <th>Column head</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
        </tbody>
    </table>
</div>
```

#### Classes (css)

```css
table
```

## Rounded table

Use the table rounded classed when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners without needing to add additional padding.

### Example: Example 3

Column head Column head Column head Column head

Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column

#### HTML (html)

```html
<div class="bg-white rounded border shadow-none padding-0 margin-y-25 table-responsive">
    <table class="table table-head-filled table-rounded">
        <thead>
            <tr>
                <th>Column head</th>
                <th>Column head</th>
                <th>Column head</th>
                <th>Column head</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
        </tbody>
    </table>
</div>
```

#### Classes (css)

```css
table-rounded
```

### Example: Example 4

New Button

Filter

Table view
Cards view
List view

Id Name VIN Status Duration

233 Ipsum No data Inactive 5h 15m

456 No data 456 Active 4h 55m

878 No data 878 Active 9h 10m

895 No data 895 Active 8h 45m

978 Ipsum No data Inactive 6h 35m

2345 Lorem 2345 Active 11h 50m

2445 No data 2445 Active 7h 25m

3456 No data 3456 Active 12h 00m

4567 No data 4567 Active 10h 20m

7354 Lorem 7354 Active 10h 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 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 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 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';
import TableRowActionsDropdown from '@rio-cloud/rio-uikit/TableRowActionsDropdown';

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 => ({
        id: column,
        label: columnLabels[column],
        selected: column === sortKey,
        disabled: false,
    }));

    return (
        <div>
            <TableToolbar>
                <TableToolbarColumn>
                    <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>
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right'>
                    <Button
                        iconName={isEmpty(filter) ? 'rioglyph-filter' : 'rioglyph-filter-active'}
                        onClick={() => setShowFilterDialog(true)}
                    >
                        Filter
                    </Button>
                    <TableFilterDialog
                        show={showFilterDialog}
                        onClose={() => setShowFilterDialog(false)}
                        filter={filter}
                        onSetFilter={setFilter}
                    />
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right' separator>
                    <TableSearch value={searchValue} onChange={handleSearchValueChange} placeholder='Search in table' />
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right'>
                    <div className='display-flex align-items-center gap-15'>
                        <TableViewToggles
                            initialViewType={viewType}
                            onViewTypeChange={handleViewTypeChange}
                            tableViewLabel='Table view'
                            singleCardViewLabel='List view'
                            multiCardsViewLabel='Cards view'
                        />
                        <Button iconOnly iconName='rioglyph-settings' onClick={handleToggleTableSettingsDialog} />
                    </div>
                </TableToolbarColumn>
            </TableToolbar>
            <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
            />
            {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>
        <TableRowActionsDropdown
            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 align-self-end">
                    <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 align-self-end">
                    <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 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 align-items-center gap-15">
                        <div class="TableViewToggles">
                            <div class="form-group margin-bottom-0">
                                <div class="select dropdown">
                                    <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                                        <span class="selected-option-text">
                                            <span>
                                                <span class="rioglyph rioglyph-table-view">
                                                </span>
                                            </span>
                                        </span>
                                        <span class="select-toggle-actions">
                                            <span class="clearButton hide pointer-events-none">
                                                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                                </span>
                                            </span>
                                            <span class="caret">
                                            </span>
                                        </span>
                                    </button>
                                    <ul class="dropdown-menu pull-right" role="menu">
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="TABLE" data-item-index="0">
                                                <span class="selected-option-dropdown-item">
                                                    <span class="rioglyph rioglyph-table-view">
                                                    </span>Table view</span>
                                                <input type="hidden" value="TABLE">
                                            </a>
                                        </li>
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="MULTI_CARDS" data-item-index="1">
                                                <span class="selected-option-dropdown-item">
                                                    <span class="rioglyph rioglyph-split-view">
                                                    </span>Cards view</span>
                                                <input type="hidden" value="MULTI_CARDS">
                                            </a>
                                        </li>
                                        <li class="" role="listitem">
                                            <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="SINGLE_CARD" data-item-index="2">
                                                <span class="selected-option-dropdown-item">
                                                    <span class="rioglyph rioglyph-th-list">
                                                    </span>List view</span>
                                                <input type="hidden" value="SINGLE_CARD">
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <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>
    <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" aria-label="Row actions" id="kli422ksfoj" 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>
                        </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" aria-label="Row actions" id="qxr68v6t8gn" 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>
                        </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" aria-label="Row actions" id="ko6uxak9zlm" 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>
                        </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" aria-label="Row actions" id="90twhze6gkb" 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>
                        </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" aria-label="Row actions" id="isspmhyww2" 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>
                        </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" aria-label="Row actions" id="orw7te2eze" 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>
                        </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" aria-label="Row actions" id="opkp7oeo3co" 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>
                        </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" aria-label="Row actions" id="b0hwmwi4mih" 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>
                        </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" aria-label="Row actions" id="3z9cpn7p7cl" 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>
                        </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" aria-label="Row actions" id="7glbvn0s8oj" 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>
                        </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>
```

#### Props (json)

```json
<div class="table-responsive">
    <table class="table table-layout-fixed table-column-overflow-hidden table-bordered">
        <colgroup>
            <col style="min-width: 150px; width: 150px;">
            <col style="min-width: 350px; width: 350px;">
            <col>
            <col>
        </colgroup>
        <thead>
            ...
        </thead>
        <tbody>
            ...
        </tbody>
    </table>
</div>
```

## TableSettingsDialog - column sort only

### Example: Example 5

Label Table view
Cards view
List view

Id Name VIN Status

233 Ipsum No data Inactive

895 No data 895 Active

7354 Lorem 7354 Active

#### React (tsx)

```tsx
import { useState } from 'react';
import { isEmpty, omit } from 'es-toolkit/compat';

import classNames from '@rio-cloud/rio-uikit/classNames';
import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
import TableViewToggles, { type TableViewTogglesViewType } from '@rio-cloud/rio-uikit/TableViewToggles';
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 NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';
import NoData from '@rio-cloud/rio-uikit/NoData';
import Button from '@rio-cloud/rio-uikit/Button';
import TableRowActionsDropdown from '@rio-cloud/rio-uikit/TableRowActionsDropdown';
import useSorting from '@rio-cloud/rio-uikit/useSorting';
import TableCol from '@rio-cloud/rio-uikit/TableCol';
import TableHead from '@rio-cloud/rio-uikit/TableHead';

const defaultColumnOrder = ['vehicleId', 'name', 'vin', 'status'];
const disabledColumns = ['vin'];

type ColumnLabel = { [key: string]: string };

const columnLabels: ColumnLabel = {
    vehicleId: 'Id',
    name: 'Name',
    vin: 'VIN',
    status: 'Status',
};

type Vehicle = {
    vehicleId: number;
    name: React.ReactNode;
    vin: React.ReactNode;
    status: string;
};

const vehicleList: Vehicle[] = [
    {
        vehicleId: 7354,
        name: 'Lorem',
        vin: '7354',
        status: 'Active',
    },
    {
        vehicleId: 233,
        name: 'Ipsum',
        vin: <NoData text='No data' />,
        status: 'Inactive',
    },
    {
        vehicleId: 895,
        name: <NoData text='No data' />,
        vin: '895',
        status: 'Active',
    },
];

export type TableCommonDemoProps = {
    viewType: TableViewTogglesViewType;
};

const TableCommonDemo = (props: TableCommonDemoProps) => {
    const { viewType: externalViewType } = props;

    const [showTableSettingsDialog, setShowTableSettingsDialog] = useState(false);

    const [columnOrder, setColumnOrder] = useState<string[]>(defaultColumnOrder);
    const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);
    const [viewType, setViewType] = useState(externalViewType || TableViewToggles.VIEW_TYPE_TABLE);

    const { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection, toggleDirection } = useSorting(
        vehicleList,
        'vehicleId'
    );

    const handleToggleTableSettingsDialog = () => setShowTableSettingsDialog(!showTableSettingsDialog);
    const handleViewTypeChange = (newViewType: TableViewTogglesViewType) => setViewType(newViewType);

    const handleColumnOrderChange = (newColumnOrder: string[], newHiddenColumns: string[]) => {
        setColumnOrder(newColumnOrder);
        setHiddenColumns(newHiddenColumns);
    };

    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[];

    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 => ({
        id: column,
        label: columnLabels[column],
        selected: column === sortKey,
        disabled: false,
    }));

    return (
        <div id='TableCommonDemo'>
            <TableToolbar>
                <TableToolbarColumn horizontalAlign='right' label='Label' separator>
                    <TableViewToggles
                        initialViewType={viewType}
                        onViewTypeChange={handleViewTypeChange}
                        tableViewLabel='Table view'
                        singleCardViewLabel='List view'
                        multiCardsViewLabel='Cards view'
                    />
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right'>
                    <Button iconOnly iconName='rioglyph-settings' onClick={handleToggleTableSettingsDialog} />
                </TableToolbarColumn>
            </TableToolbar>
            {showTableSettingsDialog && (
                <TableSettingsDialog
                    show={showTableSettingsDialog}
                    title='Table Settings'
                    onHide={handleToggleTableSettingsDialog}
                    onColumnChange={handleColumnOrderChange}
                    defaultColumnOrder={defaultColumnOrder}
                    defaultHiddenColumns={[]}
                    columnOrder={columnOrder}
                    hiddenColumns={hiddenColumns}
                    columnLabels={columnLabels}
                    disabledColumns={disabledColumns}
                    closeButtonText='Close'
                    cancelButtonText='Cancel'
                    applyButtonText='Apply changes'
                    resetButtonText='Reset to default'
                    searchPlaceholder='Search by column name'
                    notFoundMessage='No column found for this search value'
                    autoLabel='Auto'
                />
            )}
            {sortKey && !isViewTypeTable && (
                <TableCardsSorting
                    selectOptions={cardSortingSelectOptions}
                    sortName={sortKey as string}
                    sortOrder={sortDirection}
                    onSortChange={handleCardSortChange}
                />
            )}
            <div>
                {isEmpty(filteredRows) && !isViewTypeTable && (
                    <NotFoundState headline='Nothing found' message='Please refine your search' />
                )}
                <table className={tableClassNames}>
                    <colgroup>
                        {columns.map(column => (
                            <TableCol key={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(filteredRows) && isViewTypeTable && (
                            <tr>
                                <td colSpan={columns.length + 1}>
                                    <NotFoundState
                                        outerClassName='border-none'
                                        headline='Nothing found'
                                        message='Please refine your search'
                                    />
                                </td>
                            </tr>
                        )}
                        {filteredRows.map((row: Vehicle) => (
                            <tr key={row.vehicleId}>
                                {columns.map(col => (
                                    <td key={col} data-field={columnLabels[col]}>
                                        <span>{row[col as keyof Vehicle]}</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>
        </div>
    );
};

const DummyRowDropdown = () => (
    <span>
        <TableRowActionsDropdown
            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>
);

export default TableCommonDemo;
```

#### HTML (html)

```html
<div id="TableCommonDemo">
    <div class="table-toolbar">
        <div class="table-toolbar-container">
            <div class="table-toolbar-group-right">
                <div class="table-toolbar-column align-self-end table-toolbar-column-separator">
                    <label class="table-toolbar-label">Label</label>
                    <div class="TableViewToggles">
                        <div class="form-group margin-bottom-0">
                            <div class="select dropdown">
                                <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                                    <span class="selected-option-text">
                                        <span>
                                            <span class="rioglyph rioglyph-table-view">
                                            </span>
                                        </span>
                                    </span>
                                    <span class="select-toggle-actions">
                                        <span class="clearButton hide pointer-events-none">
                                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                            </span>
                                        </span>
                                        <span class="caret">
                                        </span>
                                    </span>
                                </button>
                                <ul class="dropdown-menu pull-right" role="menu">
                                    <li class="" role="listitem">
                                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="TABLE" data-item-index="0">
                                            <span class="selected-option-dropdown-item">
                                                <span class="rioglyph rioglyph-table-view">
                                                </span>Table view</span>
                                            <input type="hidden" value="TABLE">
                                        </a>
                                    </li>
                                    <li class="" role="listitem">
                                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="MULTI_CARDS" data-item-index="1">
                                            <span class="selected-option-dropdown-item">
                                                <span class="rioglyph rioglyph-split-view">
                                                </span>Cards view</span>
                                            <input type="hidden" value="MULTI_CARDS">
                                        </a>
                                    </li>
                                    <li class="" role="listitem">
                                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="SINGLE_CARD" data-item-index="2">
                                            <span class="selected-option-dropdown-item">
                                                <span class="rioglyph rioglyph-th-list">
                                                </span>List view</span>
                                            <input type="hidden" value="SINGLE_CARD">
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-toolbar-column align-self-end">
                    <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>
        <table class="table table-layout-fixed table-column-overflow-hidden table-bordered table-sticky table-head-filled">
            <colgroup>
                <col class="">
                <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 table-action" title="">
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <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 class="table-action">
                        <span>
                            <div class="dropdown btn-group">
                                <button type="button" aria-label="Row actions" id="o17gxcke1qd" 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>
                        </span>
                    </td>
                </tr>
                <tr>
                    <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 class="table-action">
                        <span>
                            <div class="dropdown btn-group">
                                <button type="button" aria-label="Row actions" id="n8kgqnhkhzb" 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>
                        </span>
                    </td>
                </tr>
                <tr>
                    <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 class="table-action">
                        <span>
                            <div class="dropdown btn-group">
                                <button type="button" aria-label="Row actions" id="ye4fdbk018" 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>
                        </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>
```

#### Props (json)

```json
<div class="table-responsive">
    <table class="table table-layout-fixed table-column-overflow-hidden table-bordered">
        <colgroup>
            <col style="min-width: 150px; width: 150px;">
            <col style="min-width: 350px; width: 350px;">
            <col>
            <col>
        </colgroup>
        <thead>
            ...
        </thead>
        <tbody>
            ...
        </tbody>
    </table>
</div>
```

## TableRowSelection (Multiselect)

### Example: Example 6

Table view
Cards view
List view

Id Name VIN Manufacturer

7354 Elit.
Lorem eget 0123abc MAN

7355 Dui amet, sit elit. 1123abc MAN

7356 Sit amet, ipsum dolor elit. 2123abc MAN

7357 Dui sit dolor 3123abc MAN

7358 Eget elit. 4123abc MAN

7359
Lorem amet, ipsum
Lorem dolor 5123abc MAN

7360 Dui dolor dui amet, 6123abc MAN

7361 Ipsum amet, sit sit ipsum 7123abc MAN

7362
Lorem dui
Lorem 8123abc MAN

7363 Eget elit. dolor 9123abc MAN

#### React (tsx)

```tsx
/* eslint-disable no-use-before-define */
import React, { useEffect, useState } from 'react';
import { isEmpty, omit } from 'es-toolkit/compat';
import classNames from '@rio-cloud/rio-uikit/classNames';
import TableSearch from '@rio-cloud/rio-uikit/TableSearch';
import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
import TableViewToggles from '@rio-cloud/rio-uikit/TableViewToggles';
import TableCardsSorting from '@rio-cloud/rio-uikit/TableCardsSorting';
import TableSettingsDialog from '@rio-cloud/rio-uikit/TableSettingsDialog';
import ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';
import NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';
import Notification from '@rio-cloud/rio-uikit/Notification';
import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
import Button from '@rio-cloud/rio-uikit/Button';
import TableRowActionsDropdown from '@rio-cloud/rio-uikit/TableRowActionsDropdown';
import useTableMultiSelection from '@rio-cloud/rio-uikit/useTableSelection';
import useSorting from '@rio-cloud/rio-uikit/useSorting';
import TableCol, { type ColumnDetails, type ColumnDetailsMap } from '@rio-cloud/rio-uikit/TableCol';
import TableHead from '@rio-cloud/rio-uikit/TableHead';
import type { SortDirectionType } from '@rio-cloud/rio-uikit/SortDirection';

import { dummyTextUltraShort, generateDummyText } from '../../../../utils/data';

const ACTIVE_CLASS = 'active';
const DATA_ATTRIBUTE = 'data-key';

type Vehicle = {
    vehicleId: number;
    name: string;
    vin: string;
    manufacturer: string;
};

type ColumnLabel = { [key: string]: string };

const defaultColumnOrder = ['vehicleId', 'name', 'vin', 'manufacturer'];
const disabledColumns = ['vin'];

const columnLabels: ColumnLabel = {
    vehicleId: 'Id',
    name: 'Name',
    vin: 'VIN',
    manufacturer: 'Manufacturer',
};

const demoColumnsDetails: ColumnDetailsMap = {
    vehicleId: {
        width: 150,
        defaultWidth: 300,
        maxWidth: 300,
    },
    name: {
        width: 250,
        defaultWidth: 250,
        maxWidth: 250,
    },
    // Note: 0 means auto width
    vin: {
        width: 0,
        defaultWidth: 0,
        maxWidth: 350,
    },
    manufacturer: {
        // Not defined as it will be defined when its used
        // width: 350,
        // defaultWidth: 0,
    },
};

// Function to generate random entries to work with.
// Increase length to generate more items.
const vehicleList: Vehicle[] = Array.from({ length: 10 }, (_, index) => ({
    vehicleId: 7354 + index,
    name: generateDummyText(dummyTextUltraShort, 2, 5),
    vin: `${index}123abc`,
    manufacturer: 'MAN',
}));

type TableRowProps = {
    row: Vehicle;
    columns: string[];
    colLabels: ColumnLabel;
    onRowClick: (event: React.MouseEvent<HTMLTableRowElement>) => void;
    onSelectCheckbox: (event: React.MouseEvent<HTMLElement>) => void;
};

// A custom table row component used to prevent re-rendering the individual row.
// Usually, this would be placed into it's own file but for demo purposes it's listed here.
const TableRow = React.memo(
    (props: TableRowProps) => {
        const { row, columns, colLabels, onRowClick, onSelectCheckbox } = props;
        console.log('render row');
        return (
            <tr key={row.vehicleId} data-key={row.vehicleId} onClick={onRowClick} className='cursor-pointer'>
                <td className='table-checkbox' onClick={onSelectCheckbox}>
                    <Checkbox />
                </td>
                {columns.map((col: string) => (
                    <td key={col} data-field={colLabels[col]}>
                        <span {...(col === 'name' ? { 'data-test-ignore': 'text' } : {})}>
                            {row[col as keyof Vehicle]}
                        </span>
                    </td>
                ))}
                <td className='table-action' onClick={event => event.stopPropagation()}>
                    <span>
                        <TableRowActionsDropdown
                            items={[
                                {
                                    value: (
                                        <div className='display-flex align-items-center gap-10'>
                                            <span className='rioglyph rioglyph-pencil' />
                                            <span>Edit Me</span>
                                        </div>
                                    ),
                                },
                                {
                                    value: (
                                        <div className='display-flex align-items-center gap-10'>
                                            <span className='rioglyph rioglyph-duplicate' />
                                            <span>Duplicate me</span>
                                        </div>
                                    ),
                                },
                                {
                                    value: (
                                        <div className='display-flex align-items-center gap-10'>
                                            <span className='rioglyph rioglyph-trash' />
                                            <span>Delete me</span>
                                        </div>
                                    ),
                                },
                            ]}
                        />
                    </span>
                </td>
            </tr>
        );
    },
    (prevProps, nextProps) => JSON.stringify(prevProps) === JSON.stringify(nextProps)
);

const TableMultiSelectionDemo = () => {
    const [searchValue, setSearchValue] = useState('');
    const [showTableSettingsDialog, setShowTableSettingsDialog] = useState<boolean>(false);
    const [columnOrder, setColumnOrder] = useState(defaultColumnOrder);
    const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);
    const [columnsDetails, setColumnsDetails] = useState<ColumnDetailsMap>(demoColumnsDetails);
    const [viewType, setViewType] = useState<string>(TableViewToggles.VIEW_TYPE_TABLE); // Default view type

    const { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection, toggleDirection } = useSorting(
        vehicleList,
        'vehicleId'
    );

    // Use the headless hook
    const { tableRef, onSelection, onActiveRowChange, onToggleAll, updateRowSelection } =
        useTableMultiSelection<Vehicle>({
            tableData: vehicleList,
            idKey: 'vehicleId' as keyof Vehicle, // Specify the unique identifier key
            initialSelectedRowIds: [`${vehicleList[3]?.vehicleId}`].filter(Boolean),
            initialActiveRowId: '',
            dataAttributeName: 'data-key',
        });

    // When the search value changes and hence the rendered rows, update the highlighting and selection
    useEffect(() => updateRowSelection(), [searchValue]);

    const toggleTableSettingsDialog = () => setShowTableSettingsDialog(!showTableSettingsDialog);
    const handleViewTypeChange = (newViewType: string) => 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 = !searchValue
        ? filteredRows
        : filteredRows.filter(row =>
              columns.some(col =>
                  row[col as keyof Vehicle].toString().toLowerCase().includes(searchValue.toLowerCase())
              )
          );

    const rows = searchResult;

    const tableClassNames = classNames(
        'table',
        'table-layout-fixed',
        'table-column-overflow-hidden',
        'table-bordered',
        'table-sticky',
        'table-hover',
        '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 => ({
        id: column,
        label: columnLabels[column],
        selected: column === sortKey,
        disabled: false,
    }));

    const batchButton = (
        <ButtonDropdown
            title={<span className='rioglyph rioglyph-checkboxes' />}
            variant='outline'
            bsSize={viewType === TableViewToggles.VIEW_TYPE_TABLE ? 'sm' : 'md'}
            iconOnly
            items={[
                {
                    value: (
                        <div>
                            <span className='rioglyph rioglyph-cloud-download margin-right-10 text-size-18' />
                            <span>Download selected Items</span>
                        </div>
                    ),
                    onSelect: () => Notification.info('Download started'),
                },
                {
                    divider: true,
                },
                {
                    value: (
                        <div>
                            <span>Select all Items</span>
                        </div>
                    ),
                    onSelect: () => onToggleAll(true),
                },
                {
                    value: (
                        <div>
                            <span>Deselect all Items</span>
                        </div>
                    ),
                    onSelect: () => onToggleAll(false),
                },
            ]}
        />
    );

    return (
        <div>
            <TableToolbar>
                <TableToolbarColumn horizontalAlign='right'>
                    <TableSearch value={searchValue} onChange={handleSearchValueChange} placeholder='Search in table' />
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right' separator>
                    <TableViewToggles
                        onViewTypeChange={handleViewTypeChange}
                        tableViewLabel='Table view'
                        singleCardViewLabel='List view'
                        multiCardsViewLabel='Cards view'
                    />
                </TableToolbarColumn>
                <TableToolbarColumn horizontalAlign='right'>
                    <Button onClick={toggleTableSettingsDialog} iconName='rioglyph-settings' iconOnly />
                </TableToolbarColumn>
            </TableToolbar>
            {showTableSettingsDialog && (
                <TableSettingsDialog
                    show={showTableSettingsDialog}
                    title='Table Settings'
                    onHide={toggleTableSettingsDialog}
                    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}
                    immediateChange
                />
            )}
            {viewType && viewType !== TableViewToggles.VIEW_TYPE_TABLE && (
                <TableCardsSorting
                    selectOptions={cardSortingSelectOptions}
                    sortName={sortKey as string}
                    sortOrder={sortDirection}
                    onSortChange={handleCardSortChange}
                    className='multiselect-table'
                />
            )}
            <div className='table-responsive'>
                {isEmpty(rows) && !isViewTypeTable && (
                    <NotFoundState headline='Nothing found' message='Please adapt your search' />
                )}
                <table ref={tableRef} className={tableClassNames}>
                    <colgroup>
                        <TableCol className='table-checkbox' />
                        {columns.map(column => (
                            <TableCol key={column} columnDetails={columnsDetails[column]} />
                        ))}
                        <TableCol className='table-action' />
                    </colgroup>
                    <thead>
                        <tr>
                            <TableHead className='table-checkbox'>{batchButton}</TableHead>
                            {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 + 2}>
                                    <NotFoundState
                                        outerClassName='border-none'
                                        headline='Nothing found'
                                        message='Please refine your search'
                                    />
                                </td>
                            </tr>
                        )}
                        {rows.map(row => (
                            <TableRow
                                key={row.vehicleId}
                                row={row}
                                columns={columns}
                                colLabels={columnLabels}
                                onRowClick={onActiveRowChange}
                                onSelectCheckbox={onSelection}
                            />
                        ))}
                        {/* 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>
        </div>
    );
};

export default TableMultiSelectionDemo;
```

#### HTML (html)

```html
<div>
    <div class="table-toolbar">
        <div class="table-toolbar-container">
            <div class="table-toolbar-group-right">
                <div class="table-toolbar-column align-self-end">
                    <div class="table-toolbar-search input-group">
                        <span class="input-group-addon">
                            <span class="rioglyph rioglyph-search">
                            </span>
                        </span>
                        <div class="ClearableInput input-group">
                            <input placeholder="Search 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 table-toolbar-column-separator">
                    <div class="TableViewToggles">
                        <div class="form-group margin-bottom-0">
                            <div class="select dropdown">
                                <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                                    <span class="selected-option-text">
                                        <span>
                                            <span class="rioglyph rioglyph-table-view">
                                            </span>
                                        </span>
                                    </span>
                                    <span class="select-toggle-actions">
                                        <span class="clearButton hide pointer-events-none">
                                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                            </span>
                                        </span>
                                        <span class="caret">
                                        </span>
                                    </span>
                                </button>
                                <ul class="dropdown-menu pull-right" role="menu">
                                    <li class="" role="listitem">
                                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="TABLE" data-item-index="0">
                                            <span class="selected-option-dropdown-item">
                                                <span class="rioglyph rioglyph-table-view">
                                                </span>Table view</span>
                                            <input type="hidden" value="TABLE">
                                        </a>
                                    </li>
                                    <li class="" role="listitem">
                                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="MULTI_CARDS" data-item-index="1">
                                            <span class="selected-option-dropdown-item">
                                                <span class="rioglyph rioglyph-split-view">
                                                </span>Cards view</span>
                                            <input type="hidden" value="MULTI_CARDS">
                                        </a>
                                    </li>
                                    <li class="" role="listitem">
                                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="SINGLE_CARD" data-item-index="2">
                                            <span class="selected-option-dropdown-item">
                                                <span class="rioglyph rioglyph-th-list">
                                                </span>List view</span>
                                            <input type="hidden" value="SINGLE_CARD">
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-toolbar-column align-self-end">
                    <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-hover table-head-filled">
            <colgroup>
                <col class="table-checkbox">
                <col class="" style="min-width: 150px; width: 150px;">
                <col class="" style="min-width: 250px; width: 250px;">
                <col class="">
                <col class="">
                <col class="table-action">
            </colgroup>
            <thead>
                <tr>
                    <th class="user-select-none sort-column table-checkbox" title="">
                        <div class="dropdown btn-group">
                            <button type="button" id="y53jqow8snd" class="btn btn-default btn-outline btn-sm btn-icon-only btn-component dropdown-toggle" tabindex="0">
                                <span class="rioglyph rioglyph-checkboxes">
                                </span>
                            </button>
                        </div>
                    </th>
                    <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="manufacturer" data-sortby="manufacturer" title="Manufacturer">
                        <span>
                            <span class="sort-arrows ">
                            </span>
                            <span>Manufacturer</span>
                        </span>
                    </th>
                    <th class="user-select-none sort-column table-action" title="">
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr data-key="7354" class="cursor-pointer">
                    <td class="table-checkbox">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </td>
                    <td data-field="Id">
                        <span>7354</span>
                    </td>
                    <td data-field="Name">
                        <span data-test-ignore="text">Elit.
                            Lorem eget</span>
                    </td>
                    <td data-field="VIN">
                        <span>0123abc</span>
                    </td>
                    <td data-field="Manufacturer">
                        <span>MAN</span>
                    </td>
                    <td class="table-action">
                        <span>
                            <div class="dropdown btn-group">
                                <button type="button" aria-label="Row actions" id="hypho3ar9pf" 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>
                        </span>
                    </td>
                </tr>
                <tr data-key="7355" class="cursor-pointer">
                    <td class="table-checkbox">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </td>
                    <td data-field="Id">
                        <span>7355</span>
                    </td>
                    <td data-field="Name">
                        <span data-test-ignore="text">Dui amet, sit elit.</span>
                    </td>
                    <td data-field="VIN">
                        <span>1123abc</span>
                    </td>
                    <td data-field="Manufacturer">
                        <span>MAN</span>
                    </td>
                    <td class="table-action">
                        <span>
                            <div class="dropdown btn-group">
                                <button type="button" aria-label="Row actions" id="km9hs6fm0df" 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>
                        </span>
                    </td>
                </tr>
                <tr data-key="7356" class="cursor-pointer">
                    <td class="table-checkbox">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </td>
                    <td data-field="Id">
                        <span>7356</span>
                    </td>
                    <td data-field="Name">
                        <span data-test-ignore="text">Sit amet, ipsum dolor elit.</span>
                    </td>
                    <td data-field="VIN">
                        <span>2123abc</span>
                    </td>
                    <td data-field="Manufacturer">
                        <span>MAN</span>
                    </td>
                    <td class="table-action">
                        <span>
                            <div class="dropdown btn-group">
                                <button type="button" aria-label="Row actions" id="asbqyw2yauh" 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>
                        </span>
                    </td>
                </tr>
                <tr data-key="7357" class="cursor-pointer">
                    <td class="table-checkbox">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </td>
                    <td data-field="Id">
                        <span>7357</span>
                    </td>
                    <td data-field="Name">
                        <span data-test-ignore="text">Dui sit dolor</span>
                    </td>
                    <td data-field="VIN">
                        <span>3123abc</span>
                    </td>
                    <td data-field="Manufacturer">
                        <span>MAN</span>
                    </td>
                    <td class="table-action">
                        <span>
                            <div class="dropdown btn-group">
                                <button type="button" aria-label="Row actions" id="inrxwuqrove" 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>
                        </span>
                    </td>
                </tr>
                <tr data-key="7358" class="cursor-pointer">
                    <td class="table-checkbox">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </td>
                    <td data-field="Id">
                        <span>7358</span>
                    </td>
                    <td data-field="Name">
                        <span data-test-ignore="text">Eget elit.</span>
                    </td>
                    <td data-field="VIN">
                        <span>4123abc</span>
                    </td>
                    <td data-field="Manufacturer">
                        <span>MAN</span>
                    </td>
                    <td class="table-action">
                        <span>
                            <div class="dropdown btn-group">
                                <button type="button" aria-label="Row actions" id="ys6uetn2pm" 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>
                        </span>
                    </td>
                </tr>
                <tr data-key="7359" class="cursor-pointer">
                    <td class="table-checkbox">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </td>
                    <td data-field="Id">
                        <span>7359</span>
                    </td>
                    <td data-field="Name">
                        <span data-test-ignore="text">
                            Lorem amet, ipsum
                            Lorem dolor</span>
                    </td>
                    <td data-field="VIN">
                        <span>5123abc</span>
                    </td>
                    <td data-field="Manufacturer">
                        <span>MAN</span>
                    </td>
                    <td class="table-action">
                        <span>
                            <div class="dropdown btn-group">
                                <button type="button" aria-label="Row actions" id="ud0kln544ig" 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>
                        </span>
                    </td>
                </tr>
                <tr data-key="7360" class="cursor-pointer">
                    <td class="table-checkbox">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </td>
                    <td data-field="Id">
                        <span>7360</span>
                    </td>
                    <td data-field="Name">
                        <span data-test-ignore="text">Dui dolor dui amet,</span>
                    </td>
                    <td data-field="VIN">
                        <span>6123abc</span>
                    </td>
                    <td data-field="Manufacturer">
                        <span>MAN</span>
                    </td>
                    <td class="table-action">
                        <span>
                            <div class="dropdown btn-group">
                                <button type="button" aria-label="Row actions" id="5mxnm83j9cc" 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>
                        </span>
                    </td>
                </tr>
                <tr data-key="7361" class="cursor-pointer">
                    <td class="table-checkbox">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </td>
                    <td data-field="Id">
                        <span>7361</span>
                    </td>
                    <td data-field="Name">
                        <span data-test-ignore="text">Ipsum amet, sit sit ipsum</span>
                    </td>
                    <td data-field="VIN">
                        <span>7123abc</span>
                    </td>
                    <td data-field="Manufacturer">
                        <span>MAN</span>
                    </td>
                    <td class="table-action">
                        <span>
                            <div class="dropdown btn-group">
                                <button type="button" aria-label="Row actions" id="tjm2eti385s" 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>
                        </span>
                    </td>
                </tr>
                <tr data-key="7362" class="cursor-pointer">
                    <td class="table-checkbox">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </td>
                    <td data-field="Id">
                        <span>7362</span>
                    </td>
                    <td data-field="Name">
                        <span data-test-ignore="text">
                            Lorem dui
                            Lorem</span>
                    </td>
                    <td data-field="VIN">
                        <span>8123abc</span>
                    </td>
                    <td data-field="Manufacturer">
                        <span>MAN</span>
                    </td>
                    <td class="table-action">
                        <span>
                            <div class="dropdown btn-group">
                                <button type="button" aria-label="Row actions" id="jmotkcdqwgo" 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>
                        </span>
                    </td>
                </tr>
                <tr data-key="7363" class="cursor-pointer">
                    <td class="table-checkbox">
                        <label class="checkbox" tabindex="0">
                            <input type="checkbox" class="">
                            <span class="checkbox-text">
                            </span>
                        </label>
                    </td>
                    <td data-field="Id">
                        <span>7363</span>
                    </td>
                    <td data-field="Name">
                        <span data-test-ignore="text">Eget elit. dolor</span>
                    </td>
                    <td data-field="VIN">
                        <span>9123abc</span>
                    </td>
                    <td data-field="Manufacturer">
                        <span>MAN</span>
                    </td>
                    <td class="table-action">
                        <span>
                            <div class="dropdown btn-group">
                                <button type="button" aria-label="Row actions" id="0n0wzrw2jr9m" 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>
                        </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>
```

#### Props (json)

```json
<div class="table-responsive">
    <table class="table table-layout-fixed table-column-overflow-hidden table-bordered">
        <colgroup>
            <col style="min-width: 150px; width: 150px;">
            <col style="min-width: 350px; width: 350px;">
            <col>
            <col>
        </colgroup>
        <thead>
            ...
        </thead>
        <tbody>
            ...
        </tbody>
    </table>
</div>
```

## Native table style variants

## Bordered table

### Example: Example 7

Head column Head column Head column Head column

Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column

#### HTML (html)

```html
<div class="table-responsive">
    <table class="table table-head-filled table-bordered">
        <thead>
            <tr>
                <th class="user-select-none sort-column" title="">Head column</th>
                <th class="user-select-none sort-column" title="">Head column</th>
                <th class="user-select-none sort-column" title="">Head column</th>
                <th class="user-select-none sort-column" title="">Head column</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
        </tbody>
    </table>
</div>
```

#### Classes (css)

```css
table
```

## Striped table

### Example: Example 8

Head column Head column Head column Head column

Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column

#### HTML (html)

```html
<div class="table-responsive">
    <table class="table table-head-filled table-striped">
        <thead>
            <tr>
                <th>Head column</th>
                <th>Head column</th>
                <th>Head column</th>
                <th>Head column</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
        </tbody>
    </table>
</div>
```

#### Classes (css)

```css
table
```

## Hover table

### Example: Example 9

Head column Head column Head column Head column

Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column

#### HTML (html)

```html
<div class="table-responsive">
    <table class="table table-head-filled table-hover">
        <thead>
            <tr>
                <th>Head column</th>
                <th>Head column</th>
                <th>Head column</th>
                <th>Head column</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
        </tbody>
    </table>
</div>
```

#### Classes (css)

```css
table
```

## Condensed table

### Example: Example 10

Head column Head column Head column Head column

Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column

#### HTML (html)

```html
<div class="table-responsive">
    <table class="table table-head-filled table-condensed">
        <thead>
            <tr>
                <th>Head column</th>
                <th>Head column</th>
                <th>Head column</th>
                <th>Head column</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
        </tbody>
    </table>
</div>
```

#### Classes (css)

```css
table
```

## Fixed table layout

The table-layout-fixed class avoids a horizontal overflow by squeezing all columns together. Use this option with caution since columns with a fixed width cannot be compressed any further, and the content of the squeezed columns may not be readable anymore.

### Example: Example 11

Head column Head column Head column Head column Head column

Every column has a different length of content but the width of each colum is always the same
Every column has a different length of content but the width of each colum is always the same
Every column has a different length of content but the width of each colum is always the same
Every column has a different length of content but the width of each colum is always the same

#### HTML (html)

```html
<table class="table table-head-filled table-layout-fixed">
    <thead>
        <tr>
            <th class="ellipsis-1">Head column</th>
            <th class="ellipsis-1">Head column</th>
            <th class="ellipsis-1">Head column</th>
            <th class="ellipsis-1">Head column</th>
            <th class="ellipsis-1">Head column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Every</td>
            <td>column has a different</td>
            <td>length of content</td>
            <td>but the width of each colum is always</td>
            <td>the same</td>
        </tr>
        <tr>
            <td>Every</td>
            <td>column has a different</td>
            <td>length of content</td>
            <td>but the width of each colum is always</td>
            <td>the same</td>
        </tr>
        <tr>
            <td>Every</td>
            <td>column has a different</td>
            <td>length of content</td>
            <td>but the width of each colum is always</td>
            <td>the same</td>
        </tr>
        <tr>
            <td>Every</td>
            <td>column has a different</td>
            <td>length of content</td>
            <td>but the width of each colum is always</td>
            <td>the same</td>
        </tr>
    </tbody>
</table>
```

#### Classes (css)

```css
table
```

## Responsive tables

Tables - by design - are not great for small screens. Columns get squeezed together, and content is hard to read or gets cut off.

There are some options to tackle this problem

- Wrapping the table in another div element and using the class table-responsive on that wrapper. That will create a horizontal overflow of the table when the available space exceeds.
- Try to avoid defining a fixed width on all columns as that avoids shrinking columns automatically for smaller screens.
- Use alternative representations for the table by either rendering a list instead of on small screens or using the table cards view on mobile screens.
- Use class ellipsis-1 for column header or table cell content when the text gets truncated and to show the "..." at the end.

## Table cards

### Example: Example 12

New Button

Filter

Table view
Cards view
List view

Id Id
Name
VIN
Status
Duration

Id Name VIN Status Duration

233 Ipsum No data Inactive 5h 15m

456 No data 456 Active 4h 55m

878 No data 878 Active 9h 10m

895 No data 895 Active 8h 45m

978 Ipsum No data Inactive 6h 35m

2345 Lorem 2345 Active 11h 50m

2445 No data 2445 Active 7h 25m

3456 No data 3456 Active 12h 00m

4567 No data 4567 Active 10h 20m

7354 Lorem 7354 Active 10h 30m

70 / 100

Load more

#### HTML (html)

```html
<div>
    <div class="table-toolbar">
        <div class="table-toolbar-container">
            <div class="table-toolbar-group-left">
                <div class="table-toolbar-column align-self-end">
                    <div class="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 align-self-end">
                    <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 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 align-items-center gap-15">
                        <div class="TableViewToggles">
                            <div class="form-group margin-bottom-0">
                                <div class="select dropdown">
                                    <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                                        <span class="selected-option-text">
                                            <span>
                                                <span class="rioglyph rioglyph-split-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>
                        <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>
    <div class="table-toolbar-cards-sorting btn-toolbar">
        <div class="btn-group margin-left-0">
            <button type="button" class="btn btn-default btn-toggle active btn-component btn-icon-only" tabindex="0">
                <span class="rioglyph rioglyph-sort-by-attributes-alt">
                </span>
            </button>
            <button type="button" class="btn btn-default btn-toggle btn-component btn-icon-only" tabindex="0">
                <span class="rioglyph rioglyph-sort-by-attributes">
                </span>
            </button>
        </div>
        <div class="btn-group">
            <div class="select dropdown dropup">
                <button type="button" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
                    <span class="selected-option-text">Id</span>
                    <span class="select-toggle-actions">
                        <span class="clearButton hide pointer-events-none">
                            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                            </span>
                        </span>
                        <span class="caret">
                        </span>
                    </span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li class="" role="listitem">
                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="vehicleId" data-item-index="0">
                            <span class="selected-option-dropdown-item">Id</span>
                            <input type="hidden" value="vehicleId">
                        </a>
                    </li>
                    <li class="" role="listitem">
                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="name" data-item-index="1">
                            <span class="selected-option-dropdown-item">Name</span>
                            <input type="hidden" value="name">
                        </a>
                    </li>
                    <li class="" role="listitem">
                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="vin" data-item-index="2">
                            <span class="selected-option-dropdown-item">VIN</span>
                            <input type="hidden" value="vin">
                        </a>
                    </li>
                    <li class="" role="listitem">
                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="status" data-item-index="3">
                            <span class="selected-option-dropdown-item">Status</span>
                            <input type="hidden" value="status">
                        </a>
                    </li>
                    <li class="" role="listitem">
                        <a role="menuitem" class="display-flex align-items-center gap-3" data-item-id="duration" data-item-index="4">
                            <span class="selected-option-dropdown-item">Duration</span>
                            <input type="hidden" value="duration">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-layout-fixed table-column-overflow-hidden table-bordered table-sticky table-head-filled table-cards table-multi-cards">
            <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" aria-label="Row actions" id="pximm4o3t3" 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>
                        </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" aria-label="Row actions" id="m6wo1pazulb" 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>
                        </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" aria-label="Row actions" id="hfj7rl9sz3" 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>
                        </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" aria-label="Row actions" id="7ddrg6jgcq8" 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>
                        </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" aria-label="Row actions" id="8g448h78lep" 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>
                        </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" aria-label="Row actions" id="unkqsn4vr" 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>
                        </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" aria-label="Row actions" id="knclbgvix3e" 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>
                        </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" aria-label="Row actions" id="0n27gq5fy3j" 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>
                        </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" aria-label="Row actions" id="r8mqjyoumno" 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>
                        </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" aria-label="Row actions" id="sntynbwl5bi" 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>
                        </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>
```

#### Classes (css)

```css
table-cards
```

## States in tables

### Example: No entries found

Head column Head column Head column Head column Head column

No entries found
We could not find any data entries for your search query. Please refine your search

#### HTML (html)

```html
<table class="table table-head-filled table-layout-fixed">
    <thead>
        <tr>
            <th class="user-select-none sort-column ellipsis-1" title="">Head column</th>
            <th class="user-select-none sort-column ellipsis-1" title="">Head column</th>
            <th class="user-select-none sort-column ellipsis-1" title="">Head column</th>
            <th class="user-select-none sort-column ellipsis-1" title="">Head column</th>
            <th class="user-select-none sort-column ellipsis-1" title="">Head column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="5">
                <div class="display-flex justify-content-center max-width-100pct">
                    <div class="margin-0 width-100pct max-width-600 panel-default panel padding-15 border-none">
                        <div class="display-flex flex-column align-items-center text-center padding-25">
                            <div class="text-size-h2 margin-bottom-20">
                                <span class="rioglyph rioglyph-looking-glass-man text-color-light text-size-300pct">
                                </span>
                            </div>
                            <div class="text-size-h3 text-size-h2-xl line-height-125rel text-color-dark text-medium width-500 max-width-100pct text-wrap-balance">No entries found</div>
                            <div class="text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance">We could not find any data entries for your search query. Please refine your search</div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>
```

## Grouped table

### Example: Example 14

Head column Head column Head column Head column

CompactRow column CompactRow column CompactRow column CompactRow column
CompactRow column CompactRow column CompactRow column CompactRow column
CompactRow column CompactRow column CompactRow column CompactRow column
CompactRow column CompactRow column CompactRow column CompactRow column
CompactRow column CompactRow column CompactRow column CompactRow column
CompactRow column CompactRow column CompactRow column CompactRow column
ExtendedRow column ExtendedRow column ExtendedRow column ExtendedRow column
ExtendedRow column ExtendedRow column ExtendedRow column ExtendedRow column
ExtendedRow column ExtendedRow column ExtendedRow column ExtendedRow column
CompactRow column CompactRow column CompactRow column CompactRow column
CompactRow column CompactRow column CompactRow column CompactRow column

#### React (tsx)

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

const columns = [...Array(4)];

const rowData = Array.from({ length: 8 }, () => ({
    id: crypto.randomUUID(),
}));

const extendedRowData = Array.from({ length: 3 }, () => ({
    id: crypto.randomUUID(),
}));

const TableGroupedExample = () => {
    const [expandedRows, setExpandedRows] = useState<string[]>([rowData[5].id]);

    const handleToggleRow = (id: string) => {
        if (expandedRows.includes(id)) {
            setExpandedRows(expandedRows.filter(expanded => expanded !== id));
        } else {
            setExpandedRows([...expandedRows, id]);
        }
    };

    return (
        <div className='table-responsive'>
            <table className='table table-head-filled'>
                <thead>
                    <tr>
                        {columns.map(() => (
                            <th key={crypto.randomUUID()}>Head column</th>
                        ))}
                        <th className='table-action' />
                    </tr>
                </thead>
                <tbody>
                    {rowData.map(row => {
                        const isExpanded = expandedRows.includes(row.id);
                        return (
                            <React.Fragment key={row.id}>
                                <tr className='compactRow'>
                                    {columns.map(() => (
                                        <td key={crypto.randomUUID()}>
                                            <span>CompactRow column</span>
                                        </td>
                                    ))}
                                    <td className='table-action' onClick={() => handleToggleRow(row.id)}>
                                        <span>
                                            <span className='btn btn-muted btn-icon-only'>
                                                <span
                                                    className={`rioglyph ${
                                                        isExpanded ? 'rioglyph-chevron-up' : 'rioglyph-chevron-down'
                                                    }`}
                                                />
                                            </span>
                                        </span>
                                    </td>
                                </tr>

                                {isExpanded &&
                                    extendedRowData.map(() => (
                                        <tr className='extendedRow' key={crypto.randomUUID()}>
                                            {columns.map(() => (
                                                <td key={crypto.randomUUID()}>
                                                    <span>ExtendedRow column</span>
                                                </td>
                                            ))}
                                            <td className='table-action' />
                                        </tr>
                                    ))}
                            </React.Fragment>
                        );
                    })}
                </tbody>
            </table>
        </div>
    );
};

export default TableGroupedExample;
```

#### HTML (html)

```html
<div class="table-responsive">
    <table class="table table-head-filled">
        <thead>
            <tr>
                <th>Head column</th>
                <th>Head column</th>
                <th>Head column</th>
                <th>Head column</th>
                <th class="table-action">
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="compactRow">
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td class="table-action">
                    <span>
                        <span class="btn btn-muted btn-icon-only">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </span>
                    </span>
                </td>
            </tr>
            <tr class="compactRow">
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td class="table-action">
                    <span>
                        <span class="btn btn-muted btn-icon-only">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </span>
                    </span>
                </td>
            </tr>
            <tr class="compactRow">
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td class="table-action">
                    <span>
                        <span class="btn btn-muted btn-icon-only">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </span>
                    </span>
                </td>
            </tr>
            <tr class="compactRow">
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td class="table-action">
                    <span>
                        <span class="btn btn-muted btn-icon-only">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </span>
                    </span>
                </td>
            </tr>
            <tr class="compactRow">
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td class="table-action">
                    <span>
                        <span class="btn btn-muted btn-icon-only">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </span>
                    </span>
                </td>
            </tr>
            <tr class="compactRow">
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td class="table-action">
                    <span>
                        <span class="btn btn-muted btn-icon-only">
                            <span class="rioglyph rioglyph-chevron-up">
                            </span>
                        </span>
                    </span>
                </td>
            </tr>
            <tr class="extendedRow">
                <td>
                    <span>ExtendedRow column</span>
                </td>
                <td>
                    <span>ExtendedRow column</span>
                </td>
                <td>
                    <span>ExtendedRow column</span>
                </td>
                <td>
                    <span>ExtendedRow column</span>
                </td>
                <td class="table-action">
                </td>
            </tr>
            <tr class="extendedRow">
                <td>
                    <span>ExtendedRow column</span>
                </td>
                <td>
                    <span>ExtendedRow column</span>
                </td>
                <td>
                    <span>ExtendedRow column</span>
                </td>
                <td>
                    <span>ExtendedRow column</span>
                </td>
                <td class="table-action">
                </td>
            </tr>
            <tr class="extendedRow">
                <td>
                    <span>ExtendedRow column</span>
                </td>
                <td>
                    <span>ExtendedRow column</span>
                </td>
                <td>
                    <span>ExtendedRow column</span>
                </td>
                <td>
                    <span>ExtendedRow column</span>
                </td>
                <td class="table-action">
                </td>
            </tr>
            <tr class="compactRow">
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td class="table-action">
                    <span>
                        <span class="btn btn-muted btn-icon-only">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </span>
                    </span>
                </td>
            </tr>
            <tr class="compactRow">
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td>
                    <span>CompactRow column</span>
                </td>
                <td class="table-action">
                    <span>
                        <span class="btn btn-muted btn-icon-only">
                            <span class="rioglyph rioglyph-chevron-down">
                            </span>
                        </span>
                    </span>
                </td>
            </tr>
        </tbody>
    </table>
</div>
```

#### Classes (css)

```css
table
```

## Table grid lines

Showing table grid lines my be used in data heavy tables also known as DataTables.

### Example: Example 15

Head column Head column Head column Head column

Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column

#### HTML (html)

```html
<div class="table-responsive">
    <table class="table table-head-filled table-grid-lines">
        <thead>
            <tr>
                <th>Head column</th>
                <th>Head column</th>
                <th>Head column</th>
                <th>Head column</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
        </tbody>
    </table>
</div>
```

#### Classes (css)

```css
table
```

## Sticky table header

### Example: Example 16

Sticky column head Sticky column head Sticky column head Sticky column head

Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column
Column Column Column Column

#### HTML (html)

```html
<div class="height-300 overflow-y-scroll">
    <table class="table table-head-filled table-sticky-in-container">
        <thead>
            <tr>
                <th class="user-select-none sort-column" title="">Sticky column head</th>
                <th class="user-select-none sort-column" title="">Sticky column head</th>
                <th class="user-select-none sort-column" title="">Sticky column head</th>
                <th class="user-select-none sort-column" title="">Sticky column head</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
        </tbody>
    </table>
</div>
```

#### Classes (css)

```css
table
```

## Sticky table columns

### Example: Example 17

Head Head Head Head Head Head Head Head Head

Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here
Sticky first column Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here

#### HTML (html)

```html
<div class="table-responsive height-300 overflow-y-scroll">
    <table class="table table-head-filled table-sticky-in-container table-sticky-column-first">
        <thead>
            <tr>
                <th class="user-select-none sort-column" title="">
                </th>
                <th class="user-select-none sort-column" title="">Head</th>
                <th class="user-select-none sort-column" title="">Head</th>
                <th class="user-select-none sort-column" title="">Head</th>
                <th class="user-select-none sort-column" title="">Head</th>
                <th class="user-select-none sort-column" title="">Head</th>
                <th class="user-select-none sort-column" title="">Head</th>
                <th class="user-select-none sort-column" title="">Head</th>
                <th class="user-select-none sort-column" title="">Head</th>
                <th class="user-select-none sort-column" title="">Head</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="text-nowrap">Sticky first column</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
            </tr>
            <tr>
                <td class="text-nowrap">Sticky first column</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
            </tr>
            <tr>
                <td class="text-nowrap">Sticky first column</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
            </tr>
            <tr>
                <td class="text-nowrap">Sticky first column</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
            </tr>
            <tr>
                <td class="text-nowrap">Sticky first column</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
            </tr>
            <tr>
                <td class="text-nowrap">Sticky first column</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
            </tr>
            <tr>
                <td class="text-nowrap">Sticky first column</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
            </tr>
            <tr>
                <td class="text-nowrap">Sticky first column</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
            </tr>
            <tr>
                <td class="text-nowrap">Sticky first column</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
            </tr>
            <tr>
                <td class="text-nowrap">Sticky first column</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
            </tr>
        </tbody>
    </table>
</div>
```

#### Classes (css)

```css
table
```

### Example: Example 18

Head Head Head Head Head Head Head Head Head

Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column
Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Sticky last column

#### HTML (html)

```html
<div class="table-responsive height-300 overflow-y-scroll">
    <table class="table table-head-filled table-sticky-in-container table-sticky-column-last">
        <thead>
            <tr>
                <th class="user-select-none sort-column" title="">
                </th>
                <th class="user-select-none sort-column" title="">Head</th>
                <th class="user-select-none sort-column" title="">Head</th>
                <th class="user-select-none sort-column" title="">Head</th>
                <th class="user-select-none sort-column" title="">Head</th>
                <th class="user-select-none sort-column" title="">Head</th>
                <th class="user-select-none sort-column" title="">Head</th>
                <th class="user-select-none sort-column" title="">Head</th>
                <th class="user-select-none sort-column" title="">Head</th>
                <th class="user-select-none sort-column" title="">Head</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Sticky last column</td>
            </tr>
            <tr>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Sticky last column</td>
            </tr>
            <tr>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Sticky last column</td>
            </tr>
            <tr>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Sticky last column</td>
            </tr>
            <tr>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Sticky last column</td>
            </tr>
            <tr>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Sticky last column</td>
            </tr>
            <tr>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Sticky last column</td>
            </tr>
            <tr>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Sticky last column</td>
            </tr>
            <tr>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Sticky last column</td>
            </tr>
            <tr>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Content goes here</td>
                <td class="text-nowrap">Sticky last column</td>
            </tr>
        </tbody>
    </table>
</div>
```

#### Classes (css)

```css
table
```

## Table row span

### Example: Example 19

Head column Head column Head column Head column

Column Column Column Column
Column Column Column
Column Column Column Column
Column Column Column

#### HTML (html)

```html
<div class="table-responsive rounded border">
    <table class="table table-head-filled table-grid-lines table-rounded">
        <thead>
            <tr>
                <th>Head column</th>
                <th>Head column</th>
                <th>Head column</th>
                <th>Head column</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td rowspan="2">Column</td>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
            <tr>
                <td>Column</td>
                <td>Column</td>
                <td>Column</td>
            </tr>
        </tbody>
    </table>
</div>
```

## Table double row header

### Example: Example 20

Double row header with filled header
Scores
Head column Head column Head column Head column

Column Column Column Column
Column Column Column Column

Double row header with border and footer
Years
2021 2022 2023 2024 2025

Product 1 Income 50 70 80 90 100
Expense 37 63 70 82 91
Profit 13 7 10 8 9

Product 2 Income 50 67 79 90 54
Expense 33 70 50 79 30
Profit 17 -3 19 12 21

Total Profit 30 4 29 20 30

#### HTML (html)

```html
<div>
    <h5 class="margin-top-0">Double row header with filled header</h5>
    <div class="table-responsive">
        <table class="table table-head-filled">
            <thead>
                <tr>
                    <th class="padding-y-10 bg-white border-none">
                    </th>
                    <th class="padding-y-10 bg-white border-none">
                    </th>
                    <th colspan="2" class="padding-y-10 text-center border-none">Scores</th>
                </tr>
                <tr>
                    <th>Head column</th>
                    <th>Head column</th>
                    <th>Head column</th>
                    <th>Head column</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
                <tr>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                    <td>Column</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
    </div>
    <h5>Double row header with border and footer</h5>
    <div class="table-responsive rounded border">
        <table class="table table-head-filled table-grid-lines table-rounded">
            <colgroup>
                <col style="width: 120px;">
                <col style="width: 120px;">
                <col>
                <col>
            </colgroup>
            <thead>
                <tr>
                    <th colspan="2" class="bg-white border-width-1 border-right-only">
                    </th>
                    <th colspan="5" class="text-center border-none">Years</th>
                </tr>
                <tr>
                    <th colspan="2" class="bg-white border-top-none">
                    </th>
                    <th class="text-center">2021</th>
                    <th class="text-center">2022</th>
                    <th class="text-center">2023</th>
                    <th class="text-center">2024</th>
                    <th class="text-center">2025</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="3">Product 1</td>
                    <td>Income</td>
                    <td class="text-right">50</td>
                    <td class="text-right">70</td>
                    <td class="text-right">80</td>
                    <td class="text-right">90</td>
                    <td class="text-right">100</td>
                </tr>
                <tr>
                    <td>Expense</td>
                    <td class="text-right">37</td>
                    <td class="text-right">63</td>
                    <td class="text-right">70</td>
                    <td class="text-right">82</td>
                    <td class="text-right">91</td>
                </tr>
                <tr>
                    <td>Profit</td>
                    <td class="text-right">13</td>
                    <td class="text-right">7</td>
                    <td class="text-right">10</td>
                    <td class="text-right">8</td>
                    <td class="text-right">9</td>
                </tr>
                <tr>
                    <td colspan="7" class="padding-0" height="1">
                    </td>
                </tr>
                <tr>
                    <td rowspan="3">Product 2</td>
                    <td>Income</td>
                    <td class="text-right">50</td>
                    <td class="text-right">67</td>
                    <td class="text-right">79</td>
                    <td class="text-right">90</td>
                    <td class="text-right">54</td>
                </tr>
                <tr>
                    <td>Expense</td>
                    <td class="text-right">33</td>
                    <td class="text-right">70</td>
                    <td class="text-right">50</td>
                    <td class="text-right">79</td>
                    <td class="text-right">30</td>
                </tr>
                <tr>
                    <td>Profit</td>
                    <td class="text-right">17</td>
                    <td class="text-right">-3</td>
                    <td class="text-right">19</td>
                    <td class="text-right">12</td>
                    <td class="text-right">21</td>
                </tr>
            </tbody>
            <tfoot class="text-bold">
                <tr>
                    <td colspan="7" class="bg-lighter padding-0" height="2">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">Total Profit</td>
                    <td class="text-right">30</td>
                    <td class="text-right">4</td>
                    <td class="text-right">29</td>
                    <td class="text-right">20</td>
                    <td class="text-right">30</td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
```