new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Mantine · all subjects

overflowlist/props

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

OverflowList data prop accepts any type with generic type support

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

OverflowList generic type example

Example of using OverflowList with an explicit generic type argument: ```tsx 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>} /> ); } ``` This example shows typing data items as objects with value and label properties, rendering each item with renderItem, and rendering overflow items with renderOverflow.

OverflowList maxRows prop controls visible rows

Use the maxRows prop to limit the number of visible rows. By default, 1 row is visible.

OverflowList maxVisibleItems prop limits visible items

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

OverflowList collapseFrom prop controls collapse direction

Use the collapseFrom prop to control the direction from which items are collapsed when they overflow. By default, items are collapsed from the end. Set collapseFrom="start" to collapse items from the beginning, which is useful for breadcrumb-like patterns where the last items should remain visible.

OverflowList renderItem and renderOverflow functions

OverflowList uses renderItem function to render individual items and renderOverflow function to render collapsed items. The renderOverflow function receives an array of items that didn't fit and can render them however needed, including using other React components like HoverCard.

Give your agent this brain