@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/components/dataTabs.md

@@ -0,0 +1,1251 @@
+# DataTabs
+
+*Category:* Components
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#components/dataTabs
+*Captured:* 2025-12-12T14:20:43.301Z
+
+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
+ABCDEF
+
+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.
+
+#### Summary
+
+Horizontal layout
+Ø - Consumption
+13,5 km/l
+
+Ø - C02 Emission
+12,2 kg
+
+Ø - Range
+32,8 l/100
+
+Ø - Route type
+ABCDEF
+
+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. |
+| onSelectTab | boolean | () => {} | Called when a tab is being activated. |
+| commonTabContent | 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. |
+| vertical | boolean | false | Whether the layout should be vertical. |
+| bordered | boolean | true | Whether the component should add a border. |
+| 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. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+| tabContentClassName | string | — | Additional classes to be set on the tabContent wrapper element. |
+| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |
+| arrowClassName | string | bg-highlight-dark | Additional classes to be set on the arrow. |
+| tabClassName | string | bg-white | Additional classes to be set on the tab element. |
+| tabHoverClassName | string | text-color-darkest | Utility hover classes to be set on the tab element. |
+| tabActiveClassName | string | text-color-darkest | Utility active classes to be set on the tab element. |
+
+#### Props: DataTab
+
+### DataTab
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| tabKey | string | — | Used to identify the tab. |
+| title | string \| ReactNode | — | The content for the tab. |
+| active | boolean | — | Whether this tab is the one currently active. |
+| disableTransition | boolean | — | Whether the transition effect should be disabled. |
+| 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
+ABCDEF
+
+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.
+
+#### Summary
+
+Vertical layout
+Ø - Consumption
+13,5 km/l
+
+Ø - C02 Emission
+12,2 kg
+
+Ø - Range
+32,8 l/100
+
+Ø - Route type
+ABCDEF
+
+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. |
+| onSelectTab | boolean | () => {} | Called when a tab is being activated. |
+| commonTabContent | 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. |
+| vertical | boolean | false | Whether the layout should be vertical. |
+| bordered | boolean | true | Whether the component should add a border. |
+| 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. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+| tabContentClassName | string | — | Additional classes to be set on the tabContent wrapper element. |
+| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |
+| arrowClassName | string | bg-highlight-dark | Additional classes to be set on the arrow. |
+| tabClassName | string | bg-white | Additional classes to be set on the tab element. |
+| tabHoverClassName | string | text-color-darkest | Utility hover classes to be set on the tab element. |
+| tabActiveClassName | string | text-color-darkest | Utility active classes to be set on the tab element. |
+
+#### Props: DataTab
+
+### DataTab
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| tabKey | string | — | Used to identify the tab. |
+| title | string \| ReactNode | — | The content for the tab. |
+| active | boolean | — | Whether this tab is the one currently active. |
+| disableTransition | boolean | — | Whether the transition effect should be disabled. |
+| 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
+ABCDEF
+
+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.
+
+#### Summary
+
+DataTabs inside an ExpanderPanel
+Ø - Consumption
+13,5 km/l
+
+Ø - C02 Emission
+12,2 kg
+
+Ø - Range
+32,8 l/100
+
+Ø - Route Type
+ABCDEF
+
+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. |
+| onSelectTab | boolean | () => {} | Called when a tab is being activated. |
+| commonTabContent | 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. |
+| vertical | boolean | false | Whether the layout should be vertical. |
+| bordered | boolean | true | Whether the component should add a border. |
+| 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. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+| tabContentClassName | string | — | Additional classes to be set on the tabContent wrapper element. |
+| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |
+| arrowClassName | string | bg-highlight-dark | Additional classes to be set on the arrow. |
+| tabClassName | string | bg-white | Additional classes to be set on the tab element. |
+| tabHoverClassName | string | text-color-darkest | Utility hover classes to be set on the tab element. |
+| tabActiveClassName | string | text-color-darkest | Utility active classes to be set on the tab element. |
+
+#### Props: DataTab
+
+### DataTab
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| tabKey | string | — | Used to identify the tab. |
+| title | string \| ReactNode | — | The content for the tab. |
+| active | boolean | — | Whether this tab is the one currently active. |
+| disableTransition | boolean | — | Whether the transition effect should be disabled. |
+| 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
+ABCDEF
+
+Page APage BPage CPage DPage EPage FPage G
+
+The padding can be changes on demand by passing in util classes via "tabContentClassName" prop.
+
+Hide last tab
+
+#### Summary
+
+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
+ABCDEF
+
+Page APage BPage CPage DPage EPage FPage 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';
+
+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.random.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" id="recharts-zindex--100-:r5:">
+                                                        <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" id="recharts-zindex--50-:r6:">
+                                                    </g>
+                                                    <defs>
+                                                        <clipPath id="recharts1-clip">
+                                                            <rect x="15" y="15" height="140" width="470">
+                                                            </rect>
+                                                        </clipPath>
+                                                    </defs>
+                                                    <g tabindex="-1" id="recharts-zindex-100-:r8:">
+                                                    </g>
+                                                    <g tabindex="-1" id="recharts-zindex-200-:r9:">
+                                                    </g>
+                                                    <g tabindex="-1" id="recharts-zindex-300-:ra:">
+                                                    </g>
+                                                    <g tabindex="-1" id="recharts-zindex-400-:rb:">
+                                                        <g class="recharts-layer recharts-line">
+                                                            <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r7:" height="140" width="470" class="recharts-curve recharts-line-curve" stroke-dasharray="468.18389892578125px 0px" d="M45,30.556C67.778,53.889,90.556,77.222,113.333,77.222C136.111,77.222,158.889,62.056,181.667,62.056C204.444,62.056,227.222,62.056,250,62.056C272.778,62.056,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 tabindex="-1" id="recharts-zindex-500-:rc:">
+                                                        <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" id="recharts-zindex-600-:rd:">
+                                                        <g class="recharts-layer recharts-line-dots">
+                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="45" cy="30.55555555555556" 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="77.22222222222221" 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="62.05555555555556" class="recharts-dot recharts-line-dot">
+                                                            </circle>
+                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="250" cy="62.05555555555556" 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" id="recharts-zindex-1000-:re:">
+                                                    </g>
+                                                    <g tabindex="-1" id="recharts-zindex-1100-:rf:">
+                                                    </g>
+                                                    <g tabindex="-1" id="recharts-zindex-1200-:rg:">
+                                                    </g>
+                                                    <g tabindex="-1" id="recharts-zindex-2000-:rh:">
+                                                        <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. |
+| onSelectTab | boolean | () => {} | Called when a tab is being activated. |
+| commonTabContent | 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. |
+| vertical | boolean | false | Whether the layout should be vertical. |
+| bordered | boolean | true | Whether the component should add a border. |
+| 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. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+| tabContentClassName | string | — | Additional classes to be set on the tabContent wrapper element. |
+| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |
+| arrowClassName | string | bg-highlight-dark | Additional classes to be set on the arrow. |
+| tabClassName | string | bg-white | Additional classes to be set on the tab element. |
+| tabHoverClassName | string | text-color-darkest | Utility hover classes to be set on the tab element. |
+| tabActiveClassName | string | text-color-darkest | Utility active classes to be set on the tab element. |
+
+#### Props: DataTab
+
+### DataTab
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| tabKey | string | — | Used to identify the tab. |
+| title | string \| ReactNode | — | The content for the tab. |
+| active | boolean | — | Whether this tab is the one currently active. |
+| disableTransition | boolean | — | Whether the transition effect should be disabled. |
+| 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 1Data 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.
+
+#### Summary
+
+Data Set 1Data 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;
+}) => {
+    return (
+        <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. |
+| onSelectTab | boolean | () => {} | Called when a tab is being activated. |
+| commonTabContent | 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. |
+| vertical | boolean | false | Whether the layout should be vertical. |
+| bordered | boolean | true | Whether the component should add a border. |
+| 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. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+| tabContentClassName | string | — | Additional classes to be set on the tabContent wrapper element. |
+| tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |
+| arrowClassName | string | bg-highlight-dark | Additional classes to be set on the arrow. |
+| tabClassName | string | bg-white | Additional classes to be set on the tab element. |
+| tabHoverClassName | string | text-color-darkest | Utility hover classes to be set on the tab element. |
+| tabActiveClassName | string | text-color-darkest | Utility active classes to be set on the tab element. |
+
+#### Props: DataTab
+
+### DataTab
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| tabKey | string | — | Used to identify the tab. |
+| title | string \| ReactNode | — | The content for the tab. |
+| active | boolean | — | Whether this tab is the one currently active. |
+| disableTransition | boolean | — | Whether the transition effect should be disabled. |
+| 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. |