# NoData

*Category:* Components
*Section:* Content
*Source:* https://uikit.developers.rio.cloud/#/components/noData
*Captured:* 2026-04-27T14:58:02.039Z

## NoData

### Example: Example 1

Simple NoData element No data
Simple NoData element with lager text No data
NoData with tooltip No data
NoData with tooltip right No data

#### React (tsx)

```tsx
import React from 'react';

import NoData from '@rio-cloud/rio-uikit/NoData';

export default () => (
    <React.Fragment>
        <div className='margin-10'>
            <label>Simple NoData element</label>
            <NoData text='No data' />
        </div>
        <div className='margin-10'>
            <label>Simple NoData element with lager text</label>
            <NoData text='No data' className='text-size-16' />
        </div>
        <div className='margin-10'>
            <label>NoData with tooltip</label>
            <NoData text='No data' tooltip='Lorem ipsum dolor sit amet' />
        </div>
        <div className='margin-10'>
            <label>NoData with tooltip right</label>
            <NoData text='No data' tooltip='Lorem ipsum dolor sit amet' tooltipPlacement='right' />
        </div>
    </React.Fragment>
);
```

#### HTML (html)

```html
<div class="margin-10">
    <label>Simple NoData element</label>
    <span class="NoData">
        <span class="pointer-events-none user-select-none">No data</span>
    </span>
</div>
<div class="margin-10">
    <label>Simple NoData element with lager text</label>
    <span class="NoData text-size-16">
        <span class="pointer-events-none user-select-none">No data</span>
    </span>
</div>
<div class="margin-10">
    <label>NoData with tooltip</label>
    <span class="NoData">
        <span class="pointer-events-none user-select-none">No data</span>
        <span class="rioglyph rioglyph-info-sign margin-left-5">
        </span>
    </span>
</div>
<div class="margin-10">
    <label>NoData with tooltip right</label>
    <span class="NoData">
        <span class="pointer-events-none user-select-none">No data</span>
        <span class="rioglyph rioglyph-info-sign margin-left-5">
        </span>
    </span>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| text | string \| React.ReactNode | — | The actual translated "No data" text. |
| tooltip | string \| React.ReactNode | — | Additional explanation shown inside a tooltip. |
| tooltipPlacement | ObjectValues<typeof PLACEMENT> | — | Sets the direction the Tooltip is positioned towards. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left, left-end |
| tooltipWidth | TooltipWidth | — | The width of the tooltip. Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500 |
| className | string | — | Additional class names to be added to the wrapping element. |

### Example: Example 2

NoData in tables Column 1 Column 2 Column 3

Lorem No data No data
Ipsum No data No data

#### React (tsx)

```tsx
import NoData from '@rio-cloud/rio-uikit/NoData';

export default () => (
    <>
        <label>NoData in tables</label>
        <table className='table table-bordered table-head-filled table-hover margin-top-15'>
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <span>Lorem</span>
                    </td>
                    <td>
                        <NoData text='No data' />
                    </td>
                    <td>
                        <NoData text='No data' />
                    </td>
                </tr>
                <tr>
                    <td>
                        <span>Ipsum</span>
                    </td>
                    <td>
                        <NoData text='No data' />
                    </td>
                    <td>
                        <NoData text='No data' />
                    </td>
                </tr>
            </tbody>
        </table>
    </>
);
```

#### HTML (html)

```html
<label>NoData in tables</label>
<table class="table table-bordered table-head-filled table-hover margin-top-15">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <span>Lorem</span>
            </td>
            <td>
                <span class="NoData">
                    <span class="pointer-events-none user-select-none">No data</span>
                </span>
            </td>
            <td>
                <span class="NoData">
                    <span class="pointer-events-none user-select-none">No data</span>
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Ipsum</span>
            </td>
            <td>
                <span class="NoData">
                    <span class="pointer-events-none user-select-none">No data</span>
                </span>
            </td>
            <td>
                <span class="NoData">
                    <span class="pointer-events-none user-select-none">No data</span>
                </span>
            </td>
        </tr>
    </tbody>
</table>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| text | string \| React.ReactNode | — | The actual translated "No data" text. |
| tooltip | string \| React.ReactNode | — | Additional explanation shown inside a tooltip. |
| tooltipPlacement | ObjectValues<typeof PLACEMENT> | — | Sets the direction the Tooltip is positioned towards. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left, left-end |
| tooltipWidth | TooltipWidth | — | The width of the tooltip. Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500 |
| className | string | — | Additional class names to be added to the wrapping element. |