# ResponsiveColumnStripe

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

The ResponsiveColumnStripe component is designed to work with any list of items. The individual items are spread equally according to the available space. The component is totally customizable and does not style the individual items to give maximum flexibility.

## ResponsiveColumnStripe

> Note: It is mandatory to set the key attribute for the individual items. If they are not set or when they are not unique the calculation of how many items to show on which page wont work. In case a custom component is used as item, wrap it in a native DOM element and set the key to the wrapping element.

### Example: Shipments

ResponsiveColumnStripe with minColumns 2 and maxColumns 5
Item 1
Item 2
Item 3
Item 4
Item 5

ResponsiveColumnStripe as "ul" with minColumns 1 and maxColumns 4
Item 1
Item 2
Item 3
Item 4

ResponsiveColumnStripe as "ul" with minColumns 1, maxColumns 5, and no animation
Friday
14.01.2023

Shipments 4
Planned 0

Monday
17.01.2023

Shipments 4
Planned 0

Thuesday
18.01.2023

Shipments 4
Planned 0

Wednesday
19.01.2023

Shipments 4
Planned 0

#### React (tsx)

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

export default () => {
    const demoContentOneClasses =
        'border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer';

    return (
        <>
            <div className='margin-bottom-50'>
                <label>ResponsiveColumnStripe with minColumns 2 and maxColumns 5</label>
                <ResponsiveColumnStripe
                    className='border rounded bg-white shadow-default'
                    columnsWrapperClassName='space-x--1'
                    minColumnWith={150}
                    minColumns={2}
                    maxColumns={5}
                    stretchLastItems={false}
                    onNextClick={pageNumber => console.log(`show page: ${pageNumber}`)}
                    onPreviousClick={pageNumber => console.log(`show page: ${pageNumber}`)}
                >
                    <div key='1' className={demoContentOneClasses}>
                        Item 1
                    </div>
                    <div key='2' className={demoContentOneClasses}>
                        Item 2
                    </div>
                    <div key='3' className={demoContentOneClasses}>
                        Item 3
                    </div>
                    <div key='4' className={demoContentOneClasses}>
                        Item 4
                    </div>
                    <div key='5' className={demoContentOneClasses}>
                        Item 5
                    </div>
                    <div key='6' className={demoContentOneClasses}>
                        Item 6
                    </div>
                    <div key='7' className={demoContentOneClasses}>
                        Item 7
                    </div>
                </ResponsiveColumnStripe>
            </div>
            <div className='margin-bottom-50'>
                <label>ResponsiveColumnStripe as "ul" with minColumns 1 and maxColumns 4</label>
                <ResponsiveColumnStripe
                    className='rounded bg-lightest'
                    columnsWrapperClassName='nav nav-pills nav-pills-filled nav-justified user-select-none'
                    buttonClassName='bg-none'
                    minColumnWith={100}
                    minColumns={1}
                    maxColumns={4}
                    asType='ul'
                >
                    <li key='1' className='foobar' style={{ color: 'red' }}>
                        <span>Item 1</span>
                    </li>
                    <li key='2' className='active'>
                        <span>Item 2</span>
                    </li>
                    <li key='3'>
                        <span>Item 3</span>
                    </li>
                    <li key='4'>
                        <span>Item 4</span>
                    </li>
                    <li key='5'>
                        <span>Item 5</span>
                    </li>
                    <li key='6'>
                        <span>Item 6</span>
                    </li>
                    <li key='7'>
                        <span>Item 7</span>
                    </li>
                    <li key='8'>
                        <span>Item 8</span>
                    </li>
                    <li key='9'>
                        <span>Item 9</span>
                    </li>
                    <li key='10'>
                        <span>Item 10</span>
                    </li>
                    <li key='11'>
                        <span>Item 11</span>
                    </li>
                </ResponsiveColumnStripe>
            </div>
            <div className='margin-bottom-50'>
                <label>ResponsiveColumnStripe as "ul" with minColumns 1, maxColumns 5, and no animation</label>
                <ResponsiveColumnStripe
                    className='bg-white'
                    columnsWrapperClassName='margin-0 padding-0 space-x--1 user-select-none'
                    buttonClassName='hover-bg-highlight-decent'
                    minColumnWith={220}
                    minColumns={1}
                    maxColumns={5}
                    asType='ul'
                    activePage={1}
                    disableAnimation
                >
                    <div key='1'>
                        <ComplexDemoContent day='Monday' date='10.01.2023' />
                    </div>
                    <div key='2'>
                        <ComplexDemoContent day='Thuesday' date='11.01.2023' />
                    </div>
                    <div key='3'>
                        <ComplexDemoContent day='Wednesday' date='12.01.2023' />
                    </div>
                    <div key='4'>
                        <ComplexDemoContent day='Thursday' date='13.01.2023' />
                    </div>
                    <div key='5'>
                        <ComplexDemoContent day='Friday' date='14.01.2023' />
                    </div>
                    <div key='6'>
                        <ComplexDemoContent day='Monday' date='17.01.2023' />
                    </div>
                    <div key='7'>
                        <ComplexDemoContent day='Thuesday' date='18.01.2023' />
                    </div>
                    <div key='8'>
                        <ComplexDemoContent day='Wednesday' date='19.01.2023' active />
                    </div>
                    <div key='9'>
                        <ComplexDemoContent day='Thursday' date='20.01.2023' />
                    </div>
                    <div key='10'>
                        <ComplexDemoContent day='Friday' date='21.01.2023' />
                    </div>
                </ResponsiveColumnStripe>
            </div>
        </>
    );
};

