# DataTabs

*Category:* Components
*Section:* Content
*Source:* https://uikit.developers.rio.cloud/#/components/dataTabs
*Captured:* 2026-04-27T14:57:58.867Z

Passing a single tab content component via commonTabContent prop into the DataTabs component allows to update that single component when switching tabs. This comes in handy for instance when you want to animate a graph with different values from each tab.

## DataTabs

### Example: Example 1

Horizontal layout
Ø - Consumption
13,5 km/l

Ø - C02 Emission
12,2 kg

Ø - Range
32,8 l/100

Ø - Route type
A B C D E F

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

#### React (tsx)

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

import DataTabs from '@rio-cloud/rio-uikit/DataTabs';
import DataTab from '@rio-cloud/rio-uikit/DataTab';
import { dummyText } from '../../../utils/data';

export default () => {
    const [tabKey, setTabKey] = useState<string>();

    return (
        <div>
            <div className='h6'>Horizontal layout</div>
            <DataTabs activeKey={tabKey} onSelectTab={newTabKey => setTabKey(newTabKey)}>
                <DataTab tabKey='tab1' title={<Title text='Ø - Consumption' value='13,5 km/l' />}>
                    {dummyText}
                </DataTab>
                <DataTab tabKey='tab2' title={<Title text='Ø - C02 Emission' value='12,2 kg' />}>
                    {dummyText + dummyText}
                </DataTab>
                <DataTab tabKey='tab3' title={<Title text='Ø - Range' value='32,8 l/100' />}>
                    {dummyText}
                </DataTab>
                <DataTab tabKey='tab4' title={<Title text='Ø - Route type' value={<RouteType />} />}>
                    {dummyText}
                </DataTab>
            </DataTabs>
        </div>
    );
};

export const Title = ({ text, value }: { text: string; value: React.ReactNode }) => (
    <div>
        <div>{text}</div>
        <div className='text-bold text-size-18'>{value}</div>
    </div>
);

