Listing Card

Real estate · ListingCard, ResultsToolbar

Property listings from portals or your own stock: ListingCard (grid card or list row) and ResultsToolbar (count, selection, bulk actions, sort, view).

ListingCard: listing ({id, title, price (null = on request), rent, currency, pricePerSqm, area, rooms, place, image, photos, source, seller ("private" | "agent"), sellerLabel, phone, isNew, age, status, wished}), layout ("card" | "row"), selected + onSelect, onWish, statusOptions + onStatus (StatusSelect), onOpen.
ResultsToolbar: title, total, meta, selected, onSelectAll(all), bulkActions ({label, icon, variant, busy, busyLabel, onClick}; shown while something is selected), sortOptions + sort + onSort, views ("grid" | "list" | "map") + view + onView.

Area in m², money and counts follow setLocale.

PreviewCode

1 selected128 found · updated 06:00

Sort

GridListMap

New14

€649,000€7,726 / m²

Bright 3-room flat with balcony near Isebek canal

84 m²3 roomsEppendorf, Hamburg

ImmoScoutPrivate seller2 h

€1,190,000€10,625 / m²

Loft in HafenCity with water view

112 m²2.5 roomsHafenCity, Hamburg

KleinanzeigenAgent1 d

€1,480 / month

2-room flat, renovated old building

58 m²2 roomsAltona, Hamburg

ImmoweltAgent3 d

Props

ListingCard

Prop	Type	Notes
`listing`	`Listing`	Required
`layout?`	`"card" \| "row"`
`selected?`	`boolean`
`onSelect?`	`(l: Listing) => void`
`onWish?`	`(l: Listing) => void`
`statusOptions?`	`StatusSelectProps["options"]`
`onStatus?`	`(l: Listing, status: string) => void`
`onOpen?`	`(l: Listing) => void`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

ResultsToolbar

Prop	Type	Notes
`title?`	`string`
`total`	`number`	Required
`meta?`	`string`
`selected?`	`number`
`onSelectAll?`	`(all: boolean) => void`
`bulkActions?`	`{ label: string; icon?: IconName; variant?: ButtonProps["variant"]; busy?: boolean; busyLabel?: string; onClick?: () => void; }[]`
`sortOptions?`	`{ value: string; label: string }[]`
`sort?`	`string`
`onSort?`	`(v: string) => void`
`views?`	`("grid" \| "list" \| "map")[]`
`view?`	`string`
`onView?`	`(v: string) => void`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.