type ComplexDemoContentProps = {
    day: string;
    date: string;
    active?: boolean;
};

const ComplexDemoContent = ({ day, date, active }: ComplexDemoContentProps) => (
    <div
        className={`padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none ${
            active ? 'bg-highlight' : ''
        }`}
    >
        <div className='flex-1-1 text-medium'>
            <div>{day}</div>
            <div className='text-size-16'>{date}</div>
        </div>
        <div className='flex-1-1 text-size-14'>
            <div className='display-flex flex-row justify-content-end-lg gap-10'>
                <span className={active ? 'text-color-white' : 'text-color-dark'}>Shipments</span>
                <span>
                    <strong>4</strong>
                </span>
            </div>
            <div className='display-flex flex-row justify-content-end-lg gap-10'>
                <span className={active ? 'text-color-white' : 'text-color-dark'}>Planned</span>
                <span className={`text-medium ${active ? 'text-color-white' : 'text-color-gray'}`}>0</span>
            </div>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="margin-bottom-50">
    <label>ResponsiveColumnStripe with minColumns 2 and maxColumns 5</label>
    <div class="ResponsiveColumnStripe display-flex align-items-center overflow-hidden border rounded bg-white shadow-default">
        <div class="PreviousButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 pointer-events-none opacity-30">
            <span class="rioglyph rioglyph-chevron-left">
            </span>
        </div>
        <div class="ColumnsArea flex-1-1 overflow-hidden">
            <div class="ColumnWrapper flex-1-1 display-flex space-x--1">
                <div class="ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer" data-key="1">Item 1</div>
                <div class="ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer" data-key="2">Item 2</div>
                <div class="ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer" data-key="3">Item 3</div>
                <div class="ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer" data-key="4">Item 4</div>
                <div class="ColumnItem flex-1-1 border border-top-none border-bottom-none padding-15 hover-bg-highlight-decent cursor-pointer" data-key="5">Item 5</div>
            </div>
        </div>
        <div class="NextButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12">
            <span class="rioglyph rioglyph-chevron-right">
            </span>
        </div>
    </div>
</div>
<div class="margin-bottom-50">
    <label>ResponsiveColumnStripe as "ul" with minColumns 1 and maxColumns 4</label>
    <div class="ResponsiveColumnStripe display-flex align-items-center overflow-hidden rounded bg-lightest">
        <div class="PreviousButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 pointer-events-none opacity-30">
            <span class="rioglyph rioglyph-chevron-left">
            </span>
        </div>
        <div class="ColumnsArea flex-1-1 overflow-hidden">
            <ul class="ColumnWrapper flex-1-1 display-flex nav nav-pills nav-pills-filled nav-justified user-select-none">
                <li class="ColumnItem flex-1-1 foobar" data-key="1" style="color: red;">
                    <span>Item 1</span>
                </li>
                <li class="ColumnItem flex-1-1 active" data-key="2">
                    <span>Item 2</span>
                </li>
                <li class="ColumnItem flex-1-1 " data-key="3">
                    <span>Item 3</span>
                </li>
                <li class="ColumnItem flex-1-1 " data-key="4">
                    <span>Item 4</span>
                </li>
            </ul>
        </div>
        <div class="NextButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12">
            <span class="rioglyph rioglyph-chevron-right">
            </span>
        </div>
    </div>
</div>
<div class="margin-bottom-50">
    <label>ResponsiveColumnStripe as "ul" with minColumns 1, maxColumns 5, and no animation</label>
    <div class="ResponsiveColumnStripe display-flex align-items-center overflow-hidden bg-white">
        <div class="PreviousButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12">
            <span class="rioglyph rioglyph-chevron-left">
            </span>
        </div>
        <div class="ColumnsArea flex-1-1 overflow-hidden">
            <ul class="ColumnWrapper flex-1-1 display-flex margin-0 padding-0 space-x--1 user-select-none">
                <div class="ColumnItem flex-1-1 " data-key="5">
                    <div class="padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none ">
                        <div class="flex-1-1 text-medium">
                            <div>Friday</div>
                            <div class="text-size-16">14.01.2023</div>
                        </div>
                        <div class="flex-1-1 text-size-14">
                            <div class="display-flex flex-row justify-content-end-lg gap-10">
                                <span class="text-color-dark">Shipments</span>
                                <span>
                                    <strong>4</strong>
                                </span>
                            </div>
                            <div class="display-flex flex-row justify-content-end-lg gap-10">
                                <span class="text-color-dark">Planned</span>
                                <span class="text-medium text-color-gray">0</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ColumnItem flex-1-1 " data-key="6">
                    <div class="padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none ">
                        <div class="flex-1-1 text-medium">
                            <div>Monday</div>
                            <div class="text-size-16">17.01.2023</div>
                        </div>
                        <div class="flex-1-1 text-size-14">
                            <div class="display-flex flex-row justify-content-end-lg gap-10">
                                <span class="text-color-dark">Shipments</span>
                                <span>
                                    <strong>4</strong>
                                </span>
                            </div>
                            <div class="display-flex flex-row justify-content-end-lg gap-10">
                                <span class="text-color-dark">Planned</span>
                                <span class="text-medium text-color-gray">0</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ColumnItem flex-1-1 " data-key="7">
                    <div class="padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none ">
                        <div class="flex-1-1 text-medium">
                            <div>Thuesday</div>
                            <div class="text-size-16">18.01.2023</div>
                        </div>
                        <div class="flex-1-1 text-size-14">
                            <div class="display-flex flex-row justify-content-end-lg gap-10">
                                <span class="text-color-dark">Shipments</span>
                                <span>
                                    <strong>4</strong>
                                </span>
                            </div>
                            <div class="display-flex flex-row justify-content-end-lg gap-10">
                                <span class="text-color-dark">Planned</span>
                                <span class="text-medium text-color-gray">0</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ColumnItem flex-1-1 " data-key="8">
                    <div class="padding-15 display-flex flex-wrap line-height-20 gap-5 border border-top-none border-bottom-none bg-highlight">
                        <div class="flex-1-1 text-medium">
                            <div>Wednesday</div>
                            <div class="text-size-16">19.01.2023</div>
                        </div>
                        <div class="flex-1-1 text-size-14">
                            <div class="display-flex flex-row justify-content-end-lg gap-10">
                                <span class="text-color-white">Shipments</span>
                                <span>
                                    <strong>4</strong>
                                </span>
                            </div>
                            <div class="display-flex flex-row justify-content-end-lg gap-10">
                                <span class="text-color-white">Planned</span>
                                <span class="text-medium text-color-white">0</span>
                            </div>
                        </div>
                    </div>
                </div>
            </ul>
        </div>
        <div class="NextButton align-items-center align-self-stretch display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12">
            <span class="rioglyph rioglyph-chevron-right">
            </span>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| minColumnWith | number | 300 | The minimum width in pixel of a single column. This value determines how many columns are shown per page depending on the parent width. |
| minColumns | number | 1 | The minimum amount of columns that should be shown per page. |
| maxColumns | number | 5 | The maximum amount of columns that should be shown per page. |
| stretchLastItems | boolean | false | Defines whether the items on the last page are stretched out to fill the space. |
| activePage | number | 0 | The page that shall be shown. This can be used to control the pages from outside. |
| asType | keyof ReactHTML | 'div' | The DOM element type of the wrapping column element. If you need a list, this might be set to "ul". |
| disableAnimation | boolean | false | Set to true to skip animating pages. |
| onPreviousClick | (pageNumber: number, columnsPerPage: number) => void | — | Callback function for when the previous page is clicked. |
| onNextClick | (pageNumber: number, columnsPerPage: number) => void | — | Callback function for when the next page is clicked. |
| buttonClassName | string | — | Additional classes set to the navigation buttons. |
| columnsWrapperClassName | string | — | Additional classes set to the component wrapper element. |
| className | string | — | Additional classes set to the column wrapper element. |