# Combined tables in ExpandablePanel

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

## Combined tables in ExpandablePanel

### Example: Example 1

Panel header table

Lorem ipsum dolor

Dolor sit

Amet

Head column

Head column

Head column

Head column

Head column

Lorem ipsum

2 Lorems

Dolor sit amet

1 Lorem

#### React (tsx)

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

import classNames from '@rio-cloud/rio-uikit/classNames';
import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';

type PanelHeaderRow = {
    title: string;
    metric: string;
    detail: string;
    status: string;
};

type PanelBodyRow = {
    name: string;
    metric: string;
};

const tableColumnWidth = '20%';

const headerRow: PanelHeaderRow = {
    title: 'Panel header table',
    metric: 'Lorem ipsum dolor',
    detail: 'Dolor sit',
    status: 'Amet',
};

const bodyRows: PanelBodyRow[] = [
    { name: 'Lorem ipsum', metric: '2 Lorems' },
    { name: 'Dolor sit amet', metric: '1 Lorem' },
];

const TablePanelExample = () => {
    const [isOpen, setIsOpen] = useState(true);

    return (
        <ExpanderPanel
            open={isOpen}
            onToggle={setIsOpen}
            title={
                <Table border={false} rounded={false} className='width-100pct'>
                    <TableHeader className={classNames('bg-white', isOpen ? 'border-width-1' : 'border-none')}>
                        <TableHeaderColumn columnKey='title' width='40%'>
                            <b>{headerRow.title}</b>
                        </TableHeaderColumn>
                        <TableHeaderColumn columnKey='metric' width={tableColumnWidth}>
                            <span className='rioglyph rioglyph-volume margin-right-3' />
                            <span>{headerRow.metric}</span>
                        </TableHeaderColumn>
                        <TableHeaderColumn columnKey='detail' width={tableColumnWidth}>
                            {headerRow.detail}
                        </TableHeaderColumn>
                        <TableHeaderColumn columnKey='status' width={tableColumnWidth} className='padding-right-30'>
                            {headerRow.status}
                        </TableHeaderColumn>
                    </TableHeader>
                </Table>
            }
            headerClassName='padding-0 position-relative'
            iconClassName='position-absolute top-0 right-15 height-100pct display-flex align-items-center'
            titleClassName='width-100pct margin-0 overflow-hidden'
            bodyClassName='padding-0'
            className='shadow-default overflow-hidden'
        >
            <Table border={false} rounded={false} className='width-100pct'>
                <TableHeader>
                    <TableHeaderColumn columnKey='namePrimary' width={tableColumnWidth}>
                        Head column
                    </TableHeaderColumn>
                    <TableHeaderColumn columnKey='nameSecondary' width={tableColumnWidth}>
                        Head column
                    </TableHeaderColumn>
                    <TableHeaderColumn columnKey='metric' width={tableColumnWidth}>
                        Head column
                    </TableHeaderColumn>
                    <TableHeaderColumn columnKey='detail' width={tableColumnWidth}>
                        Head column
                    </TableHeaderColumn>
                    <TableHeaderColumn columnKey='status' width={tableColumnWidth}>
                        Head column
                    </TableHeaderColumn>
                </TableHeader>
                <TableBody>
                    {bodyRows.map(row => (
                        <TableRow key={row.name} noHover>
                            <TableColumn columnKey='namePrimary' colSpan={2}>
                                {row.name}
                            </TableColumn>
                            <TableColumn columnKey='metric'>
                                <div>
                                    <span className='rioglyph rioglyph-volume margin-right-3' />
                                    <span>{row.metric}</span>
                                </div>
                            </TableColumn>
                            <TableColumn columnKey='detail' />
                            <TableColumn columnKey='status' />
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </ExpanderPanel>
    );
};

export default TablePanelExample;
```

#### HTML (html)

```html
<div class="expander-panel panel panel-blank shadow-default overflow-hidden" aria-label="expander panel">
    <div class="panel-heading open padding-0 position-relative" aria-label="panel heading">
        <span class="title width-100pct margin-0 overflow-hidden">
            <div class="table table-view-table table-has-head width-100pct" role="table" style="--table-columns: minmax(0, calc(var(--table-width) * 40 / 100)) minmax(0, calc(var(--table-width) * 20 / 100)) minmax(0, calc(var(--table-width) * 20 / 100)) minmax(0, calc(var(--table-width) * 20 / 100)); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 906px;" aria-colcount="4">
                <div class="table-head" role="rowgroup">
                    <div class="table-head-grid bg-white border-width-1" role="row" style="grid-template-rows: repeat(1, auto);">
                        <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="title" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper">
                                        <span class="table-head-label">
                                            <b>Panel header table</b>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="metric" role="columnheader" aria-colindex="2" aria-rowindex="1" style="grid-area: 1 / 2 / span 1 / span 1;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper">
                                        <span class="table-head-label">
                                            <span class="rioglyph rioglyph-volume margin-right-3">
                                            </span>
                                            <span>Lorem ipsum dolor</span>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="detail" role="columnheader" aria-colindex="3" aria-rowindex="1" style="grid-area: 1 / 3 / span 1 / span 1;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper">
                                        <span class="table-head-label">Dolor sit</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="table-head-cell table-align-left table-vertical-align-middle padding-right-30" data-column="status" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                            <div class="table-head-cell-content">
                                <div class="table-head-cell-content-row">
                                    <span class="table-head-label-wrapper">
                                        <span class="table-head-label">Amet</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </span>
        <span class="expander-icon position-absolute top-0 right-15 height-100pct display-flex align-items-center rioglyph rioglyph-chevron-down">
        </span>
    </div>
    <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
        <div>
            <div class="panel-body padding-0">
                <div class="table table-view-table table-has-head width-100pct" role="table" style="--table-columns: minmax(0, calc(var(--table-width) * 20 / 100)) minmax(0, calc(var(--table-width) * 20 / 100)) minmax(0, calc(var(--table-width) * 20 / 100)) minmax(0, calc(var(--table-width) * 20 / 100)) minmax(0, calc(var(--table-width) * 20 / 100)); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4 table-col-5&quot;; --table-column-count: 5; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 906px;" aria-colcount="5">
                    <div class="table-head" role="rowgroup">
                        <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
                            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="namePrimary" role="columnheader" aria-colindex="1" aria-rowindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                                <div class="table-head-cell-content">
                                    <div class="table-head-cell-content-row">
                                        <span class="table-head-label-wrapper">
                                            <span class="table-head-label">Head column</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="nameSecondary" role="columnheader" aria-colindex="2" aria-rowindex="1" style="grid-area: 1 / 2 / span 1 / span 1;">
                                <div class="table-head-cell-content">
                                    <div class="table-head-cell-content-row">
                                        <span class="table-head-label-wrapper">
                                            <span class="table-head-label">Head column</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="metric" role="columnheader" aria-colindex="3" aria-rowindex="1" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-head-cell-content">
                                    <div class="table-head-cell-content-row">
                                        <span class="table-head-label-wrapper">
                                            <span class="table-head-label">Head column</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="table-head-cell table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="detail" role="columnheader" aria-colindex="4" aria-rowindex="1" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-head-cell-content">
                                    <div class="table-head-cell-content-row">
                                        <span class="table-head-label-wrapper">
                                            <span class="table-head-label">Head column</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="table-head-cell table-align-left table-vertical-align-middle" data-column="status" role="columnheader" aria-colindex="5" aria-rowindex="1" style="grid-area: 1 / 5 / span 1 / span 1;">
                                <div class="table-head-cell-content">
                                    <div class="table-head-cell-content-row">
                                        <span class="table-head-label-wrapper">
                                            <span class="table-head-label">Head column</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table-body" role="rowgroup">
                        <div class="table-row table-row-no-hover" data-index="0" data-row-id="0" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="namePrimary" role="cell" aria-colindex="1" aria-colspan="2" style="grid-area: 1 / 1 / span 1 / span 2;">
                                <div class="table-cell-content overflow-hidden">Lorem ipsum</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="metric" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>
                                        <span class="rioglyph rioglyph-volume margin-right-3">
                                        </span>
                                        <span>2 Lorems</span>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="detail" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                </div>
                            </div>
                        </div>
                        <div class="table-row table-row-no-hover" data-index="1" data-row-id="1" role="row">
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="namePrimary" role="cell" aria-colindex="1" aria-colspan="2" style="grid-area: 1 / 1 / span 1 / span 2;">
                                <div class="table-cell-content overflow-hidden">Dolor sit amet</div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="metric" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                    <div>
                                        <span class="rioglyph rioglyph-volume margin-right-3">
                                        </span>
                                        <span>1 Lorem</span>
                                    </div>
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="detail" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                </div>
                            </div>
                            <div class="table-cell table-align-left table-vertical-align-middle" data-column="status" role="cell" aria-colindex="5" style="grid-area: 1 / 5 / span 1 / span 1;">
                                <div class="table-cell-content overflow-hidden">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```