export const RouteType = () => (
    <div>
        <span className='text-color-light'>A</span>
        <span className='text-color-light'>B</span>
        <span className='text-color-light'>C</span>
        <span className='text-color-light'>D</span>
        <span className='text-color-warning'>E</span>
        <span className='text-color-light'>F</span>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="h6">Horizontal layout</div>
    <div class="DataTabsContainer DataTab-bordered DataTabs-horizontal">
        <div class="DataTabsWrapper ">
            <ul class="DataTabs" role="tabList">
                <li class="DataTab tab active bg-highlight-dark text-color-white" data-tabkey="tab1">
                    <div>
                        <div>Ø - Consumption</div>
                        <div class="text-bold text-size-18">13,5 km/l</div>
                    </div>
                    <div class="arrow bg-highlight-dark border-color-transparent in">
                    </div>
                </li>
                <li class="DataTab tab cursor-pointer" data-tabkey="tab2">
                    <div>
                        <div>Ø - C02 Emission</div>
                        <div class="text-bold text-size-18">12,2 kg</div>
                    </div>
                    <div class="arrow bg-highlight-dark border-color-transparent ">
                    </div>
                </li>
                <li class="DataTab tab cursor-pointer" data-tabkey="tab3">
                    <div>
                        <div>Ø - Range</div>
                        <div class="text-bold text-size-18">32,8 l/100</div>
                    </div>
                    <div class="arrow bg-highlight-dark border-color-transparent ">
                    </div>
                </li>
                <li class="DataTab tab cursor-pointer" data-tabkey="tab4">
                    <div>
                        <div>Ø - Route type</div>
                        <div class="text-bold text-size-18">
                            <div>
                                <span class="text-color-light">A</span>
                                <span class="text-color-light">B</span>
                                <span class="text-color-light">C</span>
                                <span class="text-color-light">D</span>
                                <span class="text-color-warning">E</span>
                                <span class="text-color-light">F</span>
                            </div>
                        </div>
                    </div>
                    <div class="arrow bg-highlight-dark border-color-transparent ">
                    </div>
                </li>
            </ul>
        </div>
        <div class="tab-content " role="tabpanel">
            <div style="opacity: 1; transform: none;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
        </div>
    </div>
</div>
```

#### Props: DataTabs

### DataTabs

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| activeKey | string | '' | Sets key and id. |
| bordered | boolean | true | Whether the component should add a border. |
| className | string | — | Additional classes to be set on the wrapper element. |
| commonTabContent | React.ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |
| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |
| arrowClassName | string | 'bg-highlight-dark border-color-transparent' | Additional classes to be set on the arrow. |
| onSelectTab | (tabKey: string) => void | — | Called when a tab is being activated. |
| tabClassName | string | — | Additional classes to be set on the tab element. |
| tabHoverClassName | string | 'bg-highlight-decent text-color-darkest' | Utility hover classes to be set on the tab element. |
| tabActiveClassName | string | 'bg-highlight-dark text-color-white' | Utility active classes to be set on the tab element. |
| tabFirstChildClassName | string | — | Utility first-child classes to be set on the tab element. |
| tabLastChildClassName | string | — | Utility last-child classes to be set on the tab element. |
| tabContentClassName | string | — | Utility content classes to be set on the tab element. |
| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |
| vertical | boolean | false | Whether the layout should be vertical. |

#### Props: DataTab

### DataTab

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| active | boolean | false | Whether this tab is the one currently active. |
| tabKey | string | — | Used to identify the tab. |
| disableTransition | boolean | false | Whether the transition effect should be disabled. |
| title | React.ReactNode | — | The content for the tab. |
| onAnimationStart | VoidFunction | — | Callback for when the animation starts. |
| onAnimationEnd | VoidFunction | — | Callback for when the animation ends. |
| className | string | — | Additional classes to be set on the element. |

### Example: Example 2

Vertical layout
Ø - Consumption
13,5 km/l

Ø - C02 Emission
12,2 kg

Ø - Range
32,8 l/100

Ø - Route type
A B C D E F

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

#### React (tsx)

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

import DataTabs from '@rio-cloud/rio-uikit/DataTabs';
import DataTab from '@rio-cloud/rio-uikit/DataTab';
import { dummyText } from '../../../utils/data';

export default () => {
    const [tabKey, setTabKey] = useState<string>();

    return (
        <div>
            <div className='h6'>Vertical layout</div>
            <DataTabs activeKey={tabKey} onSelectTab={newTabKey => setTabKey(newTabKey)} vertical>
                <DataTab tabKey='tab1' title={<Title text='Ø - Consumption' value='13,5 km/l' />}>
                    {dummyText}
                </DataTab>
                <DataTab tabKey='tab2' title={<Title text='Ø - C02 Emission' value='12,2 kg' />}>
                    {dummyText + dummyText}
                </DataTab>
                <DataTab tabKey='tab3' title={<Title text='Ø - Range' value='32,8 l/100' />}>
                    {dummyText}
                </DataTab>
                <DataTab tabKey='tab4' title={<Title text='Ø - Route type' value={<RouteType />} />}>
                    {dummyText}
                </DataTab>
            </DataTabs>
        </div>
    );
};

export const Title = ({ text, value }: { text: string; value: React.ReactNode }) => (
    <div>
        <div>{text}</div>
        <div className='text-bold text-size-18'>{value}</div>
    </div>
);

export const RouteType = () => (
    <div>
        <span className='text-color-light'>A</span>
        <span className='text-color-light'>B</span>
        <span className='text-color-light'>C</span>
        <span className='text-color-light'>D</span>
        <span className='text-color-warning'>E</span>
        <span className='text-color-light'>F</span>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="h6">Vertical layout</div>
    <div class="DataTabsContainer DataTab-bordered DataTabs-vertical">
        <div class="DataTabsWrapper ">
            <ul class="DataTabs" role="tabList">
                <li class="DataTab tab active bg-highlight-dark text-color-white" data-tabkey="tab1">
                    <div>
                        <div>Ø - Consumption</div>
                        <div class="text-bold text-size-18">13,5 km/l</div>
                    </div>
                    <div class="arrow bg-highlight-dark border-color-transparent in">
                    </div>
                </li>
                <li class="DataTab tab cursor-pointer" data-tabkey="tab2">
                    <div>
                        <div>Ø - C02 Emission</div>
                        <div class="text-bold text-size-18">12,2 kg</div>
                    </div>
                    <div class="arrow bg-highlight-dark border-color-transparent ">
                    </div>
                </li>
                <li class="DataTab tab cursor-pointer" data-tabkey="tab3">
                    <div>
                        <div>Ø - Range</div>
                        <div class="text-bold text-size-18">32,8 l/100</div>
                    </div>
                    <div class="arrow bg-highlight-dark border-color-transparent ">
                    </div>
                </li>
                <li class="DataTab tab cursor-pointer" data-tabkey="tab4">
                    <div>
                        <div>Ø - Route type</div>
                        <div class="text-bold text-size-18">
                            <div>
                                <span class="text-color-light">A</span>
                                <span class="text-color-light">B</span>
                                <span class="text-color-light">C</span>
                                <span class="text-color-light">D</span>
                                <span class="text-color-warning">E</span>
                                <span class="text-color-light">F</span>
                            </div>
                        </div>
                    </div>
                    <div class="arrow bg-highlight-dark border-color-transparent ">
                    </div>
                </li>
            </ul>
        </div>
        <div class="tab-content " role="tabpanel">
            <div style="opacity: 1; transform: none;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
        </div>
    </div>
</div>
```

#### Props: DataTabs

### DataTabs

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| activeKey | string | '' | Sets key and id. |
| bordered | boolean | true | Whether the component should add a border. |
| className | string | — | Additional classes to be set on the wrapper element. |
| commonTabContent | React.ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |
| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |
| arrowClassName | string | 'bg-highlight-dark border-color-transparent' | Additional classes to be set on the arrow. |
| onSelectTab | (tabKey: string) => void | — | Called when a tab is being activated. |
| tabClassName | string | — | Additional classes to be set on the tab element. |
| tabHoverClassName | string | 'bg-highlight-decent text-color-darkest' | Utility hover classes to be set on the tab element. |
| tabActiveClassName | string | 'bg-highlight-dark text-color-white' | Utility active classes to be set on the tab element. |
| tabFirstChildClassName | string | — | Utility first-child classes to be set on the tab element. |
| tabLastChildClassName | string | — | Utility last-child classes to be set on the tab element. |
| tabContentClassName | string | — | Utility content classes to be set on the tab element. |
| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |
| vertical | boolean | false | Whether the layout should be vertical. |

#### Props: DataTab

### DataTab

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| active | boolean | false | Whether this tab is the one currently active. |
| tabKey | string | — | Used to identify the tab. |
| disableTransition | boolean | false | Whether the transition effect should be disabled. |
| title | React.ReactNode | — | The content for the tab. |
| onAnimationStart | VoidFunction | — | Callback for when the animation starts. |
| onAnimationEnd | VoidFunction | — | Callback for when the animation ends. |
| className | string | — | Additional classes to be set on the element. |

## DataTabs inside an ExpanderPanel and custom color

### Example: Example 3

DataTabs inside an ExpanderPanel
Ø - Consumption
13,5 km/l

Ø - C02 Emission
12,2 kg

Ø - Range
32,8 l/100

Ø - Route Type
A B C D E F

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

#### React (tsx)

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

import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
import DataTabs from '@rio-cloud/rio-uikit/DataTabs';
import DataTab from '@rio-cloud/rio-uikit/DataTab';
import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';
import { dummyText } from '../../../utils/data';

export default () => {
    const [tabKey, setTabKey] = useState('tab1');

    return (
        <ExpanderPanel
            className='shadow-default'
            bodyClassName='padding-0'
            title='DataTabs inside an ExpanderPanel'
            bsStyle='default'
            open
        >
            <DataTabs
                activeKey={tabKey}
                onSelectTab={newTabKey => setTabKey(newTabKey)}
                bordered={false}
                disableTransition
                tabsWrapperClassName='bg-lightest'
                arrowClassName='bg-white border-color-light margin-bottom--1'
                tabClassName='bg-lightest'
                tabHoverClassName='bg-white'
                tabActiveClassName='bg-white'
                tabContentClassName='rounded-bottom bg-lightest'
            >
                <DataTab tabKey='tab1' title={<Title text='Ø - Consumption' value='13,5 km/l' />}>
                    {dummyText}
                </DataTab>
                <DataTab tabKey='tab2' title={<Title text='Ø - C02 Emission' value='12,2 kg' />}>
                    {dummyText + dummyText}
                </DataTab>
                <DataTab tabKey='tab3' title={<Title text='Ø - Range' value='32,8 l/100' />}>
                    {dummyText}
                </DataTab>
                <DataTab tabKey='tab4' title={<Title text='Ø - Route Type' value={<RouteType />} />}>
                    {dummyText}
                </DataTab>
            </DataTabs>
        </ExpanderPanel>
    );
};

export const Title = ({ text, value }: { text: string; value: React.ReactNode }) => (
    <div>
        <div>{text}</div>

        <div className='text-bold text-size-18'>
            <SimpleTooltip content='This is a tooltip inside a DataTab'>
                <span>{value}</span>
            </SimpleTooltip>
        </div>
    </div>
);

export const RouteType = () => (
    <div>
        <span className='text-color-light'>A</span>
        <span className='text-color-light'>B</span>
        <span className='text-color-light'>C</span>
        <span className='text-color-light'>D</span>
        <span className='text-color-warning'>E</span>
        <span className='text-color-light'>F</span>
    </div>
);
```

#### HTML (html)

```html
<div class="expander-panel panel panel-default shadow-default" aria-label="expander panel">
    <div class="panel-heading open" aria-label="panel heading">
        <span class="title">DataTabs inside an ExpanderPanel</span>
        <span class="expander-icon 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="DataTabsContainer DataTabs-horizontal">
                    <div class="DataTabsWrapper bg-lightest">
                        <ul class="DataTabs" role="tabList">
                            <li class="DataTab tab active bg-white" data-tabkey="tab1">
                                <div>
                                    <div>Ø - Consumption</div>
                                    <div class="text-bold text-size-18">
                                        <span>13,5 km/l</span>
                                    </div>
                                </div>
                                <div class="arrow bg-white border-color-light margin-bottom--1 in">
                                </div>
                            </li>
                            <li class="DataTab tab bg-lightest cursor-pointer" data-tabkey="tab2">
                                <div>
                                    <div>Ø - C02 Emission</div>
                                    <div class="text-bold text-size-18">
                                        <span>12,2 kg</span>
                                    </div>
                                </div>
                                <div class="arrow bg-white border-color-light margin-bottom--1 ">
                                </div>
                            </li>
                            <li class="DataTab tab bg-lightest cursor-pointer" data-tabkey="tab3">
                                <div>
                                    <div>Ø - Range</div>
                                    <div class="text-bold text-size-18">
                                        <span>32,8 l/100</span>
                                    </div>
                                </div>
                                <div class="arrow bg-white border-color-light margin-bottom--1 ">
                                </div>
                            </li>
                            <li class="DataTab tab bg-lightest cursor-pointer" data-tabkey="tab4">
                                <div>
                                    <div>Ø - Route Type</div>
                                    <div class="text-bold text-size-18">
                                        <span>
                                            <div>
                                                <span class="text-color-light">A</span>
                                                <span class="text-color-light">B</span>
                                                <span class="text-color-light">C</span>
                                                <span class="text-color-light">D</span>
                                                <span class="text-color-warning">E</span>
                                                <span class="text-color-light">F</span>
                                            </div>
                                        </span>
                                    </div>
                                </div>
                                <div class="arrow bg-white border-color-light margin-bottom--1 ">
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content rounded-bottom bg-lightest" role="tabpanel">
                        <div>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
                        <div>
                        </div>
                        <div>
                        </div>
                        <div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props: DataTabs

### DataTabs

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| activeKey | string | '' | Sets key and id. |
| bordered | boolean | true | Whether the component should add a border. |
| className | string | — | Additional classes to be set on the wrapper element. |
| commonTabContent | React.ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |
| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |
| arrowClassName | string | 'bg-highlight-dark border-color-transparent' | Additional classes to be set on the arrow. |
| onSelectTab | (tabKey: string) => void | — | Called when a tab is being activated. |
| tabClassName | string | — | Additional classes to be set on the tab element. |
| tabHoverClassName | string | 'bg-highlight-decent text-color-darkest' | Utility hover classes to be set on the tab element. |
| tabActiveClassName | string | 'bg-highlight-dark text-color-white' | Utility active classes to be set on the tab element. |
| tabFirstChildClassName | string | — | Utility first-child classes to be set on the tab element. |
| tabLastChildClassName | string | — | Utility last-child classes to be set on the tab element. |
| tabContentClassName | string | — | Utility content classes to be set on the tab element. |
| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |
| vertical | boolean | false | Whether the layout should be vertical. |

#### Props: DataTab

### DataTab

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| active | boolean | false | Whether this tab is the one currently active. |
| tabKey | string | — | Used to identify the tab. |
| disableTransition | boolean | false | Whether the transition effect should be disabled. |
| title | React.ReactNode | — | The content for the tab. |
| onAnimationStart | VoidFunction | — | Callback for when the animation starts. |
| onAnimationEnd | VoidFunction | — | Callback for when the animation ends. |
| className | string | — | Additional classes to be set on the element. |

## DataTabs with shared common tab content and custom styling

### Example: Example 4

DataTabs inside an ExpanderPanel with one common tab content
Ø - Consumption
13,5 km/l

Ø - C02 Emission
12,2 kg

Ø - Range
32,8 l/100

Ø - Route type
A B C D E F

Page A Page B Page C Page D Page E Page F Page G

The padding can be changes on demand by passing in util classes via "tabContentClassName" prop. Hide last tab

#### React (tsx)

```tsx
/* eslint-disable max-len */
import type React from 'react';
import { useState } from 'react';
import { faker } from '@faker-js/faker';

import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
import DataTabs from '@rio-cloud/rio-uikit/DataTabs';
import DataTab from '@rio-cloud/rio-uikit/DataTab';
import ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';
import LineChart from '@rio-cloud/rio-uikit/components/charts/LineChart';
import Line from '@rio-cloud/rio-uikit/components/charts/Line';
import { dummyText } from '../../../utils/data';

type DummyItem = { name: string; value: number };

const getData = (): DummyItem[] =>
    ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'].map(item => ({
        name: item,
        value: faker.helpers.arrayElement([3200, 3000, 2000, 2780, 1890, 2390, 3490]),
    }));

const DummyContent = ({ tabKey }: { tabKey: string }) => (
    <div>
        <div className='padding-left-15 padding-right-15'>
            {tabKey === 'tab3' && dummyText}
            <div className='height-200 max-width-500'>
                <LineChart
                    data={getData()}
                    dataKey={(entry: DummyItem) => entry.name}
                    xAxisOptions={{ padding: { left: 30, right: 30 } }}
                    showGrid
                    gridOptions={{ vertical: false, strokeDasharray: '0', stroke: 'gray-lighter' }}
                    lines={[<Line key='line' dataKey={(entry: DummyItem) => `${entry.value}`} />]}
                />
            </div>
        </div>
        <hr />
        <div className='padding-left-15 padding-right-15'>
            <span className={tabKey === 'tab2' ? 'text-medium text-color-darker' : ''}>
                The padding can be changes on demand by passing in util classes via "tabContentClassName" prop.
            </span>
        </div>
    </div>
);

export default () => {
    const [tabKey, setTabKey] = useState('tab1');
    const [hideLastTab, setHideLastTab] = useState(false);

    const handleHideLastTab = () => {
        setHideLastTab(!hideLastTab);
        setTabKey('tab1');
    };

    return (
        <>
            <ExpanderPanel
                className='shadow-default'
                bodyClassName='padding-0'
                title='DataTabs inside an ExpanderPanel with one common tab content'
                bsStyle='default'
                open
            >
                <DataTabs
                    activeKey={tabKey}
                    bordered={false}
                    disableTransition={false}
                    commonTabContent={<DummyContent tabKey={tabKey} />}
                    onSelectTab={newTabKey => setTabKey(newTabKey)}
                    tabsWrapperClassName='bg-white'
                    tabClassName='bg-lighter opacity-50 border border-color-transparent padding-y-5'
                    tabHoverClassName='bg-lightest opacity-100 border border-color-transparent padding-y-5'
                    tabActiveClassName='bg-white text-color-primary opacity-100 margin-bottom--1 border border-top-none border-bottom-none margin-top-1 padding-y-5'
                    tabContentClassName='padding-left-0 padding-right-0'
                    arrowClassName='left-10 right-10 width-auto bg-primary rotate-0 height-2 bottom-0'
                >
                    <DataTab
                        tabKey='tab1'
                        className='border-left-none'
                        title={<Title text='Ø - Consumption' value='13,5 km/l' />}
                    />
                    <DataTab tabKey='tab2' title={<Title text='Ø - C02 Emission' value='12,2 kg' />} />
                    <DataTab tabKey='tab3' title={<Title text='Ø - Range' value='32,8 l/100' />} />
                    {!hideLastTab && (
                        <DataTab
                            tabKey='tab4'
                            className='border-right-none'
                            title={<Title text='Ø - Route type' value={<RouteType />} />}
                        />
                    )}
                </DataTabs>
            </ExpanderPanel>
            <ToggleButton onClick={handleHideLastTab}>Hide last tab</ToggleButton>
        </>
    );
};

export const Title = ({ text, value }: { text: string; value: React.ReactNode }) => (
    <div>
        <div>{text}</div>
        <div className='text-bold text-size-18'>{value}</div>
    </div>
);

export const RouteType = () => (
    <div>
        <span className='text-color-light'>A</span>
        <span className='text-color-light'>B</span>
        <span className='text-color-light'>C</span>
        <span className='text-color-light'>D</span>
        <span className='text-color-warning'>E</span>
        <span className='text-color-light'>F</span>
    </div>
);
```

#### HTML (html)

```html
<div class="expander-panel panel panel-default shadow-default" aria-label="expander panel">
    <div class="panel-heading open" aria-label="panel heading">
        <span class="title">DataTabs inside an ExpanderPanel with one common tab content</span>
        <span class="expander-icon 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="DataTabsContainer DataTabs-horizontal">
                    <div class="DataTabsWrapper bg-white">
                        <ul class="DataTabs" role="tabList">
                            <li class="DataTab tab active bg-white text-color-primary opacity-100 margin-bottom--1 border border-top-none border-bottom-none margin-top-1 padding-y-5 border-left-none" data-tabkey="tab1">
                                <div>
                                    <div>Ø - Consumption</div>
                                    <div class="text-bold text-size-18">13,5 km/l</div>
                                </div>
                                <div class="arrow left-10 right-10 width-auto bg-primary rotate-0 height-2 bottom-0 in">
                                </div>
                            </li>
                            <li class="DataTab tab bg-lighter opacity-50 border border-color-transparent padding-y-5 cursor-pointer" data-tabkey="tab2">
                                <div>
                                    <div>Ø - C02 Emission</div>
                                    <div class="text-bold text-size-18">12,2 kg</div>
                                </div>
                                <div class="arrow left-10 right-10 width-auto bg-primary rotate-0 height-2 bottom-0 ">
                                </div>
                            </li>
                            <li class="DataTab tab bg-lighter opacity-50 border border-color-transparent padding-y-5 cursor-pointer" data-tabkey="tab3">
                                <div>
                                    <div>Ø - Range</div>
                                    <div class="text-bold text-size-18">32,8 l/100</div>
                                </div>
                                <div class="arrow left-10 right-10 width-auto bg-primary rotate-0 height-2 bottom-0 ">
                                </div>
                            </li>
                            <li class="DataTab tab bg-lighter opacity-50 border border-color-transparent padding-y-5 cursor-pointer border-right-none" data-tabkey="tab4">
                                <div>
                                    <div>Ø - Route type</div>
                                    <div class="text-bold text-size-18">
                                        <div>
                                            <span class="text-color-light">A</span>
                                            <span class="text-color-light">B</span>
                                            <span class="text-color-light">C</span>
                                            <span class="text-color-light">D</span>
                                            <span class="text-color-warning">E</span>
                                            <span class="text-color-light">F</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="arrow left-10 right-10 width-auto bg-primary rotate-0 height-2 bottom-0 ">
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content padding-left-0 padding-right-0" role="tabpanel">
                        <div>
                            <div class="padding-left-15 padding-right-15">
                                <div class="height-200 max-width-500">
                                    <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
                                        <div style="width: 0px; height: 0px; overflow: visible;">
                                            <div width="500" height="200" class="recharts-wrapper" style="position: relative; cursor: default; width: 500px; height: 200px;">
                                                <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
                                                    <div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
                                                        <p class="recharts-tooltip-label" style="margin: 0px;">
                                                        </p>
                                                    </div>
                                                </div>
                                                <svg role="application" tabindex="0" class="recharts-surface" width="500" height="200" viewBox="0 0 500 200" style="width: 100%; height: 100%; display: block;">
                                                    <title>
                                                    </title>
                                                    <desc>
                                                    </desc>
                                                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                                                        <g class="recharts-cartesian-grid">
                                                            <g class="recharts-cartesian-grid-horizontal">
                                                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="470" height="140" x1="15" y1="155" x2="485" y2="155">
                                                                </line>
                                                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="470" height="140" x1="15" y1="120" x2="485" y2="120">
                                                                </line>
                                                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="470" height="140" x1="15" y1="85" x2="485" y2="85">
                                                                </line>
                                                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="470" height="140" x1="15" y1="50" x2="485" y2="50">
                                                                </line>
                                                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="470" height="140" x1="15" y1="15" x2="485" y2="15">
                                                                </line>
                                                            </g>
                                                        </g>
                                                    </g>
                                                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                                                    </g>
                                                    <defs>
                                                        <clipPath id="recharts1-clip">
                                                            <rect x="15" y="15" height="140" width="470">
                                                            </rect>
                                                        </clipPath>
                                                    </defs>
                                                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                                                    </g>
                                                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                                                    </g>
                                                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                                                    </g>
                                                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                                                        <g class="recharts-layer recharts-line">
                                                            <g class="recharts-layer recharts-shape">
                                                                <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r8:" height="140" width="470" class="recharts-curve recharts-line-curve" stroke-dasharray="445.6094px 445.60943603515625px" d="M45,19.278C67.778,19.278,90.556,19.278,113.333,19.278C136.111,19.278,158.889,46.889,181.667,46.889C204.444,46.889,227.222,42.935,250,38.333C272.778,33.731,295.556,19.278,318.333,19.278C341.111,19.278,363.889,77.222,386.667,77.222C409.444,77.222,432.222,69.639,455,62.056">
                                                                </path>
                                                            </g>
                                                        </g>
                                                    </g>
                                                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                                                        <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                                                            <line angle="0" height="30" orientation="bottom" x="15" y="155" width="470" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="15" y1="155" x2="485" y2="155">
                                                            </line>
                                                            <g class="recharts-cartesian-axis-ticks recharts-xAxis-ticks">
                                                                <g class="recharts-cartesian-axis-tick-lines recharts-xAxis-tick-lines">
                                                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                                                        <line angle="0" height="30" orientation="bottom" x="15" y="155" width="470" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="45" y1="161" x2="45" y2="155">
                                                                        </line>
                                                                    </g>
                                                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                                                        <line angle="0" height="30" orientation="bottom" x="15" y="155" width="470" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="113.33333333333333" y1="161" x2="113.33333333333333" y2="155">
                                                                        </line>
                                                                    </g>
                                                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                                                        <line angle="0" height="30" orientation="bottom" x="15" y="155" width="470" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="181.66666666666666" y1="161" x2="181.66666666666666" y2="155">
                                                                        </line>
                                                                    </g>
                                                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                                                        <line angle="0" height="30" orientation="bottom" x="15" y="155" width="470" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="250" y1="161" x2="250" y2="155">
                                                                        </line>
                                                                    </g>
                                                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                                                        <line angle="0" height="30" orientation="bottom" x="15" y="155" width="470" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="318.3333333333333" y1="161" x2="318.3333333333333" y2="155">
                                                                        </line>
                                                                    </g>
                                                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                                                        <line angle="0" height="30" orientation="bottom" x="15" y="155" width="470" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="386.66666666666663" y1="161" x2="386.66666666666663" y2="155">
                                                                        </line>
                                                                    </g>
                                                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                                                        <line angle="0" height="30" orientation="bottom" x="15" y="155" width="470" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="455" y1="161" x2="455" y2="155">
                                                                        </line>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                                                        <g class="recharts-layer recharts-line-dots">
                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="45" cy="19.27777777777778" class="recharts-dot recharts-line-dot">
                                                            </circle>
                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="113.33333333333333" cy="19.27777777777778" class="recharts-dot recharts-line-dot">
                                                            </circle>
                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="181.66666666666666" cy="46.888888888888886" class="recharts-dot recharts-line-dot">
                                                            </circle>
                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="250" cy="38.33333333333333" class="recharts-dot recharts-line-dot">
                                                            </circle>
                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="318.3333333333333" cy="19.27777777777778" class="recharts-dot recharts-line-dot">
                                                            </circle>
                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="386.66666666666663" cy="77.22222222222221" class="recharts-dot recharts-line-dot">
                                                            </circle>
                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="455" cy="62.05555555555556" class="recharts-dot recharts-line-dot">
                                                            </circle>
                                                        </g>
                                                    </g>
                                                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                                                    </g>
                                                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                                                    </g>
                                                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                                                    </g>
                                                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                                                        <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                                                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                                                <text height="30" orientation="bottom" width="470" stroke="none" x="45" y="163" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                                                    <tspan x="45" dy="0.71em">Page A</tspan>
                                                                </text>
                                                            </g>
                                                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                                                <text height="30" orientation="bottom" width="470" stroke="none" x="113.33333333333333" y="163" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                                                    <tspan x="113.33333333333333" dy="0.71em">Page B</tspan>
                                                                </text>
                                                            </g>
                                                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                                                <text height="30" orientation="bottom" width="470" stroke="none" x="181.66666666666666" y="163" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                                                    <tspan x="181.66666666666666" dy="0.71em">Page C</tspan>
                                                                </text>
                                                            </g>
                                                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                                                <text height="30" orientation="bottom" width="470" stroke="none" x="250" y="163" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                                                    <tspan x="250" dy="0.71em">Page D</tspan>
                                                                </text>
                                                            </g>
                                                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                                                <text height="30" orientation="bottom" width="470" stroke="none" x="318.3333333333333" y="163" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                                                    <tspan x="318.3333333333333" dy="0.71em">Page E</tspan>
                                                                </text>
                                                            </g>
                                                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                                                <text height="30" orientation="bottom" width="470" stroke="none" x="386.66666666666663" y="163" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                                                    <tspan x="386.66666666666663" dy="0.71em">Page F</tspan>
                                                                </text>
                                                            </g>
                                                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                                                <text height="30" orientation="bottom" width="470" stroke="none" x="455" y="163" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                                                    <tspan x="455" dy="0.71em">Page G</tspan>
                                                                </text>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="padding-left-15 padding-right-15">
                                <span class="">The padding can be changes on demand by passing in util classes via "tabContentClassName" prop.</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<button type="button" class="btn btn-default btn-toggle btn-component" tabindex="0">Hide last tab</button>
```

#### Props: DataTabs

### DataTabs

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| activeKey | string | '' | Sets key and id. |
| bordered | boolean | true | Whether the component should add a border. |
| className | string | — | Additional classes to be set on the wrapper element. |
| commonTabContent | React.ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |
| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |
| arrowClassName | string | 'bg-highlight-dark border-color-transparent' | Additional classes to be set on the arrow. |
| onSelectTab | (tabKey: string) => void | — | Called when a tab is being activated. |
| tabClassName | string | — | Additional classes to be set on the tab element. |
| tabHoverClassName | string | 'bg-highlight-decent text-color-darkest' | Utility hover classes to be set on the tab element. |
| tabActiveClassName | string | 'bg-highlight-dark text-color-white' | Utility active classes to be set on the tab element. |
| tabFirstChildClassName | string | — | Utility first-child classes to be set on the tab element. |
| tabLastChildClassName | string | — | Utility last-child classes to be set on the tab element. |
| tabContentClassName | string | — | Utility content classes to be set on the tab element. |
| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |
| vertical | boolean | false | Whether the layout should be vertical. |

#### Props: DataTab

### DataTab

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| active | boolean | false | Whether this tab is the one currently active. |
| tabKey | string | — | Used to identify the tab. |
| disableTransition | boolean | false | Whether the transition effect should be disabled. |
| title | React.ReactNode | — | The content for the tab. |
| onAnimationStart | VoidFunction | — | Callback for when the animation starts. |
| onAnimationEnd | VoidFunction | — | Callback for when the animation ends. |
| className | string | — | Additional classes to be set on the element. |

### Example: Example 5

Data Set 1 Data Set 2
Ø - Consumption
13,5 km/l

Ø - C02 Emission
12,2 kg

Ø - Range
32,8 l/100

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

#### React (tsx)

```tsx
/* eslint-disable max-len */
import type React from 'react';
import { useState } from 'react';

import DataTabs from '@rio-cloud/rio-uikit/DataTabs';
import DataTab from '@rio-cloud/rio-uikit/DataTab';
import Button from '@rio-cloud/rio-uikit/Button';
import { dummyText, dummyTextExtraLong, dummyTextLong, dummyTextShort } from '../../../utils/data';

type DummyTab = { id: string; title: React.ReactNode };

export const Title = ({ text, value }: { text: string; value: React.ReactNode }) => (
    <div>
        <div>{text}</div>
        <div className='text-bold text-size-18'>{value}</div>
    </div>
);

const DummyContent = ({ tabKey }: { tabKey: string }) => (
    <div className='padding-left-15 padding-right-15'>
        {tabKey === 'tab1' && dummyText}
        {tabKey === 'tab2' && dummyTextLong}
        {tabKey === 'tab3' && dummyTextShort}
        {tabKey === 'tab4' && dummyTextExtraLong}
    </div>
);

const MyDataTabs = ({
    tabs = [],
    activeTab,
    onTabChange,
}: {
    tabs: DummyTab[];
    activeTab: string;
    onTabChange: (newTab: string) => void;
}) => (
    <DataTabs
        activeKey={activeTab}
        bordered={false}
        disableTransition={false}
        commonTabContent={<DummyContent tabKey={activeTab} />}
        onSelectTab={onTabChange}
    >
        {tabs.map(item => (
            <DataTab key={item.id} tabKey={item.id} title={item.title} />
        ))}
    </DataTabs>
);

const tabSetOne: DummyTab[] = [
    {
        id: 'tab1',
        title: <Title text='Ø - Consumption' value='13,5 km/l' />,
    },
    {
        id: 'tab2',
        title: <Title text='Ø - C02 Emission' value='12,2 kg' />,
    },
    {
        id: 'tab3',
        title: <Title text='Ø - Range' value='32,8 l/100' />,
    },
    {
        id: 'tab4',
        title: <Title text='Ø - Route type' value='Foobar' />,
    },
];

const tabSetTwo: DummyTab[] = [
    {
        id: 'tab1',
        title: <Title text='Ø - Consumption' value='13,5 km/l' />,
    },
    {
        id: 'tab2',
        title: <Title text='Ø - C02 Emission' value='12,2 kg' />,
    },
    {
        id: 'tab3',
        title: <Title text='Ø - Range' value='32,8 l/100' />,
    },
];

export default () => {
    const [tabKey, setTabKey] = useState('tab1');
    const [activeDataSet, setActiveDataSet] = useState(1);

    const handleSetDataSet = (id: number) => {
        setActiveDataSet(id);
        setTabKey('tab1');
    };

    return (
        <>
            <div className='btn-group margin-bottom-15'>
                <Button className='margin-top-15' onClick={() => handleSetDataSet(1)} active={activeDataSet === 1}>
                    Data Set 1
                </Button>
                <Button className='margin-top-15' onClick={() => handleSetDataSet(2)} active={activeDataSet === 2}>
                    Data Set 2
                </Button>
            </div>
            <MyDataTabs
                activeTab={tabKey}
                tabs={activeDataSet === 1 ? tabSetTwo : tabSetOne}
                onTabChange={(newTabKey: string) => setTabKey(newTabKey)}
            />
        </>
    );
};
```

#### HTML (html)

```html
<div class="btn-group margin-bottom-15">
    <button type="button" class="btn btn-default active btn-component margin-top-15" tabindex="0">Data Set 1</button>
    <button type="button" class="btn btn-default btn-component margin-top-15" tabindex="0">Data Set 2</button>
</div>
<div class="DataTabsContainer DataTabs-horizontal">
    <div class="DataTabsWrapper ">
        <ul class="DataTabs" role="tabList">
            <li class="DataTab tab active bg-highlight-dark text-color-white" data-tabkey="tab1">
                <div>
                    <div>Ø - Consumption</div>
                    <div class="text-bold text-size-18">13,5 km/l</div>
                </div>
                <div class="arrow bg-highlight-dark border-color-transparent in">
                </div>
            </li>
            <li class="DataTab tab cursor-pointer" data-tabkey="tab2">
                <div>
                    <div>Ø - C02 Emission</div>
                    <div class="text-bold text-size-18">12,2 kg</div>
                </div>
                <div class="arrow bg-highlight-dark border-color-transparent ">
                </div>
            </li>
            <li class="DataTab tab cursor-pointer" data-tabkey="tab3">
                <div>
                    <div>Ø - Range</div>
                    <div class="text-bold text-size-18">32,8 l/100</div>
                </div>
                <div class="arrow bg-highlight-dark border-color-transparent ">
                </div>
            </li>
        </ul>
    </div>
    <div class="tab-content " role="tabpanel">
        <div class="padding-left-15 padding-right-15">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
    </div>
</div>
```

#### Props: DataTabs

### DataTabs

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| activeKey | string | '' | Sets key and id. |
| bordered | boolean | true | Whether the component should add a border. |
| className | string | — | Additional classes to be set on the wrapper element. |
| commonTabContent | React.ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |
| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |
| arrowClassName | string | 'bg-highlight-dark border-color-transparent' | Additional classes to be set on the arrow. |
| onSelectTab | (tabKey: string) => void | — | Called when a tab is being activated. |
| tabClassName | string | — | Additional classes to be set on the tab element. |
| tabHoverClassName | string | 'bg-highlight-decent text-color-darkest' | Utility hover classes to be set on the tab element. |
| tabActiveClassName | string | 'bg-highlight-dark text-color-white' | Utility active classes to be set on the tab element. |
| tabFirstChildClassName | string | — | Utility first-child classes to be set on the tab element. |
| tabLastChildClassName | string | — | Utility last-child classes to be set on the tab element. |
| tabContentClassName | string | — | Utility content classes to be set on the tab element. |
| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |
| vertical | boolean | false | Whether the layout should be vertical. |

#### Props: DataTab

### DataTab

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| active | boolean | false | Whether this tab is the one currently active. |
| tabKey | string | — | Used to identify the tab. |
| disableTransition | boolean | false | Whether the transition effect should be disabled. |
| title | React.ReactNode | — | The content for the tab. |
| onAnimationStart | VoidFunction | — | Callback for when the animation starts. |
| onAnimationEnd | VoidFunction | — | Callback for when the animation ends. |
| className | string | — | Additional classes to be set on the element. |