List

Renders any array through renderItem.

ALAda LovelaceOwner

ATAlan TuringAdmin

GHGrace HopperMember


import { List, Flex, Avatar, Text, Badge } from '@gg-software/ui';
 
<List
    items={members}
    rowKey={(m) => m.id}
    header="Team members"
    hoverable
    renderItem={(m) => (
        <Flex align="center" gap="sm">
            <Avatar name={m.name} size="sm" />
            <Text weight="medium">{m.name}</Text>
            <Badge label={m.role} />
        </Flex>
    )}
/>;

Props

Prop	Type	Default
`items`*	`T[]`	—
`renderItem`*	`(item: T, index: number) => ReactNode`	—
`rowKey`	`((item: T, index: number) => string \| number)`	—
`header`	`ReactNode`	—
`footer`	`ReactNode`	—
`bordered`	`boolean`	`true`
`split`	`boolean`	`true`
`hoverable`	`boolean`	`false`
`empty`	`ReactNode`	`No data`
`className`	`string`	—

* required · generated from packages/ui/src/data/List/List.tsx