Mantine UIFAQColors generator

OverflowList

Hide items that do not fit in a container and display them as a single collapsed item

Source

View source code

LLM docs

LLM documentation

Docs

Edit this page

Package

@mantine/core

Usage

Apple
Banana
Cherry
Date
Elderberry
Fig
Grape
Honeydew
Indian Fig
Jackfruit
Kiwi
Lemon
Mango
Nectarine
Orange
Papaya
import { Badge, OverflowList } from '@mantine/core';
import { data } from './data';

function Demo() {
  return (
    <div style={{ resize: 'horizontal', overflow: 'auto', maxWidth: '100%' }}>
      <OverflowList
        data={data}
        gap={4}
        renderOverflow={(items) => <Badge>+{items.length} more</Badge>}
        renderItem={(item, index) => <Badge key={index}>{item}</Badge>}
      />
    </div>
  );
}

Data type

OverflowList data prop supports an array of any type. By default, OverflowList infers data type from the data array automatically. To specify data type explicitly, pass generic type argument to the component:

import { OverflowList } from '@mantine/core';

function Demo() {
  return (
    <OverflowList<{ value: string; label: string }>
      data={[{ value: '1', label: 'Item 1' }]}
      renderItem={(item) => <div key={item.value}>{item.label}</div>}
      renderOverflow={(items) => <div>+{items.length} more</div>}
    />
  );
}

Max rows

Use maxRows to limit visible rows count. By default, 1 row is visible.

Apple
Banana
Cherry
Date
Elderberry
Fig
Grape
Honeydew
Indian Fig
Jackfruit
Kiwi
Lemon
Mango
Nectarine
Orange
Papaya
import { Badge, OverflowList } from '@mantine/core';
import { data } from './data';

function Demo() {
  return (
    <div style={{ resize: 'horizontal', overflow: 'auto', maxWidth: 500 }}>
      <OverflowList
        data={data}
        gap={4}
        maxRows={2}
        renderOverflow={(items) => <Badge>+{items.length} more</Badge>}
        renderItem={(item, index) => <Badge key={index}>{item}</Badge>}
      />
    </div>
  );
}

Max visible items

Use maxVisibleItems to limit visible items count. By default, there is no limit.

Apple
Banana
Cherry
Date
Elderberry
import { Badge, OverflowList } from '@mantine/core';
import { data } from './data';

function Demo() {
  return (
    <div style={{ resize: 'horizontal', overflow: 'auto', maxWidth: '100%' }}>
      <OverflowList
        data={data}
        gap={4}
        maxVisibleItems={5}
        renderOverflow={(items) => <Badge>+{items.length} more</Badge>}
        renderItem={(item, index) => <Badge key={index}>{item}</Badge>}
      />
    </div>
  );
}

Collapse from

By default, items are collapsed from the end. Set collapseFrom="start" to collapse items from the beginning, for example to keep the last items of breadcrumbs visible.

Apple
Banana
Cherry
Date
Elderberry
Fig
Grape
Honeydew
Indian Fig
Jackfruit
Kiwi
Lemon
Mango
Nectarine
Orange
Papaya
import { Badge, OverflowList } from '@mantine/core';
import { data } from './data';

function Demo() {
  return (
    <div style={{ resize: 'horizontal', overflow: 'auto', maxWidth: '100%' }}>
      <OverflowList
        data={data}
        gap={4}
        collapseFrom="start"
        renderOverflow={(items) => <Badge>+{items.length} more</Badge>}
        renderItem={(item, index) => <Badge key={index}>{item}</Badge>}
      />
    </div>
  );
}

Example: overflow with hover card

You can use any React components in renderOverflow function. Example of displaying collapsed items inside HoverCard:

Apple
Banana
Cherry
Date
Elderberry
Fig
Grape
Honeydew
Indian Fig
Jackfruit
Kiwi
Lemon
Mango
Nectarine
Orange
Papaya
import { Badge, Center, HoverCard, OverflowList } from '@mantine/core';
import { data } from './data';

function Demo() {
  return (
    <div style={{ resize: 'horizontal', overflow: 'auto', maxWidth: '100%' }}>
      <OverflowList
        data={data}
        gap={4}
        renderItem={(item, index) => <Badge key={index}>{item}</Badge>}
        renderOverflow={(items) => (
          <Center>
            <HoverCard>
              <HoverCard.Target>
                <Badge>+{items.length} more</Badge>
              </HoverCard.Target>
              <HoverCard.Dropdown>
                {items.map((item, index) => (
                  <div key={index}>{item}</div>
                ))}
              </HoverCard.Dropdown>
            </HoverCard>
          </Center>
        )}
      />
    </div>
  );
}

NumberFormatter

RollingNumber